Understanding Web Content Accessibility Guidelines 1.0

The following post is a stripped down version of the full Web Content Accessibility Guidelines 1.0. Many a time I've tried to decipher what some of those points actually mean, so here I've stripped out all the rubbish and tried to distill them down to their basic components. Hopefully it will be as much of a help to you as it has been to me so far.

I've taken out points that I don't feel are that important. If you think I've taken something out that's really important, drop me a comment and I'll consider adding it in.

Please note that at certain points I'll have to go into a bit of detail to fully explain some guidelines. But first, let me explain some conventions I'll be using in the following post.

Each subheading under a guideline is provided in a list. Each subheading is assigned a colour, according to it's priority. The colours associated with each priority are as follows:

Priority 1 - A Web content developer must satisfy this checkpoint.
Priority 2 - A Web content developer should satisfy this checkpoint.
Priority 3 - A Web content developer may address this checkpoint.

Each level is also defined in brackets at the end of each point.

Guideline 1: Any content that isn't text needs a suitable text-only alternative

• This includes: images, animations (e.g., animated GIFs), graphical buttons, sounds (played with or without user interaction), stand-alone audio files, video. [Priority 1]

Guideline 2: Don't rely on colour alone

• All information that is displayed using colour should also be available without it. [Priority 1]
• Ensure that background colours and foreground images have at least 70% contrast between them. [Priority 2]
• Ensure that background colours and foreground text have at least 70% contrast between them. [Priority 3]

Guideline 3: Use markup and style sheets properly

• If a suitable feature exists, use it. Try not to convey text using images if a suitable feature exists within CSS. For example, if you need to make all text green, don't create an image to do it for you. [Priority 2]
• Include a DOCTYPE at the beginning of your document. [Priority 2]
• Use style sheets to control layout and presentation. [Priority 2]
• If it's possible, use relative units (like em) instead of absolute (like px). This is especially important with text. [Priority 2]
• Use headers properly. For example, use H2 to show a subsection of H1. Generally speaking, there should be one H1 on a page. [Priority 2]
• Use lists properly. For example, nest LI inside UL. [Priority 2]
• Use the Q and BLOCKQUOTE commands to mark up short and long quotes respectively. [Priority 2]

Guideline 4: Clarify Language Usage

• Specify the language of your XHTML document at the beginning. Use xml: lang="en-GB". [Priority 1]
• If acronyms or abbreviations are used, specify their meaning in the document. [Priority 3]

Guideline 5: Create tables that transform gracefully

• For data tables, identify row and column headers using TD and TH. [Priority 1]
• Do not use tables for layout. [Priority 2]

Guideline 6: Ensure pages still work when new technologies are turned off

• Organise documents so that they may be read without style sheets. [Priority 1]
• Ensure that text equivalents to any non-text elements are updated at the same time as their dynamic content. [Priority 1]
• Make sure that pages are still usable when scripts, applets or other programmatic objects are turned off or not supported. [Priority 1]

Guideline 7: Ensure that users can turn off moving content

• Avoid causing the screen to flicker or flash. [Priority 1]
• Avoid causing content to blink, or allow users to turn it off. [Priority 2]
• Avoid movement in pages. [Priority 2]
• Do not create auto-refreshing pages. [Priority 2]
• Do not use XHTML to create redirects. If they are needed, configure the server. [Priority 2]

Guideline 8: Ensure that user interfaces are accessible

• If an embedded object is used (such as a Flash movie) and it has a user interface, make sure it is accessible. Otherwise, provide an alternative accessible user interface. [Priority 1]

Guideline 9: Design for most devices

• Create a logical tab order through links, form controls and objects. [Priority 3]
• Ensure that any object that has it's own interface is device independent. [Priority 3]

Guideline 10: Use temporary solutions for the following issues

• Do not make content pop up in a new window without informing the user first. [Priority 2]
• Provide a linear text alternative that lays out textual information in a table. [Priority 3]
• Include default, place-holding characters in edit boxes and text areas. For example, in TEXT AREA and INPUT markup. [Priority 3]
• Include non-link, printable characters between adjacent links (this does not apply to links presented in a horizontal list). [Priority 3]

Guideline 11: Use CSS and XHTML where possible

• Use latest supported versions of CSS and XHTML where appropriate. [Priority 2]
• Avoid depreciated markup. [Priority 2]

Guideline 12: Provide context

• Use header tags correctly. For example, there should only be one page title (h1) and h3 should be a subset of h2. [Priority 2]
• Group form controls with FIELDSET and LEGEND where appropriate. [Priority 2]
• Use nested lists where appropriate. [Priority 2]

Guideline 13: Provide clear navigation

• Avoid using "click here" links - provide links that mean something out of context. [Priority 2]
• Use TITLE to provide clear information about a link. [Priority 2]
• Provide a site map to show information about the general layout of the site. [Priority 2]
• Use navigation consistently. [Priority 2]
• Place the most important information at the top of paragraphs, lists, headings, etc. [Priority 2]

Guideline 14: Ensure that documents are clear and simple

• Use graphics to supplement text if it helps with the understanding of the page. [Priority 3]
• Use the clearest and most simple language appropriate. [Priority 3]
• Create a consistent style of presentation. [Priority 3]

PLEASE NOTE: This list is not exhaustive. I've merely picked the most relevant parts of the WCAG 1.0 and explained a little bit about them. For more information go read the full Web Content Accessibility Guidelines.