Making Web Pages Accessible
Instructional Technology
Lab Conference, March 17, 2003
An important goal of sound Web page design
ought to be making hypermedia accessible to everyone, including users with disabilities.
Typically, making a set of Web pages accessible does not entail a lot of work.
If you need help, please contact the ITL.
Considerations when developing hypermedia
- Users have full control of their browsers’ look and feel
- Size and color of default text
- Enabling or disabling Java or JavaScript
- Allowing images to download or
not
- Users may use specialized Web browsers
to meet the needs of a disability
- The browser may contain screen-reading
audio
- It may accept user input via something
other than the keyboard or mouse
- The browser may be a text-only
browser
- Certain disabilities might hinder
user-interaction with the Internet
- They may have a visual disability,
including blindness, reduced vision, or inability to distinguish between
colors
- They may have a physical disability
that requires them to use special tools to navigate through Web pages
- Certain effects in a Web page,
such as certain colors, screen flickers, or flashing images, may have
an adverse effect on certain individuals
Useful tips for creating accessible Web
pages
The following guidelines provide
a good framework for making Web pages accessible.
Textual content
- When typing text, use clear, concise, unambiguous language
- If you don’t have a Web authoring program
that allows a grouping of fonts to be used, use a default font style, which
allows the user to select the font to be used
- Use the <H1> to <H6>
tags for hierarchical purposes
Do not use these for making pieces of text larger or smaller. This can be
confusing and hinders on the organization of your pages
- Never assign specific font sizes
to text
Instead, use relative sizes, relative to sizes selected by the users for their
browsers
- If possible, provide a text-only
version of the same page
…which would be easily read by a text-scanning tool. The link for this alternate
version should be available at the top of the page
- When creating lists, use ordered
(numbered) lists instead of bulleted lists
Web page backgrounds
- Backgrounds should be of a contrasting
color than the text on the page
To insure the proper contrasting, try viewing your page in grayscale
- Do not use backgrounds that have
an excessive amount of colors
or graphics …making reading of any foreground text or images difficult
Hyperlinks and navigation
- When creating hyperlinks, use descriptive
text, rather than saying "click here" This will insure the links are read
properly instead of out of context
- When using images as hyperlinks,
be sure alternative text is provided for these same links so they can be identified
with text-scanning tools
- If you use image maps, use client-side
image maps and provide alternative text for each hotspot area. If possible,
use large sized hotspot areas
- Be consistent throughout your Web
pages in terms of navigation bars either at the top of the screen, down
the left side of the screen, or both
Images and animation
- Always use the <ALT> tags
for all of your images
This describes the images for those who cannot access them
- Provide clear alternative text or
audio explanations of data shown in charts or graphics that use mathematical
formulae
- If necessary, provide descriptive
links to alternative text pages
…giving detailed descriptions of the images or animations in question
- Make sure an animation is necessary
before making use of it
If it is necessary, provide an alternative page describing the animation
- Avoid using flashing images and
items that would make the screen flicker
These can be a deterrence to those who may have trouble visualizing or interpreting
these objects. Scrolling text can be problematic as well
Miscellaneous
- When using tables, be sure they are
organized and labeled properly
They should be read logically from left to right, top to bottom, as a text-scanning
tool would do
- If you use plug-ins or Acrobat PDF
files, provide an alternative format
- When using scripts or applets, check
that the page still works without them
- Use Cascading Style Sheets to achieve
consistency in all your Web pages
- When using forms, place the descriptive
text either above or just to the left of the text box or option in question.
Make the form so it can also be printed out easily
Testing your hypermedia
- Test your pages several ways, including
with scripts, sounds, and images off
- Use programs such as IBM Home Page
Reader and Bobby to insure the pages are fully accessible
Related links
- References
- Web
Accessibility Validation Tools and Services
- Tools