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 wont 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 cant 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 youre 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 Consortiums
HTML validation service (http://validator.w3.org). 

But while validation services can be very handy for checking code, theyre
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 IBMS 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.

