Common Accessibility Errors

The following errors were "harvested" from the WebXact report on this page: http://library.csun.edu/ealtman/documentation/accessibility/badpage.html

The numbers following the error and warning messages refer to the WAI Accessibility Checkpoints, which provide further information. If you are unsure whether a specific error or warning on the WebXact report for your page requires action, please seek assistance.

Jump to: Priority 1 / Priority 2 / Priority 3

Priority 1

Errors

Provide alternative text for all images (1.1): Explanation/Solution: See Before You Test -- Image ALT Text

Warnings

If an image conveys important information beyond what is in its alternative text, provide an extended description. (1.1)

Explanation/Solution: This warning is generated by every image on your page (including the template), and in most cases no action is required. If an image conveys information too complex to be represented in ALT text (such as a narrative or an analytical graph), create a separate web page with the extended description. Dreamweaver users can then insert the attribute desc in the image tag:



        <img src="stats2002.gif" align="right" desc="stats2002description.html">

Contribute users, contact the webmaster.

If you use color to convey information, make sure the information is also represented another way. (2.1)

Explanation/Solution: This warning is generated by every image and color on your page, and in most cases no action is required.

Identify any changes in the document's language. (4.1)

Explanation/Solution: Ignore this warning if you have no non-English material on your page. If you do, Dreamweaver users can insert the lang attribute into any text element (e.g. <p lang="fr">Défense de fumer</p>). See http://www.w3.org/WAI/ER/IG/ert/iso639.htm#2letter for a list of language codes. Contribute users, contact the web master.

If this is a data table (not used for layout only), identify headers for the table rows and columns. (5.1)

Set a header row or header column in Contribute. (see also Inserting and Working with Tables)
Set a Header Row or Column in a Pre-existing Table (Dreamweaver)

If a table has two or more rows or columns that serve as headers, use structural markup to identify their hierarchy and relationship. (5.2)

Explanation/Solution: This warning is generated by every table on your page (including the template!). If your table is for layout only, do nothing. If you are using it to present tabular data, and have two or more header rows or columns, please contact the webmaster for assistance.

If style sheets are ignored or unsupported, ensure that pages are still readable and usable. (6.1)

Explanation/Solution: Usually no action is required. You can check the readability of your pages without the style sheet using the Accessibility Toolbar: Select CSS > Disable CSS. Reload the page to return to normal view.

Make sure that the page does not cause the screen to flicker rapidly. (7.1)

Explanation/Solution: This warning is always generated. Usually no action is required. (Do not use animated GIF images.)

Use the simplest and most straightforward language that is possible. (14.1)

Explanation/Solution: This warning is always generated. Use your judgement.

Priority 2

Errors

Use relative sizing and positioning , rather than absolute.(3.4)

Explanation: This error is most likely caused by table width or height, or table column width or table row height being specified in pixels, rather than by percentage. This error can occur even if the width or height has been set in pixels for only one table cell.

Contribute users:

To change the width of a table to a percent value, place your cursor in the table, right click, and select Table Properties. Set the Table Width to a percent value (type a number in the first box, then set the next box to "percent")
To change the width of a table cell, you need to select the entire column with your mouse. Right-click, select Table Properties, and then click the Column tab. You'll be able to set the Column Width to a percent value (type a number in the first box, then set the next box to "percent")

Dreamweaver users: use the Table Properties Panel to change the size of a table to % (use Table Cell Properties panel to change an individual cell).

TIP: Don't drag table borders -- this can result in the width being changed to a pixel value.

Nest headings properly. (3.5)

Explanation/Solution: See Before You Test -- Check Page Structure, Headings

Do not use the same link phrase more than once when the links point to different URLs. (13.1)

Explanation/Solution: WebXact has found repeated occurences of the same phrase used to link to different pages. Try to make each linked phrase on your page unique. Dreamweaver users, if using the same phrase repeatedly is unavoidable, you can use Code View to insert the title attribute into the beginnings of anchor tags to distinguish them from one another:

Perform a periodical title search in the <a title="Periodical 
        Title Search" href="http://suncat.csun.edu/screens/pertitle.html">Library 
        Catalog</a>

        

        Perform an author search in the <a title="Author Search" 
        href="http://suncat.csun.edu/search/a">Library Catalog</a>

