Mapping of "HTML Techniques for WCAG 1.0" to "HTML Techniques for WCAG 2.0"

Prepared by David MacDonald of E-Ramp Inc.

Preliminary summary of differences

HTML Techniques for Web Content Accessibility Guidelines 2.0

Corresponding HTML Techniques for Web Content Accessibility Guidelines 1.0

1 Uncategorized techniques

  

1.2 Meta redirect

Task:

Avoid using meta http-equiv of "refresh; url=... "to automatically redirect users.

 

 1.1.3 The META element

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

 

1.3 Meta refresh

Task:

Avoid using meta http-equiv of "refresh" to periodically refresh pages.

1.1.3 The META element

Checkpoints in this section:

  • 7.4 Until user agents provide the ability to stop the refresh, do not create periodically auto-refreshing pages. [Priority 2] ,
 

2 Metadata

1.1 Metadata

Checkpoints in this section:

  • 13.2 Provide metadata to add semantic information to pages and sites. [Priority 2]

 

2.1 The title element.

Task:

Use the title element to describe the document.

1.1.1 TITLE: The document title.

 

2.2 The address element

Task:

Use the address element to define a page's author.

1.1.2 The ADDRESS element

This element can be used to provide information about the creator of the page.

 

2.3 The !doctype statement

Task:

Use the !doctype statement to define the HTML or XHTML version of your document.

1.1.4 The !DOCTYPE statement

Checkpoints in this section:

  • 3.2 Create documents that validate to published formal grammars. [Priority 2]

 
Use the link element to describe the structure of your document.

1.1.5 The LINK element and navigation tools

Checkpoints in this section:

  • 13.9 Provide information about document collections (i.e., documents comprising multiple pages.). [Priority 3]

 
Use the link element to refer to accessible alternative documents.

1.1.6 The LINK element and alternative documents

Checkpoints in this section:

  • 6.5 Ensure that dynamic content is accessible or provide an alternative presentation or page. [Priority 2]

3.0 Structural Grouping

1.2 Structural grouping

Checkpoints in this section:

  • 12.3 Divide large blocks of information into more manageable groups where natural and appropriate. [Priority 2]

 

3.1 Section headings

Task:

Use HTML header elements h1 through h6, in order, to define the structure of the document.

 

1.2.1 Section headings

Checkpoints in this section:

  • 3.5 Use header elements to convey document structure and use them according to specification. [Priority 2]

 

3.2 Style headers

Task:

Use CSS, not HTML header elements, to create font effects.

 None

4 Language

2 Language information

4.1 Identifying changes in language

Task:

Use the lang attribute to identify the natural language used in a document.

2.1 Identifying changes in language

Checkpoints in this section:

  • 4.1 Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions). [Priority 1]

 

4.2 Identifying the primary language

Task:

Use the lang attribute of the html element to define the document's language.

2.2 Identifying the primary language

Checkpoints in this section:

  • 4.3 Identify the primary natural language of a document. [Priority 3]

 

5 Text Markup

3 Text markup

5.1 Emphasis

Task:

Use the strong and em elements, rather than b and i, to denote emphasis.

3.1 Emphasis

Checkpoints in this section:

  • 3.3 Use style sheets to control layout and presentation. [Priority 2]

5.2 Abbreviations

Task:

Use the abbr element to expand abbreviations where they first occur.

3.2 Acronyms and abbreviations

Checkpoints in this section:

  • 4.2 Specify the expansion of each abbreviation or acronym in a document where it first occurs. [Priority 3]

 

5.3 Acronym

Task:

Use the acronym element to expand acronyms where they first occur.

 above

5.4 Short Quotations (future)

Task:

Use the q element to mark up short inline quotations.

3.3 Quotations

Checkpoints in this section:

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

5.5 Long Quotations

Task:

Use the blockquote element to mark up block quotations.

 above

5.6 Misuse of blockquote

Task:

DO NOT use the blockquote element for formatting effects such as indentation.

3.3 Quotations

