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
Marking up content for language
Other markup in the
- Provide the definitions of words or phrases by presenting them in a definition list (
dl), preferably in alphabetical order. The term goes in the
dtand the definition in the
titleattribute can be used to provide additional information about a
- Use the
dfnelement 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
linkelement with the
relattribute set to "glossary" to link to it.
Emphasized or special text
Helping with pronunciation
- Provide link text that describes the purpose of a link, or
alttext 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
titleattribute 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
altattribute. However, if the images convey information beyond the purpose of the link, they must also have appropriate
- Tell the user if any information they should know before following a link.
- If you use a
targetattribute, 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
tabindexattribute 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.
- When logical relationships exist among text, numbers, images, or other data in two dimensions (vertical and horizontal), use the
tableelement with the child elements
tdmake these relationships perceivable. Do not use tabs to create tables.
- For tables with a complex structure, use the
summaryattribute of the
tableelement to give a brief explanation of how to navigate the table, or how the table is organized.
- Where a table needs a heading or title, use a
- If both are used, the
captionelement should not duplicate information in the
summaryattribute. The caption identifies the table, whereas the summary describes the purpose or how to navigate the table.
captionelements are not used for layout tables.
Linking to header cells
Describing form controls
inputelements of type
image(used as submit buttons), use the
altattribute of the
inputelement to indicate the button's function, but do not attempt to describe the image.
- Only use the
altattribute on image submit buttons, and not on any other type of
labelelements to associate text labels with form controls for
inputelements of type
- Provide a description for groups of form controls using
legendelements (but avoid nesting fieldsets unnecessarily) – particularly for radio buttons and check boxes.
legendelements are not required where the individual label associated with each particular control provides a sufficient description.
- Use the
titleattribute to provide context-sensitive help for form fields.
- To indicate required form controls, use the
legendelements 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
abbrelement, so that it can be styled larger and given an explanation in a
Changing user context
imgelements to specify a short text alternative.
imgelements for images that assistive technology should ignore. Don't just omit the
- 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
Frames and iframes
- As frames are often problematic for assistive technology, use other techniques where you can.
- Use the
iframeelements to describe the contents of each frame.
- If the document uses frames, use
frameelements to group blocks of repeated material. (But don't introduce frames to do this!)
- Provide a text alternative in the content of the
- When the default tab order does not suffice, provide a logical tab order using the
- Use the body of the
objectelement to provide a complete text alternative for the object or for additional non-text content with text alternatives.
Creating a logical tab order
- 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
refreshto create an instant client-side redirect. The
contentattribute should be set to 0, and the page that redirects should only contain information related to the redirect.