What is accessible web design?
Accessible web design is the practice of designing and developing websites that are usable by everyone. People who use the web have a growing variety of characteristics. As web developers, we can not assume that all our users are accessing our content using the same web browser or operating system as we are, nor can we assume they're using a traditional monitor for output, or keyboard and mouse for input. Consider these users:
- Most individuals who are blind use either audible output (products called screen readers that read web content using synthesized speech), or tactile output (a refreshable Braille device).
- Individuals with learning disabilities such as dyslexia may also use audible output.
- Individuals with low vision may use screen magnification software that allows them to zoom into a portion of the visual screen.
- Many others with less-than-perfect eyesight may enlarge the font on websites using standard browser functions, such as Ctrl + in Firefox and Internet Explorer 7 (Windows).
- Individuals with fine motor impairments may be unable to use a mouse, and instead rely exclusively on keyboard commands, or use assistive technologies such as speech recognition, head pointers, mouth sticks, or eye-gaze tracking systems.
- Individuals who are deaf or hard of hearing are unable to access audio content, so video needs to be captioned and audio needs be transcribed.
- Four million iPhones were sold within their first 200 days on the market in 2007-08. iPhone users navigate the web using a small screen and touch interface on a device that doesn't support Adobe Flash.
An accessible web site works for all of these users, and countless others not mentioned. The W3C summarizes web accessibility nicely in their Draft Web Content Accessibility Guidelines 2.0. WCAG 2.0 is organized into the following four key concepts:
- Web content must be perceivable
- Web content must be operable
- Web content must be understandable
- Web content must be robust
There are many possible approaches to attaining accessibility as defined by these four concepts. The following is one recommended approach.
Steps To Develop an Accessible Website
- Comply with HTML/XHTML standards. Be sure your code is error-free and complies with W3C standards. Error-free, well-formed, standards-compliant HTML or XHTML is the foundation of an accessible Web site. See the Standards Validation section of the Tools and Resources page for a list of free validation tools.
- Be sure your document has a clear logical structure. Markup headings using HTML heading elements such as <h1> and <h2>. Markup lists of items using HTML list elements. Good structure makes the document easier for everyone to navigate, helps search engines to accurately index your document, allows software to automatically generate outlines from your content, and provides markup that screen reader users can utilize to better understand the document structure and efficiently navigate the document.
- Follow accessibility guidelines and standards. For IT accessibility, consult the Section 508 Electronic and Information Technology Accessibility Standards. For web accessibility, consult either the Section 508 standards or the W3C Web Content Accessibility Guidelines. Each of these resources is described in more detail on the Policies & Standards page of the current website.
- Evaluate your site for accessibility. A variety of free web accessibility checkers are available. For a recommended list consult the Accessibility Evaluation Tools section of the Tools and Resources page.
- Test your site with users. Whether you conduct formal usability tests in a controlled setting like the LUTE or conduct less formal tests watching users interact with your site, you should try to recruit and observe users who have a variety of characteristics and skill levels. The audience for most websites is highly diverse and includes users with disabilities, so it is important to test with a sample that reflects this diversity.
As web technologies continue to evolve, developers now have a wide array of tools with which to build highly interactive, engaging web applications. If managed well this can benefit many users, but it also has the potential to erect barriers for users whose disabilities or web-enabled technologies are unable to access the content of the site.
A good web development strategy is to use web technologies in a layered fashion, making the content and functionality of the web page accessible to all users in HTML, then adding on enhanced, non-critical functionality for a subset of users whose technologies support it. In progressive enhancement, development occurs in the following steps:
- Begin with a static, well-structured, fully accessible HTML or XHTML web site, that is accessible to all users, regardless of technology, bandwidth, or disability.
- Add style using cascading style sheets (CSS).
If your site includes dynamic functionality, be sure to build in support for the Accessible Rich Internet Applications (ARIA) specification that is currently being developed by the W3C. ARIA is currently a working draft, but it already is supported by the Firefox web browser, and by recent versions of leading screen readers JAWS and Window-Eyes.
Building accessible websites benefits individuals with disabilities, but everyone else benefits as well. The steps and techniques described on this page are essentially the same steps you would go through to make your pages work with other technologies such as PDAs, web-enabled phones, or voice access information systems. Thus, in ensuring your pages are accessible, you also prepare yourself for future technologies.
This general topic is called "universal design" or "device independent design" and is discussed in more detail in the following documents: