Access Ability The art, science, and benefits of designing accessible Web sites by Maxine Williams Adobe Magazine - Summer, 1999 - Page 39 If you've been thinking of the Web as a purely visual medium, consider this: by 2010, when the last of the baby boomers turn 45, the number of Americans reporting some form of vision impairment will climb to 20 million. Those same baby boomers currently make up the greatest percentage of Internet users, and the fastest-growing segment of the Internet consists of users 55 and older. Disabled and aging Internet users encounter myriad frustrations as they try to find resources, products, and information on the Web. Limited vision or mobility can make mouse navigation difficult to impossible. And while a site may look cool with Flash, JavaScript, and loads of graphic effects, users who depend on audio and text browsers can't take in the message you're trying to convey unless you provide some alternate form of access. So how best to design sites for the blind and visually impaired? It's not as hard as you might think. More accessible design starts with simple awareness, and many accommodations can be made without much extra effort. What follows is a basic introduction to this increasingly important topic. Types of visual impairment Blindness, glaucoma, cataracts, and diabetic retinopathy affect millions who could benefit from more accessible Web-site design. But vision loss is only one of many factors that influence how people interact with Web sites. Color blindness and partial or low vision also limit the range of colors, images, and contrasts that a person can see. If you use or low-contrast background and text colors, for example, those users won’t be able to see the text. They may need to change fonts and backgrounds in the Web browser, if not actually use a text or audio browser. Other access limitations include learning disorders, physical impairments, limited mobility, and hearing loss. While it's a tall order to design sites that provide access to every single user, it is certainly possible to begin moving in the direction of universal accessibility. Access technologies An assortment of adaptive hardware and software exists for sight-impaired and blind Web users. Some people with limited sight simply change their browser settings, while others use screen magnifiers. Internet users who are blind or have seriously impaired vision rely on text-based Web browsers with voice-synthesized screen readers, audio browsers, or refreshable Braille displays that read the contents of a visual display. Called access technology or access software, these tools give the vision impaired and blind tremendous opportunities to interact with the Web. For the vision impaired, an increasing portion of the Web is composed of sites that can be experienced only with access software. In its early days, HTML was used primarily to format text. Sighted and visually impaired users who relied on voice-synthesized screen readers were on relatively equal footings when it came to Internet access, because screen readers could easily digest simple HTML code, reading one line of text at a time, from left to right. With the ever-increasing popularity of the Web as a graphic medium, however, designers now use HTML both for basic text and for more sophisticated formatting. Problematically, screen readers and audio browsers can't differentiate between HTML as a basic text markup language and HTML as a tool for creating tables and other design elements. In the case of columns of text, a screen reader will jump from column to column until it reaches the far end of the screen. A Web-page layout that resembles newspaper columns will be totally nonsensical for sight-impaired users. In the past, PDF (portable document format) files presented problems for vision-impaired users because screen readers couldn't decipher them. Adobe now offers several "translation" methods. The Web site http://access.adobe.com provides free PDF-to-HTML conversion of PDF documents located on the Web, deliverable directly to your browser. Users can also submit, via a Web site or e-mail, the URL of an online PDF, and receive a converted HTML or text document via e-mail. Another e-mail option for non-Web-based documents comes from Trace Research Center in Wisconsin (http://trace.wisc.edu), which offers a tool that attaches a PDF file to e-mail for conversion. For PDF files on your own computer, there's the Adobe Acrobat Access plug-in for Windows, available free of charge at http://access.adobe.com, which displays the textual content of a PDF file within Acrobat Reader or Exchange. Guidelines for accessibility If you're a Web designer, there are many things you can do to allow visually impaired readers to use your site easily without special access software. Don't hard-code or specify colors and font sizes by overwriting default settings. Make it easy for users to increase the font size or change the background color, and try to ensure that these changes won't fatally compromise the legibility of your site. Right now, changing the color settings in your browser makes many of the most well known sites on the Web totally illegible; one reason for this is that the interaction of user- generated color changes and hard-coded colors can reduce contrasts to an indistinguishable level. Most guidelines suggest that sites be legible in reverse type, such as white text on black and yellow on black. Choose typefaces carefully. Use sans-serif fonts such as Helvetica or Arial; serif fonts can appear fuzzy and be difficult to read. Avoid italic fonts for the same reasons. Microsoft's recently introduced font technology, ClearType, provides a better on-screen reading experience by improving image resolution at the operating-system level. And emerging technologies will doubtless continue to increase font availability and readability, offering more choices for designers. Don't rely on special effects to convey critical information. If your site design requires that visitors be able to recognize and understand things that dance and flicker, you may be excluding a lot of your potential audience. Provide explicit and informative ALT or TITLE attributes for image tags. ALT and TITLE tags include text that identifies an image or a navigation element. Without such descriptive text, screen readers can’t interpret images or navigation routes. In Adobe GoLive 4.0 (formerly GoLive Cyberstudio), add ALT text using the Special tab of the Image Inspector or, for image maps, use the Map tab. Avoid certain color combinations. Text, backgrounds, or graphics with similar hues, color saturation, or lightness are often impossible for visually impaired users to differentiate. Provide Links to appropriate accessibility tools. If your site includes PDF files, for instance, provide a link to http://access.adobe.com to give your audience ways to convert PDF to HTML or text. Offer a text-only version of your site. If that's not possible, at least try to provide text-only versions of pages with the most critical information. If you’re using tables to help structure your site, here is an easy, guilt-free alternative - in GoLive, create a text-based table of contents of your site by clicking Create T. Of C. Page on the Arrange tab of the Site View Controller. Cascading style sheets One of the best ways to make Web sites more accessible is to take advantage of the growing number of Web browsers and authoring tools that support cascading style sheets (CSS). Cascading style sheets permit great design flexibility, improve site accessibility by separating page content from layout, and ease the burden of site management. Style-sheet language is similar to HTML code, but using CSS in conjunction with HTML means that the work of document structure and layout presentation falls to the style sheet, not the markup language. Designers control font size, spacing, background color, and text and image placement. Using CSS, attributes are easily propagated throughout a site; "child" styles can inherit the attributes of the previous parent style sheets and pass on new attributes. At each organizational level of a site, authors and designers can incorporate only the new hierarchical elements needed because the parent attributes are automatically imported to the style sheet. This organized structure enables access technologies to present Web pages logically to vision-impaired users. Most text-based and WYSIWYG authoring tools on the market today, including GoLive 4.0 and HoTMetaL PRO 5.0 by SoftQuad, support CSS. And several Internet sites offer detailed information about browser support for hundreds of CSS attributes so that designers can judiciously and effectively use CSS. Two good starting points on cascading style sheets are http://www.westciv.com/style_master/academy/css_tutorial/index.html and http://www.w3.org/Style. Assessment tools Testing is an integral part of site development and design. While most designers and developers run through a gamut of popular browsers and browser versions to test a site's compatibility, few test for audio-browser compatibility or validate their HTML for screen-reader compatibility. For sight-impaired users, special browsers and screen readers function most effectively when the underlying HTML code is uncluttered and contains no errors. Several free, easy-to-use HTML validation services and applications are available on the Internet. These automated services check for accessibility, alert you to possible coding errors, and, in some cases, suggest fixes or even fix the problem for you. These include Bobby from the non- profit Center for Applied Special Technology (http://www.cast.org/bobby), the WWW HTML Accessibility Tool (WHAT) from the University of Illinois at Urbana-Champaign (http://cmos-eng.rehab.uiuc.edu/what), and the World Wide Web Consortium’s HTML validation service (http://validator.w3.org). But while validation services can be very handy for checking code, they’re certainly not foolproof. The ideal approach is to actively test designs, using the same software used by the visually impaired. Examples include text-based Web browsers such as Lynx, commonly used with Braille output or voice- synthesized screen-reading software. Other popular nonvisual browsers and screen readers are pwWebspeak from The Productivity Works (http://wwwprodworks.com), which has a trial version; TextAssist from Mindmaker (http://www.mindmaker.com); and IBM’S Home Page Reader (http://www.austin.ibm.com/sns/hpr.html). Accessibility standards and requirements The World Wide Web Consortium's (W3C) Web Accessibility Initiative Work Group has proposed a set of guidelines (http://www.w3.org/TR/WD-WAI-PAGEAUTH) to promote Web sites that are more accessible to a wider range of users and a wider range of devices, such as automobile PCs (PCs designed for use in cars, and therefore likely to be used with voice-synthesized screen readers). The guidelines include comprehensive explanations of accessibility issues, why certain pages are inaccessible, and detailed guidance and checklists for making improvements. The W3C is also working on proposed guidelines for Web-authoring tools to advance accessibility and flexibility in forms, tables, cascading style sheets, and graphics and multimedia applications, as well as standards for software developers to use in creating accessible authoring tools for sight-impaired designers. Other organizations and universities are at work on additional accessibility guidelines for software developers and Web designers. Strength in numbers Today, federal government Web sites are required to meet accessibility guidelines under the Americans with Disabilities Act of 1990, although no one is certain just how the law will shape future regulations. But the marketplace - not legislation and regulation - will likely drive greater Web accessibility. As the population ages, the visually impaired audience is becoming too large and too important for most companies, publishers, and other organizations to ignore. Designing for audiences with more serious impairments While the suggestions in the rest of this article can be implemented with relatively little effort, some sites - those catering to seniors, for instance - may require more extensive modifications, such as the ones listed below. Provide text equivalents for all visual information, including image maps, spacers, bullets, and applets. Use longer descriptions where images convey important information. Make text transcripts available for any important audio and video files so that access software can read the information. Use cascading style sheets rather than HTML to control the appearance and presentation of information on a page (see "Cascading style sheets" on the facing page); otherwise, access software may not be able to render the page intelligibly. Avoid the use of HTML tables for layout. If you use tables to structure page layout, provide some information in the attributes or table captions, indicating that the table is not a data table. Ensure that movements on screen - such as scrolling, blinking, or automatically refreshing objects and pages - can be turned off by users, since screen readers can't interpret moving text. Test user control over animated GIFs and JavaScript; in Internet Explorer 4.0, choose Internet Options from the View menu, click on the Advanced tab, and deselect Play Animations in the Multimedia category (you can select other accessibility options from this tab as well). In Netscape 4.0, you can turn off animations any time the Browser loads a new page by choosing Stop Animations from the View menu. Use titles in each frame so that users can keep track of frames by title. Maxine Williams (maxinew@dogcentral.com) is a writer, editor, and researcher specializing in healthcare issues. She is currently the content manager for Doghouse Productions in Seattle.