facebook google plus twitter
Webucator's Free Web Accessibility and Section 508 Tutorial

Lesson: Assessing Your Site's Accessibility

Welcome to our free Web Accessibility and Section 508 tutorial. This tutorial is based on Webucator's Web Accessibility and Section 508 Training for Experienced Web Designers course.

There have been many changes related to web accessibility and Section 508 since its inception. The Section 508 Standards are under revision now, and it may be some time before those Standards have the force of law. Assistive technology has dramatically improved, especially relating to navigation within pages and there are new technologies, such as Ajax, that create new challenges for assistice technologies.

Lesson Goals

  • About accessibility toolbars.
  • How to troubleshoot using your browser.
  • How to view your page without images, change fonts and colors, and use the keyboard for testing.
  • About Lynx, the IBM Home Page Reader, and other evaluation and repair tools

Accessibility Toolbars

  • Recommended:
    • Download the Lynx browser
    • Accessibility Toolbars

In this lesson, we will talk about using your browser to check your pages. We will also introduce you to some accessibility toolbars and, by way of example, look more deeply at the Web Accessibilty Toolbar for Internet Explorer.

I used to recommend downloading the Lynx browser, which can still be useful. However, some of the other accessibility tools give you a text view or "Lynx view" of the current page. This view provides an appoximate idea of what a screen reader user listening to your page will hear.

Below is a list of accessibility toolbars:

  • 15 Menu buttons - detailed menu by menu documentation available on the WAT website

The Web Accessibilty Toolbar for IE

After downloading and installing the toolbar (Version 2), the menu items appear just above the browser main window. screenshot of the toolbar

The toolbar consists of a series of fifteen buttons shown in the screenshot above. Many of the buttons bring down menus of functions. The buttons are:

  1. WAT - Documentation and update function.
  2. Check - Validation tools including a Quick Check which returns the number of errors from the W3C HTML validation site in an alert box without having to display the Validator page. Two one page testing tools are included here. Also this is where you find the Lynx view option.
  3. Resize - Various options to resize the browser window.
  4. CSS - Options to Disable CSS or certain parts of CSS. Extremely useful.
  5. Images - Various options to explore the alt-text of images including Remove Images which used to be called Toggle Images and Alt; it just replaces each image with its alt-text or "No alt" in the image has no alt attribute.
  6. Colour - Options to test for contrast or view in Grayscale. The Contrast Analyser application can be launched from this menu.
  7. Structure - Functions to analyze (i.e. highlight) the semantic markup on the page, including headings and lists.
  8. Tables - This is separated out from Structure in the previous version. That definitely is helpful because the Structure menu had become too long. Here you can look, for example, at Table headers - the tool gives a black background to th cells.
  9. Frames - From the Frames menu you can navigate to specific frames or get a list of frame and iframe elements including important title information. With Version 1 of the Web Accessibilty Toolbar , none of the non-frame functions like replacing images with alt-text, worked if a page had frames. That has been corrected, and each function will be applied to each frame page in the frame set.
  10. Doc Info - Lots of information about the current document including Downloadable files, List of Links, Internal Links (In-Page links) , and JavaScript / New Window links
  11. Source - Various source code options, including the important "partial source" for highlighted text on the page. The Highlight Source menu allows you to specify which elements you are interested in, and then the source code is displayed with those elements highlighted so they are easy to find.
  12. IE - A menu of easy to access standard IE accessibility functions like Text size.
  13. Log - Press the Log button and a small edit area opens at the top of the browser. Functions add information and you can type information, and save the results.
  14. FireFox - Open the current page in Firefox - how cool is that!
  15. Opera - Open the current page in Opera!

Detailed Menu by Menu documentation is available on the WAT web site.

Using Your Browser

The first and most dramatic way to test your web pages is by putting your own browser to work. You should set up your browser to display pages without images. And, you should try viewing your web pages with large fonts and with different color schemes.

While you perform these "tests," remember they are real-life necessities for people who are blind or visually impaired.

Viewing Your Page Without Images

  • Test pages by:
    • Display pages without images
    • View pages with large fonts
    • View pages with different color schemes
  • Shows you what a:
    • screen reader user would hear
    • non-graphical browser user would see

To see what a screen reader user would hear, or what a non-graphical browser user would see, you can view pages with images turned off. Use the Web Accessibilty Toolbar : Images > Remove Images. Below is a screenshot of part of the Travelocity.com home page, before and after the Remove Images function has been performed. Travelocity Screenshot with images Screenshot with alt-text replacing each image

With the two screenshots - one unaltered and the other with alt-text replacing the images - you may be able to look back and forth to compare alt-text with the image to check the quality of the text alternative. The Toolbar (of course) offers other better options for doing that. If you use Show Images instead of Remove Images, then the alt-text will be placed next to the image for easy evaluation. Alternatively, you can use List Images which creates an HTML page listing all the images and the code associated with each - there you can see the alt attribute.

Changing Fonts and Colors

  • Some users view pages with fonts and colors changed

Some users view pages with fonts and colors changed, which is not the way the web developer specified them.

  • To reject colors and fonts of the web author use the Toolbar, IE > Accessibility Dialog and check the ignore colors, font styles and font sizes check boxes
  • To change to a larger font use the Toolbar, IE > Textsize > Largest

Using the Keyboard

  • All pages should be tested using ONLY the keyboard to navigate
    • Using IE, Netscape Navigator and Firefox, use the tab key to move between links
    • Using Opera, use the A key to move between links (Q to move backwards)

