Screen Design - Part 3

Go back to Screen Design - Part 2

Creating accessible sites

Ensuring your sites are accessible to the widest possible audience requires accommodating not only different platforms and browsers, but also people with varying ranges of visual, auditory, physical, speech, cognitive, and neurological disabilities. According to the W3C, “web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the web, and that they can contribute to the web.”

Accessibility is increasingly important because the web has become so integrated into the fabric of our lives. While you cannot prepare for every possible scenario in which a disabled person might access your web site, there are certain steps you can take to minimize inadvertently building any barriers preventing those users from accessing your content at all.

To help understand some of those barriers, visit the W3C’s before and after demonstration at http://www.w3.org/WAI/demos/bad, where inaccessible sites are marked up and then fixed. The bad and good versions are both shown, with relevant comments, so we can all learn what not to do. Some of the key issues highlighted by this demonstration are included in the section below titled, “Following Best Practices”.

Accessibility guidelines

The Web Content Accessibility Guidelines (WCAG) tell web developers how to make site content accessible to people with disabilities. There are four primary principles, each with its own set of guidelines.

Principle 1: Perceivable – Information and user interface components must be presentable to users in ways they can perceive.
• Guideline 1.1 Text Alternative: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, Braille, speech, symbols or simpler language.
• Guideline 1.2 Time-based Media: Provide alternatives for time-based media.
• Guideline 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
• Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

Principle 2: Operable – User interface components and navigation must be operable.
• Guideline 2.1 Keyboard Accessible: Make all functionality available from a keyboard.
• Guideline 2.2 Enough Time: Provide users enough time to read and use content.
• Guideline 2.3 Seizures: Do not design content in a way that is known to cause seizures.
• Guideline 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.

Principle 3: Understandable – Information and the operation of user interface my be understandable.
• Guideline 3.1 Readable: Make text content readable and understandable.
• Guideline 3.2 Predictable: Make web pages appear and operate in predictable ways.
• Guideline 3.3 Input Assistance: Help users avoid and correct mistakes.

Principle 4: Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
• Guideline 4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies.

For more information about any of these guidelines, or for details regarding how to meet them, visit http://www.w3.org/TR/WCAG20.

In addition, the United States Federal Government has its own standards for web accessibility. Specifically, in 1986 an amendment was added to the Rehabilitation Act, requiring the U.S. Government to provide accessible technology to its employees and the public. This is often referred to as ‘508 compliance’ because Section 508 is the portion of the amendment relating to technology standards for people with disabilities. You can read more about these standards here: http://www.section508.gov.

There is much overlap between the two sets of guidelines. Anyone seeking to create an accessible site would be wise to test against both, to cover all the bases. The next section lists some tools to help with this process.

Tools to aid accessibility
• The W3C has set up a Web Accessibility Initiative to further this process. Learn more at
http://www.w3.org/WAI.
• HTML5 Accessibility is a site with information about which HTML5 accessibility options are supported in modern browsers:
http://html5accessibility.com.
• WAVE is a free web accessibility evaluation tool, designed to assist developers in determining possible barriers to accessibility in their sites:
http://wave.webaim.org.

Note this tool is also available as a Dreamweaver extension and a Firefox addon.
• Total Validator is another tool that can be installed on your computer, or run through a Firefox addon, to test your site against the various W3C specification: http://www.totalvalidator.com.

Next to - Screen Design - Final