Accessibility
Accessibility
Accessibility aims to highlight content issues that fail to ensure content is readable by people with disabilities, for example the visually impaired.
This policy category is broken down into 21 policies.
- Check Form Label Usage
- Check Legends Have Text
- Check For Formatting Tags
- Check For Nested Tables
- Check Language
- Check Ambiguous Link Text
- Check Image Buttons Have Alt
- Areas Require Alt Attributes
- Check Document Heading Structure
- Check Iframes Have Titles
- Check For Refresh Meta Element
- Check For Embed Tags
- Check Inputs Have Names
- Check Non Descriptive Link Text
- Check Tables Have Headings
- Check For Character Set
- Check For Document Heading
- Images Require Alt Attributes
- Check Valid Language Code
- Check Non Empty Titles
- Check For Empty Alt Attributes
Check Form Label Usage
Checks that all HTML form input elements have a corresponding label. HTML form input elements are associated to a form label using the 'id' attribute on an input element and a 'for' attribute of a corresponding label. Form input elements that do not contain an id attribute or have no corresponding label will generate a policy exception.
The example below provides an example of what would be expected to prevent this policy generating an exception.
<label for="text_input">Text Input Label</label>
<input type="text" name="name_entry_box" id="text_input"/>
a name="policy_2"/a>
Check Legends Have Text<
Checks all Field set legend elements are not be blank. Fieldset elements should contain child legend elements within a HTML document, these elements should not be empty, otherwise a policy exception is generated.
The example below provides more information on what will generate this policy exception.
<fieldset><legend/></fieldset>
Check For Formatting Tags
Checks for the use for HTML formatting elements, formatting
should be contained within cascading style sheets, CSS. The full
list of formatting elements that are checked for are listed below,
if any of these elements are found within the HTML document a
policy exception is generated.
<b>
<i>
<u>
<tt>
<big>
<strike>
<s>
<em>
<small>
<strong>
<sub>
<sup>
<ins>
<del>
Check For Nested Tables
Checks if the HTML document contains nested table elements, tables are considered nested if a table element has any ancestor element that is another table element. A policy exception is generated if nested tables exist.
A policy exception would be generated given the following sample HTML.
<table>
<tr>
<td>Some table data, not a nested table</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Some table data in a nested table</td>
</tr>
</table>
</td>
</tr>
</table>
Check Language
Checks that the HTML document contains the expected language value in a head meta element. The expected language will be provided by the customer, there is not one globally expected language. It is becoming more common that global websites provide content in different languages for different audiences.
The following example shows what would be expected to resolve this type of policy exception being generated, given the expected language is 'en'.
<head>
<title>sample html title</title>
<meta name="language" content="en"/>
</head>
Check Ambiguous Link Text
Checks for instances of the same link text that is used to point to different resource locations. If we have the same link text twice on the HTML page, for example 'marketing' and both links would take the user to a different location, a policy exception will be generated.
The following example HTML shows what would cause this type of exception to be generated.
<a href="marketing.html">marketing</a>
<a href="accounts.html">accounts</a>
<!--ambiguous link text-->
<a href="sub_marketing_section.html">marketing</a>
Check Image Buttons Have Alt
Checks that all input button elements contain an 'alt' attribute. Image buttons are input elements that have an attribute 'type' containing the value 'image'. These elements must have an 'alt' attribute that is not empty, otherwise a policy exception is generated.
The following input element would generate an exception due to missing 'alt' text.
<input type="image" name="submit image button without ALT" src="image.jpg"/>
Areas Require Alt Attributes
Checks that all area elements have an alternative text value. Area elements that do not have an 'alt' attribute will generate a policy exception. 'Alt' text is used to provide further information on the area element, particularly with regards to screen readers.
Below is an example of HTML that would generate this policy exception.
<map name="shapemap">
<area shape="rect" coords="0,0,82,126" href="rectangle.html" /><!-- no alt text -->
<area shape="circle" coords="124,58,8" href="circle.html" alt="Venus" />
</map>
Check Document Heading Structure
Checks the document contains a valid heading structure, from header 1 through to header 6. Not every element is required, however the heading structure should be consistent and not jump from header 4 to a header 2 element, a header 4 should be followed by a header 5.
The HTML sample below would generate a policy exception due to poor heading structure.
<div>
<h2>An H2 heading</h2>
<div>Some content based on the H2 heading</div>
<h1>An H1 heading</h1>
<div>Some content based on the H1 heading</div>
</div>
Check Iframes Have Titles
Checks that all iframe elements contain a title attribute, otherwise a policy exception is generated.
The following example of an iframe would generate a policy exception due to the missing title attribute.
<iframe src ="some_html.html" width="100%" height="300">
<p>Inner iframe detail</p>
</iframe>
Check For Refresh Meta Element
Checks if the document contains the refresh instruction in a meta element. If this instruction is present it would rerfresh the HTML content after a specified time. Although this may be suitable for dynamic content, it can become confusing to a user with visible disablities if the screen continues to refresh.
The following HTML code will generate a policy exception.
<head>
.....
<meta http-equiv="refresh" content="2; url=http://www.redirect_to_example.com/">
</head>
Check For Embed Tags
Checks if any embed tags are used in the document. Embed elements are not a part of the HTML 4 or xHTML 1 specifications, which is why they should be avoided, if any embed elements are found a policy exception will be created.
<embed src="sample.wav" />
Check Inputs Have Names
Checks that all input field elements contain the name attribute, used to provide more information about the input element. When an input element is found that does not make use of the name attribute a policy exception is created.
The following input element would generate a policy exception, due to the missing name attribute.
<input type="text" size="30"/>
Check Non Descriptive Link Text
Checks for non descriptive link text used within the document. Non descriptive link text would be such that they do not define the target location, link text should aim to provide information on where the user is going to be directed to on a click.
Non descriptive link text is commonly used on most websites, the following would generate an exception.
<!-- non descriptive link text -->
<a href="target_a.html">Read More...</a>
<a href="target_b.html">More Information...</a>
<a href="target_c.html">Click Here ...</a>
Check Tables Have Headings
Checks that all table elements contain table heading(th) elements. For each table found a policy exception will be created if no table headings are used in the table element.
The following table would be acceptable as it contains the table headings required to satisfy this policy check.
<table>
<tr>
<th>Table Heading</th>
</tr>
<tr>
<td>Some table data</d>
</tr>
</table>
Check For Character Set
Checks that the HTML document contains the expected character set value in a head meta element. The expected character set will be defined by the customer, one character set will not be applicable for all HTML documents.
The following is an example of what would be required to ensure an exception is not generated by this policy.
<head>
....
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
Check For Document Heading
Checks the document contains a header 1 element, otherwise a policy exception is generated. H1 elements provide a natural heading to the document and can assist screen readers in stating the purpose of the document. The H1 element should be the top header element on the document.
Images Require Alt Attributes
Checks that all images have an alternative text attribute. Images without an alternative text attribute will generate a policy exception. 'Alt' text is used to provide further information on the image element, particularly with regards to screen readers.
The following image would be deemed invalid and would generate a policy exception.
<img src="invalid_missing_alt.gif" width="20px"/>
Check Valid Language Code
Checks that the HTML document contains a language code that exists in the ISO 639-1 list of valid codes. If the customer uses a language code that is not specified in the ISO 639-1 list of codes this policy should not be used as it will generate a policy exception when no match is found. This policy is not applicable if the customer uses a language code other than those specified in the ISO 639-1 standard.
There are 136 two-letter codes registered. The registered codes cover the world's major languages, the full list can be found at http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
Check Non Empty Titles
Checks if the document contains an empty or missing title element. When no title value is found for the document a policy exception is generated.
A policy exception would be generated based on the following HTML sample.
<head>
<title />
....
</head>
Check For Empty Alt Attributes
Checks for empty alternative text attributes of image or area elements. This policy checks for empty attributes, while other similar policies check for the existence of the attribute, regardless of its contents. Alt' text is used to provide further information on the element, particularly with regards to screen readers. This policy can be configured to exclude specific URLs or elements that may have a specific attribute that excludes them from the rule.
The following would generate a policy exception due to the empty alt attribute of the img element.
<img src="invalid_empty_alt.gif" alt=""/>