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

Lesson: Special Cases

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.

In this section, we'll talk about several accessibility issues that you may not have considered before. These special cases are easily resolved once you know the requirements and how to meet them.

Lesson Goals

  • About the importance of colors and color contrast.
  • About the importance of screen flicker and other visual distractions.
  • How to create a text-only page.

Never Depend on Color Alone

If you present information using only color, a person who cannot distinguish color will not have access to that information.

The Section 508 standard concerning this problem states:

Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

Color is useful in conveying important information. But when you use only color, by saying for example, "Please click the green button," you are excluding those people in your audience who cannot decipher color alone. Instead, you should put text (e.g., "OK") on the button and say, "Please click the green OK button."

An article on how color blindness affects vision included this example. Imagine that you were faced with this image and the instructions that follow it: Three buttons, green, yellow, red

Click the Green button to continue, the Yellow button if you need help, or the Red button if you want to quit.

Looks easy, right? But what if you instead saw one of the following: All three buttons appear shades of yellow All three buttons appear shades of pink The first button is blue; the others are shades of pink

These are actual examples of how various forms of color blindness affect vision.

Here is an example of a fairly common mistake; an actual customer survey form modified from one on a major commercial site that indicates required fields in red. A form using color only

The form is easily modified to be accessible by adding a second indication of a required field. In this case, asterisks are used. The same form with additional indication

Also see: http://www.taxslayer.com/. Screen shot of TaxSlayer.com with red required fields

When we requested permission to use the screen shot, TaxSlayer.com made a simple change so that the information is conveyed both in color and with text. TaxSlayer.com corrected

When color is used to convey important information, also use context and markup to convey the same information. For example, "Books that are available appear in green and in bold font."

  • Revised 508 standards (under consideration) will require "presentation of text (and images of text) in electronic documents must have a default contrast ratio of at least 5:1, except if the text is pure decoration. Large-scale text (or images of large-scale text) can allow a contrast ratio of at least 3:1
  • Choose highly contrasting colors for foreground and background

Color Contrast

In addition to the problem of using color alone, you need to be cognizant of the combinations of foreground and background colors you use. If the foreground and background are too close to the same hue, they may not provide sufficient contrast for people with different types of color deficits or for people who are using monochrome displays. The easiest way to avoid this problem is to choose highly contrastive colors for the foreground and background.

The current Section 508 Web Accessibility Standards do not have a requirement relating to color contrast; however, the revised 508 standards under consideration in the summer of 2007 do.

Presentation of text (and images of text) in electronic documents must have a default contrast ratio of at least 5:1, except if the text is pure decoration. Large-scale text (or images of large-scale text) can allow a contrast ratio of at least 3:1.

That may sound ominous. What is the contrast ratio? You can find such a definition in the Web Content Accessibility Guidelines working document, or you can use the the Web Accessibility Toolbar, Colour -> Contrast Analyser[application] to find the contrast settings on your web page. The following screen shot shows how this tool is used. Contrast analyser screen shot

Using the mouse one can point to foreground and background colors and then the tool calculates the contrast ratio for you. In the example in the screen shot above, the light gray text on a white background at the bottom of a Flickr.com page does not have adequate contrast; in this example, the contrast ratio is 2.8 to 1. It should be at least 5 to 1 for normal text and 3 to 1 for large (bold) text.

Avoid Flicker

  • Section 508 requires that "pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz."
  • Areas not specified by this standard:
    • Movement
    • Blinking
    • Scrolling
    • Auto-updating objects or pages
  • You should:
    • Ensure that users can pause or stop any moving, blinking, scrolling, or auto-updating objects on a page
    • NOT use the blink or marquee elements

Often people find animation distracting and confusing. However, individuals can turn off animations in Internet Explorer using Tools / Internet Options / Advanced, and there scroll down to Multimedia and uncheck Play animations. Using Netscape Navigator or Microsoft Internet Explorer, you can stop animated gifs with the Stop button on the tool bar or the Escape key.

People with photosensitive epilepsy can have seizures triggered by flickering or flashing in the 4 to 59 flashes per second (Hertz) range with a peak sensitivity at 20 flashes per second as well as quick changes from dark to light (like strobe lights). This concern caused the Access Board to include the following standard:

Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

Other areas not specifically covered by this standard are movement, blinking, scrolling, and auto-updating objects or pages.