Checkpoints in this section:

  • 3.7 Mark up quotations. Do not use quotation markup for formatting effects such as indentation. [Priority 2]
 

5.7 Markup and style sheets rather than images: The example of math

Task:

Wherever possible, use markup rather than images to convey information.

3.4 Markup and style sheets rather than images: The example of math

Checkpoints in this section:

  • 3.1 When an appropriate markup language exists, use markup rather than images to convey information. [Priority 2]

5.8 Eight other structural elements (to identify citations, code fragments, deleted text, and others)

Task:

Use structural elements as needed.

The HTML 4.01 specification defines the following structural elements for miscellaneous markup needs:

cite
Contains a citation or a reference to other sources.
dfn
Indicates that this is the defining instance of the enclosed term.
code
Designates a fragment of computer code.
samp
Designates sample output from programs, scripts, etc.
kbd
Indicates text to be entered by the user.
var
Indicates an instance of a variable or program argument.
ins
Indicates text inserted into a document.
del
Indicates text deleted from a document.

 

3.5 Eight other structural elements (to identify citations, code fragments, deleted text, and others)

The HTML 4.01 specification defines the following structural elements for miscellaneous markup needs:

CITE
Contains a citation or a reference to other sources.
DFN
Indicates that this is the defining instance of the enclosed term.
CODE
Designates a fragment of computer code.
SAMP
Designates sample output from programs, scripts, etc.
KBD
Indicates text to be entered by the user.
VAR
Indicates an instance of a variable or program argument.
INS
Indicates text inserted into a document.
DEL
Indicates text deleted from a document.
 

6 Lists

 

4 Lists

6.1 Ordered lists

Task:

Format ordered lists so their items can be followed logically.

 4 Lists

Ordered lists help non-visual users navigate.

6.2 Use style sheets to change list bullets

Task:

Use CSS, not images, to change list bullets.

4.1 Use style sheets to change list bullets

To change the "bullet" style of unordered list items created with the LI element, use style sheets. In CSS, it is possible to specify a fallback bullet style (e.g., 'disc') if a bullet image cannot be loaded.

 

7 Data Tables

5 Tables

 

7.1 The caption element

Task:

Use the caption element to describe the nature of data tables. (optional)

5.1.1 Providing summary information

Checkpoints in this section:

  • 5.5 Provide summaries for tables. [Priority 3]
  • 5.6 Provide abbreviations for header labels. [Priority 3]
  • Provide a caption via the CAPTION element. A table caption describes the nature of the table in one to three sentences.

 

7.2 The title attribute on the table element

Task:

Use the title attribute to provide additional descriptive information. (optional. summary or caption are preferred)

 5.1.1

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.

 

7.3 Summarizing tables

Task:

Use the summary attribute to describe the purpose and structure of tables. (optional)

 5.1.1

Provide a summary via the "summary" attribute. Summaries are especially useful for non-visual readers. A summary of the relationships among cells is especially important for tables with nested headings, cells that span multiple columns or rows, or other relationships that may not be obvious from analyzing the structure of the table but that may be apparent in a visual rendering of the table. A summary may also describe how the table fits into the context of the current document. If no caption is provided, it is even more critical to provide a summary.

7.4 Terse substitutes for header labels

Task:

Use the abbr attribute on th elements to provide terse substitutes for header labels. (optional)

 5.1.1

Provide terse substitutes for header labels with the "abbr" attribute on TH. These will be particularly useful for future speaking technologies that can read row and column labels for each cell. Abbreviations cut down on repetition and reading time.
 

7.5 Identifying groups of rows

Task:

Use thead to group repeated table headers, tfoot for repeated table footers, and tbody for other groups of rows. (optional)

5.1.2 Identifying rows and column information

Checkpoints in this section:

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

7.6 Identifying groups of columns

Task:

Use the colgroup and col elements to group columns. (optional)

5.1.2 Identifying rows and column information

Checkpoints in this section:

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

7.7 Specifying the set of data cells for which each header cell provides header information.

Task:

Use the scope attribute to specify the set of data cells for which each header cell provides header information.

