Designing Accessible Web Resources
Laurie Harrison
Adaptive Technology Resource Centre, University of Toronto
laurie.harrison@utoronto.ca
As the information technology revolution continues, we are all experiencing the exponentially increasing demand for provision of services and information via the Internet. We may have an image in mind of a "typical" computer user, who sits at a desk using a conventional keyboard, mouse and monitor. But it is important to consider demographic trends, health trends and technological trends, to ensure that we are reaching the widest possible audience.
The potential benefits of Web-based resources for people who use adaptive technologies are many, as the electronic delivery of information and resources permits translation into a variety of modalities and formats.
At the same time, we are witnessing the rapid development of alternative devices such as mobile computing devices, "hands-free" and "eyes-free" browsers and "virtual books" to access information and resources in contexts other than the conventional desktop workstation. Not all methods of accessing the Web incorporate a graphical pointing device such as a mouse. Web pages based on principles of accessible design should be navigable via keyboard or voice commands. While the functionality of these devices is determined by the product developers, strategies may be implemented to enhance access and avoid unnecessary barriers being created.
Forward thinking developers will recognize the need to plan for changes linked to demographic and technological trends. To this end, it is essential business administrators are astute in their design of Web-based resources, and in their selection of software tools. Building on a solid foundation which includes adherence to W3C HTML standards and accommodation of a full range of interface models will increase the life span of the resources we develop, ensuring access by the widest possible audience at present, and in the future.
Accessible Design: Where Does it Begin?
A useful definition of accessibility is provided by Chuck LeTourneau, of Starling Web Services, an organization that specializes in accessible Web design. He states:
"What does 'Web accessibility' mean? To me, it means that anyone using any kind of Web browsing technology must be able to visit any site and get a full and complete understanding of the information as well as have the full and complete ability to interact with the site - if that is necessary."
In order to understand the issues related to accessible Web design, developers need to first have a basic understanding of specific access systems that accommodate, replace or augment sensory and motor functions of users with special needs. These include voice recognition systems, alternative pointing devices, screen readers / magnifiers, and other devices. The following is a list of some adaptive technologies and examples of basic challenges to Internet navigation faced by users of these devices.
This software is used by learners who are blind to access Web pages, electronic text and computer applications. This software allows all text to be read out from the menu, toolbar and directory buttons, and Web pages. Tab or Shift-Tab allows navigation through the Hyperlinks on a given page.
Challenges: Frames and tables can make a page difficult, if not impossible to navigate. Some screen readers cannot distinguish columns or groupings of graphics with labels and may read horizontally across the page, mixing text with images, labels and hyperlinks. Images that may provide important information cannot be cannot be accessed unless text-base equivalents are provided.
Screen magnification systems enlarge portions of the screen to allow learners with limited vision to access computer based materials.
Challenges: Without clear and easy-to-understand text and descriptions of the layout of the site, the user may have difficulty getting a sense of the overall structure of the site, or become lost in complex pages.
These keyboards offer larger or smaller target areas for users with loss of gross or fine motor control. They may be switched to mouse emulation mode so that the arrow keys or numeric keypad of the same keyboard are used for mouse movements.
Challenges: Mouse emulation can be somewhat slow or frustrating, although keyboard equivalents to tab through hypertext links which have been built into recent Web browsers are very helpful.
This software allows the user to enter text and select buttons emulating menu functions from a display on the monitor. Users have a pointing device or a switch to select buttons.
Challenges: Recent products allow users to point and dwell over a target to make a selection, but
navigation through a complex series of menus and links can be difficult. Text entry is also possible using this technology, but is very time consuming, unless accompanied by word prediction technology.
The user speaks into a microphone to navigate software applications, surf the Web, and input text. Commands correlating to macro sequences may be created to customize usage for specific software or frequent tasks. Mouse control may incorporate a grid system.
Challenges: Again, without a clear navigation system and large target areas on clickable images, the voice recognition user has difficulty in moving through the pages efficiently.
A basic understanding of these commonly used adaptive technologies, is the first step in learning, as a Web designer, to design Web pages that will make information accessible to users of these adaptive technologies.
Best Practices for Accessible Design
Making the Web more accessible is largely dependent upon using HTML the way it was intended: to encode meaning rather than control layout and visual formatting. Some years ago, the introduction of graphical browsers, lead to a variety of new official and unofficial HTML formats which were quickly taken up by Web designers. Adaptation of the structure of HTML for aesthetic purposes compromises the accessibility of the site using non-visual, or non-conventional browsers. An example of this phenomenon is the case of the TABLE tag that was originally conceived to display tabular data, but has become an all-purpose tool for laying out magazine-type pages. The increasing use of graphics, non-standard HTML structure, and the introduction of dynamic elements such as Java applets and active-X controls has further compounded the challenges in designing universally accessible Web pages.
General Principles:
As was mentioned previously, one of the greatest barriers to accessibility is inappropriate use of structural markup to achieve visual formatting effects. Using markup improperly may create a barrier preventing users with specialized software from understanding the organization of a page, and navigating through it effectively. Web designers may be tempted to use structural markup to achieve a desired formatting effect, especially for viewing with older browsers. Common practices include use of tables for layout or a header to change the font size. It is important to consider whether the formatting effect is so critical as to warrant rendering the page inaccessible to some users. Not everyone uses a conventional monitor and mouse to access the Web. A better approach is to use markup such as TABLE, UL, BLOCKQUOTE, etc. as it was intended, and use CSS to format layout and visual effects for those learners using conventional desktop system. CSS is a forward thinking technology that assists the Web designer in separating structure from format, content from presentation. This accommodates users of adaptive technology, as well as users of new, mobile and portable internet access devices.
When providing critical information in strictly visual, or auditory formats, be certain to include alternatives for those learners who may not be able to access these resources. A simple example is the use of the "ALT" attribute, of the <IMG> tag, providing an alternative text for users who are not displaying graphics. This will accommodate learners accessing Web resources with a screen reader, with graphics turned off because of low bandwidth issues, or those who are using devices which display text only. Scripts, sound files, objects, java applets, and other interactive components should also be rendered in alternative formats.
Again, remember that not all users can use, or will be using a mouse to navigate your Web pages. Good Web design means that the page can be accessed using only a keyboard or voice commands. Common pitfalls include use of image maps without ALT tags for each "hotspot." You can also use HTML 4.0 features such as ACCESSKEY and TABINDEX to make your pages easier to navigate using only a keyboard.
With some effort, Web designers can create pages that transform gracefully. Pages that transform gracefully will be accessible to a variety of users despite any physical, sensory, and cognitive disabilities, work
constraints, and technological barriers. Strategies already mentioned include separation of structure from format, providing textual as well as visual information, and creation of documents that do not rely on one type of browser or hardware. Pages should be usable by people using a keyboard, with small or low resolution screens, black and white screens, no screens, with only voice or text output, etc.
Basic Strategies to Ensure Accessible Design
There are several strategies that may be implemented to easily increase the accessibility of your Web site. With so many "bells and whistles" available via authoring tools, one is easily tempted to implement design elements that in the end may actually impede, rather than enhance, the learning process for computer users with special needs. The following tips, based on the Web Accessibility Initiative guidelines, will assist you in ensuring that your Web site is reaching the widest possible audience.
Rationale: Since text content can be presented to the user as synthesized speech, braille, and visually-displayed text, this improves accessibility for people who cannot access visual information or written text, including many individuals with blindness, cognitive disabilities, learning disabilities, and deafness.
Rationale: Client-side image maps are preferable because link information is located in the HTML document and can be accessed using alternative browsers. Server-side image maps may require use of a mouse or other pointing device. Text equivalents are helpful for the reasons outlined above.
Rationale: Although some people cannot use movies, sounds, audio enhancements, etc. directly, they may still use pages that include equivalent textual information to the visual or auditory content.
Rationale: Link text should be meaningful enough to make sense when read out of context -- either on its own or as part of a sequence of links. For instance, do not use "click here." Link text should also be terse.
Rationale: Use structural markup to aid navigation rather than for a presentation effect (e.g., using a table for layout or a header to change the font size). Correct use helps learners with specialized software to understand the organization of the page and to navigate through it.
Rationale: When a short text equivalent does not suffice to adequately convey the function or role of an image, it is helpful to provide additional information in a file designated by the "longdesc" attribute or by provide a description link as well next to the graphic. (See WAI guidelines for more information.)
Rationale: To reach the widest possible audience, ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page.
Rationale: Although content developers are encouraged to use new technologies that solve problems raised by existing technologies, they should know how to make their pages still work with older browsers and people who choose to turn off features. For non-visual users, relationships between the content in frames (e.g., one frame has a table of contents, another the contents themselves) must be conveyed through other means.)
Rationale: Tables used to lay out pages and some data tables where cell text wraps pose problems for older screen readers that do not interpret the source HTML or browsers that do not allow navigation of individual table cells. These screen readers will read across the page, reading sentences on the same row from different columns as one sentence.
Rationale: Validate accessibility with automatic tools and human review. Automated methods are generally rapid and convenient but cannot identify all accessibility issues. Human review can help ensure clarity of language and ease of navigation.
This list of quick tips is a starting point for ensuring that your pages are accessible. More detailed information and techniques for implementation are available in full at the WAI Web site at http://www.w3c.org/wai. It is advisable to begin using validation methods at the earliest stages of development, and discover the problems before you are well into site construction. Accessibility issues identified early are easier to correct and avoid.