Skip the site navigation

Making Accessible Websites

A Workshop for the RECAP Conference
West Chester University, May 16, 2003
Paula Edmiston, The Flying Cat, Inc.

** check these offsite links 3/5/12 ** and is there an online lynx imitator because few people have shell access

 

** link ada here The American with Disabilities Act (ADA) sets standards on websites accessibility.

What is Website Accessibility?

Maintaining an accessible website can be relatively easy and bring you the rewards of being truly accessible to everyone. It's not just the disabled that benefit, but people with older computers and browsers, hand help devices like mobile phones that connect to the Internet, and people with slow, dial-up, connections to the Internet. Also of great importance are those people (like myself!) with deteriorating eyesight. I have an add-on for my browser that can increase the size of the contents of a web page. It can be quite annoying to hit a site coded in such a way that these helper add-ons cannot affect the site.

Accessibility Tips

Images and Alternative Text

The most important thing you can do is to use appropriate alternative text on your images. Alternative text is not used just by people with visual impairments; it's used by non-graphical browsers, mobile phone browsers and search engines. It's especially important to provide alternative text for images that are links and image maps. Each image link on a web page should have unique alternative text for voice recognition software to work correctly. Everyone likes a little "eye candy" on their pages. If an image doesn't offer substantial content then give it a blank, or empty, alternative text entry. Screen readers will skip over these images if they contain only a blank space.

image of the Netscape bookmark manager This image of the Netscape bookmark manager, when included in a guide to using bookmarks, requires an explanatory alt text statement.

A bullet on a list might use alt text " * " (a blank space, an asterisk, a blank space) or it might require an empty alt statement:

<a href="../images/bullet-blue.gif" alt="" align="left" hspace="7" width="10" height="20">

Use client-side image maps that contain alternative text. These image maps can then be rendered as plain text links in a non-graphical browser and by screen readers. Try this accessible image map, graphically, and in lynx: http://www.cs.unca.edu/~edmiston/office.html

Then try the inaccessible image map, graphically, and in lynx: http://www.cs.unca.edu/~edmiston/office2.html

Editing the Alt Text on an Image

Compose the alternative text as carefully as the text on the page. If the image isn't a significant contribution to the content press the spacebar once to enter a single blank space. Most non-graphical browsers will interpret a single blank space as an empty attribute and ignore it correctly.

View your pages frequently in a text only browser such as Lynx. In my humble opinion if the content works in Lynx, it's pretty accessible.

Color

Avoid using color on a page to convey significant content. Visitors who are blind or using non-color monitors won't get the information. Select colors for text and links that are highly contrasting with the background color. Be aware that light text on a dark background can cause problems with printing.

Frames

Framed web sites can be very difficult to navigate and in some cases the frames make it impossible to bookmark pages. Try this site for a framed educational web site in your graphical browser. Now try the URL in Lynx:

http://neptune3.galib.uga.edu/

Compare it with my early attempt at presenting a framed study guide.

http://www.cs.unca.edu/~edmiston/study/oldframes/

Links and Navigation

Compose link text carefully to make sense when read out of context. Avoid "click here". When listing your site navigational links, separate them with a non-link character such as a hyphen (-), tilde (~) or pipe (|) that has a blank space on each side. This:  [skip sample links ]

| Home | About | Search | Toolkit | Training |

not this
Home About Search Toolkit Training

As visitors work through your site with a screen reader they may not want to listen to your list of navigation links at the top of every page. Provide a link to jump past the navigation. Use an invisible (transparent) image gif dot to anchor the link so it won't be visible in graphical browsers:
<a href="#content"><img src="images/blank.gif" width="1" height="1" alt="Skip past the navigation links" border="0"></a>

Look at this page in lynx to see the skip links at the top of the page and links to skip the sample navigation in the above paragraph.

Headings

Use headings to structure your document logically: H1, H2, H3, H4, H5. This will enhance the usability of your page.


Resources

There are myriad resources available on the Web to help you learn how to make accessible pages, and to test your pages for accessibility.

Governmental and Nongovernmental

Section 508 requires federal agencies to provide accessible sites. There does seem to be some question of the requirement applying to organizations receiving federal funding. Some states may adopt the 508 regulations which would apply to public universities.

Tutorials and Guides

Cascading Style Sheets (CSS)

Style sheets are a wonderful development for web page authors. While tags like <h1> are used to logically structure a document, style sheets are used to design the presentation of the content. The very best aspect of style sheets is the ability to define colors and backgrounds in a single file that will apply to every page on a site; then by editing the single style sheet file you can immediately and automagically change the effects of every page on the site.

The trend in web standards will be for individuals to be able to "override" the style sheets selected by the web page author, enabling people with disabilities to customize the look of a web page. When standard HTML tags are used properly to structure a document and style sheets are used for the presentation of a document, the degree of accessibility is enormously enhanced.

Use "external" or "linked" sheets to start, since they can be edited on the fly to make changes that sweep across a site. Once you have settled on your primary style with the external (which means it is in a file by itself) you can look into "embedding" style commands to create singular effects.

Accessibility Testing Tools



http://paula.edmiston.org/conf/2003recap-ada.html
Last Edited: 15 Apr 2012