5.1.2 Identifying rows and column information

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.

 

7.8 Associating header cells with data cells.

Task:

Use the headers attribute on each data cell to associate a list of header cells that provide header information.

 5.1.2 Identifying rows and column information

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.

7.9 Categorizing data cells.

Task:

Use the axis attribute to place a cell into a conceptual category.

 5.1.2 Identifying rows and column information

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.

7.10 Misuse of the pre element.

Task:

Do not use the pre element to create tabular layout.

 5.1.2 Identifying rows and column information
  • Do not use PRE to create a tabular layout of text -- use the TABLE element so that assistive technologies may recognize that it is a table.

 

7.11 Row and column headings.

Task:

Use the th element to indicate which cells contain header information. (only applies to data tables)

 5.1.2 Identifying rows and column information

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.

 

8 Tables for Layout

 5.2 Tables for layout

8.1 Table elements allowed in layout tables

Task:

Only use the td, table, and trelements and the border, cellspacing, and cellpadding attributes in layout tables. Do not use th, tbody, caption, colgroup, tfoot, and thead in layout tables.

 5.2 Tables for layout

Also, when using tables to create a layout, do not use structural markup to create visual formatting. For example, the TH (table header) element, is usually displayed visually as centered, and bold. If a cell is not actually a header for a row or column of data, use style sheets or formatting attributes of the element.

 

8.2 Summaries of layout tables

Task:

If the summary is used on a layout tables, the value must be null (summary="")

 None

8.3 Linear reading order of tables

Task:

Create a logical reading order of cells in layout tables.

5.3 Linearizing tables

Checkpoints in this section:

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

9 Links

6 Links

 

9.1 Supplement link text with the title attribute.

Task:

Where appropriate, use the title attribute of the a element to clarify links.

6.1 Link text

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.

Use text equivalents for images which are used as links.

6.1.1 Text for images used as links

When an image is used as the content of a link, specify a text equivalent for the image.

Combine adjacent image and text links that point to the same resource.

6.1.1 Text for images used as links

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.

 

9.4 Link Groups

Task:

Group links structurally and identify the group with the title attribute.

6.2 Grouping and bypassing links

Checkpoints in this section:

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]

.....

 

Use the HTML 4.01 MAP element to group links, then identify the group with the "title" attribute.

 

 

9.5 tabindex to skip link groups (future)

Task:

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.

 None

9.6 Skipping Link Groups

Task:

Include a link that allows users to skip over grouped links.

6.2 Grouping and bypassing links

Include a link that allows users to skip over the set of navigation links.

 

9.7 Hide link groups

Task:

Provide a style sheet that allows users to hide the set of navigation links.

 none

9.8 Keyboard access

Task:

Use the accesskey attribute of navigational elements to allow rapid keyboard access.

6.3 Keyboard access

HTML 4.01 allows content developers to specify keyboard shortcuts in documents via the "accesskey" attribute.

Do not cause pop-ups or other windows to appear and do not change the current window without informing the user.

6.4 Anchors and targets

Checkpoints in this section:

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

9.10 Using FRAME targets (deprecated)

Task:

Do not cause pop-ups or other windows to appear and do not change the current window without informing the user.

10.5 Using FRAME targets

Checkpoints in this section:

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

Content developers should avoid specifying a new window as the target of a frame with target="_blank".

10 Images

This section discusses accessibility of images (including simple animations such as GIF animations) and image maps.

For information about math represented as images, refer to the section on using text markup and style sheets rather than images.

 7 Images and image maps

10.1 Short text equivalents for img elements ("alt-text")

Note 10.1 has a typo and an empty bullet

Task:

Use the alt attribute of the img element to provide a text equivalent for images.

7.1 Short text equivalents for images ("alt-text")

Checkpoints in this section:

1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. [Priority 1] .

7.6 Animated images

Checkpoints in this section:

  • 7.3 Until user agents allow users to freeze moving content, avoid movement in pages. [Priority 2]
 

10.2 Image titles