Unfortunately, WebXact is not sophisticated enough to detect the title attribute and therefore will still register an error. It is a legitimate way to solve the repeated link phrase problem, however, so if there is no other Priority 2 issue to address, you can consider the page Level AA-compliant.

Warnings

Check that the foreground and background colors contrast sufficiently with each other. (2.2)

Explanation/Solution: This warning is generated if any color is present on your page (including the template), and in most cases no action is required. If you have doubts, consult the webmaster.

Where it's possible to mark up content instead of using images, use a markup language. (3.1)

Explanation/Solution: This warning is always generated. Unless you are using a graphic to represent a mathematical or scientific equation, no action is required.

Make sure your document validates to formal published grammars. (3.2)

Explanation/Solution: This warning is always generated -- just be sure you've run your page through the W3C validator.

Make sure header elements are not used only for bold text. (3.5)

Explanation/Solution: This warning is generated by the presence of any headings on your page. Review the proper use of headings here on Before You Test -- Check Page Structure: Headings

Make sure BLOCKQUOTE is used only for quotations, not indentation. (3.7)

Explanation/Solution: This warning is always generated. If you have no indented paragraphs in your page, no action is required. If you have indented paragraphs, and they are not quotations, check for the blockquote tag:

Open your page in Internet Explorer.
In the Accessibility Toolbar, select Structure > Show Q/Blockquote
If there are no blockquotes, you will get a "no blockquotes or Q elements found" message. Otherwise, scroll down till you find the red-outlined area that is within the blockquote.

Contribute users can remove the blockquote tag by selecting the paragraph, and clicking the "Outdent" button in the main toolbar:

Dreamweaver users can use the outdent button in the Text Properties Panel, or remove the tag using the Tag Selector.

Mark up any quotations with the Q and BLOCKQUOTE elements. (3.7)

Explanation/Solution: This warning is always generated. The Q element for inline quotations is not widely supported yet, and therefore no action is required. The blockquote element is, however, supported. It is required for long quotations that are "broken out" into their own paragraphs. The blockquote tags indents the quotation like this:

They went in single file, running like hounds on a strong scent, and an eager light was in their eyes. Nearly due west the broad swath of the marching Orcs tramped its ugly slot; the sweet grass of Rohan had been bruised and blackened as they passed.

The code looks like this:

<BLOCKQUOTE> <P>They went in single file, running like 
        hounds on a strong scent, and an eager light was in their eyes. Nearly 
        due west the broad swath of the marching Orcs tramped its ugly slot; the 
        sweet grass of Rohan had been bruised and blackened as they passed.</P> 
        </BLOCKQUOTE>

Contribute users can format a blockquote by selecting the paragraph of the quotation and clicking the "Indent" button in the main toolbar:

Dreamweaver users can use the indent button in the Text Properties Panel.

Avoid using tables to format text documents in columns unless the table can be linearized. (5.3)

Explanation/Solution: This warning is generated by any table in your page (including the template!). If you have used a table for layout of text, make sure that the text make sense if the table is read row by row (left to right, top to bottom).

If this is a data table (not used for layout only), provide a caption. (5.5)

Explanation/Solution: This warning is generated by every table on your page (including the template!). If your table is for layout only, do nothing. If you are using it to present tabular data, you need to insert a descriptive caption formatted using the caption element. Dreamweaver users can use Code View to type in the caption directly following the opening table tag:



        <TABLE width="60%" BORDER="1" CELLPADDING="4" 
        CELLSPACING="0" SUMMARY="Volumes held in the library">

        <caption> Volumes Held in Library </caption>

The caption will appear directly above the first table row. Contribute users, contact the webmaster.

If this .gif image is animated, make sure it does not contain fast or distracting motion. (7.2)

Explanation/Solution: This warning is generated by every GIF image on your page, including the template. Animated GIF images are not to be used on official library pages.

Use the latest technology specification available whenever possible. (11.1)

Explanation/Solution: This warning is always generated. No action is required.

Avoid use of obsolete language features if possible. (11.2)

