Accessible Websites

Making Websites Accessible to People with Disabilities Is Not That Hard

- By Gary Miguel and Amy Guest

In 1998, Congress passed a law requiring federal agencies to make their web sites accessible to people with disabilities. Although the guidelines (known as Section 508 of the Rehabilitation Act, or just “508”) only apply to government and government suppliers’ web sites, private organizations can also benefit from making their information more accessible. “Accessibility is a readily achievable goal for most web sites,” explains Tim Springer of SSB Technologies. Is your web site accessible to the 40+ million Americans who have disabilities? This article outlines the basic elements of an accessible, 508-compliant web site.

[ back to top ]

Include Text Alternatives to Sounds and Images

Text equivalents of visual and audio content allow blind and low-vision users to use technologies like screen readers, speech synthesizers and Braille displays. This means using alt tag so that screen readers can interpret the image.

Screen readers are installed like any other software. They translate text to audio or Braille for users with low or no vision.

Even images that have no meaning—for example, a line used to separate sections, or a blank spacer—need an alt tag. These images should have empty alt tag (alt=””) so that a screen reader will skip over them.

Alt tag should be meaningful and describe the purpose of the image. For instance, the alt tag for an image of a house that links to the site’s home page should read “home page,” not “house”.

The alt tag underneath the above image describes the image and explains its functionality. 18.5 million Americans have visual disabilities. Alt tags “translate” the image and help them understand and navigate web pages.

[ back to top ]

Do Not Rely on Colors Alone

Make sure your webpage can be understood when in black and white as well as in color. Here are some tips:

• Use dark colored fonts on a light background to get good contrast
• Use bold instead of special colors for subheads or other text you want to stand out.
• Before finalizing your site, view it in black and white (see below). Or check your colors at colorfilter.wickline.org

To view your pages without colors:

• On a PC using Internet Explorer, go to 508 Compliant Tools website and follow the instructions there.
• On Mac OS 10.2 or higher, open "System Preferences," click on "Universal Access," and click "Set Display to Grayscale."

[ back to top ]

Use Markup and Style Sheets Appropriately

Use style sheets to define presentation aspects like font, size, color, etc. Style sheets allow users to adjust the display of a page to meet their needs. So a user with low vision could increase the font size, or a colorblind user could change the colors of the fonts.

But, make sure your pages are also readable without style sheets, since the screen readers and Braille displays used by many people with visual disabilities always need style sheets turned off.

Don’t use markup elements like tables for design purposes as they may confuse screen readers. Use only style sheets for design purposes.

[ back to top ]

Create Tables that Transform Smoothly

Make sure your tables include summaries, are used primarily for tabular data, and identify headers using the <th> element. If you use tables for layout instead of tabular data, make sure the contents of the table make sense when reading the columns line by line. For example, if a table splits a page into 2 columns, some screen readers will read the first line of the first column, then the first line of the second column, etc

[ back to top ]

Make Sure Pages Featuring New Technologies Transform Gracefully

If your web site includes more than basic HTML and CSS (such as JavaScript, Java applets, Flash, etc), provide a text alternative version of the page. This ensures that all visitors will be able to get to the content. Avoid features like JavaScript/dropdown menus that will make your site unusable by people with screen readers.

[ back to top ]

Use W3C Standards

To ensure that all browsers, screen readers, and devices can display your pages, have your code validated by W3C. Go to validator.w3.org

[ back to top ]

Provide Context and Orientation Information

Divide large blocks of information into smaller chunks to make it more manageable. Small paragraphs with clear subheads make your information easier to navigate. And, group related information together so all users (including those with reading or cognitive disabilities) will be able to navigate your site more easily.

If you use frames, be sure to title each frame.

“When a website doesn’t use alt tag and text equivalents, users with visual disabilities, like me, are unable to perform simple tasks independently.

I am in charge of ordering supplies for my office, but because the Office Depot SUBMIT button doesn’t have an alt tag, I always need to get someone to help me to place an order.”