Some people with cognitive or visual disabilities are unable to read moving text quickly enough or at all. Movement can also cause such a distraction that the rest of the page becomes unreadable for people with cognitive disabilities. Screen readers are unable to read moving text. People with physical disabilities might not be able to move quickly or accurately enough to interact with moving objects.

Animated images can be a nuisance to many people, so you must ask yourself if there is anything to be gained in having them in your Web site.

You should:

  1. Ensure that the user can pause or stop any moving, blinking, scrolling, or auto-updating objects or pages. If you must have movement on the page, use style sheets with scripting to create the effect you want. This allows users to turn off or override it more easily.
  2. Do not use the blink or marquee elements.

Timed Responses

  • When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

Accessibility problems can occur if your Web page times-out while a user is completing a form. For security reasons or to reduce the demands on the server, you may be tempted to design pages with scripts so that they disappear or "expire" if a response is not received within a specified amount of time.

A person with a disability may not be able to read, move around, or fill in a Web form within the prescribed amount of time. For this reason, the Access Board included the following standard:

When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

This is actually a performance standard rather than a design standard because it does not reference a specified length of time for users to respond. To satisfy this requirement, the actions you should take are twofold:

  1. Notify the user if a process is about to time-out.
  2. Provide a prompt asking whether additional time is needed.

Text-Only Page as a Last Resort

  • Keys to a text-only alternative page:
    • Provide a clear link to the alternative page
    • Ensure that the alternative page is accessible
    • Ensure that the alternative page has equivalent information or functionality
    • Update the alternative page as often as you update the original page
  • Betsie (BBC Education Text to Speech Internet Enhancer
    • tool that allows for the automatic generation of text-only sites
    • available for download at http://www.bbc.co.uk/education/betsie/index.html

This last special case was included in the Section 508 Standards as a "last resort method for bringing a Web site into compliance with the other requirements in §1194.22."

A text-only page, with equivalent information or functionality, shall be provided to make a Web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

If you must resort to providing a text-only alternative page, you must ensure the following:

  1. Provide a clear link to the alternative page.
  2. Ensure that the alternative page is accessible.
  3. Ensure that the alternative page has equivalent information or functionality.
  4. Update the alternative page as often as you update the original page.

Note: Alternative pages are generally updated less often than "primary" pages. An out-of-date page may be as frustrating as one that is inaccessible because, in both cases, the information presented on the original page is unavailable. Automatically generating alternative pages may lead to more frequent updates, but you must still ensure that generated pages make sense, and that users are able to navigate a site by following links on primary pages, alternative pages, or both. Before resorting to an alternative page, reconsider the design of the original page; making it accessible is likely to improve it for all users.

Several sites are adopting an automatic generation of text-only sites using a tool called "Betsie" which stands for BBC Education Text to Speech Internet Enhancer.

According to the Betsie site:

"Betsie makes various changes in the HTML code of the page - removing all the images and the unnecessary formatting, so that what you get sent is the text content of the page, unmolested and at the top, with all the links on the BBC Navigation Bar moved to the bottom, so they aren't the first thing you have to deal with every time."

The results of the Betsie transformation are very similar to what a user sees of the site with IBM Home Page Reader. The Betsie script is available for downloading.

It is rarely the case that a page cannot be made accessible, so that the hypothesis of §1194.22(k) (when compliance cannot be accomplished in any other way) is not met. Providing so called "text-only" alternatives is rarely justified by the 508 standards. Furthermore, the transformations used by Betsie require that the page be accessible anyway, such as having alt-text on images and labels on forms.

There is one commercial offering for creating text only versions, and that is from Usable Net. At this writing, you can see what the transcoder does at the National Science foundation web site. They offer a link to the transcoded version of the site as alt-text on an invisible image at the top of the page.

  • Use more than one color to indicate important information
  • Avoid flicker, moving, blinking, scrolling or auto-updating objects or pages
  • Give notice of time-out situations and allow the user more time
  • Provide text-only pages when necessary

Color

Duration: 10 to 20 minutes.

In this exercise, you will enhance accessibility with color.

  1. Open the file /SpecialCases/Exercises/exercise1.htm.
  2. Change colors to enhance reading and comprehension. (Hint: use the Color Contrast Analyzer on the Web Accessibility Toolbar.)
  3. Save your work.
  4. Compare with the file /SpecialCases/Solutions/solution1.htm.