Explanation/Solution: WebXact has found a deprecated element on the page. Elements designated "deprecated" (such as font, center, and u) by the W3C are no longer part of the current HTML standard, and should therefore be avoided (see notes on the special uses of Underlining in Contribute and Underlining in Dreamweaver). You may also see this warning if there is a deprecated attribute (such as align or bgcolor ) on your page. Contribute users can remove deprecated elements by selecting the affected text, cutting it (Ctrl-x) and pasting it back in as text only (Ctrl-Shift-v). Use the style sheet for formatting your text instead.

Styling text in Contribute
Styling text in Dreamweaver
Index of Elements (W3C) (shows which are deprecated)
Index of Attributes (W3C) (indicates which uses are deprecated)

Group related elements when possible. (12.3)

Explanation/Solution: This warning reminds you to ensure that your content is structured as much as possible, using headings and lists. It is always generated, and is important, especially if you want your document to be accessible to blind users.

The WAI 12.3 guideline reads, "Divide large blocks of information into more manageable groups where natural and appropriate." Make sure you've used the HTML formatting available for lists and headings where necessary. The full text of guideline 12 can be found at http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/#gl-complex-elements.

Make sure that all link phrases make sense when read out of context. (13.1)

Explanation/Solution: This warning is always generated. See Before You Test -- Links

Add a descriptive title to links when needed. (13.1)

Explanation/Solution: This warning is always generated, and no action is required unless you're trying to fix a repeated link phrase error.

Provide the user with a site map or table of contents, a description of the general layout of the site, the access features used, and instructions on how to use them. (13.3)

Explanation/Solution: This warning is always generated. Use your best judgement. If you've created a set of interconnected pages, a table of contents page can really help your user find his/her way around.

Provide a clear, consistent navigation structure. (13.4)

Explanation/Solution: This warning is always generated, and usually no action is required. If you've created a toolbar or other "menu" structure to help your user navigate your pages, make sure its appearance and location is the same on each page.

Priority 3

Errors

Provide a summary for tables. (5.5): Explanation/Solution: See Before You Test -- Tables
Separate adjacent links with more than whitespace. (10.5): Explanation/Solution: See Before You Test -- Lists: Adjacent Links

Warnings

Use the ABBR and ACRONYM elements to denote and expand any abbreviations and acronyms that are present. (4.2): Explanation/Solution: This warning is always generated. Use your best judgement. Identify meaningful acronyms whose significance is likely to be unknown to your user. The easiest way to do this is in text, e.g.:
"IEEE (Institute of Electrical & Electronics Engineers)." Dreamweaver users can also insert the acronym or abbr elements:

<acronym title="Western Athletic Conference">WAC</acronym> <abbr title="Cascading style sheet">CSS</abbr>
Consider specifying a logical tab order among form controls, links, and objects. (9.4): Explanation/Solution: This warning is always generated, and no action is required.
Consider adding keyboard shortcuts to frequently used links. (9.5): Explanation/Solution: This warning is always generated, and no action is required.
Allow users to customize their experience of the web page. (11.3): Explanation/Solution: This warning is always generated, and no action is required.
Provide navigation bars for easy access to the navigation structure. (13.5): Explanation/Solution: This warning is always generated, and usually no action is required. If you have a group of connected pages that you want the user to be able to navigate as a group, create a simple navigation bar that contains links to all your pages. The bar should be repeated on each page of the group, in the same location and with the same style. It's easiest to do this across the top, with unlinked slashes or dashes in between each link.
If there are logical groups of links, make sure they are clearly identified. (13.6): Explanation/Solution: This warning is generated for pages with numerous links, and no response is required.
If you have grouped links, make sure there is a link at the beginning that allows the user to bypass the group. (13.6): Explanation/Solution: This warning is generated for pages with numerous links, and no action is required.
Provide distinguishing information at the beginning of headings, paragraphs, lists, etc. (13.8): Explanation/Solution: This warning is always generated, and is a recommendation for good writing practices: headings should be meaningful, paragraphs should have topic sentences, lists should be introduced with a descriptive phrase.
If this document is part of a collection, provide metadata that identifies this document's location in the collection. (13.9): Explanation/Solution: This warning is always generated, and no action is required.
Use a consistent style of presentation between pages. (14.3): Explanation/Solution: This warning is always generated, and usually no action is required. Be sure that the structure (headings, use of lists) of analogous documents is consistent.

Last Updated: 04-Jun-2010

Valid XHTML 1.0 Transitional