Making Accessible Websites
A Workshop for the RECAP
2003 Conference
West Chester University, May 16, 2003
Paula Edmiston, The Flying Cat, Inc.
The American with Disabilities Act (ADA) sets standards on
websites accessibility.
What is Website Accessibility?
- Access to people with vision, motor, hearing impairments
- Access to people using alternative technologies such as PDA (Personal
Data Assistants) and mobile phones that access the Internet; to
people using older technology such non-graphical browsers and slow dial-up connections.
- Access to people with cognitive and developmental limitations and
those with color blindness.
- Access to assistive technologies such as screen readers and text enlargers.
Maintaining an accessible website can be relatively
easy and bring you the rewards of being truly accessable 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.
- 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 ]](images/netscapebm.gif "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
- In a web page editor such as Netscape Composer or Frontpage,
- double-click on the image to pop up the "Image properties" window, or
select the image, usually a
right-click on the image, then select the "Image
properties".
- Find the entry for "Alternative Text" (or, perhaps, "Alternative
Representation" in Frontpage). In most versions of Composer this will be
in the main tab of the Properties window. In Frontpage you might need to
open a tab labeled "General".
- In Dreamweaver, click on the image to
select it and
then add the alt text in properties box at the bottom of the window. If the
properties box is not visible, right-click on the image and select
"Properties" from the popup menu.
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 ]](../images/blank.gif)
| 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 useability 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 evey 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 sructure 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 tocreate singular
effects.
Accessibility Testing Tools
-
Bobby is a free service for testing the
accessibility of your pages.
- Lynx
Viewer gives you an approximate view of your
pages in this text-only browser. It also links to a
download of the program for more accurate
testing.
- Better,
Lynx at scramworks offers a
real telnet/lynx experience. Supply your email address as prompted.
- Need help with using lynx? Try this
Lynx
Handout
- Vischeck
simulates colorblindness and their Daltonize corrects
images for colorblind viewers.
-
Screen Reader Simulation
- A
Prompt is a tool to evaluate the accessibility of
a web page.
|
1994 - 2010
Paula Edmiston
