QUAIL: Accessibility Information Library¶
QUAIL is a jQuery and Sizzle-comptable library for checking content against accessibility guidelines. It provides a flexible way to test for certain problems (say, images missing an alt text) and a collection of over 250 tests to get you started.
Tests¶
At the core of QUAIL are tests. Tests search for a single type of accessibility problem, and they are all defined in the file src/resources/tests.yaml (a JSON version is available in dist/tests.json - read more about building these files). For example, one of the most common accessibility problems out there is an image missing an alt attribute (which allows users with screen readers to hear a description of the image). The test definition in the tests.yaml file looks like this:
imgHasAlt:
selector: "img:not(img[alt])"
tags:
- "image"
- "content"
testability: 1
type: "selector"
guidelines:
508:
- "a"
wcag:
1.1.1:
techniques:
- "F65"
- "H37"
title:
en: "Image elements must have an \"alt\" attribute"
description:
en: "All <code>img</code> elements must have an alt attribute"
....
- The test name in this example is “imgHasAlt,” which is the unique label for the test. These are used in creating guidelines. There are at least two definitions for each test:
- type - QUAIL has some default test types to simplify the process of writing test definitions. The simplest is a selector, which just takes a jQuery/Sizzle-compatable selector and finds all items that match that selector. For selector tests, we also must define the selector to use (in this case, img:not(img[alt])).
- severity - The default severity level. Severity is a measure of how certain we are a test will not create false positives: - severe - We are 100% certain that this test is always correct. If an image is missing its alt attribute, it’s missing its alt attribute. - moderate - We are mostly certain this test is correct. This is usually found for content-related tests, like testing to see if a block of text is written at or below a certain grade level. - suggestion - We cannot test for this, but can suggest things to manually review. For exmaple, we cannot test that content in a Flash object is accessible, but we can point out that a flash object is there and link to appropriate guidelines on making accessible flash.
- guidelines - A list of pre-defined guidelines (right now, either 508 or WCAG 2.0) including: - techinques - The WCAG techniques aligned with this test - configuration - Optional configuration options for this test only specific to this test.
- title - The human-readable title of the test, prefixed by language code.
- description - The human-readable description of the test, prefixed by language code.
Guidelines¶
Guidelines are simply a collection of tests. QUAIL comes with US Section 508 and WCAG guideline files in src/resources/guidelines. Every guideline is simply an array of test names, which means you can easily create your own guidelines. In the examples/php directory you can see a custom guideline being defined in a PHP script.
Usage¶
To use QUAIL, you will need to make a simple jQuery/Sizzle object (in this example, we are checking an element with the ID of content), then run the quail function against it:
$('#content').quail({ jsonPath : 'src/resources',
guideline : 'wcag2a',
accessibilityTests : accessibilityTests,
testFailed : function(event) { ... },
customTests : {
myCustomTest : {
type : 'custom',
callback : function(quail) {
quail.html.find('.error').each(function() {
quail.testFails('myCustomTest', $(this));
})
}
}
},
complete : function(event) { ... },
});
The quail function accepts a single object with the following items:
- jsonPath - Required - The path to the resources folder where QUAIL is located. Certain tests load additional strings like emoticons or filler words from JSON files to save space. If a test ends up needing to load additional resources, this will be required.
- guideline - Required - Either the name of a guideline file that can be found in the jsonPath directive, or an array of test names.
- accessibilityTests - Optional - If you wish to load your own custom test definitions, this will prevent QUAIL from using it’s own tests.json file to load the tests. This is also useful if you are loading tests.json through your own method and don’t want QUAIL to do it for you.
- testFailed - Optional - A callback that will be called everytime an item fails a test. This callback recieves an object with the following items:
- element - The native jQuery/Sizzle object that represents the DOM element.
- testName - The name of the test that failed
- severity - The severity of the test.
- options - Additional options as passed by the test definition.
- customTests - Optional - An object of tests that can be added to QUAIL on the fly. Tests should have a name, and either use some of the pre-defined callbacks in QUAIL (like “selector”), or a “custom” type, where you define a callback that accepts a QUAIL object.
- preFilter - Optional - A callback that can be used to pre-filter out failed items. If this callback returns false, then the item is skipped and not considered failed. This callback receives the following argumetns: - testName - The name of the test that failed - element - A full jQuery/Sizzle object of the element - options - Any additional options set by the test
- complete - Optional - Called when all the tests are completed. This is useful for reporting, as it gets a summary of all resutls. This callback gets a single object with the following items:
- totals - An object with the total number of severe, moderate, and suggestion tests which failed.
- results - An object with all the elements and tests that failed.
Available tests¶
Adjacent links that point to the same location should be merged¶
Severity code: Severe error
Because many users of screen-readers use links to navigate the page, providing two links right next to eachother that points to the same location can be confusing. Try combining the links.
Example¶
Wrong
You can also <a href="article.html">read more of</a> <a href="article.html">my great article</a>.
Right
You can also <a href="article.html">read more of my great article</a>.
Example¶
When an image is in a link, its “alt” attribute should not repeat other text in the link¶
Severity code: Severe error
Images within a link should not have an alt attribute that simply repeats the text found in the link. This will cause screen readers to simply repeat the text twice.
Example¶
Wrong
<a href="home.html"><img src="home.png" alt="Return home">Return home</a>
Right
<a href="home.html"><img src="home.png" alt="">Return home</a>
Link text should not begin with redundant text¶
Severity code: 0
Link text should not begin with redundant words or phrases like “link
Lists of links should be seperated by printable characters¶
Severity code: Severe error
If a list of links is provided within the same element, those links should be seperated by a non-linked, printable character. Structures like lists are not included in this.
Example¶
Wrong¶
<a href="a.html">Page A</a> <a href="b.html">Page B</a> <a href="c.html">Page C</a>
Right¶
<a href="a.html">Page A</a> | <a href="b.html">Page B</a> | <a href="c.html">Page C</a>
Links should not open a new window without warning¶
Severity code: Severe error
Links which open a new window using the “target” attribute should warn users.
Example¶
Wrong¶
<a href="page.html">View my page</a>
Right¶
<a href="page.html">View my page (opens new window)</a>
The text in links should make sense out of context¶
Severity code: 0
All links should make sense out of context. Many non-sighted users skip from link-to-link to navigate a page, and links which do not make sense on their own can make the page difficult to navigate.
Example¶
Wrong¶
To know more about me, visit my <a href="page.html">page</a>.
Right¶
To know more about me
Any links to a multimedia file should also include a link to a transcript¶
Severity code: Information only
Links to a multimedia file should be followed by a link to a transcript of the file.
Example¶
Wrong¶
<a href="interview.mov">Watch the interview</a>
Right¶
<a href="interview.mov">Watch the interview</a> <a href="transcript.html">(transcript)</a>
Any links to a sound file should also include a link to a transcript¶
Severity code: Information only
Links to a sound file should be followed by a link to a transcript of the file.
Example¶
Wrong¶
<a href="interview.mp3">Listen to the interview</a>
Right¶
<a href="interview.mp3">Listen to the interview</a> <a href="transcript.html">(transcript)</a>
Links should contain text¶
Severity code: Severe error
Because many users of screen-readers use links to navigate the page, providing links with no text (or with images that have empty “alt” attributes and no other readable text) hinders these users.
Example¶
Wrong
<a href="home.png"></a>
<a href="home.png"><img src="home.png" alt="">/</a>
Right
<a href="home.png">Return Home</a>
<a href="home.png"><img src="home.png" alt="Return Home">/</a>
All links must have a “title” attribute¶
Severity code: Severe error
Every link must have a “title” attribute.
Example¶
Wrong¶
<a href="home.html">Home</a>
Right¶
<a href="home.html" title="Return to home">Home</a>
Links should not use “javascript” in their location¶
Severity code: Severe error
Anchor (<code>a) elements may not use the “javascript” protocol in their “href” attributes.
Link text should be useful¶
Severity code: 0
Because many users of screen-readers use links to navigate the page, providing links with text that simply read “click here” gives no hint of the function of the link
The title attribute of all source a (anchor) elements describes the link destination.¶
Severity code: Information only
Every link must have a “title” attribute which describes the purpose or destination of the link.
Example¶
Wrong¶
<a href="home.html" title="A web page">Home</a>
Right¶
<a href="home.html" title="Return to home">Home</a>
The document should contain an address for the author¶
Severity code: Severe error
Documents should provide a valid email address within an <code>address element.
The document should contain a valid email address for the author¶
Severity code: Possible error
Documents should provide a valid email address within an <code>address element.
All applets should contain the same content within the body of the applet¶
Severity code: Severe error
Applets should contain their text equivalents or description within the <code>applet tag itself.
Example¶
Wrong¶
<applet archive="whyareyouusingapplet.jar"></applet>
Right¶
<applet archive="whyareyouusingapplet.jar">Why are you still using applets?</applet>
All applets should contain a text equivalent in the “alt” attribute¶
Severity code: Possible error
Applets should contain their text equivalents or description in an “alt” attribute.
Example¶
Wrong¶
<applet archive="whyareyouusingapplet.jar"></applet>
Right¶
<applet archive="whyareyouusingapplet.jar" alt="Why are you still using applets?"></applet>
All applets should provide a way for keyboard users to escape¶
Severity code: Information only
Ensure that a user who has only a keyboard as an input device can escape an <code>applet element. This requires manual confirmation.
Any user interface in an applet must be accessible¶
Severity code: Information only
Applet content should be assessed for accessibility.
<strong>Applets cannot be checked using automated tools, this should be reviewed manually.</strong>
All applets do not flicker¶
Severity code: Information only
Applets should not flicker.
<strong>Applets cannot be checked using automated tools, this should be reviewed manually.</strong>
Applets should not use color alone to communicate content¶
Severity code: Information only
Applets should contain content that makes sense without color and is accessible to users who are color blind.
<strong>Applets cannot be checked using automated tools, this should be reviewed manually.</strong>
All “area” elements must have an “alt” attribute which describes the link destination¶
Severity code: 0
All <code>area elements within a <code>map must have an “alt” attribute
Alt text for “area” elements should replicate the text found in the image¶
Severity code: Information only
If an image is being used as a map, and an <code>area encompasses text within the image, then the “alt” attribute of that <code>area element should be the same as the text found in the image.
No “area” elements should open a new window without warning¶
Severity code: 0
No <code>area elements should open a new window without warning.
Example¶
Wrong¶
<map name="worldmap"> <area shape="rect" coords="0
All “area” elements must have an “alt” attribute¶
Severity code: 0
All <code>area elements within a <code>map must have an “alt” attribute.
Example¶
Wrong¶
<map name="worldmap"> <area shape="rect" coords="0
All “area” elements which link to a sound file should also provide a link to a transcript¶
Severity code: 0
All <code>area elements which link to a sound file should have a text transcript
Example¶
Wrong¶
<map name="people"> <area shape="rect" coords="0
Pages using ARIA roles should not have orphaned content¶
Severity code: Severe error
If a page makes use of ARIA roles, then there should not be any content on the page which is not within an element that exposes a role, as it could cause that content to be rendreed inaccessible to users with screen readers.
Basefont” should not be used¶
Severity code: Severe error
The <code>basefont tag is deprecated and should not be used. Investigate using stylesheets instead.
The “blink” tag should not be used¶
Severity code: Severe error
The <code>blink tag should not be used. Ever.
Example¶
Wrong¶
<blink>Please read me!</blink>
Right¶
<strong>Please read me!</strong>
The “blockquote” tag should not be used just for indentation¶
Severity code: Possible error
Blockquote tags are for actual long passages of quoted material, not just for formatting. Instead of using blockquote to indent content, use style sheets.
Automated tests cannot tell if this is an actual quote or not, so the content of any <code>blockquote should be reviwed manually to see if it is an actual quote or not.
Example¶
Wrong¶
<blockquote>Something I just wanted indented.</blockquote>
Right¶
<p style="margin-left: 20px;">Something I just wanted indented.</p>
If long quotes are in the document, use the “blockquote” element to mark them¶
Severity code: Possible error
Blockquote tags are for actual long passages of quoted material, and should be used in these cases.
Automated tests cannot tell if text is an actual quote or not, so the content of any <code>blockquote should be reviwed manually.
Example¶
Wrong¶
<p>A long quote of several sentences. This should probably be placed in a blockquote, as it is too long to read in a single sentence, and the presence of a blockquote tag would help indicate it is actually an excerpt from somewhere else.</p>
Right¶
<p><blockquote>A long quote of several sentences. This should probably be placed in a blockquote, as it is too long to read in a single sentence, and the presence of a blockquote tag would help indicate it is actually an excerpt from somewhere else.</blockquote>
Contrast between active link text and background should be 5:1¶
Severity code:
The contrast ratio of active link text should be at lest 5:1 between the foreground text and the background. <a href=”http://www.w3.org/TR/WCAG20/#contrast-ratiodef“>Learn more about color contrast and how to measure it.</a>
Contrast between text and background should be 5:1¶
Severity code:
The contrast ratio of text should be at lest 5:1 between the foreground text and the background. <a href=”http://www.w3.org/TR/WCAG20/#contrast-ratiodef“>Learn more about color contrast and how to measure it.</a>
Contrast between link text and background should be 5:1¶
Severity code:
The contrast ratio of link text should be at lest 5:1 between the foreground text and the background. <a href=”http://www.w3.org/TR/WCAG20/#contrast-ratiodef“>Learn more about color contrast and how to measure it.</a>
Body elements do not use a background image¶
Severity code: Severe error
The <code>body element for the page may not have a “background” attribute.
Contrast between visited link text and background should be 5:1¶
Severity code:
The contrast ratio of visited link text should be at lest 5:1 between the foreground text and the background. <a href=”http://www.w3.org/TR/WCAG20/#contrast-ratiodef“>Learn more about color contrast and how to measure it.</a>
The “b” (bold) element is not used¶
Severity code: Severe error
The <code>b (bold) element provides no emphasis for non-sighted readers. Use the <code>strong tag instead.
Example¶
Wrong¶
<p>I think that you <b>should really read this</b>.</p>
Right¶
<p>I think that you <strong>should really read this</strong>.</p>
All checkboxes must have a corresponding label¶
Severity code: 0
All <code>input elements with a type of “checkbox” should have a corresponding <code>label element. Screen readers often enter a “form mode” where only label text is read aloud to the user
All “checkbox” input elements have a label that is close¶
Severity code: Possible error
All input elements of type “checkbox” must have a corresponding label that is close to the form element. Users of screen magnification or with reduced spatial skills are hampered in using a form element if the label for that element is located far away.
The document must be readable with styles turned off¶
Severity code: Information only
With all the styles for a page turned off, the content of the page should still make sense. Try to turn styles off in the browser and see if the page content is readable and clear.
All elements should have appropriate color contrast¶
Severity code: Severe error
For users who have color blindness, all text or other elements should have a color contrast of 5:1.
The document should contain a valid “doctype” declaration¶
Severity code: Severe error
Each document must contain a valid doctype declaration..
Example¶
Wrong¶
<html>
Right¶
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Abbreviations must be marked with an “abbr” element¶
Severity code: Possible error
Abbreviations should be marked with an <code>abbr element, at least once on the page for each abbreviation.
Example¶
Wrong¶
<p>I work for the CIA.</p>
Right¶
<p>I work for the <abbr title="Central Intelligence Agency">CIA</abbr>.</p>
Acronyms must be marked with an “acronym” element¶
Severity code: Possible error
Abbreviations should be marked with an <code>acronym element, at least once on the page for each abbreviation.
Example¶
Wrong¶
<p>I work for the CIA.</p>
Right¶
<p>I work for the <acronym title="Central Intelligence Agency">CIA</acronym>.</p>
All the document colors must be set¶
Severity code: Severe error
If any colors for text or the background are set in the <code>body element, then all colors must be set.
Auto-redirect with “meta” elements must not be used¶
Severity code: 0
Because different users have different speeds and abilities when it comes to parsing the content of a page, a “meta-refresh” method to redirect users can prevent users from fully understanding the document before being redirected. If a pure redirect is needed
Contrast between active link text and the background must be greater than the WAI ERT color algorithm threshold¶
Severity code:
The contrast between foreground active link text and the background must be more than the WAI ERT threshold. <a href=”http://www.w3.org/WAI/ER/IG/ert/#color-contrast“>Learn more about WAI ERT color contrast and how to measure it.</a>
Contrast between text and the background must be greater than the WAI ERT color algorithm threshold¶
Severity code:
The contrast between foreground text and the background must be more than the WAI ERT threshold. <a href=”http://www.w3.org/WAI/ER/IG/ert/#color-contrast“>Learn more about WAI ERT color contrast and how to measure it.</a>
Contrast between link text and the background must be greater than the WAI ERT color algorithm threshold¶
Severity code:
The contrast between foreground link text and the background must be more than the WAI ERT threshold. <a href=”http://www.w3.org/WAI/ER/IG/ert/#color-contrast“>Learn more about WAI ERT color contrast and how to measure it.</a>
Contrast between visited link text and the background must be greater than the WAI ERT color algorithm threshold¶
Severity code:
The contrast between foreground visited link text and the background must be more than the WAI ERT threshold. <a href=”http://www.w3.org/WAI/ER/IG/ert/#color-contrast“>Learn more about WAI ERT color contrast and how to measure it.</a>
Content should be readable without style sheets¶
Severity code: Information only
With all the styles for a page turned off, the content of the page should still make sense. Try to turn styles off in the browser and see if the page content is readable and clear.
The document should have a title element¶
Severity code: Severe error
The document should have a title element.
Example¶
Wrong¶
<html lang="en"><head></head><body>....
Right¶
<html lang="en"><head><title>My Great Web page</title></head><body>....
All element “id” attributes must be unique¶
Severity code: Severe error
Element “id” attributes must be unique.
Example¶
Wrong¶
<p id="paragraph">First Paragraph</p><p id="paragraph">Second Paragraph</p>
Right¶
<p id="paragraph-1">First Paragraph</p><p id="paragraph-2">Second Paragraph</p>
The document should be written to the target audience and read clearly¶
Severity code: Possible error
If a document is beyond a 10th grade level, then a summary or other guide should also be provided to guide the user through the content.
The document’s language attribute should be a standard code¶
Severity code: Severe error
The document should have a default langauge, and that language should use the valid 2 or 3 letter language code according to ISO specification 639.
Example¶
Wrong¶
<html lang="English">
Right¶
<html lang="en">
The document must have a “lang” attribute¶
Severity code: Severe error
The document should have a default langauge, by setting the “lang” attribute in the <code>html element.
Example¶
Wrong¶
<html>
Right¶
<html lang="en">
Meta” elements must not be used to refresh the content of a page¶
Severity code: Severe error
Because different users have different speeds and abilities when it comes to parsing the content of a page, a “meta-refresh” method to reload the content of the page can prevent users from having full access to the content. Try to use a “refresh this” link instead..
Example¶
Wrong¶
<head><meta http-equiv="refresh" content="60"></head>
Right¶
<head></head><body><a href="here.html">Refresh</a></body>
Reading direction of text is correctly marked¶
Severity code: Possible error
Where required, the reading direction of the document (for language that read in different directions), or portions of the text, must be declared.
The page uses a strict doctype¶
Severity code: Severe error
The doctype of the page or document should be either an HTML or XHTML strict doctype.
The title describes the document¶
Severity code: Information only
The document title should actually describe the page. Often, screen readers use the title to navigate from one window to another.
This test is a suggestion and should be reviewed manually.
Example¶
Wrong¶
<html lang="en"><head><title>Some page about something</title></head><body>....
Right¶
<html lang="en"><head><title>All about salamanders</title></head><body>....
The document title should not be placeholder text¶
Severity code: Severe error
The document title should not be wasted placeholder text which does not describe the page.
Example¶
Wrong¶
<html lang="en"><head><title>title</title></head><body>....
Right¶
<html lang="en"><head><title>All about salamanders</title></head><body>....
The document title should be short¶
Severity code: Possible error
The document title should be short and succinct. This test fails at 150 characters, but authors should consider this to be a suggestion.
Example¶
Wrong¶
<html lang="en"><head><title>A really long title about a page about salamanders that take a long time to read which offers little to the user and is a waste of time.</title></head><body>....
Right¶
<html lang="en"><head><title>All about salamanders</title></head><body>....
The document should not have an empty title¶
Severity code: Severe error
The document should have a title element that is not white space
Example¶
Wrong¶
<html lang="en"><head><title> </title></head><body>....
Right¶
<html lang="en"><head><title>My Great Web page</title></head><body>....
Document must validate to the doctype¶
Severity code: Severe error
The document must validate to the declared doctype.
Visual lists of items are marked using ordered or unordered lists¶
Severity code: Severe error
Use the ordered (<code>ol) or unordered (<code>ul) elements for lists of items, instead of just using new lines which start with numbers or characters to create a visual list.
Example¶
Wrong¶
1. Item One<br/>2. Item Two<br/>3.Item Three
Right¶
<ol><li>Item One</li><li>2. Item Two</li><li>3.Item Three</ol>
Any words or phrases which are not the document’s primary language should be marked¶
Severity code: Information only
If a document has words or phrases which are not in the document’s primary language, those words or phrases should be properly marked. This helps indicate which language or voice a screen-reader should use to read the text.
Example¶
Wrong¶
<p>This is a paragraph in english.</p><p>Esta frase es en espa&ntilde;ol.</p> (Spanish)</p>
Right¶
<p>This is a paragraph in english.</p><p lang="es">Esta frase es en espa&ntilde;ol.</p>
All “embed” elements have an associated “noembed” element¶
Severity code: Severe error
Because some users cannot use the <code>embed element, provide alternative content in a <code>noembed element.
Example¶
Wrong¶
<embed src="html.mov"/>
Right¶
<embed src="html.mov"/><noembed>A move with <a href="transcript.html">an available transcript</a>.</embed>
Embed” elements must have an “alt” attribute¶
Severity code: Severe error
All <code>embed elements must have an “alt” attribute.
Example¶
Wrong¶
<embed src="dog.mov"/>
Right¶
<embed src="dog.mov" alt="A movie featuring a dog dancing a ballet."/>
Embed” elements cannot have an empty “alt” attribute¶
Severity code: Severe error
All <code>embed elements must have an “alt” attribute that is not empty.
Example¶
Wrong¶
<embed src="dog.mov" alt=""/>
Right¶
<embed src="dog.mov" alt="A movie featuring a dog dancing a ballet."/>
All embed elements should provide a way for keyboard users to escape¶
Severity code: Information only
Ensure that a user who has only a keyboard as an input device can escape an <code>embed element. This requires manual confirmation.
Emoticons should not be used excessively¶
Severity code: Possible error
Emoticons should not be used excessively to communicate feelings or content. Try to rewrite the document to have more textual meaning, or wrapping the emoticons in an <code>abbr element as outlined below. Emoticons are not read by screen-readers, and are often used to communicate feelings or other things which are relevant to the content of the document.
Example¶
Wrong¶
Of course, I'll get on it right away ;)
Right¶
Of course, I'll get on it right away <abbr title="wink">;)</abbr>
All “file” input elements have a corresponding label¶
Severity code: 0
All <code>input elements of type “file” should have a corresponding <code>label element. Screen readers often enter a “form mode” where only label text is read aloud to the user
All “file” input elements have a label that is close¶
Severity code: Possible error
All input elements of type “file” must have a corresponding label that is close to the form element. Users of screen magnification or with reduced spatial skills are hampered in using a form element if the label for that element is located far away.
Font” elements should not be used¶
Severity code: Severe error
The <code>basefont tag is deprecated and should not be used. Investigate using stylesheets instead.
Deleting items using a form should be reversable¶
Severity code: Information only
Check that, if a form has the option to delete an item, that the user has a chance to either reverse the delete process, or is asked for confirmation before the item is deleted. This is not something that can be checked through automated testing and requires manual confirmation.
Forms offer the user a way to check the results of their form before performing an irrevokable action¶
Severity code: Information only
If the form allows users to perform some irrevokable action, like ordreing a product, ensure that users have the ability to review the contents of the form they submitted first. This is not something that can be checked through automated testing and requires manual confirmation.
Form error messages should assist in solving errors¶
Severity code: 0
If the form has some required fields or other ways in which the user can commit an error, check that the reply is accessible. Use the words “required” or “error” within the <code>label element of input items where the errors happened
Input items which are required are marked as so in the label element¶
Severity code: Information only
If a form element is required, it should marked as so. This should not be a mere red asterisk, but instead either a ‘required’ image with alt text of “required” or the actual text “required.” The indicator that an item is required should be included in the input element’s <code>label element.
<h4>Examples</h4>Wrong¶
<label for="first_name">First Name</label>*<input type="text" id="first_name" name="first_name"/>
<label for="first_name">First Name (required)</label> <input type="text" id="first_name" name="first_name"/>
Complex framesets should contain a “longdesc” attribute¶
Severity code: 50
If a <code>frameset contains three or more frames, use a “longdesc” attribute to help describe the purpose of the frames.
Example¶
Wrong¶
<frameset cols="25%
The source for each frame is accessible content.¶
Severity code: Information only
Each frame should contain accessible content, and contain content accessible to screen readers, like HTML as opposed to an image.
All “frame” elemetns should have a “title” attribute that describes the purpose of the frame¶
Severity code: Information only
Each <code>frame elements should have a “title” attribute which describes the purpose or function of the frame.
Example¶
Wrong¶
<frame src="navigation.html"></frame>
Right¶
<frame src="navigation.html" title="The site navigation"></frame>
Frames cannot have empty “title” attributes¶
Severity code: Severe error
All <code>frame elements must have a valid “title” attribute.
Frames cannot have “title” attributes that are just placeholder text¶
Severity code: 0
Frame “title” attributes should not be simple placeholder text like “frame
All “frame” elements should have a “title” attribute¶
Severity code: Severe error
Each <code>frame elements should have a “title” attribute.
Example¶
Wrong¶
<frame src="navigation.html"></frame>
Right¶
<frame src="navigation.html" title="The site navigation"></frame>
The “frameset” element should not be used¶
Severity code: Severe error
Frameset elements should not be used.
All framesets should contain a noframes section¶
Severity code: 50
If a <code>frameset contains three or more frames, use a “longdesc” attribute to help describe the purpose of the frames.
Example¶
Wrong¶
<frameset cols="25%
The header following an h1 is h1 or h2¶
Severity code: Information only
The header following an <code>h1 element should either be an <code>h2 or another <code>h1.
Users of screen readers often use headers to make sense of the structure of the document, and having headers in the right order can be very helpful. It also helps the document itself to be consistently structured.
All h1 elements are not used for formatting¶
Severity code: Information only
An <code>h1 element may not be used purely for formatting.
Users of screen readers often use headers to discover the structure of the document, and using headers for formatting can cause this method of navigating the document to be confusing. Try using CSS styles to apply formatting to the item instead.
Example¶
Wrong¶
<h1>I wanted a line to be bold and large but this is just a regular paragraph.</h1>
Right¶
<p class="large-item"><strong>I wanted a line to be bold and large but this is just a regular paragraph.</strong></p>
The header following an h2 is h1, h2 or h3¶
Severity code: Information only
The header following an <code>h2 element should either be an <code>h3, <code>h1 or another <code>h2.
Users of screen readers often use headers to make sense of the structure of the document, and having headers in the right order can be very helpful. It also helps the document itself to be consistently structured.
All h2 elements are not used for formatting¶
Severity code: Information only
An <code>h2 element may not be used purely for formatting.
Users of screen readers often use headers to discover the structure of the document, and using headers for formatting can cause this method of navigating the document to be confusing. Try using CSS styles to apply formatting to the item instead.
Example¶
Wrong¶
<h2>I wanted a line to be bold and large but this is just a regular paragraph.</h2>
Right¶
<p class="large-item"><strong>I wanted a line to be bold and large but this is just a regular paragraph.</strong></p>
The header following an h3 is h1, h2, h3 or h4¶
Severity code: Information only
The header following an <code>h3 element should either be an <code>h4, <code>h2, <code>h1 or another <code>h3.
Users of screen readers often use headers to make sense of the structure of the document, and having headers in the right order can be very helpful. It also helps the document itself to be consistently structured.
All h3 elements are not used for formatting¶
Severity code: Information only
An <code>h3 element may not be used purely for formatting.
Users of screen readers often use headers to discover the structure of the document, and using headers for formatting can cause this method of navigating the document to be confusing. Try using CSS styles to apply formatting to the item instead.
Example¶
Wrong¶
<h3>I wanted a line to be bold and large but this is just a regular paragraph.</h3>
Right¶
<p class="large-item"><strong>I wanted a line to be bold and large but this is just a regular paragraph.</strong></p>
The header following an h4 is h1, h2, h3, h4 or h5¶
Severity code: Information only
The header following an <code>h4 element should either be an <code>h5, <code>h3, <code>h2, <code>h1, or another <code>h4.
Users of screen readers often use headers to make sense of the structure of the document, and having headers in the right order can be very helpful. It also helps the document itself to be consistently structured.
All h4 elements are not used for formatting¶
Severity code: Information only
An <code>h4 element may not be used purely for formatting.
Users of screen readers often use headers to discover the structure of the document, and using headers for formatting can cause this method of navigating the document to be confusing. Try using CSS styles to apply formatting to the item instead.
Example¶
Wrong¶
<h4>I wanted a line to be bold and large but this is just a regular paragraph.</h4>
Right¶
<p class="large-item"><strong>I wanted a line to be bold and large but this is just a regular paragraph.</strong></p>
The header following an h5 is h6 or any header less than h6¶
Severity code: Information only
The header following an <code>h5 element should either be an <code>h6, <code>h3, <code>h2, <code>h1, or another <code>h5.
Users of screen readers often use headers to make sense of the structure of the document, and having headers in the right order can be very helpful. It also helps the document itself to be consistently structured.
All h5 elements are not used for formatting¶
Severity code: Information only
An <code>h5 element may not be used purely for formatting.
Users of screen readers often use headers to discover the structure of the document, and using headers for formatting can cause this method of navigating the document to be confusing. Try using CSS styles to apply formatting to the item instead.
Example¶
Wrong¶
<h5>I wanted a line to be bold and large but this is just a regular paragraph.</h5>
Right¶
<p class="large-item"><strong>I wanted a line to be bold and large but this is just a regular paragraph.</strong></p>
All h6 elements are not used for formatting¶
Severity code: Information only
An <code>h6 element may not be used purely for formatting.
Users of screen readers often use headers to discover the structure of the document, and using headers for formatting can cause this method of navigating the document to be confusing. Try using CSS styles to apply formatting to the item instead.
Example¶
Wrong¶
<h6>I wanted a line to be bold and large but this is just a regular paragraph.</h6>
Right¶
<p class="large-item"><strong>I wanted a line to be bold and large but this is just a regular paragraph.</strong></p>
All headers should contain readable text¶
Severity code: Severe error
Users with screen readers use headings like the tabs <em>h1</em> to navigate the structure of a page. All headings should contain either text, or images with appropriate <em>alt</em> attributes.
Use headers to mark the beginning of each section¶
Severity code: Possible error
Check that each logical section of the page is broken or introduced with a header (<code><h1-h6>) element.
The “i” (italic) element is not used¶
Severity code: Severe error
The <code>i (italic) element provides no emphasis for non-sighted readers. Use the <code>em tag instead.
Example¶
Wrong¶
<p>I think that you <i>should really read this</i>.</p>
Right¶
<p>I think that you <em>should really read this</em>.</p>
Inline frames (“iframes”) should not have a “longdesc” attribute¶
Severity code: Severe error
Iframe elements should not have a "longdesc" attribute.
All links in a server-side map should have duplicate links available in the document¶
Severity code: Severe error
Any image with an “usemap” attribute for a server-side image map should have the available links duplicated elsewhere.
If an image is purely decorative, the “alt” text must be empty¶
Severity code: 0
Any image that is only decorative (serves no function or adds to the purpose of the page content) should have an “alt” attribute
Any image within a link must have “alt” text the describes the link destination¶
Severity code: Information only
Any image that is within a link should have an “alt” attribute which identifies the destination or purpose of the link.
Example¶
Wrong¶
<a href="home.html"><img src="home.png" alt="A house"></a>
Right¶
<a href="home.html"><img src="home.png" alt="Return to the home page"></a>
Image “alt” attributes should not be the same as the filename¶
Severity code: 0
All <code>img elements should have an “alt” attribute that is not just the name of the file
Check that any text within an image is also in the “alt” attribute¶
Severity code: 0
If an image has text within it, that text should be repeated in the “alt” attribute
Image Alt text is short¶
Severity code: 0
All “alt” attributes for <code>img elements should be clear and concise. “Alt” attributes over 100 characters long should be reviewed to see if they are too long.
Example¶
Wrong¶
<img src="dog.jpg" alt="A photograph of my very
An image within a link cannot have an empty “alt” attribute if there is no other text within the link¶
Severity code: Severe error
Any image that is within a link (an <code>a element) that has no other text cannot have an empty or missing “alt” attribute.
Example¶
Wrong¶
<a href="index.html"><img src="home.png" alt=""></a>
Right¶
<a href="index.html"><img src="home.png" alt="Return Home"></a>
Images should not have a simple placeholder text as an “alt” attribute¶
Severity code: Severe error
Any image that is not used decorativey or which is purely for layout purposes cannot have an “alt” attribute that consists solely of placeholders. Placeholders include:
<ul><li>nbsp</li><li>&nbsp;</li><li>spacer</li><li>image</li><li>img</li><li>photo</li></ul>Example¶
Wrong¶
<img src="dog.jpg" alt="image">
Right¶
<img src="dog.jpg" alt="A photograph of a dog">
Unless the image files are the same, no image should contain redundant alt text¶
Severity code: Severe error
Every distinct image on a page should have it’s own <em>alt</em> text which is different than all the others on the page to avoid redundancy and confusion.
Example¶
Wrong¶
<img src="rex.jpg" alt="this is an image of rex"><img src="me.jpg" alt="this is an image of rex">
Right¶
<img src="rex.jpg" alt="this is an image of rex"><img src="me.jpg" alt="a photo of myself">
Any animated GIF should not flicker¶
Severity code: Severe error
Animated GIF files should not flicker with a frequency over 2 Hz and lower than 55 Hz. You can check the flicker rate of this GIF <a href=”http://tools.webaccessibile.org/test/check.aspx“>using an online tool</a>.
Image elements must have an “alt” attribute¶
Severity code: Severe error
All <code>img elements must have an alt attribute
Example¶
Wrong¶
<img src="dog.jpg">
Right¶
<img src="dog.jpg" alt="A photograph of a dog">
A “longdesc” attribute is required for any image where additional information not in the “alt” attribute is required¶
Severity code: Severe error
Any image that has an “alt” attribute that does not fully convey the meaning of the image must have a “longdesc” attribute.
Example¶
Wrong¶
<img src="complexImage.png" alt="A complex image that cannot be described succinctly.">
Right¶
<img src="complexImage.png" alt="A complex image that cannot be described succinctly." longdesc="longer_description.html">
Images that are important should not have a purely white-space “alt” attribute¶
Severity code: 0
Any image that is not used decorativey or which is purely for layout purposes cannot have an “alt” attribute that consists solely of white space (i.e. a space
All links within a client-side image are duplicated elsewhere in the document¶
Severity code: 0
Any image that has a “usemap” attribute must have links replicated somewhere else in the document.
Example¶
Wrong¶
<p><map name="imagemap" id="map1"><area shape="poly" coords="185
An image with a “longdesc” attribute should have a corresponding description link¶
Severity code: 0
Any image that has a “longdesc” attribute must also have a corresponding “d-link
Any non-decorative images should have a non-empty “alt” attribute¶
Severity code: Possible error
Any image that is not used decorativey or which is purely for layout purposes cannot have an empty “alt” attribute.
Example¶
Wrong¶
<img src="dog.jpg" alt="">
Right¶
<img src="dog.jpg" alt="A photograph of a dog">
For any image, the “alt” text cannot refer to color alone¶
Severity code: 0
The “alt” text or content text for any image should not refer to the image by color alone. This is often fixed by changing the “alt” text to the meaning of the image
Server-side image maps should not be used¶
Severity code: Severe error
Server-side image maps should not be used.
Images should not have a “title” attribute¶
Severity code: Severe error
Images should not contain a “title” attribute.
Example¶
Wrong¶
<img src="dog.png" alt="My brown dog" title="A dog"/>
Right¶
<img src="dog.png" alt="My brown dog"/>
Any image with an “ismap” attribute have a valid “usemap” attribute¶
Severity code: 0
If an image has an “ismap” attribute
Images which contain math equations should provide equivalent MathML¶
Severity code: Information only
Images which contain math equations should be accompanied or link to a document with the equivalent equation marked up with <a href=”http://www.w3.org/Math/“>MathML</a>.
Example¶
Wrong¶
<img src="equation.png" alt="An equation which describes the average wind velocity of an unlaiden swallow. ">
Right¶
<img src="equation.png" alt="An equation which describes the average wind velocity of an unlaiden swallow. The equation is available after this image."><mrow><apply> <eq/> <apply> <plus/> <apply> <power/> <ci>x</ci> <cn>2</cn> </apply> <apply> <times/> <cn>4</cn> <ci>x</ci> </apply> <cn>4</cn> </apply> <cn>0</cn></apply></mrow>
All “checkbox” input elements require a valid “tabindex” attribute¶
Severity code: Severe error
All <code>input elements of type “checkbox” should have a “tabindex” attribute to help navigate the form with a keyboard alone.
Logical groups of check boxes should be grouped with a “fieldset¶
Severity code: Severe error
Related “checkbox” input fields should be grouped together using a <code>fieldset
Example¶
Wrong¶
<input type="checkbox" name="option-a" id="a"/><label for="a">Option A</label><br/><input type="checkbox" name="option-b" id="b"/><label for="b">Option B</label>
Right¶
<fieldset><legend>Several options</legend><input type="checkbox" name="option-a" id="a"/><label for="a">Option A</label><br/><input type="checkbox" name="option-b" id="b"/><label for="b">Option B</label></fieldset>
An “input” element should not use color alone¶
Severity code: Information only
All input elements should not refer to content by color alone.
Input elements which are not images should not have an “alt” attribute¶
Severity code: 0
Because of inconsistencies in how user agents use the “alt” attribute
All “file” input elements require a valid “tabindex” attribute¶
Severity code: Severe error
All <code>input elements of type “file” should have a “tabindex” attribute to help navigate the form with a keyboard alone.
All “input” elements with a type of “image” must have an “alt” attribute that describes the function of the input¶
Severity code: 0
All <code>input elements with a type of “image” should have an “alt” attribute
All “input” elements with a type of “image” must have an “alt” attribute which is not the same as the filename¶
Severity code: 0
All <code>input elements with a type of “image” should have an “alt” attribute
All “input” elements with a type of “image” must have an “alt” attribute which is not placeholder text¶
Severity code: 0
All <code>input elements with a type of “image” should have an “alt” attribute
All “input” elements with a type of “image” must have an “alt” attribute which is as short as possible¶
Severity code: 0
All <code>input elements with a type of “image” should have an “alt” attribute
The “alt” text for input “image” submit buttons must not be filler text¶
Severity code: Severe error
Every form image button should not simply use filler text like “button” or “submit” as the “alt” text.
Example¶
Wrong¶
<input type="image" src="mangifier.png" alt="submit"/>
Right¶
<input type="image" src="mangifier.png" alt="Search this site"/>
All “input” elements with a type of “image” must have an “alt” attribute¶
Severity code: Severe error
All <code>input elements with a type of “image” should have an “alt” attribute.
Example¶
Wrong¶
<input type="image" name="search" src="search.png"/>
Right¶
<input type="image" name="search" src="search.png" alt="Search"/>
The “alt” text for input “image” buttons must be the same as text inside the image¶
Severity code: 0
Every form image button which has text within the image (say, a picture of the word “Search” in a special font)
All “password” input elements require a valid “tabindex” attribute¶
Severity code: Severe error
All <code>input elements of type “password” should have a “tabindex” attribute to help navigate the form with a keyboard alone.
All “radio” input elements require a valid “tabindex” attribute¶
Severity code: Severe error
All <code>input elements of type “radio” should have a “tabindex” attribute to help navigate the form with a keyboard alone.
All “input” elements should have a corresponding “label¶
Severity code: 0
All <code>input elements should have a corresponding <code>label element. Screen readers often enter a “form mode” where only label text is read aloud to the user
All “text” input elements require a valid “tabindex” attribute¶
Severity code: Severe error
All <code>input elements of type “text” should have a “tabindex” attribute to help navigate the form with a keyboard alone.
All “input” elements of type “text” must have a default text¶
Severity code: Severe error
All <code>input elements with a type of “text” should have a default text.
Example¶
Wrong¶
<label for="search">Search: </label><input type="text" name="search" id="search"/>
Right¶
<label for="search">Search: </label><input type="text" name="search" id="search" value="Search"/>
Text” input elements require a non-whitespace default text¶
Severity code: Severe error
All <code>input elements with a type of “text” should have a default text which is not empty.
Example¶
Wrong¶
<label for="search">Search: </label><input type="text" name="search" id="search" value=""/>
Right¶
<label for="search">Search: </label><input type="text" name="search" id="search" value="Search"/>
Label” elements should not contain an input element¶
Severity code: Severe error
Label elements should not contain an <code>input element as well.
Example¶
Wrong¶
<label for="first_name">First name: <input type="text" id="first_name" name="first_name"/></label>
Right¶
<label for="first_name">First name: </label><input type="text" id="first_name" name="first_name"/>
Every form input must have only one label¶
Severity code: Severe error
Each form input should have only one <code>label element.
Example¶
Wrong¶
<label for="first_name"> First name:</label> <label for="first_name">(Required)</label> <input type="text" id="first_name" name="first_name"/>
Right¶
<label for="first_name"> First name: (Required)</label> <input type="text" id="first_name" name="first_name"/>
Labels must contain text¶
Severity code: Severe error
Label elements should contain text which communicates the purpose of its assigned input element.
Example¶
Wrong¶
<label for="first_name"> </label>First name: <input type="text" id="first_name" name="first_name"/>
Right¶
<label for="first_name">First name: </label><input type="text" id="first_name" name="first_name"/>
All labels should be associated with an input¶
Severity code: Severe error
All <code>label elements should be assigned to an input item, and should have a <em>for</em> attribute which equals the <em>id</em> attribute of a form element.
All “legend” elements must describe the group of choices¶
Severity code: Information only
If a <code>legend element is used in a fieldset, the <code>legend content must describe the group of choices.
Example¶
Wrong¶
<fieldset> <legend>Some fields:</legend> <label for="name">Name:</label> <input type="text" size="30" id="name"/><br /> <label for="email">Email:</label> <input type="text" size="30" id="email"/><br /></fieldset>
Right¶
<fieldset> <legend>Personal Information:</legend> <label for="name">Name:</label> <input type="text" size="30" id="name"/><br /> <label for="email">Email:</label> <input type="text" size="30" id="email"/><br /></fieldset>
Legend” text must not contain just whitespace¶
Severity code: Severe error
If a <code>legend element is used in a fieldset, the <code>legend should not contain empty text.
Example¶
Wrong¶
<fieldset> <legend> </legend> <label for="name">Name:</label> <input type="text" size="30" id="name"/><br /> <label for="email">Email:</label> <input type="text" size="30" id="email"/><br /></fieldset>
Right¶
<fieldset> <legend>Personal Information:</legend> <label for="name">Name:</label> <input type="text" size="30" id="name"/><br /> <label for="email">Email:</label> <input type="text" size="30" id="email"/><br /></fieldset>
Legend” text must not contain placeholder text like “form” or “field¶
Severity code: Severe error
If a <code>legend element is used in a fieldset, the <code>legend should not contain useless placeholder text.
Example¶
Wrong¶
<fieldset> <legend>Form</legend> <label for="name">Name:</label> <input type="text" size="30" id="name"/><br /> <label for="email">Email:</label> <input type="text" size="30" id="email"/><br /></fieldset>
Right¶
<fieldset> <legend>Personal Information:</legend> <label for="name">Name:</label> <input type="text" size="30" id="name"/><br /> <label for="email">Email:</label> <input type="text" size="30" id="email"/><br /></fieldset>
Use a “link” element for alternate content¶
Severity code: Information only
Documents which contain things like videos, sound, or other forms of media that are not accessible, should provide a <code>link element with a “rel” attribute of “alternate” in the document header.
Example¶
<head><link rel="alternate" href="transcription.html"/></head>
Lists should not be used for formatting¶
Severity code: Information only
Lists like <code>ul and <code>ol are to provide a structured list, and should not be used to format text. This test views any list with just one item as suspicious, but should be manually reviewed.
Example¶
Wrong¶
<ul><li>Something I just wanted indented</li></ul>
Right¶
<p style="margin-left: 10px;">Something I just wanted indented</p>
The “marquee” tag should not be used¶
Severity code: Severe error
The <code>marquee element is difficult for users to read and is not a standard HTML element. Try to find another way to convey the importance of this text.
Example¶
Wrong¶
<marquee>This is really hard to read</marquee>
Right¶
<strong>This is much easier to read</strong>
Noembed” elements must be the same content as their “embed” element¶
Severity code: Information only
All <code>noembed elements must contain or link to an accessible version of their <code>embed counterparts.
Example¶
Wrong¶
<embed src="podcast.mp3"/><noembed>Some podcast</noembed>
Right¶
<embed src="podcast.mp3"/><noembed>A podcast about dogs. <a href="transcript.html">Read the full transcript</a>.</noembed>
All “noframes” elements should contain the text content from all frames¶
Severity code: Possible error
The <code>noframes content should either replicate or link to the content visible within the frames.
When objects are disabled, content should still be available¶
Severity code: Information only
The content within objects should still be available, even if the object is disabled. To do this, place a link to the direct object source within the <code>object tag.
Example¶
Wrong¶
<object src="something.html"></object>
Right¶
<object src="something.html"><a href="something.html">Read something</a></object>
Objects do not flicker¶
Severity code: Information only
The content within an <code>object tag must not flicker.
Objects must not use color to communicate alone¶
Severity code: Information only
Objects should contain content that makes sense without color and is accessible to users who are color blind.
<strong>Objects cannot be checked using automated tools, this should be reviewed manually.</strong>
Interfaces within objects must be accessible¶
Severity code: Information only
Object content should be assessed for accessibility.
<strong>Objects cannot be checked using automated tools, this should be reviewed manually.</strong>
Objects which reference multimedia files should also provide a link to a transcript¶
Severity code: Information only
If an object contains a video, a link to the transcript should be provided near the object.
Example¶
Wrong¶
<object src="video.mov"></object>
Right¶
<object src="video.mov"></object><a href="transcript.html">Read Transcript of the video</a>
Objects must contain their text equivalents¶
Severity code: Severe error
All <code>object elements should contain a text equivalent if the object cannot be rendered.
Example¶
Wrong¶
<object src="widget.html" title=""></object>
Right¶
<object src="widget.html" title="A small web widget">A widget of stock prices. <a href="widget.html">Access this widget.</a></object>
Every object should contain an “embed” element¶
Severity code: Severe error
Every <code>object element must also contain an <code>embed element.
Example¶
Wrong¶
<object data="movie.mov"></object>
Right¶
<object data="movie.mov"><embed src="movie.mov"></embed></object>
Objects should have a title attribute¶
Severity code: Severe error
All <code>object elements should contain a “title” attribute.
Example¶
Wrong¶
<object src="widget.html"></object>
Right¶
<object src="widget.html" title="A small web widget"></object>
Objects must not have an empty title attribute¶
Severity code: Severe error
All <code>object elements should have a “title” attribute which is not empty.
Example¶
Wrong¶
<object src="widget.html" title=""></object>
Right¶
<object src="widget.html" title="A small web widget"></object>
All objects should provide a way for keyboard users to escape¶
Severity code: Information only
Ensure that a user who has only a keyboard as an input device can escape a <code>object element. This requires manual confirmation.
An object might require a long description¶
Severity code: Information only
Objects might require a long description, especially if their content is complicated.
Example¶
Wrong¶
<object data="map_of_the_world.mov"></object>
Right¶
<object data="map_of_the_world.mov" longdesc="description.html"></object>
The text equivalents of an object should update if the object changes¶
Severity code: Information only
If an object changes, the text equivalent of that object should also change.
<strong>Objects cannot be checked using automated tools, this should be reviewed manually.</strong>
Content within an “object” element should be usable with objects disabled¶
Severity code: Information only
Objects who’s content changes using java, ActiveX, or other similar technologies, should have their default text change when the object’s content changes.
Objects with “classid” attributes should change their text if the content of the object changes¶
Severity code: Severe error
Objects who’s content changes using java, ActiveX, or other similar technologies, should have their default text change when the object’s content changes.
Paragraphs must not be used for headers¶
Severity code: Severe error
Headers like <code>h1-h6 are extremely useful for non-sighted users to navigate the structure of the page, and formatting a paragraph to just be big or bold, while it might visually look like a header, does not make it one.
Example¶
Wrong¶
<p><strong>Something that really should be a header</strong></p>
Right¶
<h3>Something that really should be a header</h3>
All password input elements should have a corresponding label¶
Severity code: 0
All <code>input elements with a type of “password”should have a corresponding <code>label element. Screen readers often enter a “form mode” where only label text is read aloud to the user
All “password” input elements have a label that is close¶
Severity code: Possible error
All input elements of type “password” must have a corresponding label that is close to the form element. Users of screen magnification or with reduced spatial skills are hampered in using a form element if the label for that element is located far away.
Pre” elements should not be used for tabular data¶
Severity code: Information only
If a <code>pre element is used for tabular data, change the data to use a well-formed table.
All “radio” input elements have a corresponding label¶
Severity code: 0
All <code>input elements of type “radio” should have a corresponding <code>label element. Screen readers often enter a “form mode” where only label text is read aloud to the user
All “radio” input elements have a label that is close¶
Severity code: Possible error
All input elements of type “radio” must have a corresponding label that is close to the form element. Users of screen magnification or with reduced spatial skills are hampered in using a form element if the label for that element is located far away.
All radio button groups are marked using fieldset and legend elements.¶
Severity code: Severe error
form element content must contain both fieldset and legend elements if there are related radio buttons.
Content on the page should still be available if scripts are disabled¶
Severity code: Information only
All scripts should be assessed to see if, when the user is browing with scrips turned off, the page content is still available.
Scripts should have a corresponding “noscript” element¶
Severity code: 0
Scripts should be followed by a <code>noscripts element to guide the user to content in an alternative way.
Example¶
Wrong¶
<script type="text/javascript">document.write("Hello World!")</script>
Right¶
<script type="text/javascript">document.write("Hello World!")</script><noscript>Hello
If an element has an “onclick” attribute¶
Severity code: 0
it should also have an “onkeypress” attribute
If an element has a “mousedown” attribute¶
Severity code: 0
it should also have an “onkeydown” attribute
If an element has a “onmouseout” attribute¶
Severity code: 0
it should also have an “onblur” attribute
If an element has an “onmouseover” attribute¶
Severity code: 0
it should also have an “onfocus” attribute
If an element has an “onmouseup” attribute¶
Severity code: 0
it should also have an “onkeyup” attribute
The user interface for scripts should be accessible¶
Severity code: Information only
All scripts should be assessed to see if their interface is accessible.
Scripts should not cause the screen to flicker¶
Severity code: Information only
All scripts should be assessed to see if their interface does not flicker.
The interface in scripts should not use color alone¶
Severity code: Information only
All scripts should be assessed to see if their interface does not have an interface which requires distinguishing beteween colors alone.
Select” elemetns must not contain an “onchange” attribute¶
Severity code: Severe error
Actions like “onchange” can take control away from users who are trying to navigate the page. Using an “onchange” attribute for things like select-list menus should instead be replaced with a drop-down and a button which initiates the action.
Example¶
Wrong¶
<form><select onchange="location = this.options[this.selectedIndex].value;"><option value="home.html">Home Page</option><option value="dog.html">My Dog</option></select></form>
Right¶
<form action="go.html"><select><option value="home.html">Home Page</option><option value="dog.html">My Dog</option></select><input type="submit" value="Go"/></form>
All select elements have an explicitly associated label.¶
Severity code: 0
All <code>select elements should have a corresponding <code>label element. Screen readers often enter a “form mode” where only label text is read aloud to the user
Form select elements should use optgroups for long selections¶
Severity code: Possible error
Select form elements with long lists of items should use the <code>optgroup tag to group like selections together.
Websites must have a site map¶
Severity code: Information only
Every web site should have a page which provides a site map or another method to navigate most of the site from a single page to save time for users of assistive devices.
A “skip to content” link should exist as one of the first links on the page¶
Severity code: 0
A link reading “skip to content
Inline SVG should use Title elements¶
Severity code: Severe error
Any inline SVG image should have an embedded <code>title element
The tab order of a document is logical¶
Severity code: Possible error
Check that the tab-order of a page is logical.
Complex tables should have a summary¶
Severity code: 0
If a table is complex (for example, has some cells with “colspan” attributes
Data tables should contain “th” elements¶
Severity code: Severe error
Tables which contain data (as opposed to layout tables) should contain <code>th elements to mark headers for screen readers and enhance the structure of the document.
Example¶
Wrong¶
<table><tr><td>Header One</td><td>Header Two</td></tr><tr><td>1.30</td><td>4.50</td></tr></table>
Right¶
<table><tr><th>Header One</th><th>Header Two</th></tr><tr><td>1.30</td><td>4.50</td></tr></table>
Table header lables must be terse¶
Severity code: Possible error
The “abbr” attribute for table headers must be terse (less than 20 characters long).
Layout tables should not contain “th” elements¶
Severity code: Information only
Tables which are used purely for layout (as opposed to data tables), <strong>should not</strong> contain <code>th elements, which would make the table appear to be a data table.
Example¶
Wrong¶
<table><tr><th>Sidebar</th><th>Content</th><tr><td>Navigation</td><td>Stuff</td></tr></table>
Right¶
<table><tr><td>Sidebar</td><td>Content</td><tr><td>Navigation</td><td>Stuff</td></tr></table>
All tables used for layout have no summary or an empty summary¶
Severity code: 0
If a table contains no data, and is used simply for layout, then it should not have a “summary” attribute
All tables used for layout should make sense when removed¶
Severity code: Information only
If a <code>table element is used for layout purposes only, then the content of the table should make sense if the table is linearized.
All data tables should have a summary¶
Severity code: Possible error
If a table contains data, it should have a “summary” attribute.
Example¶
Wrong¶
<table>
Right¶
<table summary="A table of data">
All data tables should have an adequate summary¶
Severity code: Information only
If a table contains data, it should have a “summary” attribute that completely communicates the function and use of the table.
Example¶
Wrong¶
<table summary="A table of stuff">
Right¶
<table summary="A comparison of population rates amongst North American cities.">
Group columns using “colgroup” or “col” elements¶
Severity code: Information only
To help complex table headers make sense, use <code>colgroup or <code>col to group them together.
Table headers over 20 characters should provide an “abbr” attribute¶
Severity code: Information only
For long table headers, use an “abbr” attribute that is less than short (less than 20 characters long).
<h4>Examples</h4>Wrong¶
<th>The total number of people who liked chocolate</th>
Right¶
<th abbr="Like Chocolate">The total number of people who liked chocolate</th>
Data tables should use scoped headers for rows with headers¶
Severity code: Possible error
Where there are table headers for both rows and columns, use the “scope” attribute to help relate those headers with their appropriate cells. This test looks for the first and last cells in each row and sees if they differ in layout or font weight.
Example¶
Wrong¶
<table>
<thead>
<tr>
<th>Should be scoped</th>
<th>Item two</th>
<th>Item three</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Row one</strong></td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td><strong>Row two</strong></td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
Right¶
<table>
<thead>
<tr>
<th>Should be scoped</th>
<th>Item two</th>
<th>Item three</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><strong>Row one</strong></th>
<td>1</td>
<td>2</td>
</tr>
<tr>
<th scope="row">Row two</th>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
Data tables with multiple headers should use the “scope” attribute¶
Severity code: Possible error
Where there are table headers for both rows and columns, use the “scope” attribute to help relate those headers with their appropriate cells.
Complex data tables should provide “id” attributes to headers¶
Severity code: 0
and “headers” attributes for data cells
All tabular information should use a table¶
Severity code: Possible error
Tables should be used when displaying tabular information.
The text size is not less than 9 pixels high¶
Severity code: Possible error
To help users with difficulty reading small text, ensure text size is no less than 9 pixels high.
All textareas should have a corresponding label¶
Severity code: 0
All <code>textarea elements should have a corresponding <code>label element. Screen readers often enter a “form mode” where only label text is read aloud to the user
All textareas should have a label that is close to it¶
Severity code: Possible error
All <code>textarea elements should have a corresponding <code>label element that is close in proximity..
Example¶
Wrong¶
<label for="essay">Enter your essay:</label> [... lots of stuff ...] <textarea id="essay" name="essay"></textarea>
Right¶
<label for="essay">Enter your essay:</label> <textarea id="essay" name="essay"></textarea>