W3C Accessibility Guidelines

Share this article

Accessibility can be thought of as “providing access regardless of the situation or circumstances.” In the context of the World Wide Web, accessibility is a measure of how easy it is to access, read, and understand the content of a Website.

Accessibility is complicated by the fact that a Website is not a published piece of work so much as a living document that can be interpreted in different ways by different browsers and on different platforms. The Web is not a print medium – although sites are most often read in a visual manner, there are many different ways a Web page can be experienced, such as via a speech browser or an indexing robot.

The Guidelines

On May 5, 1999, the W3C released a recommendation on Web Content Accessibility which are intented to guide site owners conducting accessibility reviews. The specification contains fourteen guidelines, which comprise the general principles of accessible design. Each guideline is associated with one or more checkpoints that describe how to apply that guideline to particular features of a Web page.

1. Provide equivalent alternatives to auditory and visual content

Even though some users may not be able to access the auditory or visual content on a page, they may be able to make use of an equivalent. For example, imagine you have a graphical arrow that points to the left of the screen to signify to the user that they can go back if they click on the arrow. Under the guidelines, you should provide a text alternative to that graphic, which says something along the lines of “Go Back to Previous Page”.

The provision of non-text equivalents (e.g. pictures, videos, and pre-recorded audio) of text is also beneficial to many users, especially those for whom reading is difficult or impossible. In movies or visual presentations, actions such as body language and other visual cues may not be accompanied by enough auditory information to convey the same information. Unless verbal descriptions of this visual information are provided, people who can’t see (or look at) the visual content will not be able to perceive it.

2. Don’t rely on color alone

For color-blind users, the Web experience can be more than merely frustrating. Problems can be as severe as invisible text and navigation, which can render sites completely unusable. Thus the guidelines recommend that we avoid using color as a visual cue. However, if you do, make sure you’ve provided adequate alternate cues. If you use shades of red or green for your text or background, use them in conjunction with safer colors (for instance, dark red text on a white background). And make sure there’s a strong contrast between the background and foreground text or graphics.

3. Use markup and style sheets and do so properly

Make sure that when you create your documents you do so with the proper structural elements. Control presentation with style sheets rather than with presentation elements and attributes. This way, you can differentiate between content, structure and presentation, and allow users with specialized software to understand the organization of the page, and navigate through it.

4. Clarify the usage of natural language

Identify the language in the head of the document using the LANG tag, which lets you specify up-front the language you’ve used within the document. The value of this attribute can be any of the ISO standard two-character language abbreviations, for example, LANG=EN tells the browser that the document is written in English. Also, make sure that you specify abbreviations within a document the first time they occur, using the title attribute of the ACRONYM and ABBR tags.

5. Create tables that transform gracefully

Tables should be used to hold tabular data rather than merely to achieve a certain presentational style or design. If you must use them for layout, try to create tables that make sense when linearized, or provide a non-tabled version of the page. Otherwise, if you have newspaper-style table that contains columns, a speech reader might read the first line of each column before moving on the to second line, which wouldn’t make much sense to someone who was listening to that content. Also, make sure that you provide summaries for any tables of data you include.

6. Ensure that pages featuring new technologies transform gracefully

When you develop a Website and you try to incorporate everything that you can on it just to prove that you are up to scratch with the latest technologies, make sure that older version browers are still able to view the page. This will also impact people with newer browsers who choose to turn off particular features (such as Java, JavaScript, images, etc.).

7. Ensure user control of time-sensitive content changes

Ensure that moving, blinking, scrolling, or auto-updating objects or pages may be paused or stopped. Some people with cognitive or visual disabilities are unable to read moving text quickly enough, or at all. Movement can also cause such a distraction that the rest of the page becomes unreadable for people with cognitive disabilities. Screen readers are unable to read moving text. And people with physical disabilities might not be able to move quickly or accurately enough to interact with moving objects.

8. Ensure direct accessibility of embedded user interfaces

Ensure that the user interface follows the principles of accessible design: device-independent access to functionality, keyboard operability, and self-voicing etc. When an embedded object has its “own interface”, the interface — like the interface to the browser itself — must be accessible. If the interface of the embedded object cannot be made accessible, an alternative, accessible solution must be provided. In other words, all interfaces that are embedded into your page (applets, plug ins, etc.) should follow these guidelines for accessibility as well.

9. Design for device-independence

Device-independent access means that the user may interact with the user agent or document with a preferred input (or output) device — for instance, a mouse, keyboard, voice, or head wand. If, for example, a form control can only be activated with a mouse or other pointing device, someone who uses the page without sight, with voice input, with a keyboard, or with some other non-pointing input device will not be able to access the form. Providing text equivalents for image maps or images used as links makes it possible for users to interact with these elements without a pointing device. Generally, pages that allow keyboard interaction are also accessible through speech input or a command line interface.

10. Use interim solutions

Use interim accessibility solutions so that assistive technologies and older browsers will operate correctly. For example, older browsers do not allow users to navigate to empty edit boxes. Older screen readers read lists of consecutive links as one link, which makes these active elements difficult or impossible to access. Also, changing the current window or popping up new windows can be very disorienting to users who cannot see that this has happened.

11. Use W3C technologies and guidelines

This one’s obvious: do what they say, or do something else that approximates what they say.

12. Provide context and orientation information

Grouping elements and providing contextual information about the relationships between them can be useful for all users. Complex relationships between parts of a page may be difficult for people with cognitive disabilities or visual disabilities to interpret. Try to give your frames titles, and describe their purpose and relationship to each other (if it’s not obvious from their titles). Also, divide large blocks of information into smaller chunks.

13. Provide clear navigation mechanisms

Provide clear and consistent navigation mechanisms — orientation information, navigation bars, a site map, etc. — to increase the likelihood that a person will find what they are looking for.

14. Ensure that documents are clear and simple

Using clear and simple language promotes effective communication. Access to written information can be difficult for people who have cognitive or learning disabilities. Using clear and simple language also benefits people whose first language differs from your own, including those who communicate primarily in sign language. Strive for clear and accurate headings and link descriptions. This includes using concise link phrases that make sense when read out of context, or as part of a series of links (some users browse by jumping from link to link and listening only to the link text). And use informative headings so that users can scan a page quickly for information rather than reading it in detail.

In Summary…

Given the uncertainty of the future, accessible design is a prime way to prepare for next-generation user interfaces such as intelligent agents and voice recognition. In a few years people will use voice input and output to operate computers over the telephone or while they’redriving. These technologies are in their infancy, but they use the same techniques as accessibility aids. In fact, people with disabilities have been using for years these pioneering techniques that will someday be commonplace.

The content for this article was obtained from the following resources:

The World Wide Web Consortium WebSite

Microsoft Corporation Accessibility WebSite

Web Accessibility for People With Disabilities
Michael G. Paciello
October 2000
CMP Books; ISBN: 1929629087

Nicky DaninoNicky Danino
View Author

Nicky is a Community administrator for the SitePoint Forums. She's an advocate of accessibility and her research has been presented at international conferences. Nicky loves to travel, especially to Gibraltar, and is friends with anyone who offers her ice-cream or chocolate.

PDFLib
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week