Designing Web Sites for the Blind

1
Designing Web Sites for the Blind

• COM302
• Cynthia G. Venettozzi

2

• growth in the use of the World Wide Web it
  is vital that the Web be accessible to everyone.
• Former U.S. President Bill Clinton

3
Statistics

• At least 1.5 million blind and visually impaired
  Americans use computers
• Over five and one-half million Americans are
  legally blind.
• 95 are over the age of 65.

Source American Foundation for the Blind (AFB)
4
Section 508 Accessibility Requirements for Web
Sites

• Released by the Federal Access Board on December
  20, 2000
• http//webable.com/library/508_guidelines.html

Source WebABLE
5
Introduction

1. What is Blindness?
2. Braille Converters
3. Barriers to the Blind
4. Site Design

• Page Design
• Bobby Reporting
• Web Accessibility Review

6
Blindness

• Variety of degrees
• Many causes
• Cataracts
• Cerebral palsy
• Diabetes
• Glaucoma
• Multiple sclerosis

7
Definitions

• Accessibility
• Screen Reader
• Linearized Tables
• MathML

8
Accessibility

• Of all the disability communities concerned by
  the inaccessibility of the Web, people with
  visual disabilities probably rank first. (p7)
• WEB Accessibility for People with Disabilities
• by Paciello

9
Screen Reader
Braille Window Refresher
Source American Foundation for the Blind
Source Humanware
10
Braille

• Uses six raised dots
• Different patterns represent letters numbers
• Read by fingertips

11
Screen Reader Simulator
i-show/hide screenshot
12
Linearized Tables
13
MathML

• Science and Math notations
• Web content
• Science
• Math
• Business educational material

14
Access Technologies for the Blind

• Synthetic voice
• Digital audio
• Braille

15
Identify the Barriers

1. Multimedia
2. Images
3. Frames
4. Forms
5. Tables
6. Navigation

16
Images and Image Maps

• Include text description image
• Accessible and keyboard navigable
• Use descriptive or alternative text

17
Frames
Point to HTML file

• Present comprehension problems

Use NOFRAMES element
18
Forms
STC Membership Form

1. Lack of shortcut keys
2. Form controls
3. Submit Here buttons

19
Tables

• Screen readers read left to right
• Use table headers for rows and columns
• Table headers (TH) programming code

Company Software Rating
Macromedia Dreamweaver Best
Microsoft FrontPage Good
Adobe PageMill Fair
Source CAST
20
Site Design Style

1. Use standard page layout
2. Everything operates from keyboard
3. Make pages readable without style sheets
4. Provide description of site layout
5. Comply with HTML 4.0 definitions

Source Rutgers University
21
Site Design Navigation

1. How to navigate site
2. Use navigation structure clear consistent
3. Offer navigation bars

Source Rutgers University
22
Site Design Example
23
Page Design Screen

1. Leave space around items
2. Avoid tiled backgrounds
3. Use vertical lists of hyperlinks
4. Text on links should be brief make sense

Source Rutgers University
24
Page Design Layout

• Do not use emoticons ? ?
• Front load information
• Paragraphs
• Lists
• Headings
• End all sentences, headers with period or
  suitable punctuation
• Use full text of a date
• October 31, 2001 instead of 10/31/01

Source Rutgers University
25
Page Design Example
Source CAST
26
Bobby Reporting

• Provides status on six accessibility areas
• Accessibility errors
• Recommended changes
• Accessibility questions
• Accessibility tips
• Browser compatible errors
• Download time for Web page images

27
BOBBY Approved Site
Source Northern Guide Dogs
28
Bad Site for Navigation
Source Web Page Backgrounds
29
Sighted vs. Blind Site
Same web site from two different views.
30
Web Site Accessibility Review

1. Screen Reader
2. MathML
3. Identify Barriers
4. Frames
5. Forms

1. Tables
2. Site Design
3. Page Design
4. Bobby Reporting
5. Section 508 Requirements

31
WEB Accessibility for People with Disabilities

• By Michael Paciello
• Answers the question
• How can I provide highly graphic and visual
  content to the blind?

32
(No Transcript)