Designing Accessible Web Pages
-Intermediate Level-
by Joe Wheaton, Sean O'Briant & George Abraham
The following are topics related to designing accessible web-pages. They are derived from the pages of the Web Accessibility Initiative (WAI). Some are from the Quick-tips and others are from the WAI Guidelines.
Here is what we will talk about in the following pages. Start with LAYOUT and go through each lesson. Please click on any item if you want to jump directly to that particular item.
- Layout : Don't rely on color alone and make the background and text have good contrast.
- Page organization : Use headings, lists and consistent structure.
- Hypertext links : Use text that makes sense when read out of context. For example, avoid "click here."
- Images : Use the alt attribute to describe the function of each visual.
- Tables : Organize information to be read cell by cell. Summarize.
- Frames : Use <NOFRAMES> and meaningful page titles. Or use image maps where possible.
- Image Maps : Use client-map MAP and text for hotspots.
- Multimedia : Provide transcripts for audio. Provide captioning and descriptions for video.
- Graphs, pdf's & charts : Summarize or in the future use the longdesc attribute.
- Scripts, applets & plug-ins : Provide alternative content in case active features are inaccessible or unsupported.
- PowerPoint Slides: Accessibility can be created.
- Check your work : Validate. Use tools, checklist, and guidelines at www.w3c.org/TR/WAI-WEB CONTENT.
Evaluation
The Web Accessibility Center is performing an evaluation of the material presented in this tutorial. We ask that all the people who take the training regarding accessibility issues fill out the evaluation. First you will view a sample page for 60 seconds, then you will be go to the evaluation page. The evaluation will pertain to what you saw on the sample page. When you complete the evaluation please submit it to the WAC. Start the evaluation here when you are ready.
WAI
An introduction to the WAI is probably in order. The WAI was set up by the WWW Consortium (the W3C) to help Web designers make their sites accessible to persons with a variety of abilities. Click here to link to WAI. We will be using the WAI Curriculum and the WAI Guidelines extensively for this demonstration. For a quick overview go to the accessibility Quick-tips, which is an image file (and won't display on screen readers). We will be using some of the basic Quick-tips for this presentation.
Good Examples of Web-Pages
Check out some good examples and additional information from the Trace Center at the University of Wisconsin. Click on the Web Examples link. The WINGS Project or the Trace Center's page has a lot of valuable information. What do you like about these pages? Do you think they're using good design techniques?
Go to the Case Studies in the Trace Center page (it's #3) and look at the first case study and read what they did. This is an example of fixing problems.
Links to Pages About Accessible Web Page Design
These are basic links which talk about Accessible Web Page Design in detail.
Layout | Page Organization | Hypertext Links | Images | Tables | Frames
Image Maps | Multimedia | Graphs, pdf's & Charts | Scripts, Applets & Plug-ins | PowerPoint Slides | Check your work
Home