Bridging the Gap

1
Bridging the Gap

• Accessible Web Page Design
• Marcia Minear
• October 9, 2003

2

• What is accessibility and who needs it?
• Why should you care?
• How do disabled people see the Web?
• What can designers do to ensure accessibility?
• Where can you learn more?

3
Accessibility
Accessible design means making services and
information available to people with
disabilities. Accessible web design requires that
you understand how people with disabilities get
information from the World Wide Web. Accessible
design benefits all.
4
Who Needs Accessible Web Sites?

• People with sight impairments
• People with mobility impairments
• Older users
• Those who prefer text browser
• Palm Pilot users
• People who access the Web from Web-enabled cell
  phones
• Those who experience temporary or situational
  impairments

5
Why Bother?

• People with disabilities represent a significant
  portion of the population
• Its good business
• Its the law
• It will increase your visibility on the Web
• It will deepen your understanding of design
• It will enhance the usability of your site
• Its the right thing to do

6
The Promise of the Web to the Disabled Community

• Access services from home
• Read information using assistive technologies
• Increase communication with sighted world
• Build communities for support and connection

7
Screen Readers

• Interpret the code
• Read aloud links, text, image tags
• Find and access forms
• Read information from data tables
• Depend on the designer to format code correctly

8
Fun with JAWS
http//www.iastate.edu
9
But for many disabled users
http//my.rmwc.edu/portal/main.html http//thegilm
ore.com
10
(No Transcript)
11
The Problem with Images
12
The ltaltgt tag

• All images must include an alt tag
• The alt tag should convey the purpose of the
  image
• Some images should include an empty alt tag,
  ltaltgt
• Long descriptions can be added by using the
  ltlongdescgt tag

13
The Code
ltimg srcsunset.gif width400 height300
border0 altSunset over San Francisco Bay
/gt The screen reader says Image Sunset over San
Francisco Bay
14
Using Tables for Layout

• Avoid nested tables
• Use only the basic and unadorned coding for
  layout tables lttablegtlttablegt, lttrgtlttrgt, and lttdgt
  lttdgt
• Content of table must make sense when linearized

15
Tables Must Make Sense when Linearized
FIRST
FOURTH
SECOND
FIFTH
THIRD
You can test the order information will be read
from your table by using the TAB key.
http//www.iastate.edu
16
Designing for Accessibility

• Include alt tags for every image on page
• Think about the order that information is
  arranged on the page
• Use a validator to check that code is written
  correctly
• Include disabled users in usability testing

17
Places to Check Your Site
Colorblindness http//www.vischeck.com Nongraphica
l environment http//www.delorie.com Accessibility
validation services http//www.contentquality.com
http//bobby.watchfire.com http//www.usablenet.c
om
18
Want to Know More?
World Wide Web Consortium (W3C)
http//www.w3.org Building Accessible Websites
by Joe Clark New Riders Press,
2003 Constructing Accessible Web Sites by Jim
Thatcher, and others Glasshaus Press,
2002 Designing with Web Standards by Jeffrey
Zeldman New Riders Press, 2003
19
(No Transcript)