Web Accessibility Guidelines and Tools

The 2000 United States Census estimated that 19.4 percent of non-institutional civilians in the United States have a disability. Almost half of these people have a severe disability. You can learn more about these figures here.

According to a 2003 study commissioned by Microsoft and conducted by Forrester Research, Inc., among the adult computer users in the United States one in four has a vision difficulty, one in five has a hearing difficulty, and one in four has a dexterity difficulty. (Dexterity difficulties consist of pain, discomfort, or complete loss of feeling in fingers, hands, wrists, or arms.)

We strongly encourage all World Usability Day participants to make efforts toward developing Universally Accessible Web sites inline with the W3C’s Web Accessibility Initiative (WAI) and in subsection 1194.22 of Section 508 concerning Web-based intranet and Internet information and applications.

Efforts are made around the world toward raising awareness on accessibility and disability and maximizing the World Wide Web (WWW) accessibility. W3C WAI works with organizations and governments toward maximizing the accessibility of the WWW through five primary areas: technology, guidelines, education and outreach, and research and development. Governments around the world (such as United Kingdom, Japan, Canada, Australia, Greece, France, Italy, Sweden) adopted or are in the process of implementing the W3C Web Content Accessibility Guidelines 1.0.

The purpose of this material it's to introduce all World Usability Day participants to the Web design guidelines included in the W3C’s Web Accessibility Initiative (WAI) and in subsection 1194.22 of Section 508 concerning Web-based intranet and Internet information and applications as well as to some of the most popular assistive and adaptive technologies.

At the time this article is being developed the Access Board is conducting a review and update of its access standards for electronic and information technology covered by Section 508 of the Rehabilitation Act. These standards, which were initially published in 2000, "cover products and technologies procured by the Federal government, including computer hardware and software, Web sites, phone systems, fax machines, and copiers, among others. This effort will also cover Access Board guidelines for telecommunications products and equipment covered by section 255 of the Telecommunications Act (go to http://www.access-board.gov/ and click on Telecommunications in the vertical navigation bar). To achieve these goals, the Access Board has organized an advisory committee Telecommunications and Electronic and Information Technology Advisory Committee (TEITAC) to review its standards and guidelines and to recommend changes. The committee’s membership includes representatives from industry, disability groups, standard-setting bodies in the U.S. and abroad, and government agencies, among others. The revised Section 508 is expected to be released by the end of 2007.

W3C Web Accessibility Initiative (WAI)

In April 1997, the W3C announced the launch of the Web Accessibility Initiative (WAI) to promote and achieve Web functionality for people with disabilities. The WAI provides Web designers with a set of fourteen guidelines.

Each guideline includes a set of checkpoints specifying how Web developers should apply the guideline. The WCAG has three priorities, which are listed in Table 1, and each checkpoint has a priority level assigned to it by the Web Content Accessibility Guidelines Working Group (WCAG WG) based on its impact on the Web page’s accessibility.

Priority Levels	Description
I	A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents.
II	A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents.
III	A Web content developer might address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.

Table 1

W3C WCAG Priority Levels

The Web Content Accessibility Guidelines Working Group (WCAG WG)

As stated on the W3C Web site, the WCAG WG is part of the WAI Technical Activity and was first chartered in August 1997 to produce WCAG 1.0, which became a W3C Recommendation in May 1999. The WCAG WG was rechartered in November 2000 to continue W3C's work on guidelines for creating accessible Web content. The mission of the WCAG WG is to develop guidelines to ensure that Web content is accessible to people with disabilities. The WCAG WG will publish the Web Content Accessibility Guidelines 2.0 as a W3C Recommendation.

Section 508

In 1998, Section 508 was enacted by Congress as an amendment to the Rehabilitation Act of 1973, "to require Federal agencies to make their electronic and information technology accessible to people with disabilities. Inaccessible technology interferes with an individual's ability to obtain and use information quickly and easily.” The purpose of this amendment is to ensure that all Americans have access to information technology: "The law applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. Under Section 508 (29 U.S.C. 794d), agencies must give disabled employees and members of the public access to information that is comparable to the access available to others."
The United States Access Board is the federal agency that "develops and maintains design requirements for the built environment, transportation vehicles, telecommunications equipment. It also develops standards for electronic and information technology in the Federal sector." Subsection 1194.22 of the Section 508 Guidelines provides information covering all aspects of maximizing accessibility in Web site design. The majority of the subsection 1194.22 guidelines are based on Priority Level I of the WCAG, with a few additional rules unique to the law. Part 1194 electronic and information technology accessibility standards includes subsection 1194.22, which concerns Web-based intranet and Internet information and applications.

Developing Web Pages in Compliance with Section 508

Graphics and Images