Task:

Do not use the title attribute on images.

 none

10.3 Short text equivalents for object elements ("alt-text")

Task:

Use the body of the object element to provide a text equivalent for image objects.

7.1 Short text equivalents for images ("alt-text")

Not an exact match

Checkpoints in this section:

1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ...

...Note that OBJECT content, unlike "alt" text, can include markup. Thus, content developers can provide a link to additional information from within the OBJECT element:

10.4 Long descriptions of images

Task:

For images using the img element, describe detailed information in a separate file, and use the longdesc attribute to direct users to that file.

7.2 Long descriptions of images

Checkpoints in this section:

1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. [Priority 1]

 

10.5 Long description of objects

Task:

For images using the object element, describe detailed information in the body of the tag, providing links to other content where appropriate.

7.2 Long descriptions of images

When using OBJECT, specify a text equivalent in the body of the OBJECT element:.....

Note that OBJECT content, unlike "alt" text, can include markup. Thus, content developers can provide a link to additional information from within the OBJECT element:
For user agents that don't support longdesc, provide a description link as well next to the graphic.

7.2.1 Invisible d-links

Note. Invisible d-links are deprecated in favor of the "longdesc" attribute.

An invisible d-link is a small (1-pixel) or transparent image whose "alt" attribute value is "D-link" or "D" and is part of the content of an A element. Like other d-links, it refers to a text equivalent of the associated image. Like other links, users can tab to it. Invisible d-links thus provide a (temporary) solution for designers who wish to avoid visible d-links for stylistic reasons.

10.7 Describe images without longdesc

Task:

Describe images in document text as needed.

 none

10.8 ASCII art

Task:

Provide a means to skip over multi-line ASCII art.

Note:

Avoid ASCII art (character illustrations) and use real images instead since it is easier to supply a text equivalent for images. However, if ASCII art must be used provide a link to jump over the ASCII art.

If the ASCII art is complex, ensure that the text equivalent adequately describes it.

7.3 Ascii art

Checkpoints in this section:

  • 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. However, if ASCII art must be used provide a link to jump over the ASCII art, as follows...

10.9 Emoticons

Task:

Use emoticons and other ASCII symbols judiciously.

Note:

Another way to replace ASCII art is to use human language substitutes. For example, <wink>might substitute for a winking smiley: ;-). Or, the word "therefore" can replace arrows consisting of dashes and greater than signs (e.g., -->), and the word "great" for the uncommon abbreviation "gr8".
 None

11 Image Maps

7.4 Image maps

11.1 Use Client Side Image Map

Task:

Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

 

7.4 Image maps

Content developers should create client-side image maps (with "usemap") rather than server-side image maps (with "ismap") because server-side image maps require a specific input device. If server-side image maps must be used (e.g., because the geometry of a region cannot be represented with values of the shape attribute), authors must provide the same functionality or information in an alternative accessible format...

7.4.3 Client-side versus server-side image maps

Checkpoints in this section:

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

 

Provide redundant text links for each active region of a server-side image map.

7.4. Image maps

...One way to achieve this is to provide a textual link for each active region so that each link is navigable with the keyboard. If you must use a server-side image map, please consult the section on server-side image maps

7.4.4 Server-side image maps

Checkpoints in this section:

  • 1.2 Provide redundant text links for each active region of a server-side image map. [Priority 1]

Provide redundant text links for each active region of a client-side image map.

7.4.1 Text equivalents for client-side image maps

For all image maps, content developers must supply a text equivalent.

11.4 Provide alt for area.

Task:

Provide alternative text for the area element.

7.4.1 Text equivalents for client-side image maps

Checkpoints in this section:

  • 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions,
 

12 Programmatic objects and applets

The object element in HTML allows authors to embed programmatic code written in other languages, such as Java or Macromedia Flash. However, not all user agents are able to process these objects. Many users of assistive technologies are not able to access the content in programmatic objects. This section explains how to ensure that the content you provide is accessible to those users.

 

8 Applets and other programmatic objects

