bbc-a11y 0.1.2 → 0.2.0

data/standards/08_title_attribute.feature

@@ -1,71 +0,0 @@
-Feature: Correctly use `title` attributes
-
-  `title` attributes **must not** be used for critical information and **must not** repeat content that is already visible and associated with the same control or content.
-
-  Rationale
-  =========
-
-  `title` attributes are inaccessible to keyboard users without additional Assistive Technology. They are dependent on user settings in Screen Readers and similar Assistive Technology.
-
-  Additionally they suffer from discoverability problems: pointing device users are required to hover over page elements and pause before the title tooltip displays, usually with no indication that there is additional content to be displayed.
-
-  Repeating content in visible text and `title` attributes can lead to content clutter and repeated phrases.
-
-  Key recommendations are:
-
-  - Do not use the `title` attribute unless on a form input as title text is not well supported on links on mobile 
-  - Do not use `title` attributes and explicit labels together on form fields
-
-  Techniques
-  ==========
-
-  Pass:
-
-      <label for="name">Name</label>
-      <input type="text" id="name" name="name" />
-      <label for="email">Email</label>
-
-      <input type="text" id="email" name="email" />
-
-      <button type="button"><img src="/path/to/image/close.png" alt="Close" /></button>
-
-  Fail:
-
-      <input type="text" name="name" title="Name" />
-      <input type="text" name="email" title="Email" />
-
-      <label for="name">Name</label>
-      <input type="text" id="name" name="name" title="Name" />
-
-      <button type="button" title="Close"></button>
-
-      <a href="/news" title="News">News</a>
-
-  Tests
-  =====
-
-  | Procedure | Expected Result | Type | 
-  | --------- | --------------- | ---- |
-  | Search source for all uses of the `title` attribute | Ensure no instances contain content that would be required by all users or content that is repeated in associated content | Manual |
-  | Search source for all uses of the `title` attribute | Ensure no instances contain content that is repeated within the element | Automated |
-  | Search source for all '<label>' elements and their associated form fields | Ensure that the associated form field does not have a title attribute | Automated |
-
-  --
-
-  Notes
-  =====
-
-  The first test is non-automatable, and may well have to be removed as it is too ambiguous.
-
-  Scenario: Check the elements with title attributes
-
-    Examples of failure:
-
-        <label for="name">Name</label>
-        <input type="text" id="name" name="name" title="Name" />
-
-        <a href="/news" title="News">News</a>
-
-    When I visit the page
-    Then there must be no elements with a title attribute whose content is repeated within the element
-    And any form fields with associated labels do not have a title attribute

data/standards/09_tabindex.feature

@@ -1,51 +0,0 @@
-Feature: Correctly use `tabindex` attributes
-
-  Positive `tabindex` attribute values **must not** be used to create a logical tab order.
-
-  `tabindex` values of `0` **must not** be used on elements that are not focusable by default.
-
-  Rationale
-  =========
-
-  Typical BBC pages are made up of several shared components (Global navigation, page content, share tools, 
-  location service widgets, etc.) so no one piece of code has complete awareness of the content of the page 
-  or when the content updates. Positive `tabindex` values results in unpredictable tab order that do not occur 
-  if the natural order of content is relied upon.
-
-  Using `tabindex="0"` on an element adds it to the document tab order, however it does not change the element 
-  type to allow it to be discovered by navigating by link or form element, nor does it bind click and key press 
-  handlers to the element. There are no circumstances in which it is not better to use a natively focusable 
-  control such as a `<a>` or `<button>`.
-
-  Techniques
-  ==========
-
-  Pass:
-
-    <a href="/news">News</a>
-
-    <button type="submit">Search</button>
-
-    <div tabindex="-1"></div>
-
-  Fail:
-
-    <a href="/news" tabindex="1">
-    
-    <button type="submit" tabindex="2">Search</button>
-
-    <div tabindex="3"></div>
-
-    <div tabindex="0"></div>
-
-
-  Scenario: Check all tabindex values
-    When I visit the page
-    Then there should be no elements with a tabindex attribte of 1 or greater
-    And there should be no elements with a tabindex attribute of 0 except for:
-      | a        |
-      | button   |
-      | input    |
-      | select   |
-      | textarea |
-

data/standards/10_form_labels.feature