(a) A text equivalent for every non-text element shall be provided (e.g., via "alt,” "longdesc", or in element content).

The first paragraph requires that all graphic images have alternative text attached. If no alternative text is present, the screen reader applications attempts to read the graphic image file, which won’t help a visually impaired user. You can use the alt attribute, used for short descriptions, or the longdesc attribute, if a longer description is required. If you provide a longer description, it is stored in a separate file.

However, not all browsers and assistive technologies support this attribute. To make your content accessible to browsers and assistive technologies that do not support the longdesc attribute, you can add a D-Link. A D-Link is a link to the same descriptive file contained in the longdesc attribute that is inserted near the image.

Multimedia

(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

Every audio clip should be accompanied by a transcript and every video clip should include close captioning. This way, the hearing impaired users of your Web page can read the transcript or the close captioning. Specialized multimedia applications are required to generate audio file transcripts and close captioning for video files. To learn more about audio file transcripts and close captioning for video files, check out the following Web sites:

Captions and Audio Descriptions for PC Multimedia (follow link and search for "Captions and Audio Descriptions for PC Multimedia")

The National Captioning Institute

Relay Conference Captioning

Media Access Group

Microsoft SAMI 1.0 (follow link and search for "Understanding SAMI 1.0")

The W3C Synchronized Multimedia Integration Language

The Media Access Generator (MAGpie) (follow link and click MAGpie)

HiSoftware Hi-Caption (follow link, point to Products and Solutions, and click Hi-Caption)

Macromedia Captivate (follow link and search for Adobe Captivate 3 accessibility)

CCaption-MacCaption

CPC Computer Prompting and Captioning Co

Color

(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

Color is an important Web design element that, and when properly used, can improve the look of your Web page and help to convey the purpose of the information. However, color can create serious problems for blind or color blind Web site visitors. Consequently, you should always consider the following options:

Provide a black and white or grayscale alternative version of your Web page for color blind users. You can create a Web page template using black and white or gray scale colors and images using an image editing program. You can find out more about using image editing programs at the Web developers notes Web site.
Use brighter colors when possible, because they are easier for color blind users to differentiate.
Make sure you offer text equivalent clues if you use important color clues in your Web page. For example, if you use a statement, such as "click the red button to log out," in your Web page, the red button needs to be identified with a text label that makes it recognizable to color blind people.
Provide sufficient contrast between text colors and backgrounds.
Avoid using red and green, which are challenging for the majority of color blind people.

Two simple methods can help you verify that your Web page is in compliance with guideline (c). Try viewing the Web page on a black and white monitor, or print the Web page on a black and white printer. If the usability of the Web page is not affected by the removal of color, your Web page should be easy to use by color blind people.

Several Web sites enable you to test the accessibility of your Web site for color blind users. aDesigner is one of the best disability simulators to use for testing Web pages for accessibility and usability problems related to visual and color deficiencies. aDesigner checks for compliance with the Section 508 Guidelines, the W3C WCAG 1.0 Guidelines, the Japanese Industrial Standard (JIS), and IBM’s Web Accessibility Checklist. There are two modes or settings available in aDesigner:

Blind: The blind mode runs three types of tests on Web pages: blind usability visualization, accessibility and usability checking, and compliance checking. This setting helps you understand how blind users who depend on voice browsers and screen readers experience their Web pages. By using this setting, you can correct the most crucial factor in improving usability for the blind, navigability.
Low Vision: The low vision mode simulates how users with weak eyesight, color vision deficiencies, cataracts, and combinations of impairments perceive Web pages. This mode enables you to detect accessibility problems from simulated Web pages or images.

The Vischeck Web site provides you with free downloadable software tools, which lets you see how your Web pages appear to people with different types of color blindness.

Style Sheets

(d) Documents shall be organized so they are readable without requiring an associated style sheet.

By using style sheets to separate content from presentation, Web pages load faster and are more usable and accessible in most Web browsers. However, you need to ensure that pages display properly even if your visitor is using a browser that doesn’t support style sheets, has style-sheet support turned off, or has to use a another custom style sheet. When using Cascading Style Sheets in developing your Web pages, you should always consider the following recommendations:

Don't rely on specific fonts or colors to convey relevant information, because the specified fonts and colors might not exist on all computers in which case the browser uses its default colors and fonts.
Don’t fix the size of your text in points or pixels. If someone with low vision needs to increase the size of the text on your page, they won’t be able to change the size of fixed text. Instead use the em unit to set font sizes as required by CSS Techniques for Web Content Accessibility Guidelines 1.0.
The heading tags (<h1>[nd]<h6>) should be used to emphasize the organization of your Web page, not to modify the text font size.
Use an adjustable layout (relative length units and percentages of the browser window size) that shrinks or expands as necessary so that visitors with different browser window sizes and screen resolutions can properly see your Web pages. See the Units of Measure section of the CSS Techniques for Web Content Accessibility Guidelines 1.0 for more information.
Provide consistent contrast between text colors and backgrounds.

Image Maps

(e) Redundant text links shall be provided for each active region of a server-side image map.

(f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

Client-side image maps are starting to replace server-side image maps, especially because client-side image maps enable polygon hotspots and therefore all shapes can be defined on a client-side map. To make a Web page containing a client-side image map accessible, you need to add alternative text to each hotspot within the map.

Tables

(g) Row and column headers shall be identified for data tables.

To comply with guideline (g), when using data tables, you need to use the <th> tag for any cell that contains a row or a column header. Adding a table caption can also help visually impaired users by providing them with more information about the table’s content. Providing a table summary using the summary attribute is especially useful for non-visual readers.

(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

To comply with guideline (h) use the <th> tag for any cell that contains a row or a column header in any nested table. This can be quite tedious and might convince you that nested tables should be used only when absolutely necessary. As previously discussed, a great way to test that your Web page is accessible is by viewing it in the Lynx browser.

If a table is used as a layout tool, don't use any structural HTML tags (for example the <th> tag that displays its content visually as centered, and bold) for the purpose of visual formatting. For browser to render correctly a table's side-by-side text, you will need to linearize the table. To learn about how to linearize a table, see the Creating Accessible Tables section of the WebAIM Web site. One of the best tools for creating accessible tables is the free online accessibility validator.

Frames
(i) Frames shall be titled with text that facilitates frame identification and navigation.

When opening a frames page, assistive technologies applications for visually impaired people enable users to open only one frame at a time. Thus, it is extremely important to provide information about the contents of each frame and inline frame included in your Web page. You can do this by adding the title or name attribute to each frame. Because some browsers and assistive technology applications support the title attribute and others support the name attribute it is wise to add both of them.

Animation and Scrolling Text

(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

Using flashing or flickering elements, such as GIF images, blinking text, and scrolling text, can affect the accessibility of your Web pages. People with photosensitive epilepsy can have seizures caused by elements that flicker, flash, or blink with an intensity and frequency outside the range indicated by guideline (j). The majority of screen reader applications can’t read moving text. People with cognitive disabilities might also find it challenging to read moving text.

Text-only Version

(k) A text-only page, with equivalent information or functionality, shall be provided to make a Web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

A text-only Web page must contain all the information included in the original page and must have the same functionality the original page has. Anytime you update a Web page, you need to update its text-only version. A link to the text-only version must be included in the original Web page. The home page of the DisabilityInfo.gov Web site is a great example of how to implement this guideline. The DisabilityInfo.Gov Web site is also a great source of information for any disability issue related to the federal government.

Scripts, Applets, and Plug-ins

(l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

(m) When a web page requires that an applet, plug-in, or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with 1194.21(a) through (l).

Here is a brief description of scripting languages and how they are used to develop Web pages:

They automatically change a formatted date on a Web page.
They cause a linked-to-page to appear in a pop-up window.
They cause text or a graphic image to change during a mouse rollover.
They obtain information about the current Web browser.
They enable navigating to Web pages that have been opened during a Web browser session.
They process data submitted via an HTML form.
They retrieve data from a database via a HTML form.

Many of these scripting language applications require the use of the mouse. Some people with motor disabilities might not be able to use a mouse. Furthermore, some assistive technology applications have browsers with scripting turned off, thus, you should provide alternative methods for users with disabilities. Your Web page should include access keys (keyboard shortcuts) that enable users to achieve the same functionality.

When using an applet and multimedia elements that might require a plug-in or another application in a Web page, a link to the source of a required plug-in or application, such as Flash, Java, or Shockwave, should be added to the Web page. Applets and plug-ins can be detected in the HTML code of a Web page by searching for the <object> tag, as shown in the following code example. Applets might also be implemented using the deprecated <applet> tag.

Web Forms

(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

Web forms tend to cause problems for people with disabilities if the form elements are improperly labeled and titled or if they haven’t been coded in compliance with guideline (n). Web forms consist of text boxes, text areas, check boxes, option buttons, and drop-down menus. Because form layouts are usually structured using a table, you must be careful to make sure the table is linearezed. To improve a screen reader’s ability to process an HTML form, each form element should have an initial default value to give the user guidance in completing the form.

All form elements must have adjacent labels (placed in the same table cell). The W3C HTML 4.0 specifications require you to include a <label> tag associated with a form element. You can use the <label> tag in two distinctive ways:

Explicit labels: These labels can be implemented using the <label> tag with the for attribute. The id attribute of the form element is assigned as value of the for attribute. The majority of assistive technology applications work extremely well with explicit labels.
Implicit labels: These labels can be implemented by including the form element and its associated label within the <label> tag. The majority of assistive technology applications, especially screen readers, don’t properly support implicit labels.

Links

(o) A method shall be provided that permits users to skip repetitive navigation links.

The most commonly used bookmark for accessibility is Skip Navigation Links. The Skip Navigation Links link enables a user to skip the Web page title and navigation links by directing the focus to the main contents of the Web page being viewed. This link is especially important for visually impaired people who use a screen reader.

Timed Response

(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

For security reasons and to accommodate visitor traffic on busy servers, Web developers use scripts that disable the functionality of Web pages when a response is not received within a certain time limit. People with cognitive disabilities or different levels of visual impairment might need more time to provide a response. Consequently, you should always alert users if there is a time limit for providing a response. You should also consider establishing a response time that accommodates all users or enables them to change the time.

Assistive Technology & Accessibility and Evaluation Tools
Web pages designed in compliance with Section 508 and the WCAG guidelines can be made accessible to the majority of people with disabilities using software applications and devices that are grouped under the umbrella of assistive technologies:

Screen readers use text-to-speech (TTS) technology to verbalize screen text and textual representations of graphical elements if available.
Speech-to-text converters automatically transform dialogue into text.

Accessibility and Evaluation Tools refer to the tools used to make the WWW accessible. W3C provides two free online validation services: The Quality Assurance Markup Validation Service and Cascading Style Sheet (CSS) Validation Service. The Markup Validation Service checks documents like HTML and XHTML for conformance to W3C Recommendations and other standards. The CSS Validation Service checks CSS in HTML and XHTML documents or standalone CSS documents for conformance to W3C recommendations.

Assistive Technologies & Accessibility and Evaluation Tools
Category	Application	WWW address
Accessibility and evaluation tools	Bobby designed by Watchfire	http://webxact.watchfire.com/ScanForm.aspx
Accessibility and evaluation tools	aDesigner designed by IBM	http://www.alphaworks.ibm.com/tech/adesigner
Screen readers	JAWS for Windows developed by Freedom. Scientific	http://www.freedomscientific.com/
	Dolphin Pen by Dolphin Computer Access	http://www.dolphinedu.com/
	Window-Eyes Professional developed by GW Micro	http://www.gwmicro.com
Speech-to-text converters	Dragon Naturally Speaking developed by Advanced Speech	http://www.advancedspeech.com/
	MacSpeech	http://www.macspeech.com/
	IBM ViaVoice	http://www.nuance.com/viavoice/

More information

The task of building accessible Web pages is not an easy one. Web developers are required to accumulate a lot of knowledge to successfully accomplish this task. The good news is that more and more companies and organizations are developing competitive assistive and accessibility technology applications that can help you in your quest to assist people with disabilities and specials needs. As of now, Section 508 law applies only to Federal agencies; however, many companies and organizations are now complying with Section 508 and the W3C Guidelines.

The following list presents some of the most resourceful Web sites that Web developers use to develop accessible Web sites. The list includes the Web sites of software companies that are providing successful assistive and accessibility technologies, of organizations and institutions developing accessibility guidelines and laws, up-to-date articles, and Web accessibility online forums.

Microsoft Accessibility Technology for Everyone (follow link and click on "Microsoft's longstanding commitment to accessibility" in the More Information section)
IBM Accessibility Center
W3C Web Accessibility Initiative (WAI) Guidelines and Techniques (follow link and click on Guidelines and Techniques in the vertical navigation bar)
Web Accessibility in Mind (WebAIM)
Web Content Accessibility Guidelines 1.0 (follow link, click on Guidelines and Techniques in the vertical navigation bar, click on Web Content (WCAG) in the vertical navigation bar, and then click on How the Guidelines are Organized in the What is in WCAG 1.0 section)
Freedom Scientific: JAWS for Windows
IBM Alpha Works: aDesigner
AskAlice: Accessibility Evaluation Tool
InFocus: Accessibility Evaluation Tool
LIFT: Accessibility Evaluation Tool
Illinois Accessible Web Publishing Wizard
Windows Eyes
Lynx [nd] Internet Software Consortium
Lynx Viewer
ScanSoft: Dragon Naturally Speaking 7
Section 508
University Web Accessibility Policies: A bridge not quite far enough
WAVE 3.0: Accessibility Evaluation Tool
HiSoftware CynthiaSays portal
A-Prompt: Accessibility Evaluation Tool
Web Accessibility Toolbar
Exploring Microsoft SharePoint Designer 2007, 7/E
ACM Special Interest Group on Computer-Human Interaction (SIGCHI)
ACM Special Interest Group on Accessible Computing, SIGACCESS

If you need any assistance with Web Accessibility, please feel free to contact me:

Daniela Marghitu, Ph.D.
Accessibility Chair, World Usability Day 2007
Daniela.Marghitu<at>auburn.edu
Web Address: http://www.eng.auburn.edu/users/daniela/