Quick Reference
Web Accessibility Principles

Note

This resource is designed to be printed as a one page PDF file. An HTML version is also available below.

Provide appropriate alternative text

  • Every non-text element needs a text alternative (alt text) that describes its content and function.
  • Use the fewest number of words necessary.
  • Alt text should present the content and function of an image, not necessarily a description of an image.
  • If an image has no relevant content or function, then the image should contain empty alt text (alt="" inside the <img> tag). If you have described the content of an image with nearby text, the image should also have empty alt text.
  • Avoid words like "picture of" and "image of"…
  • An image that is a link (including image map hotspots) must always have alt text that describes the function of the link.

Make sure that content is well structured and clearly written

  • Use the simplest language appropriate for your content.
  • Organize your content using true headings and lists.
  • Use empty (white) space to improve readability.
  • Use illustrations to supplement text.
  • Check spelling and grammar.

Provide headers for data tables

  • For a data table with just one row or column of headers, use the <th> element and the scope attribute (e.g., <th scope="col”>Name</th> or <th scope ="row">Age</th>).
  • For a table with more than one level of headings, use the <th> element and id attribute for the headers and the headers attribute in each data cell (e.g. <th id="age"> Age</th> and <td headers="birth jackie age">5</td>

Ensure users can complete and submit all forms

  • Put labels adjacent to or near their controls, so the labels are associated visually.
  • Use the <label> element to associate labels and controls.
  • Group similar elements (such as checkboxes) together using the <fieldset> element.
  • Make sure that it is clear which form elements are required and which are optional. Don't make a field required if it is not necessary.
  • If there are errors in a form that has been submitted, alert the user in an accessible way (especially to a screen reader user), and make it easy to fix the incorrect information and resubmit the form.

Caption and/or provide transcripts for media

  • Videos and live audio must have captions and a transcript. A transcription may be sufficient for archived audio.
  • Captions should be synchronized, equivalent, and accessible.
  • There are five main steps to captioning a file for the web: Create or obtain a transcript, segment into individual caption displays and add speaker names, synchronize the text transcript with the media, create appropriate caption files (QTtext, RealText, SAMI), and combine with media and distribute the captioned media

Do not rely on color alone to convey meaning

  • The use of color can enhance comprehension, but do not use color alone to convey information. Be especially cautious of red/green color combinations and link text.
  • Make sure that color contrast is strong, especially between text and background. Design to standards

Design to standards

  • Use a tool like the W3C HTML validator (validator.w3.org) and CSS validator (jigsaw.w3.org/css-validator) to ensure that your document uses valid (X)HTML and CSS. A page that has clean HTML and CSS is more likely to be accessible.
  • There are also tools to help you check how well your site adheres to accessibility guidelines (like WCAG 1.0) or standards (like Section 508), such as WAVE (wave.webaim.org), WebXACT (webxact.watchfire.com), and Cynthia Says (cynthiasays.com).

Ensure accessibility of non-HTML content

  • HTML content will almost always be more accessible than content in any other format.
  • Non-HTML content (e.g. PDF, Microsoft Word and PowerPoint files, Adobe Flash) should be accessible, or an accessible alternative should be provided.
  • It is possible to create alt text for images, headings, lists and descriptive link text in Microsoft Word and OpenOffice.org Impress
  • PDF files are made accessible by adding tags.
  • PowerPoint files may be made relatively accessible as long as the user has Microsoft Office or the PowerPoint plugin,
  • Flash content can often be made keyboard accessible.
  • Test to ensure the accessibility of non-HTML content.

See also:

Related WebAIM Resources

WebAIM is an initiative of:
Center for Persons with Disabilities (CPD) Utah State University