Version with Dynamic HTML
HTML Techniques Implementation Checklist
Document structure & metadata
The !DOCTYPE statement 
- 3.2 Create documents that validate to published formal grammars. [Priority 2]
The LINK element & navigation tools
- 13.9 Provide information about document collections (i.e., documents comprising multiple pages.). [Priority 3]
- Use the LINK element and link types to describe document navigation mechanisms and organization
The LINK element & alternative documents
- 6.5 Ensure that dynamic content is accessible or provide an alternative presentation or page. [Priority 2]
- The LINK element may also be used to designate alternative documents
Structural grouping
- 12.3 Divide large blocks of information into more manageable groups where natural and appropriate. [Priority 2]
- Use FIELDSET to group form controls into semantic units and describe the group with the LEGEND element.
- Use OPTGROUP to organize long lists of menu options into smaller groups
- Use tables for tabular data and describe the table with CAPTION.
- Group table rows and columns with THEAD, TBODY, TFOOT, and COLGROUP.
- Nest lists with UL, OL, and DL.
- Use section headings (H1 - H6) to create structured documents and break up long stretches of text.
- Break up lines of text into paragraphs (with the P element).
- Group related links. Refer to the section Grouping and bypassing links.
Section headings
- 3.5 Use header elements to convey document structure and use them according to specification. [Priority 2]
- Sections should be introduced with the HTML heading elements (H1-H6).
- Users should order heading elements properly.
- Do not use headings to create font effects
- Use DIV elements to contain headings and section text, and apply section-level styles to the DIV.
Language information
Identifying changes in language
- 4.1 Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions).
[Priority 1]
- If you use a number of different languages on a page, make sure that any changes in language are clearly
identified by using the "lang" attribute
Identifying the primary language
- 4.3 Identify the primary natural language of a document. [Priority 3]
- It is good practice to identify the primary language of a document, either [by adding the lang attribute to
the HTML element] or through HTTP headers.
Text markup
Emphasis
- 3.3 Use style sheets to control layout and presentation. [Priority 2]
- [Use EM and STRONG to mark up emphasis;] the B and I elements should not be used;
Acronyms and abbreviations
- 4.2 Specify the expansion of each abbreviation or acronym in a document where it first occurs. [Priority 3]
- Mark up abbreviations and acronyms with ABBR and ACRONYM and use "title" to indicate the expansion
- If a heading is already abbreviated provide the expansion in ABBR. If a heading is long, you may wish to
provide an abbreviation, as described in Data Tables.
Quotations
- 3.7 Mark up quotations. Do not use quotation markup for formatting effects such as indentation. [Priority 2]
- The Q and BLOCKQUOTE elements mark up inline and block quotations, respectively
[Other markup]
- 3.1 When an appropriate markup language exists, use markup rather than images to convey information. [Priority 2]
- [Use] markup (and style sheets) where possible rather than images
- [Use CITE, DEFN, CODE, SAMP, KBD, VAR, INS, DEL where appropriate]
Lists
[Usage]
- 3.6 Mark up lists and list items properly. [Priority 2]
- The HTML list elements DL, UL, and OL should only be used to create lists, not for formatting effects such
as indentation.
- Until user agents provide a means to identify list context clearly (e.g., by supporting the ':before'
pseudo-element in CSS2), content developers should include contextual clues in their lists.
- For numbered lists, compound numbers are more informative than simple numbers.
- Until either CSS2 is widely supported or user agents allow users to control rendering of lists through other
means, authors should consider providing contextual clues in unnumbered nested lists.
- To change the "bullet" style of unordered list items created with the LI element, use style sheets
- Provide a text label before or after the list item phrase
- 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content).
[...]. [Priority 1]
- Avoid using images as bullets in definition lists created with DL, DT, and DD. However, if this method is
used, be sure to provide a text equivalent for the images.
- Avoid list styles where bullets provide additional (visual) information. However, if this is done, be sure
to provide a text equivalent describing meaning of the bullet
Tables
Providing summary information
- 5.5 Provide summaries for tables. [Priority 3]
- 5.6 Provide abbreviations for header labels. [Priority 3]
- Provide a caption via the CAPTION element.
- If a CAPTION is not provided, 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.
Identifying row and column information
- 5.1 For data tables, identify row and column headers. [Priority 1]
- 5.2 For data tables that have two or more logical levels of row or column headers, use markup to associate data
cells and header cells. [Priority 1]
- 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
- Do not use PRE to create a tabular layout of text -- use the TABLE element
Tables for layout
- 5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make
sense, provide an alternative equivalent (which may be a linearized version). [Priority 2]
- 5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting. [Priority
2]
- use style sheets for layout and positioning.
- when it is necessary to use a table for layout, the table must linearize in a readable order
- do not use structural markup to create visual formatting.
Linearizing tables
- 10.3 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. [Priority 3]
- specify the column layout order [using dir="ltr", or whatever]
Links
Link text
- 13.1 Clearly identify the target of each link. [Priority 2]
- Good link text should not be overly general; don't use "click here."
- In addition to clear link text, content developers may specify a value of the "title" attribute that clearly
and accurately describes the target of the link
- If more than one link on a page shares the same link text, all those links should point to the same
resource
- If two or more links refer to different targets but share the same link text, distinguish the links by
specifying a different value for the "title" attribute of each A element
- for a series of related links, include introductory information in the first link, then distinguishing
information in the links that follow
Text for images used for links
- 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content).
- When an image is used as the content of a link, specify a text equivalent for the image.
- Or, if you provide link text, use a space as the "alt" attribute value of the IMG element. Note that this
text will appear on the page next to the image.
Grouping & bypassing links
- 13.6 Group related links, identify the group (for user agents), and, until user agents do so, provide a way to
bypass the group. [Priority 3]
- 10.5 Until user agents (including assistive technologies) render adjacent links distinctly, include non-link,
printable characters (surrounded by spaces) between adjacent links. [Priority 3]
- When links are grouped into logical sets (for example, in a navigation bar that appears on every page in a
site) they should be marked up as a unit.
- Include a link that allows users to skip over the set of navigation links.
- 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.
Keyboard access
- 9.4 Create a logical tab order through links, form controls, and objects. [Priority 3]
- 9.5 Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and
groups of form controls. [Priority 3]
- specify keyboard shortcuts in documents via the "accesskey" attribute
- Until user agents provide an overview of which key bindings are available, provide information on the key
bindings
Anchors & targets
- 10.1 Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and
do not change the current window without informing the user. [Priority 2]
Images & image maps
'Alt' text
- 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content).
- When using IMG, specify a short text equivalent with the "alt" attribute.
- When using OBJECT, specify a text equivalent in the body of the OBJECT element
Long descriptions of images
- 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content).
- When a short text equivalent does not suffice to adequately convey the function or role of an image, provide
additional information in a file designated by the "longdesc" attribute
- For user agents that don't support "longdesc", provide a description link as well next to the graphic
- When using OBJECT, specify longer text equivalent within the element's content
- provide a link to additional information from within the OBJECT element:
Invisible d-links
- Invisible d-links are deprecated in favor of the "longdesc" attribute.
ASCII art
- 13.10 Provide a means to skip over multi-line ASCII art. [Priority 3]
- Avoid ASCII art (character illustrations) and use real images instead since it is easier to supply a text
equivalent for images
- if ASCII art must be used provide a link to jump over the ASCII art
- Another option for smaller ascii art is to use an ABBR element with "title".
- If the ASCII art is complex, ensure that the text equivalent adequately describes it.
- Another way to replace ASCII art is to use human language substitutes. For example, <wink>
Client-side image maps: text equivalents
- 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content).
- Provide text equivalents for image maps since they convey visual information
- the link text should make sense when read out of context
- Users may also want keyboard shortcuts to access frequently followed links
- If AREA is used to create the map, use the "alt" attribute
Client-side image maps: redundant text links
- 1.5 Until user agents render text equivalents for client-side image map links, provide redundant text links for each
active region of a client-side image map. [Priority 3]
- In addition to providing a text equivalent, provide redundant textual links
- If the A element is used instead of AREA, the content developer may describe the active regions and provide
redundant links at the same time
- [Make] the MAP element [...] the content of the OBJECT element
- [separate] links [...] by brackets ([]).
- make sure they include printable characters (such as brackets or a vertical bar (|)) surrounded by spaces
between adjacent text links
Server-side image maps
- 9.1 Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with
an available geometric shape. [Priority 1]
- 1.2 Provide redundant text links for each active region of a server-side image map. [Priority 1]
- Include the alternative links within the body of an OBJECT element (refer to the previous example
illustrating links in the OBJECT element)
- If IMG is used to insert the image, provide an alternative list of links after it and indicate the existence
and location of the alternative list (e.g., via that "alt" attribute).
- If other approaches don't make the image map accessible, create an alternative page that is accessible
Colour in images
- 2.2 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. [Priority 2 for images, Priority 3 for text].
Animated images
- 7.3 Until user agents allow users to freeze moving content, avoid movement in pages. [Priority 2]
Applets and other programmatic objects
Text and non-text equivalents for applets and programmatic objects
- 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content).
[Priority 1]
- 6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes. [Priority 1]
- 6.3 Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not
supported. If this is not possible, provide equivalent information on an alternative accessible page. [Priority 1]
- If OBJECT is used, provide a text equivalent in the content of the element
- take[] advantage of the fact the OBJECT elements may be embedded to provide for alternative representations
of information
- If APPLET is used, provide a text equivalent with the "alt" attribute and in the content in the APPLET
element
Directly accessible applets
- 8.1 Make programmatic elements such as scripts and applets directly accessible or compatible with assistive
technologies [Priority 1 if functionality is important and not presented elsewhere, otherwise Priority 2.]
- If an applet creates motion, developers should provide a mechanism for freezing this motion
- 3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values.
[Priority 2]
- 6.4 For scripts and applets, ensure that event handlers are input device-independent. [Priority 2]
- 6.5 Ensure that dynamic content is accessible or provide an alternative presentation or page. [Priority 2]
- 7.1 Until user agents allow users to control flickering, avoid causing the screen to flicker. [Priority 1]
- 7.2 Until user agents allow users to control blinking, avoid causing content to blink (i.e., change presentation at
a regular rate, such as turning on and off). [Priority 2]
- 7.3 Until user agents allow users to freeze moving content, avoid movement in pages. [Priority 2]
- 7.4 Until user agents provide the ability to stop the refresh, do not create periodically auto-refreshing pages.
[Priority 2]
- 9.2 Ensure that any element that has its own interface can be operated in a device-independent manner. [Priority
2]
- 10.1 Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and
do not change the current window without informing the user. [Priority 2]
- 1.4 For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives
(e.g., captions or auditory descriptions of the visual track) with the presentation. [Priority 1]
Audio and video
Text equivalents for multimedia
- 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content).
Embedding multimedia objects
- Other objects, such as those requiring a plug-in, should also use the OBJECT element. However, for backward compatibility with Netscape
browsers, use the proprietary EMBED element within the OBJECT element
Forms
Keyboard access to forms
- 9.4 Create a logical tab order through links, form controls, and objects. [Priority 3]
- 9.5 Provide keyboard shortcuts to important links (including those in client-side image maps), form controls, and
groups of form controls. [Priority 3]
Grouping form controls
- 12.3 Divide large blocks of information into more manageable groups where natural and appropriate. [Priority 2]
- When form controls can be grouped into logical units, use the FIELDSET element and label those units with
the LEGEND element
- For long lists of menu selections (which may be difficult to track), content developers should group SELECT
items (defined by OPTION) into a hierarchy using the OPTGROUP element
Labeling form controls
- 12.4 Associate labels explicitly with their controls. [Priority 2]
- 10.2 Until user agents support explicit associations between labels and form controls, for all form controls with
implicitly associated labels, ensure that the label is properly positioned. [Priority 2]
- [Use the LABEL element to associate label text with its form control]
Graphical buttons
- 1.1 Provide a text equivalent for every non-text element [..]
- Use multiple submit buttons (each with its own image) in place of a single graphical submit button. Authors
may use style sheets to control the positioning of these buttons.
- Use a client-side image map together with scripting
Techniques for specific controls
- 10.4 Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and
text areas. [Priority 3]
- Some legacy assistive technologies require initial text in form controls such as TEXTAREA in order to
function properly
- Provide a text equivalent for images used as "submit" buttons
Scripts
Graceful transformation of scripts
- 6.5 Ensure that dynamic content is accessible or provide an alternative presentation or page. [Priority 2]
- ensure that pages are accessible with scripts turned off or in browsers that don't support scripts
- Avoid creating content on the fly on the client [...] However, this is different than displaying or hiding
already existing content by using a combination of style sheets and scripting; if there is no script, then the content is always shown. This also
does not rule out generating pages on the fly on the server-side and delivering them to the client
- Avoid creating links that use "javascript" as the URI.
Scripts that cause flickering
- 7.1 Until user agents allow users to control flickering, avoid causing the screen to flicker. [Priority 1]
Scripts that cause movement and blinking
- 7.2 Until user agents allow users to control blinking, avoid causing content to blink (i.e., change presentation at
a regular rate, such as turning on and off). [Priority 2]
- 7.3 Until user agents allow users to freeze moving content, avoid movement in pages. [Priority 2]
Directly accessible scripts
- 6.4 For scripts and applets, ensure that event handlers are input device-independent. [Priority 2]
- 6.3 Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not
supported. If this is not possible, provide equivalent information on an alternative accessible page. [Priority 1]
- 8.1 Make programmatic elements such as scripts and applets directly accessible or compatible with assistive
technologies [Priority 1 if functionality is important and not presented elsewhere, otherwise Priority 2.]
- 9.3 For scripts, specify logical event handlers rather than device-dependent event handlers. [Priority 2]
- Use application-level event triggers rather than user interaction-level triggers
- Otherwise, if you must use device-dependent attributes, provide redundant input mechanisms (i.e., specify
two handlers for the same element
- Do not write event handlers that rely on mouse coordinates since this prevents device-independent input
Alternative presentation of scripts
- 1.1 Provide a text equivalent for every non-text element [...]
- 6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes. [Priority 1]
- One way to accomplish this is with the NOSCRIPT element
Page updates and new windows
- 7.4 Until user agents provide the ability to stop the refresh, do not create periodically auto-refreshing pages.
[Priority 2]
- 7.5 Until user agents provide the ability to stop auto-redirect, do not use markup to redirect pages automatically.
Instead, configure the server to perform redirects. [Priority 2]
- 10.1 Until user agents allow users to turn off spawned windows, do not cause pop-ups or other windows to appear and
do not change the current window without informing the user. [Priority 2]