Visual Accessibility for the Web

1
Visual Accessibility for the Web

• Presentation Stephanie Hobson

2
Visual Disabilities

• 100 million Americans are visually disabled
  without corrective lenses
• Many people with visual disabilities prefer
  making daily transactions (shopping, banking,
  etc.) online

3
Myopia or Hyperopia

• (Nearsighted or Farsighted)
• - Symptoms blurred vision
• - Cause genetics, aging
• - Diagnosis glasses

4
Colour Blindness

• - Symptoms inability to distinguish between
  colours
• - Cause genetic
• - Diagnosis brain adapts

5
Cataracts

• - Symptoms clouding of (all or part of) the lens
  of the eye
• - Cause aging, genetics, eye injuries, and some
  diseases
• - Diagnosis treatable with surgery

6
Floaters

• - Symptoms dark specs that move across field of
  vision
• - Cause material floating in the vitreous fluid
  of eye
• - Diagnosis brain naturally adapts

7
Astigmatism

• - Symptoms distorting or blurred vision
• - Cause warped cornea
• - Diagnosis glasses or transplant

8
Retinal Detachment

• - Symptoms blurry or blind spot on vision
• - Cause aging or injury (torn retina)
• - Diagnosis surgery corrects

9
Macular Degeneration

• - Symptoms blurred or black spot in central
  vision
• - Cause age (degeneration of the macula)
• - Diagnosis eye drops laser surgery halt (non
  reversible)

10
Glaucoma

• - Symptoms eye slowly loses side (peripheral)
  vision
• - Cause age genetic disposition
• - Diagnosis eye drops laser surgery halt (non
  reversible)

11
Retinitis Pigmentosa

• - Symptoms destruction of light sensing cells
• - Cause unknown, links to genetics
• - Diagnosis untreatable

12
Low or No Vision Solutions
13
Browser Customization

• - Some browsers allow more customization than
  others

14
Screen Magnification / Alteration
15
Screen Reader

• msn dot com Microsoft internet explorer link get
  the new msn messenger dash it's free change
  colours colon link simple while vertical bar link
  classic blue table three columns two rows news
  and sports list five items link video link news
  link slate magazine link sports by fox sports
  link weather

16
Designing for Low Vision Users
17
Basic Principles

• Dont use frames
• Be consistent from page to page
• Use relative sizing on tables and fonts
• Use style sheets
• Use text links instead of image links
• Include the link description within the A HREF
  tags
• Dont use colours or formatting to communicate
  information

18
Images

• Use the ALT attribute of IMG tags
• Use it and leave it empty for non essential
  images
• Put essential information first in ALT tags
• Use a or if the image is used as a bullet

ltimg srcmsn.jpg altMSN logo, multi-coloured
butterfly /gt
19
Tables

• Use relative sizing
• Use SUMMARY attribute and CAPTION tags
• Use summary for layout tables
• Use SCOPE attribute with TH tags

lttable summarycourse schedulegt ltcaptiongtCourse
Scheduallt/captiongt lttrgtltth scopecolgt
Morninglt/thgtltth scopecolgt Afternoon
lt/thgtlt/trgt lttrgtlttdgtXMLlt/tdgtlttdgtlablt/tdgtlt/trgt lt/tab
legt
20
Forms

• Put description of input on same line and in same
  table cell as input
• Use select boxes instead of radio buttons if the
  user is expected to chose one thing from a list
  of options
• Make first option in selection box description
  (ie Please Indicate Your Age instead of
  18-25)
• Dont use colour or formatting to indicate
  required fields (say required or use a )

21
New Tags/Techniques

• Separate style sheet
• Skip link
• And/or position-able navigation
• Label sections
• LABEL
• ACCESSKEY and TABINDEX

lta classskiplink hrefcontent accesskey2
tabindex1gt Skip over navigationlt/agt