- William Greer, webmaster of the Coalition of Texans with Disabilities

[ back to top ]

Make Navigation Easy

Label all links clearly and meaningfully. Simple, consistent navigation (in terms of appearance, language, and position on the page) helps all users. A site map and a search function can also help users find what they want.

1. Site navigation is always in the same spot. This site places it in on the left and makes the Site Map and Site Help links easy to find.
2. In this site the navigation for the active section is consistently in right nav. The topic you are in is “greyed out”.
3. Breadcrumbs at the top of the page show where you are now and let you link back to previous level.
4. A Table of Contents starts each section so the user can get to what they need quickly.

[ back to top ]

Make Language and Layout Clear and Simple

Use consistent page layout, easy-to-interpret graphics, and language that is easy to read and understand. Remember, the average American reads comfortably at the 5th grade level, 50% of consumers read only titles and subheads, and readers of all proficiencies benefit from text written and displayed with accessibility principles in mind.

[ back to top ]

Allow Users to Control Animated Objects or Pages

Moving, blinking, scrolling, or auto-updating objects and pages may cause problems for users with visual, cognitive, or physical disabilities. In some cases, flickering or flashing content can even trigger seizures in people with photosensitive epilepsy. So, make sure your site allows users to pause or stop animation.

[ back to top ]

Clarify Natural Language Usage

Specify what language your web page is in and make sure you use the appropriate tags to indicate language changes within a page. When language changes are clearly identified in the document, screen readers and Braille systems can switch to pronouncing or displaying words in the new language. Tags also help visitors unfamiliar with the language, as they allow them to use translators.

Expanding abbreviations and acronyms also helps search engines and users understand a page’s content.

Languages are identified using the “lang” attribute, abbreviations are expanded using the “abbr” element, and acronyms are expanded using the “acronym” element.

Example of specifying language in HTML:

<html lang=”en”>
  <body>
    This will be read as English.
    <p lang=”fr”> Ceci sera lu comme le français.</p>
  </body>
</html>

Example of specifying acronyms in HTML:

<acronym title=”United Nations”>UN</acronym>

[ back to top ]

Ensure Direct Accessibility of Embedded User Interfaces

Web sites that use new technologies like Java are generally less accessible. However, even if your web site must use an applet, movie, or script with its own interface, you can still find ways to make it accessible. Java 2 now supports accessibility features through the javax.accessibility package. Flash also supports some accessibility features. Whatever features you use, remember to avoid making interfaces that rely on a mouse to be usable

[ back to top ]

Field-test Your Web Sites

The only way to ensure that your web sites are truly accessible is to conduct testing with people with disabilities. Although web designers themselves can check if their sites meet 508 guidelines, field-testing will allow you to evaluate your site from the consumer’s perspective, help you identify areas that need tweaking, and give you a measure of confidence that you have created a site that truly offers equal access

[ back to top ]

Resources

sun.com/access/developers/developing-accessibile-apps
A tutorial on creating accessible Java applications.

java.sun.com
The javax.accessibility package.

macromedia.com
A tutorial on creating accessible flash content.

508compliant.com/tools.htm
A web site offering free tools (for use on IE) that let you test your web site for accessibility.

cynthiasays.com
A tool that tests web pages and identifies accessibility problems.

w3.org
“How People with Disabilities Use the Web”: an excellent document outlining different scenarios you should consider when designing your web site.

ssbtechnologies.com
A web with tools that can test your web site’s accessibility.

For more information on Readability and plain language call Transcend at 530.756.5834.

Click here to download this article in PDF format.

Click below to visit other areas of the library:

[ Main Library ]
Legal Information
For Court Administrators
Elections
Health
Schools
Accessible Websites
Case Study
Transcend Tools
Interesting Articles

Terms of Use: All materials in this library are free. You may use them according to the terms of these creative commons licenses:

You must credit Transcend.
You may not use this item (or a remixed version of this item)
for any commercial purpose.
You must take full responsibility for any claims related to your
use of the item (or remixed version of the item).