WEB ACCESSIBILITY INITIATIVE
Daniel Dardailler
TELEMATICS APPLICATIONS PROGRAMME (DISABLED & ELDERLY SECTOR)
FINAL REPORT
DE 4105 - WAI
Appendix/Deliverable 2.2 - Part of WP02
Accessibility Demonstration module
Copy of Web slides
WEB ACCESSIBILITY INITIATIVE
Daniel Dardailler
TELEMATICS APPLICATIONS PROGRAMME (DISABLED & ELDERLY SECTOR)
In order to demonstrate the effect of accessible design on Web sites, an online demonstration was designed and implemented by WAI-DE participants.
The demo features a common frame-based Web site layout. This was initially a real Web site fetched off the Web in its inaccessible state, but text was changed to respect privacy. A simulation of browsing using an assistive technology browser (text-only) such as Lynx is then performed and then the demo goes in a tutorial mode on how to repair the site. The same site is then presented in its accessible form with and without Lynx.
This example is of great value as a simple tutorial and our past presentations using it have shown that the audience is very receptive of the problems of accessibility one they've observed the issues themselves.
This deliverable is a slide module for a short (20mn) presentation demonstrating the making of an accessible site starting from an inaccessible one.
The online version of this demo is available at: http://www.w3.org/WAI/EO/wcagdemo/all.htm.
and a copy of the slide text is provided here.
Demonstration of applying some simple WAI guidelines.
While fictional, this page accurately illustrates common practices.
The original site was using frame, images and no alt text.
|
9 May 1999
Patrick Dupont, Web Editor, The Health People:dup@healthpeople.com Web Development: Interactive
Webfolks: http://www.interwebfolks.com |
This is a simulation of the experience that a Lynx Browser user would have of this site.
First page:
Going to frame1:
Going to frame2:
[byh.gif]
9 May 1999
[l1.gif]
Important! Provide text since can be rendered visually, as speech, or as braille. Helps almost all groups of users.
Provide short equivalent text with the "alt" attribute:
<IMG ... alt="Navigation Bar..." > <IMG ... alt="Advertising Information" > <AREA ... alt="More Articles" > <AREA ... alt="Health Topics" > <IMG src="yhd.gif" alt="Buy Your Health" > <IMG ... alt="Latest News" >
Related checkpoint: 1.1
To provide navigation alternatives, assign titles to frames:
<FRAME ... name="TOC"
title="Table of Contents" >
<FRAME ... name="Home"
title="Home Page" >
Related checkpoint: 12.1
To provide information about link targets to users who surf link text only, write:
<A href="a">
Coping With Asthma's Relentless Attacks</A>
instead of:
Coping With Asthma's Relentless Attacks:<A HREF="a">Click Here</A>
Related checkpoint: 13.1
To convey a logical model other than visually, use markup correctly. For example, write:
<H1>9 May 1999
<IMG src="l1.gif" alt="Latest News"></H1>
<UL>
<LI>Coping With Asthma's Relentless ...
instead of:
<B>9 May 1999</B> <IMG src="l1.gif"> <BR> <P><LI>Coping With Asthma's Relentless Attacks: ...
Related checkpoints: 3.5, 3.6
Related checkpoints: 3.1, 3.3
First Page:
Buy Your Health
Frame1:
Table of Contents
Frame2:
Buy Your Health April 14, 1999 Latest News * Coping With Asthma's Relentless Attacks * Families in Crisis Learn to Cope, Stay Together * Studies Say Beer, Pizza May Slice Your Health Risk * Alcohol May Ward Off Ulcers and Stomach Infection * Water Chlorination Byproduct Is Linked to Stillbirths * Blood Test Could Reveal Risk of Breast-cancer Return ...