8.2 Directly accessible applets

Checkpoints in this section:

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


 

12.1 Text and non-text equivalents for applets and programmatic objects

Task:

Provide a text equivalent inside the object element.

 8.1 Text and non-text equivalents for applets and programmatic objects

Checkpoints in this section:

1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: ...applets and programmatic objects,

12.2 Alt content for embed

Task:

Provide alternative content for embed with noembed.

9.3 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 as follows: ....(example shows "noembed" element

12.3 Alt text for embed

Task:

Provide alt for embed.

9.2 Text equivalents for multimedia

Checkpoints in this section:

  • 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes:...applets and programmatic objects,

12.4 Embedding multimedia objects

Task:

Use the embed element within the object element for backward compatibility.

9.3 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 as follows: ....(example shows "noembed" element

13 Frames

10 Frames

13.1 Providing a frame title

Task:

Use the title attribute of the frame element.

10.1 Providing a frame title

Checkpoints in this section:

12.1 Title each frame to facilitate frame identification and navigation. [Priority 1]

13.2 Describing frame relationships (deprecated)

Task:

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.

10.2 Describing frame relationships

12.2 Describe the purpose of frames and how frames relate to each other if it is not obvious by frame titles alone. [Priority 2]

 

13.3 Writing for browsers that do not support FRAME

Task:

Use the noframes element to support user agents that don't support frames.

10.3 Writing for browsers that do not support FRAME

In this example, if the user reads "top.html":...and the user agent is not displaying frames, the user will have access (via a link) to a non-frames version of the same information.

13.4 Frame sources

Task:

Use only HTML documents as frame sources.

10.4 Frame sources

Checkpoints in this section:

6.2 Ensure that equivalents for dynamic content are updated when the dynamic content changes. [Priority 1]

...Thus, content developers should always make the source ("src") of a frame an HTML file.

Links to frames that load inaccessible formats are sufficiently descriptive.

 10.2 Describing frame relationships

Also, links to descriptions of a frame should be provided along with other alternative content in the NOFRAMES element of a FRAMESET.

 

13.6 Alternative content for iframe

Task:

Provide accessible alternative content for the iframe element

10 Frames

Frames as implemented today (with the FRAMESET, FRAME, and IFRAME elements) are problematic for several reasons:

 

13.7 Longdesc for iframe

Task:

Don't use longdesc on iframe.

 none

14 Forms

11 Forms

14.1 Tab order in forms

Task:

Create a logical tab order through links, form controls, and objects.

11.1 Keyboard access to forms

Checkpoints in this section:

9.4 Create a logical tab order through links, form controls, and objects. [Priority 3]

14.2 Grouping form controls

Task:

Use the fieldset and legend elements in HTML 4 to group form controls logically.

11.2 Grouping form controls

Checkpoints in this section:

  • 12.3 Divide large blocks of information into more manageable groups where natural and appropriate. [Priority 2]

Content developers should group information where natural and appropriate. When form controls can be grouped into logical units, use the FIELDSET element and label those units with the LEGEND element:

 

14.3 Grouping options of select elements

Task:

Use the optgroup to group options logically under the select element.

11.2.1 Grouping menu options

Content developers should group information where natural and appropriate. 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. Specifies a label for the group of options with the label attribute on OPTGROUP.

 

14.4 Labeling form controls

Task:

Use the label element to associate form elements with their labels.

11.3 Labeling form controls

Checkpoints in this section:

12.4 Associate labels explicitly with their controls. [Priority 2]

14.5 Place-holding characters in empty controls (deprecated)

Task:

Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas.

11.5 Techniques for specific controls

Checkpoints in this section:

  • 10.4 Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas. [Priority 3]
 

14.6 Text equivalents for submit buttons

Task:

Provide a text equivalent for images used as "submit" buttons.

11.4 Graphical buttons

Using images to decorate buttons allows developers to make their forms unique and easier to understand. Using an image for a button (e.g., with the INPUT element or BUTTON) is not inherently inaccessible - assuming a text equivalent is provided for the image.