Many people with disabilities are not able to use a mouse because they lack hand-eye coordination, because they can't see the mouse pointer or because they lack fine motor control. All pages should be tested with the mouse hidden from the tester's grasp. Use only the keyboard to navigate from link to link and to all form controls.

With Microsoft Internet Explorer or Firefox use the Tab key to move from link to link and around the elements of a form. Shift+Tab moves backwards. With Opera, use the A key to move through links, Q to move backwards. In Opera the Tab key moves between form controls (Shift+Tab backwards). Try using some familiar site in this way (no mouse!). Use the Toolbar (last two buttons) to open the current page in Opera or in Firefox.

Accessibility Testing Tools

  • Web Accessibility Toolbar is a testing tool itself
    • Checks for:
      • Missing alt-text on page
      • Missing attributes for images

The Web Accessibilty Toolbar is really a testing tool itself. You can quickly check alt-text on pages, and if images are missing this required attribute, the Toolbar lets you know with an alert how many images have no alt-text. ALert showing 46 images lacking alt-text on MyYahoo.com

From the Web Accessibilty Toolbar Check button you can activate two one page Accessibility Testing tools against the current page, Cynthia Says and WebExact.

Using Lynx

  • Text-only browser, with all text linearized - no graphics (images are replaced with their alt-text)

Lynx is a text-only browser that runs on many platforms, including Unix and DOS. You can download Lynx at http://lynx.browser.org/. Some people with disabilities use Lynx as their browser. It displays a page much as word processors display text - a line at a time. All the text in tables, both data tables and formatting tables, is linearized.

If you have never seen Lynx, here is a screenshot viewing an IBM page. lynx view of ibm.com

Of course, being a text-only browser, there are no graphics, and images are replaced by their alt-text. So you can again get an appreciation of how a blind user will interact with your page.

The IBM page shown in Figure 3.3 is a good page for accessibility and it reads well in Lynx. Here is an example of a web site, with the title bar removed, which is not good. This company is in fact involved in accessibility evaluation for the web. Screenshot of Lynx view of inaccessible site

As you view pages with images turned off, or in a text browser like Lynx, remember that that could be the way the page is displayed on someone's PDA or cell phone or other non-graphical browser.

You don't have to download and install Lynx to get the picture. A Lynx viewer is available through the Web Accessibilty Toolbar . Use the Check button and then Lynx View.

Using IBM Home Page Reader

  • Talking browser, for people with vision impairments
  • Shows web page in two views:
    • Graphics view - true rendering of the web page
    • Text view - shows what a blind user would hear when listening to the web page
  • No longer offered by IBM
  • Other screen reader companies offer versions of their screen reading software:
    • JAWS (Freedom Scientific)
    • Window-Eyes (GW-Micro)

IBM Home Page Reader is a talking browser designed for people with vision impairments. Screenshot of HPR user interface

Download the free 30-day trial (http://www-03.ibm.com/able/solution_offerings/hprtrial3.html) to hear your site spoken. This will enable you to fix the content of your web site so that it sounds correct to someone using a talking browser or screen reader.

HPR offers another testing advantage because it presents a web page in two different views. It places the graphics view, a true rendering of the web page, in the upper portion of the program window. Then, it shows a text view of the web page in a window below that graphics view. By looking at the text view, you'll gain an appreciation for what a blind user would hear when listening to your web page. HPR allows you to save the text view to a file.

The bad news is that HPR is no longer supported by or offered by IBM. But you can still download the trial (URL above). And it seems that some copies are still available on the Internet; for example Buy.com says they have HPR at $86.99, with this warning: "Very few left In Stock! Order soon -- product may sell out."

Both major screen reader companies, Freedom Scientific (JAWS) and GW-Micro (Window-Eyes) offer demo versions of their screen reading software. You can download and install the product and use it for about 30 minutes, but then it stops working; however, when you reboot your machine, you can use the screen reader again for approximately 30 minutes.

  • View a list of these tools at The Evaluation and Repair Working Group of the Web Accessibility Initiative's site
  • Test your site multiple ways to ensure that you have met accessibility guidelines

Using Other Evaluation and Repair Tools

There is a large number of evaluation and even repair tools that are designed to help you make your web site accessible. The Evaluation and Repair Working Group of the web Accessibility Initiative has a list of about 122 of these tools on their site.

One of the greatest benefits of using the tools is education. If you try them, you will find reports of dozens of errors or violations even when you thought your page was accessible.

There are many items that cannot be checked by any computer program, like whether or not your web site uses color alone to convey information. A tool can check whether or not images and areas have alt-text and whether or not frames have name and title attributes. But, the tool cannot decide if those are good values, and the tool cannot add meaningful alt or title attributes - that will always be up to you.

Web Accessibility

Duration: 30 to 60 minutes.

In this exercise, you will assess a website in terms of web accessibility. Browsing a website of your choice, complete the following tasks:

  1. Using the Web Accessibility Toolbar:
    1. Replace images with their alt-text. Is any important information missing?
    2. Disable CSS. Is the information still understandable?
    3. Linearize all tables. Does the content still make sense?
    4. Change the fonts and colors. Is any content illegible?
  2. Unplug or move your mouse. Without using your mouse, navigate the site. Is there any action you are unable to complete?
  3. Use WebExact or Cynthia Says to evaluate a page. How did the page fare? Were there any unexpected results?
  4. Use the Lynx View in the Web Accessibility Toolbar. Is the content understandable? Is any important information missing?

Challenge

  1. Use a talking browser (e.g. Home Page Reader) or a screen reader (e.g. JAWS or Window Eyes) and turn off your monitor. How easy is it to understand and navigate the content?