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

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>

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>

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>

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

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 “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>

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>

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>

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.

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>

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>

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>

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>

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 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>

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>....

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>

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">

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>

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>

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>....

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>....

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>....

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>....

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

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&amp;ntilde;ol.</p> (Spanish)</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"/>

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"/>

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=""/>

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 ;)

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"/>

Frames are not used

Severity code: Severe error

Frame elements should not be used.

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>

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>

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>

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>

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>

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>

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>

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>

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>

Inline frames (“iframes”) should not have a “longdesc” attribute

Severity code: Severe error

Iframe elements should not have a "longdesc" attribute.

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

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

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>&amp;nbsp;</li><li>spacer</li><li>image</li><li>img</li><li>photo</li></ul>Example

Wrong

<img src="dog.jpg" alt="image">

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=&quot;rex.jpg&quot; alt=&quot;this is an image of rex&quot;><img src=&quot;me.jpg&quot; alt=&quot;this is an image of rex&quot;>

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">

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.">

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

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="">

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"/>

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. ">

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>

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"/>

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"/>

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, type of “submit

Severity code: 0

have a valid tab index.

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"/>

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=""/>

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>

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"/>

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"/>

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>

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>

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>

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>

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>

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>

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>

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 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>

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>

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>

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>

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>

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>

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>

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>

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

Select jump menus should jump on button press, not on state change

Severity code: Possible error

If you wish to use a ‘Jump’ menu with a select item that then redirects users to another page, the jump should occur on the user pressing a button, rather than on the change event of that select eleemnt.

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.

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.

Captions should identify their table

Severity code: Information only

Check to make sure that a table’s caption identifies the table with a name, figure number, etc.

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>

Table header lables must be terse

Severity code: Possible error

The “abbr” attribute for table headers must be terse (less than 20 characters long).

Mark up the areas of tables using “thead

Severity code: 0

tbody

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>

All tables used for layout have no “caption” element

Severity code: Severe error

If a table contains no data, and is used simply for layout, then it should not contain a <code>caption element.

Example

Wrong

<table><caption>The layout of this page, broken into two areas.</caption>...

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.

Table summaries should describe the navigation and structure of the table

Severity code: Information only

Table <code>summary elements should describe the navigation tools and structure of the table, as well as provide an overview of what the table describes.

Table “summary” elements should not duplicate the “caption” element

Severity code: Severe error

The summary and the caption must be different, as both provide different information. A <code>caption</code element identifies the table., while the “summary” attribute describes the table contents.

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>

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">

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>

Data tables should contain a “caption” element if not described elsewhere

Severity code: Severe error

Unless otherwise described in the document, tables should contain <code>caption elements to describe the purpose of the table.

Example

<table><caption>A short description of this table</caption></table>

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>

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>

All video tags must provide captions

Severity code: Possible error

All HTML5 video tags must provide captions.

All linked or embedded videos need captions

Severity code: Severe error

Any video hosted or otherwise which is linked or embedded must have a caption.

Indices and tables