WCAG Techniques finder

This page provides succinct guidelines derived from the Techniques of WCAG 2.0, organised by theme to make it easier to find information. Each guideline links to further information that explains the rationale or techniques in more detail.

This is not an official W3C article, just something that I put together for my own benefit. It is far from complete: it only points to those techniques listed under HTML/XHTML. One day I may integrate i18n recommendations too, so that when you are authoring HTML+CSS you can quickly find suggestions about what to consider for both accessibility and internationalization.

The top-level organization is based on the structure of the HTML5 spec. You are not expected to read this end-to-end, rather to dip in as needed, so guidelines are repeated in all useful places.

The root element and global attributes

The html element

• Use the lang and/or xml:lang attribute on the html element.

Marking up content for language

• Use the lang and/or xml:lang attribute on the html element.
• Use lang and/or xml:lang attributes to identify changes in the human language.

Bidirectional text

• Use the dir attribute on inline elements to resolve problems with nested directional runs.
• Use Unicode right-to-left marks and left-to-right marks to override the HTML bidirectional algorithm when it produces undesirable results.

The id attribute

• Ensure that id attributes are unique on a Web page.

document metadata

The title element

• Define the purpose of the document in a simple phrase in the title element.

Other markup in the head element

• Use the link element to link to related pages.
• When terms in the content are defined on a separate glossary page, use the link element with the rel attribute set to "glossary" to link to it.

Sections

Headings

• Provide headings at the beginning of each section of content.
• Use h1 to h6 to identify headings.
• Nest headings hierarchically.

Grouping content

Defining terms

• Provide the definitions of words or phrases by presenting them in a definition list (dl), preferably in alphabetical order. The term goes in the dt and the definition in the dd elements.
• A title attribute can be used to provide additional information about a dl list.
• Use the dfn element to identify the defining instance of a word (the term, not the definition).
• When terms in the content are defined on a separate glossary page, use the link element with the rel attribute set to "glossary" to link to it.

Lists

• Use list markup for lists, and use the most appropriate type of markup from ol, ul and dl lists.

Inline content

Emphasized or special text

• Use semantic markup to mark emphasized or special text so that it can be programmatically determined. This includes the following elements: em, strong, cite, q, blockquote, sub, sup.

Bidirectional text

• Use the dir attribute on inline elements to resolve problems with nested directional runs.
• Use Unicode right-to-left marks and left-to-right marks to override the HTML bidirectional algorithm when it produces undesirable results.

Abbreviations

• Provide definitions for abbreviations, acronyms and initialisms using the abbr element.

Text clarity

• Provide text alternatives for ASCII art, emoticons, and leetspeak, and possibly a link to skip them.

Helping with pronunciation

• Use ruby annotation to provide information about the pronunciation and meaning of a run of text where meaning is determined by pronunciation.

Links

The a element

• Provide link text that describes the purpose of a link, or alt text if the only content is an image.
• If you can't indicate the purpose of, or clarify a link in the link text, use CSS to hide a portion of the text. Only use the title attribute if the browser can handle it for accessibility.
• When the content of a link contains both text and one or more images, if the text sufficiently describes the purpose of the link, the image(s) may have an empty alt attribute. However, if the images convey information beyond the purpose of the link, they must also have appropriate alt text.
• Tell the user if any information they should know before following a link.
• If you use a target attribute, tell the user that the link will open in a new window.
• If, and only if, the order of elements on a page doesn't provide a useful tab order, use the tabindex attribute to set a logical tab order through links, form controls, and objects.
• Use information in the surrounding paragraph to clarify the purpose of a link, preferably putting the revelant content before the link.

Grouping links

• Combine adjacent image and text link for the same resource, and provide null alt text on the image to eliminate duplication of text.
• Use contextual information provided by lists, tables, and headings to clarify the purpose of a link. [Second link]. [Third link]. [Fourth link].

Tables

Using tables

