This quick reference page provides information about the most commonly-used aspects of web accessibility. Read, apply the examples, and don't hesitate to ask for help if you need it.
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
Structural and semantic markup
Structural markup is used to define the overall structure of the document, not to provide visual emphasis.
- Headings (h1, h2, …)
- Tables (th, td)
- Lists (ol, ul, dl, li)
Semantic markup can be used to specify or provide emphasis to certain text but should be used sparingly.
- (em, strong, cite, blockquote)
Tables
Tables should only be used for tabular data, not page layout. Tables require proper coding for row headers and column headers.
| Use for | Do not use for | |
|---|---|---|
| Tables | Tabular data (like this) | Laying out the page |
| CSS stylesheets | Laying out the page | Tabular data layout |
Forms
Every form control needs a label associated with it. Here is a very simple form example:
-
<label for="search">Search:</label>
<input id="search" type="text" ...>
Page design
- Include alternative (alt) text for every image: alt text needs to replace the meaning of image accurately and succinctly.
- Use meaningful link text: The link text (the text that one clicks on to access a link) needs to briefly describe the content of the link, usually this is the title of the target page or similar text. Don't use “click here” or “read more”; these are meaningless without context.
- Don't open links in a new window. It breaks the back button and should only be used in special circumstances and with advanced warning.
- Colour:
- Don't rely on colour alone to convey information. Also include a visible indication.
- Colour contrast needs to be at least 4.5:1; use a contrast checking tool.
- Foreground (text) and background colours must provide enough contrast to allow colour blind users or those using a monochrome screen to view information.
- Waterloo Colour Palette for Accessibility
- Use HTML: Avoid having content available only as PDF, MS Word, Flash, etc.
- Audio/video: Provide transcripts of audio and captions of videos.
- Resize: Text needs to be resizable to 200% and still readable. People with low-vision will increase the text size to read it.
- Writing content: Use plain language. Avoid jargon and abbreviations. If abbreviations are used they need to
be expanded on first use on each page or landing point.
- Make skip links to jump over repeated content, such as navigation.
- Navigation: Site needs to be navigable with the keyboard alone. Users can use tab to move around the page.
- Ensure your site works without JavaScript.