@@ -1,88 +0,0 @@
-Feature: Correctly use form labels
-
-  Form fields that allow input (`select`, and `textarea` elements, and all 
-  `input` element types other than image, submit, reset, button, or hidden) 
-  **must** have an associated label, either in the form of a `<label>` element 
-  or, for simple forms when no visible label is required, a `title` attribute.
-  
-  Rationale
-  ---------
-  
-  Form labels are important for all users in order to understand what the form 
-  field is however they are essential for speech output users who cannot easily 
-  infer what the form element is by looking at the surrounding content.
-  
-  While there are WAI-ARIA attributes that allow for labelling of forms it is 
-  not supported in all versions of assistive technologies that BBC users could 
-  reasonably expect to be able to use.
-  
-  Techniques
-  ----------
-  
-  Pass:
-  
-  ```
-  <label for="search">Search the BBC</label>
-  <input type="text" id="search" name="q" />
-  
-  <label for="search">
-    Search the BBC
-    <input type="text" name="q" />
-  </label>
-  
-  <input type="text" name="q" title="Search the BBC" />
-  ```
-  
-  Fail:
-  
-  ```
-  <input type="text" name="name" title="Name" />
-  <input type="text" name="email" title="Email" />
-  
-  <input type="text" name="q" value="Search the BBC" />
-  
-  <input type="text" name="q" aria-label="Search the BBC" />
-  
-  <input type="text" name="q" placeholder="Search the BBC" />
-  ```
-  
-  Tests
-  -----
-..
-  | Procedure | Expected Result | Type | 
-  | --------- | --------------- | ---- |
-  | Use WAVE Toolbar (or similar) to identify accessibility errors errors | There must be no 'ERROR: Form label missing' or 'ARIA label or description' messages | Tool |
-  | Check every `select`, and `textarea` elements, and all `input` element types other than image, submit, reset, button, or hidden | Every element must have either an associated `<label>` or a title attribute | Manual / Automated |
-..
-  Notes
-  -----
-..
-  Hopefully the second test can be automated. Associated labels are those that 
-  wrap the element (`<label>Foo <input type="text" /></label>`) and those that 
-  have a `for` attribute value that matches the `id` attribute of a field element 
-  (`<label for="foo">Bar</label><input type="text" id="foo" />`). In the second 
-  case the `<label>` can wrap the form element, but does not have to.
-
-  Scenario: Validate use of labels
-    When I visit the page
-    Then the following form elements must have a title attribute or associated label tag:
-      | select                     |
-      | textarea                   |
-      | input[type=checkbox]       |
-      | input[type=color]          |
-      | input[type=date]           |
-      | input[type=datetime]       |
-      | input[type=datetime-local] |
-      | input[type=email]          |
-      | input[type=file]           |
-      | input[type=month]          |
-      | input[type=number]         |
-      | input[type=password]       |
-      | input[type=radio]          |
-      | input[type=range]          |
-      | input[type=search]         |
-      | input[type=tel]            |
-      | input[type=text]           |
-      | input[type=time]           |
-      | input[type=url]            |
-      | input[type=week]           |

data/standards/11_visible-on-focus.md

@@ -1,58 +0,0 @@
-# Visually hidden elements must be made visible on focus
-
-Hidden elements in tab order **must** be made visible on focus.
-
-## Rationale
-
-While it sometimes beneficial to provide content to screen reader users only, not all keyboard users also use a screen reader. Having hidden content in tab order, such as `<a>` or `<button>` elements, that remain hidden when focussed causes confusion for keyboard users that do not also use a screen reader.
-
-It is recommened to use a clipping technique instead of negative positioning because of problems this can cause in iOS7 Safari, but either approach is accessible.
-
-## Techniques
-
-Pass:
-
-	<style>
-	.hidden {
-	    position: absolute; /* clip only relevant on absolutely positioned elements */
-	    overflow: hidden;
-	    height: 1px;
-	    width: 1px;
-	    clip: rect(1px 1px 1px 1px); /* For IE6, IE7 */
-	    clip: rect(1px, 1px, 1px, 1px);
-	}
-
-
-	.hidden:focus {
-	    height: auto;
-	    width: auto;
-	    clip: auto;
-	}
-	</style>
-
-	<a href="http://www.bbc.co.uk/" class="hidden">BBC</a>
-
-Fail:
-
-	<style>
-	.hidden {
-		position: absolute;
-		top: -999em;
-	}
-	</style>
-
-	<div class="hidden">
-		<a href="http://www.bbc.co.uk/">BBC</a>
-	</div>
-
-## Tests
-
-| Procedure | Expected Result | Type | 
-| --------- | --------------- | ---- |
-| Tab through all elements in the document. Depending on browser / operating system you may need to activate tabbing through all controls (see [Enabling keyboard navigation in Mac OS X Web browsers](http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/) for OSX) | All elements in tab order must be visible when they receive focus | Manual |
-
---
-
-## Notes
-
-Matt: I don't see how this can be automated, but it would be great if I was wrong.