• When logical relationships exist among text, numbers, images, or other data in two dimensions (vertical and horizontal), use the table element with the child elements tr, th, and td make these relationships perceivable. Do not use tabs to create tables.
• For tables with a complex structure, use the summary attribute of the table element to give a brief explanation of how to navigate the table, or how the table is organized.

Captions

• Where a table needs a heading or title, use a caption element.
• If both are used, the caption element should not duplicate information in the summary attribute. The caption identifies the table, whereas the summary describes the purpose or how to navigate the table.
• caption elements are not used for layout tables.

Linking to header cells

• When data cells are associated with more than one row and/or one column header, use id and headers attributes to associate data cells with header cells.
• When header cells are not in the first column or row, or are not marked up using th, use the scope attribute to associate header and data cells.

Forms

Describing form controls

• For input elements of type image (used as submit buttons), use the alt attribute of the input element to indicate the button's function, but do not attempt to describe the image.
• Only use the alt attribute on image submit buttons, and not on any other type of input element.
• Use label elements to associate text labels with form controls for input elements of type text, checkbox, radio, file and password, and textarea and select elements.
• Provide a description for groups of form controls using fieldset and legend elements (but avoid nesting fieldsets unnecessarily) – particularly for radio buttons and check boxes.
• The fieldset and legend elements are not required where the individual label associated with each particular control provides a sufficient description.
• Use the title attribute to provide context-sensitive help for form fields.
• To indicate required form controls, use the label or legend elements or a symbol. If a symbol is used, the user should be advised of its meaning before use.
• If using an asterisk to indicate required form controls, consider putting it inside an abbr element, so that it can be styled larger and given an explanation in a title attribute.

Using tables

• When logical relationships exist among text, numbers, images, or other data in two dimensions (vertical and horizontal), use the table element with the child elements tr, th, and td make these relationships perceivable. Do not use tabs to create tables.

The select element

• Use a button to select an item from a select list, rather than making the action occur as a result of choosing a value.
• Use optgroup to group option elements inside a select.

Changing user context

• Provide a submit button as an explicit way to change the user's context .
• If, and only if, the order of elements on a page doesn't provide a useful tab order, use the tabindex attribute to set a logical tab order through links, form controls, and objects.

Embedded content

Images

• Use alt attributes on img elements to specify a short text alternative.
• Use alt="" and no title attribute on img elements for images that assistive technology should ignore. Don't just omit the alt attribute!
• The alt text should contain any words in the image that are important to understanding the content. Alt text does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.
• When a short alt text does not adequately convey the function or information provided in the image, use a longdesc attribute.

Image maps

• Use the alt attribute of the area element to describe the purpose of each image map area.

Frames and iframes

• As frames are often problematic for assistive technology, use other techniques where you can.
• Use the title attribute of frame and iframe elements to describe the contents of each frame.
• If the document uses frames, use frame elements to group blocks of repeated material. (But don't introduce frames to do this!)

The object element

• Provide a text alternative in the content of the object element.
• When the default tab order does not suffice, provide a logical tab order using the tabindex attribute.
• Use the body of the object element to provide a complete text alternative for the object or for additional non-text content with text alternatives.

The applet element

• Use both the alt attribute and provide a text alternative in the body of the applet element to provide a text alternative.

The embed element

• Provide alternative content for the embed element in a noembed element.
• While it can be positioned anywhere on the page, it is a good idea to include a noembed element as a child of embed.

Navigation

Creating a logical tab order

• If, and only if, the order of elements on a page doesn't provide a useful tab order, use the tabindex attribute to set a logical tab order through links, form controls, and objects.

Redirects

• Use a server-side redirect rather than a client-side one wherever possible.
• If it is not possible to use a server-side redirect, use meta with refresh to create an instant client-side redirect. The content attribute should be set to 0, and the page that redirects should only contain information related to the redirect.

Other

Clean code

• Ensure that opening and closing tags are used according to specification.
• Ensure that XML Web pages are well-formed.
• Use HTML according to spec.
• Ensure that id attributes are unique on a Web page.
• Ensure that elements do not contain duplicate attributes.