Checklist of HTML Techniques for WCAG 2.0

(not yet a) W3C Working Draft 24 March 2002

Wendy Chisholm, W3C
Matt May


This is how a checklist of HTML Techniques might look. This only lists the "rules" extracted from the XML. It could also contain information about which success criteria or checkpoint the rule applies to.

HTML Checkpoint Pass Fail N/A
Use the title element to describe the document.
Use the ADDRESS element to define a page's author.
Avoid using <meta http-equiv="refresh"> to automatically redirect users.
Avoid using <meta http-equiv="refresh"> to refresh pages periodically.
Use the !DOCTYPE statement to define the HTML or XHTML version of your document.
Use the LINK element to describe the structure of your document.
Use the LINK element to refer to accessible alternative documents.
Use HTML header elements H1 through H6, in order, to define the structure of the document.
Use CSS, not HTML header elements, to create font effects.
Use the lang attribute to identify the natural language used in a document.
Use the lang attribute of the HTML element to define the document's language.
Use the strong and em elements, rather than b and i, to denote emphasis.
Use the acronym element to expand acronyms where they first occur.
Use the abbr element to expand abbreviations where they first occur.
Use the blockquote element to mark up block quotations.
DO NOT use the blockquote element for formatting effects such as indentation.
Wherever possible, use markup rather than images to convey information.
Use semantic elements in HTML (cite, dfn, code, samp, kbd, var, ins, and del) rather than pre to define the context in which its content is used.
Format ordered lists so their items can be followed logically.
Use CSS, not images, to change list bullets.
Provide a caption for tables using the caption element.
If a caption is not provided for a table, use the title attribute on the table element to describe the nature of the table in a few words.
Provide a summary via the "summary" attribute.
Provide terse substitutes for header labels with the "abbr" attribute on th elements.
Identify structural groups of rows (thead for repeated table headers, tfoot for repeated table footers, and tbody for other groups of rows) and groups of columns (colgroup and col).
Label table elements with the "scope", "headers", and "axis" attributes so that future browsers and assistive technologies will be able to select data from a table by filtering on categories.
Do not use the pre element to create a tabular layout of text -- use the table element so that assistive technologies may recognize that it is a table.
Use style sheets rather than layout tables for positioning elements on a page.
Ensure that the layout table linearizes in a readable order when style sheets are not in use.
Use style sheets to control the appearance of table elements such as th.
Until user agents (including assistive technologies) render side-by-side text correctly, provide a linear text alternative (on the current page or some other) for all tables that lay out text in parallel, word-wrapped columns.
Use link text to describe your target page as clearly as possible.
Where appropriate, use the title attribute of the A element to clarify links.
Avoid using meaningless phrases such as "Click Here" for link text.
Use text equivalents for images which are used as links.
Include a link that allows users to skip over the set of navigation links.
Use the HTML 4.01 tabindex attribute to allow users to jump to an anchor after the set of navigation links. This attribute is not yet widely supported.
Provide a style sheet that allows users to hide the set of navigation links.
Use the HTML 4.01 MAP element to group links, then identify the group with the title attribute.
Use the accesskey attribute of navigational elements to allow access with a single keystroke.
Do not cause pop-ups or other windows to appear and do not change the current window without informing the user.
Use the alt attribute of the IMG element to provide a text equivalent for images.
Use the body of the OBJECT element to provide a text equivalent for image objects.
For images using the img element, describe detailed information in a separate file, and use the longdesc attribute to direct users to that file.
For images using the object element, describe detailed information in the body of the tag, providing links to other content where appropriate.
Provide a means to skip over multi-line ASCII art.
Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
Provide redundant text links for each active region of a server-side image map.
Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.
Avoid using animations that cannot be fully controlled by the user, such as animated GIFs.
Provide a text equivalent inside the OBJECT element.
Use the OBJECT element rather than APPLET to mark up Java applets.
Use the OBJECT element rather than the EMBED element to mark up programatic objects.
Use Java accessibility APIs to make applets directly accessible.
Use the EMBED element within the OBJECT element for backward compatibility.
Provide text equivalents to describe visual and auditory elements.
Use the title attribute of the frame and frameset elements to describe the contents of each frame.
Using the longdesc attribute of the frame element, describe the purpose of frames and how frames relate to each other if it is not obvious by frame titles alone.
Use the noframes element to support user agents that don't support frames.
Use only HTML documents as frame sources.
Do not cause pop-ups or other windows to appear and do not change the current window without informing the user.
Try using Cascading Style Sheets to duplicate the features of frames.
Create a logical tab order through links, form controls, and objects.
Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and groups of form controls.
Use the FIELDSET and LEGEND elements in HTML 4 to group form controls logically.
Use the OPTGROUP to group options logically under the SELECT element.
Using the LABEL element, associate form elements with their labels.
Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas.
Provide a text equivalent for images used as "submit" buttons.