University of Maryland Web SiteUniversal Usability in Practice homepageUNIVERSAL USABILITY IN PRACTICE

Blind and Low Vision Users

Edward Hung (ehung@cs.umd.edu)

Department of Computer Science
University of Maryland
College Park, MD 20742 USA
May 2001

 

 

1. Introduction

 

 

Numerous countries have passed legislation encouraging or even requiring accessibility in different settings, ranging from the general to the very specific. Different countries have different laws. One of the most critical laws is Section 508 of the Federal Rehabilitation Act in the United States, which specifies that starting from June 21, 2001, the U.S. government shall stop purchasing any information technology that is inaccessible to people with disabilities, nor will it make available for public use any information technology that is inaccessible (U.S. Federal Information Technology Accessibility (http://www.section508.gov/)). Universal usability of web sites is a growing concern in the US  and worldwide.

 

By definition, accessibility is a category of usability: software that is not usable by a particular user is not accessible to that person. Just like other usability measures, it is necessary to define accessibility with respect to the user task requirements and needs. For example, graphical user interfaces are not very accessible to blind users, but relatively accessible to deaf users.

 

When we come to accessibility of web design, we will say that accessible web design is a sign of good web design. A lot of the information on the Web is not accessible to people with disabilities because of poor design. While many web site managers and developers accommodate various browser constraints, most of them do not realize that they are developing sites that people with disabilities have difficulty in navigating, or in many cases, cannot navigate at all (Microsoft Accessible Web design guidelines (http://www.microsoft.com/enable/dev/web/)).

 

The purpose of this article is to provide recommendations, guidelines, examples and resources to web site developers on how to develop web sites accessible to users that are blind or have low vision.

 

People with visual disabilities are individuals who are blind, have low vision, or have color blindness. In this article, we will consider users with blindness and low vision.  For accessibility to color blind users and the user of color and color contrast, readers can refer to the related articles in Universal Usability Practice: Color vision confusion and Elderly. A blind person is one who cannot use a visual display at all. These are users who read Braille displays or listen to speech output (from a screen reader) to get information from their systems. Users with low vision have a wide variety of visual capabilities.  Estimates suggest that there are approximately 9-10 million people with low vision. A person with low vision can be considered to be someone who can only read print that is very large, magnified, or held very close. (Sun Microsystems' Accessibility Program (http://www.sun.com/access/background/design.html)) From the statistics by American Foundation for the Blind, there are at least 1.5 million blind and visually impaired adults in the United States using computers. (American Foundation for the Blind (http://www.afb.org/info_document_view.asp?documentid=1374))

 

The World Wide Web Consortium (W3C) (http://www.w3.org/TR/WCAG10-TECHS/) gives the definitions of the following terms (the three pictures below are from NCSA Mosaic Access Page (http://bucky.aa.uic.edu/HTML/vision.html)):

 

 

  • Accessible
    • Content is accessible when it may be used by someone with a disability.

 

  • Screen reader
    • A software program that reads the contents of the screen aloud to a user. Screen readers are used primarily by individuals who are blind. Screen readers can usually only read text that is printed, not painted, to the screen.

Screen reader

 

  • Braille display
    • Braille uses six raised dots in different patterns to represent letters and numbers to be read by people who are blind with their fingertips.
    • A Braille display, commonly referred to as a "dynamic Braille display," raises or lowers dot patterns on command from an electronic device, usually a computer. The result is a line of Braille that can change from moment to moment.

Braille display

 

  • Screen magnifier
    • A software program that magnifies a portion of the screen, so that it can be more easily viewed. Screen magnifiers are used primarily by individuals with low vision.

Screen magnifier

 

 

Some organizations or companies also consider screen readers to include software that provides access to graphical user interfaces by providing navigation as well as a Braille display or speech synthesized reading of controls, text, and icons.

 

The rest of this article gives general recommendations for the goals of improved design in Section 2. Then Section 3 provides specific guidelines for web site developers to make their web sites accessible to blind and visually impaired users. Section 4 gives examples of good web sites with links and analysis. Future progress needed for practitioner and researchers is suggested in Section 5. Finally, resources including web links, organizations and papers are given for readers’ reference in Section 6.

 

 

 

         

2. General recommendations

 

 

This section states briefly the main goals of accessibility that a good web design should achieve.

 

 

Blind

 

Goals of accessible web design relative to blind users are:

  • To ensure that all essential information can be accessed via text, such that blind users can use screen readers or Braille display to access the information; the information include graphics, image maps, multimedia presentations, etc.;
  • To provide prerecorded audio as an alternative mean;
  • To allow users to navigate the site by using keyboard only because the mouse is not useful to blind users;
  • To minimize the users’ memory load because blind users can only “hear” (or “view”) one word at a time and need memory to integrate portions of documents.
  • To ensure the accessibility by using accessibility analysis tool to examine the sites;
  • To provide alternative non-web access to critical information, e.g., phone, fax.

 

 

Low Vision

 

Our goals of accessible web design relative to low vision users are:

  • To ensure that text is large enough because low vision users usually need screen magnifier to enlarge the text;
  • To provide audio option to notify low vision users about new information or state changes;
  • To minimize the users’ memory load because the effective screen size is very small while using screen magnifier;
  • To enable users to locate information quickly

 

 

 

 

3. Specific guidelines

 

 

This section provides the guidelines in details for designing accessible web sites. The guidelines are products by selecting and combining guidelines from the following:

 

  • Web Content Accessibility Guidelines 1.0

(http://www.w3.org/TR/WCAG10-TECHS/)

  • Microsoft Accessible Web design guidelines

(http://www.microsoft.com/enable/dev/web/howto.htm)

  • IBM Accessibility Center: Web Guidelines

(http://www-3.ibm.com/able/accessweb.html)

  • Sun Microsystems' Accessibility Program Design Guidelines

(http://www.sun.com/access/background/design.html)

 

The guidelines for designing web sites accessible to blind users will be given first, followed by that for low vision users. The [Priority] number in the guidelines is from Web Content Accessibility Guidelines 1.0. Besides, a useful article “Usability Heuristics for Evaluating Web Structure and Content for People with Visual Disabilities” can be found in http://www.acm.org/sigchi/web/chi97testing/katz.htm.

 

 

Blind

 

 

1.      Text equivalent

 

A good web site provides text-based means of conveying all essential information. It also provides essential information via text because text can readily be output to a speech synthesizer, other sound output device, or a Braille output device.

 

Blind users have screen reading software that can read the text contents of buttons, menus, and other control areas but screen readers cannot read the contents of an icon or image, they can only read the descriptive label or accessible name associated with them. Meaningful names should be provided for user interface objects in their code. Meaningful names can allow some screen reading software to provide useful information to users with visual impairments. Rather than naming an eraser graphic "widget5", for example, the code should call it "eraser" or some other descriptive name, that users will understand if spoken by a screen reader.

 

Without such descriptive information, blind or low vision users may find it difficult or impossible to interpret unlabeled, graphically labeled, or custom interface objects. Providing descriptive information may provide the only means for access in these cases. As an added selling point to developers, meaningful widget names make for code that is easier to document and debug.

 

Provide a text equivalent for every non-text element and embedded objects (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. [Priority 1]

 

 

1.1  Good ALT text for all graphics.

  • Every image should have ALT text.
  • Convey the important information in the image.
  • Use simple text for simple images (e.g. "*" for a bullet, numbers for a numbered image, and a single space character or an empty string for invisible images that are typically used for spacing).
  • For complex images, provide a link to a separate page with a more detailed description.
  • Prevent the ALT text from forming columns; either
    • put images on separate lines or
    • use delimiters around the ALT text or
    • do not specify the image's HEIGHT and WIDTH attributes.
  • Turn off graphics, make sure the ALT text displayed makes the page usable.

 

1.2  Proper use of image maps

  • Provide text links in addition to any image map, either in-line or at the bottom of the page.
  • Use useful ALT text (such as "Map of campus; use text links below").
  • Provide redundant text links for each active region of a server-side image map. [Priority 1]
  • Use client-side image maps whenever the client supports them.
  • Until user agents render text equivalents for client-side image map links, provide redundant text links for each active region of a client-side image map. [Priority 3]
  • For using Internet Explorer 4, use TITLE attributes to name AREA fields in client-side image maps

 

1.3  For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with the presentation. [Priority 1] Readers can also refer to a related article in Universal Usability Practice: Textual equivalents for audio/video representations of content.

 

1.4  Alternatives to all controls and applets

  • Provide an alternate page that uses static text and graphics for displaying information, and standard links for input
    • Example: For a search field, provide a tree of indexed links
    • Example: For a form, provide instructions to supply information by phone, fax, mail, or email
    • Example: For information displayed by an ActiveX control or Java applet, provide a page displaying the same information as HTML text.
  • ActiveX controls should use Active Accessibility to be compatible with accessibility aids.

 

1.5  Use explicit labeling of content and structural elements.

 

1.6  For using Internet Explorer 4

  • Use either LABEL or TITLE tags to associate a name with every control and object.
    • Use the TITLE attribute to provide user-friendly names for the following objects: A, APPLET, AREA, BGSOUND, BUTTON, CODE, COL, COLGROUP, DIV, EMBED, FORM, FRAME, H1-H6, IFRAME, IMG, INPUT, LABEL, MARQUEE, OBJECT, OPTION, SELECT, TABLE, TD (if appropriate), TEXTAREA, TR.
  • Java applets should use Active Accessibility for Java to be compatible with accessibility aids.

     

1.7  Finally, select all text and copy it to the clipboard, ensure it makes sense when pasted into a word processor.

 

 

2.      Auditory description

 

  • Until user agents can automatically read aloud the text equivalent of a visual track, provide an auditory description of the important information of the visual track of a multimedia presentation. [Priority 1]
  • Provide prerecorded audio and parallel text. Certain types of text (e.g., mathematical equations, complex charts, poetry) may be difficult to understand using standard screen reading software and hardware. Prerecorded audio may contain specialized inflections or additional descriptions to facilitate comprehension.

 

 

3.      Good Keyboard Navigation

 

Screen reader software provides access to graphical user interfaces by providing navigation as well as a Braille display or speech-synthesized reading of controls, text, and icons. A person who has a visual disability will not find the mouse useful because it requires hand and eye coordination. Instead, this person must navigate the Web page using only the keyboard. For example, the Tab key is used to move the focus to the item that needs to be selected. A screen reader then announces the item so the user knows where the focus is on the page.

The blind user typically uses tab and arrow controls to move through menus, buttons, icons, text areas, and other parts of the graphic interface. As the input focus moves, the screen reader provides Braille, speech, or non-speech audio feedback to indicate the user's position. For example, when focus moves to a button, the user might hear the words "button -- Search", or when focus moves to a text input region, the user might hear a typewriter sound. Some screen readers provide this kind of information only in audio form, while others provide a Braille display (a series of pins that raise and lower dynamically to form a row of Braille characters). Finally, the user can press a specified key (e.g. the Enter key) instead of "clicking" the mouse button.

 

  • The TAB key moves between links and image map areas in the order they're defined in the HTML- be sure it generally moves from left to right and top to bottom, but does not skip back and forth between groups of items.
  • Make sure that CTRL+TAB moves between panes or sections.
  • For using Internet Explorer 4, it is essential that you keyboard-enable your Web pages by using DHTML.
    • Focus position of the cursor on the Web page, indicated either by the cursor or by a light gray marquee.
    • Use the TABINDEX attribute to specify proper keyboard navigation order when necessary.
    • Use the ACCESSKEY attribute to provide access keys for all controls, and for links that act like controls.
      • Underline the access key in the control's label.

 

 

4.      Minimize the users' memory load.

 

For persons using screen reading software, they can "view" (hear) only one word at a time and must rely on their own memory to integrate portions of a document.

 

  • Use chunking. Write material so that documents are short and contain exactly one topic, idea, or concept. Do not force users to remember key information across documents or between diverse locations within the same document.
  • Design minimalist systems. Eliminate information that is irrelevant or distracting.

 

 

5.      Use Bobby (http://www.cast.org/bobby), the analysis tool, to examine your pages.

 

 

6.      Provide alternative access to critical information. Provide non-Web access (e.g., email, phone, fax) to critical information or graphics that cannot be easily described in text.

 

 

 

Low Vision

 

 

            For designing accessible web sites to low vision users, the web site developers can also refer to the guidelines for blind users. Most of them can also be applied here.

 

 

1.      Large font size

 

The common theme for low vision users is that it is challenging to read what is on the screen. Those who have low vision need the assistance of a hardware or software magnifier to enlarge the text beyond simple font enlargement. Although many users employ screen magnification hardware or software to enlarge their view, performance and image quality are improved if larger font sizes are available prior to magnification.

 

·        Use the largest font size supported by the browser (the largest is only available when High Contrast mode is turned on).

 

 

2.      Configurable font size

 

            All fonts, including those in text panes, menus, labels, and information messages, should be easily configurable by users. There is no way to anticipate how large is large enough. The larger fonts can be scaled, the more likely it is that users with low vision will be able to use software without additional magnification software or hardware.

 

 

3.      Option of audio

 

A related problem for users with low vision is their limited field of view. Because they use large fonts or magnify the screen through hardware or software, a smaller amount of information is visible at one time. A limited field of view means that these users easily lose context. Events in an interface outside of their field of view may go unnoticed. These limitations in field of view imply that physical proximity of actions and consequences is especially important to users with low vision. In addition, providing redundant audio cues (or the option of audio) can notify users about new information or state changes.

 

 

4.      Minimize the users' memory load.

 

For persons using screen magnification software, the effective size of the computer screen can be very small. Therefore, low vision users must rely on their own memory to integrate portions of a document. Please refer to the fourth guideline for blind users.

 

 

5.      Use the High Contrast option in the Accessibility Options section of Control Panel, restart the browser, make sure the page is still readable.

 

 

6.      Minimize Visual Strain

 

  • Use simple visual designs.
  • Avoid patterned or complex backgrounds.

 

 

7.      Enable the user to locate information quickly by providing efficient methods for search and navigation.

 

  • Give navigational feedback.
  • Provide progressive levels of detail.
  • Minimize display time and screen refreshes.
  • Enable easy searches.

 

 

8.      Resize the browser window larger and smaller to see whether there is any problem in the layout of the page because low vision users using magnification software may have a smaller effective size of the browser window.

 

 

 

 

4. Examples of successful web sites

 

 

This section provides some good examples of web sites accessible to blind and low vision users.

 

4.1 American Foundation for the Blind (AFB)  (http://www.afb.org)

 

  • The site has ALT text for all images.
  • It sets large font size.
  • It provides pre-recorded audio and text version (e.g. greeting).
  • It provides brief overview of different sections to reduce memory load.
  • Its visual design is simple to minimize visual strain.
  • Its “Change Colors” feature allows low vision users to select a high-contrast color scheme and apply it to the entire AFB web site.
  • AFB has provided "access keys" - unique keyboard commands - for its most commonly used links, so that Internet Explorer users can quickly jump to those links from anyplace on a page.
  • It provides low vision users with “Guidelines for Web Users with Low Vision” for tips on making other sites easier to read.
  • It provides search facilities for fast locating of information.

 

4.2 Lighthouse International (http://www.lighthouse.org)

 

  • The site provides text-only version
  • It has ALT text for all images
  • It uses large font size
  • It is Bobby test approved
  • It provides search facilities for fast locating of information.

 

4.3 Adaptive Technology Computing Site (http://www.umich.edu/~sites/info/atcs)

 

  • The site provides (large) text-only version
  • It has ALT text for all images
  • It provides pre-recorded audio
  • It is Bobby test approved

 

4.4 universalusability.org (http://www.universalusability.org/)

 

  • The site has ALT text for all images.
  • Its visual design is simple to minimize visual strain.
  • It provides search facilities for fast locating of information.

 

4.5 ET Royal National Institute for the Blind (http://www.rnib.org.uk)

 

  • The site has ALT text for all images.
  • Its visual design is simple to minimize visual strain.
  • It provides search facilities for fast locating of information.

 

4.6 National Federation for the Blind (http://www.nfb.org)

 

  • The site has ALT text for all images and animated gif.
  • Its visual design is simple to minimize visual strain.
  • It provides search facilities for fast locating of information.

 

4.7 BCAB: British Computer Association of the Blind (http://www.bcab.org.uk)

 

  • The site is text-only.
  • It provides text version and html version for the same document.

 

 

 

 

5. Future progress needed

 

 

Researchers should consider automatic analysis of web pages to check its accessibility to blind and low vision users. Bobby (http://www.cast.org/bobby) is a good example for web page analysis, but there is still room for improvement. Automatic correction will be a great help for web site developers. Another possibility is automatic translation of inaccessible web pages to accessible web pages. Moreover, researchers should work to improve software and hardware for blind users or low vision users so that it is easier for them to access web contents.

 

Practitioners should collect experience and develop better guidelines and set standards so that web site developers can achieve accessibility of their web sites more easily.

 

 

 

 

6. Resources

 

 

6.1 Legistration

  • U.S. Federal Information Technology Accessibility (http://www.section508.gov/)
    • Section 508 requires that Federal agencies' electronic and information technology is accessible to people with disabilities, including employees and members of the public.

 

6.2 Organization

  • World Wide Web Consortium (W3C) (http://www.w3.org/TR/WCAG10-TECHS/)
    • The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential as a forum for information, commerce, communication, and collective understanding.
  • American Foundation for the Blind (AFB) (http://www.afb.org)
    • A nonprofit organization founded in 1921 and recognized as Helen Keller's cause in the United States, AFB is a leading national resource for people who are blind or visually impaired, the organizations that serve them, and the general public.
  • National Federation for the Blind (NFB) (http://www.nfb.org)
    • Founded in 1940, NFB is the nation's largest and most influential membership organization of blind persons. As a consumer and advocacy organization, NFB is considered the leading force in the blindness field today. The purpose of the National Federation of the Blind is two-fold—to help blind persons achieve self-confidence and self-respect and to act as a vehicle for collective self-expression by the blind.
  • Lighthouse International (http://www.lighthouse.org)
    • Founded in 1905 and headquartered in New York, Lighthouse International is a not-for-profit organization and a leading resource worldwide on vision impairment and vision rehabilitation. Through its pioneering work in vision rehabilitation services, education, research and advocacy, Lighthouse International enables people of all ages who are blind or partially sighted to lead independent and productive lives.
  • Royal National Institute for the Blind (RNIB) (http://www.rnib.org.uk/)
    • RNIB is one of the UK's biggest and most diverse charities. RNIB's task is to challenge blindness: it challenges the disabling effects of sight loss by providing information and practical services to help people get on with their own lives; it challenges all who put barriers in the path of blind and partially sighted people; and it challenges the underlying causes of blindness by working towards its prevention, cure or alleviation.
  • British Computer Association of the Blind (BCAB) (http://www.bcab.org.uk/)
    • BCAB is a self-help group of visually impaired computer professionals and users and was founded in 1969. The main aim of BCAB is to promote the use of Information and Communications Technology by visually impaired people in education, employment and the home. BCAB works to locate new sources of information, holds discussions with international software developers about the impact of their products and establishes contacts amongst companies and researchers working to provide specialized publications, systems and equipment in the UK, Europe and worldwide.

 

6.3 Guidelines

 

6.4 Analysis tool

 

6.5 Products

  • Apple (http://www.apple.com/disability/vision/)
    • outSPOKEN (screen reader software), inLARGE (screen magnifier), Duxbury Braille Translator (translates text into braille), Braille Embossers (prints Braille), Click It! (provides keyboard control of the menu bar), Biggy (increase size of the mouse cursor), Braille Overlays for IntelliKeys.
  • IBM (http://www-3.ibm.com/able/products.htm)
    • Home Page Reader (a self voicing Web browser), Screen Magnifier (text and image enlarger), Screen Reader (converts text and screen information into speech output), Self Voicing Kit (SVK) (allows developers to add an audio user interface to Java tm applications)
  • SSB Technologies  (http://www.ssbtechnologies.com)
    • SSB Technologies is a company founded by technologists with disabilities which has developed automated software tools which help make web sites and intranets accessible to people with disabilities
    • SSB Technologies' software suite diagnoses and retrofits inaccessible web sites. InSight allows page authors to diagnose a web page for inaccessibility. InFocus allows the author to quickly fix the problems of an inaccessible web page. Clarity generates reports on the accessibility of an entire web site, including summary statistics and page-level detail.
  • Henter Joyce, a division of Freedom Scientific (http://www.hj.com)
    • Leading developers of software for blind and low vision computer users: JAWS for Windows Screen Reader and MAGIC Screen Magnifier.
  • Adaptive Technology Computing Site (http://www.umich.edu/~sites/info/atcs)
    • It provides links to homepage readers, voice recognition/dictation, text to voice, magnification, screen reader, etc.
  • Lynx (http://lynx.browser.org)
    • Lynx is a free text-based Web browser.
    • BLYNX: Lynx Support Files Tailored for Blind and Visually Handicapped Users (http://leb.net/blinux/blynx/)

 

6.6 Links

 

 

6.6 Newsgroups

  • news:alt.comp.blind-users
    • A newsgroup related to computer technology for the visually impaired.

 

 

6.7 Books

  • B. Shneiderman, Designing the User Interface, 3rd Edition, Addison-Wesley, (1998)    
  • Jakob Nielsen, Designing Web Usability : The Practice of Simplicity, (1999)
  • Barbara T. Mates, Doug Wakefield, Judith M. Dixon, Adaptive Technology for the Internet : Making Electronic Resources Accessible to All, (2000)
  • Olga Espinola, Diane Croft (Editor), Captured by the Net: An Internet Guide for Blind Users [BRAILLE], (1999)

 

 

6.8 Papers

 

 

 

 

 

 

Edward Hung

Department of Computer Science
University of Maryland
College Park, MD 20742 USA
ehung@cs.umd.edu
May 2001