data/standards/13_colour-contrast.md

@@ -1,27 +0,0 @@
-# All content must meet minimum contrast standard
-
-All colour combinations **must** pass the WCAG 2.0 AA-compliant colour contrast check in accordance with the [Snook colour contrast checker](http://snook.ca/technical/colour_contrast/colour.html).
-
-This is a ratio of 4.5:1 for text 18pt or less in size, and 3:1 for text larger than 18pt or text that is bold and larger than 14pt.
-
-Where it cannot be adapted, stylised text used in pre-existing broadcast logos and branding is exempt from this requirement.
-
-## Rationale
-
-If there is sufficient contrast between foreground and background colours, particularly between text and its background but also applicable to the keys of graphs and similar, then users with moderately low vision or with colour deficiencies that affect contrast to a minor degree are more likely to be able to access BBC content without requiring additional assistive technologies.
-
-## Techniques
-
-n/a
-
-## Tests
-
-| Procedure | Expected Result | Type | 
-| --------- | --------------- | ---- |
-| Test every foreground and background colour combination against the [Snook colour contrast checker](http://snook.ca/technical/colour_contrast/colour.html) | Every combination must pass against the WCAG 2.0 AA standard | Manual / Tool |
-
---
-
-## Notes
-
-This (and every other test that requires checking a large number of elements and their properties) would be best run as part of the 'full' test set, and have a 'quick' test set for any standards that are quick to test.

data/standards/14_colour-meaning.md

@@ -1,19 +0,0 @@
-# Information must not be conveyed by colour alone
-
-Information conveyed with colour **must** also be identifiable from context or markup.
-
-## Rationale
-
-Users who are blind, have low vision, or have colour blindness may not be able to differentiate content (lines on a chart) or states (selected tabs) if colour alone is used.
-
-Alternatives must be provided for both sighted and non-sighted users, for example a table equivalent of a chart and lines differentiable with different styles (dashed, dotted, etc.).
-
-## Techniques
-
-n/a
-
-## Tests
-
-| Procedure | Expected Result | Type | 
-| --------- | --------------- | ---- |
-| Locate every image or element that uses colour to convey meaning. Check visually and with a screen reader | For each use of colour to convey meaning there must be alternative visual and non-visual means of accessinging the same information | Manual / Tool |

data/standards/15_focusable-controls.md

@@ -1,45 +0,0 @@
-# Correctly use links and buttons
-
-Controls for JavaScript enhanced interactions **must** be `<a>`, `<button>`, or `<input>[type=checkbox,color,date,datetime,datetime-local,email,file,month,number,password,radio,range,search,tel,text,time,url,week]` elements if that is the only mechanism for controlling them.
-
-`<a>` elements used for controls **must** have an `href` attribute.
-
-Controls that have no purpose without JavaScript **must not** be added to the page before the associated code is available capable of running.
-
-## Rationale
-
-When creating controls for user interaction with JavaScript enhanced features, for example a carousel with previous and next controls, the controls must be implemented with elements that provide natively focusable elements with click, keydown, and focus events so they are accessible to keyboard as well as pointing device users. If there is an alternative method of controlling the feature, for example a carousel that automatically displays new content when it receives content then controls that are only available to pointing device users can be used.
-
-In general, use `<a>` elements when there is a URL associated with the interaction when JavaScript is not enabled, and `<button>` elements for interactions that don't have an associated URL.
-
-`<a>` elements without a `href` attribute are not keyboard accessible, and therefore must not be used for controls.
-
-When there is no core (non-JavaScript) interaction then the control must not be added to the document before the associated JavaScript is capable of running as this would lead to controls that apparently do nothing, potentially causing confusion to users.
-
-## Techniques
-
-Pass:
-
-    <button type="button">Open panel</button>
-
-    <ul>
-        <li><a href="#newstab">News</a></li>
-        <li><a href="#sporttab">Sport</a></li>
-        <li><a href="#entertainmenttab">Entertainment</a></li>
-    </ul>
-
-Fail:
-
-    <a href="#">Open panel</a>
-
-    <ul>
-        <li><a>News</a></li>
-        <li><a>Sport</a></li>
-        <li><a>Entertainment</a></li>
-    </ul>
-
-## Tests
-
-| Procedure | Expected Result | Type | 
-| --------- | --------------- | ---- |
-| Identify each control on the page | Navigate the page with a keyboard and ensure that each control is accessible | Manual |

data/standards/16_table.md

@@ -1,109 +0,0 @@
-# Correctly markup data tables
-
-Data tables **must** be marked up in a way that enable browsers and assistive technologies to identify them as such.
-
-## Rationale
-
-Assistive technologies such as screen readers identify HTML tables as being either for data or for layout based on the markup used.
-
-If a `<table>` is identified as a layout table then potentially useful structures may be ignored.
-
-## Definitions
-
-### Algorithm
-
-The following algorithm is used to determine if a `<table>` has been  marked up in a way that allows browsers and assistive technologies to identify it as a data table:
-
-1. Table inside editable area is data table always since the table structure is crucial for table editing
-2. Table having ARIA table related `role` is data table (like ARIA `grid` or `treegrid`)
-3. Table having ARIA landmark `role` is data table
-4. Table having `datatable="0"` attribute is layout table
-5. Table created by CSS `display` style is layout table
-6. Table having summary attribute or legitimate data table structures is data table; these structures are:
-	- `<caption>` element
-	- `<col>` or `<colgroup>` elements
-	- `<tfoot>` or `<thead>` elements
-	- `<th>` elements 
-	- `header`, `scrope` or `abbr` attributes on table cell
-	- `abbr` element as a single child element of table cell
-7. Table having nested table is layout table
-8. Table having only one row or column is layout table
-9. Table having many columns (>= 5) is data table
-10. Table having borders around cells is data table
-11. Table having differently colored rows is data table
-12. Table having many rows (>= 20) is data table
-13. Wide table (more than 95% of the document width) is layout table
-14. Table having small amount of cells (<= 10) is layout table
-15. Table containing `<embed>`, `<object>`, `<applet>` of iframe elements (typical advertisements elements) is layout table
-16. Otherwise it's data table
-
-Go through each check in turn, stopping when you reach a data table or layout table result.
-
-## Techniques
-
-Pass:
-
-	<table>
-		<caption>Champions League Group C summary table</caption>
-		<thead>
-			<tr>
-				<th scope="col">Team</th>
-				<th scope="col">Score</th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr>
-				<td>Malaga</td>
-				<td>12</td>
-			</tr>
-			<tr>
-				<td>AC Milan</td>
-				<td>8</td>
-			</tr>
-			<tr>
-				<td>Zenit Saint Petersburg</td>
-				<td>7</td>
-			</tr>
-			<tr>
-				<td>Anderlecht</td>
-				<td>5</td>
-			</tr>
-		</tbody>
-	</table>
-		
-Fail:
-
-	<table>
-		<tr>
-			<td>Team</td>
-			<td>Score</td>
-		</tr>
-		<tr>
-			<td>Malaga</td>
-			<td>12</td>
-		</tr>
-		<tr>
-			<td>AC Milan</td>
-			<td>8</td>
-		</tr>
-		<tr>
-			<td>Zenit Saint Petersburg</td>
-			<td>7</td>
-		</tr>
-		<tr>
-			<td>Anderlecht</td>
-			<td>5</td>
-		</tr>
-	</table>
-
-## Test
-
-| Procedure | Expected Result | Type | 
-| --------- | --------------- | ---- |
-| For each `<table>` element in the markup follow the defined algorithm | All data tables must be identifiable as a data table | Manual |
-
---
-
-## Notes
-
-Hopefully this is clear enough.