Building Accessible Web Sites March 14, 2001

1
Building Accessible Web SitesMarch 14, 2001

• Dick BrownProgram Manager, Microsoft
  Accessibility

2
Executive summary

• Remember that people use computers in many
  different ways
• Follow the content guidelines from the Web
  Accessibility Initiative
• Test with accessibility in mind

3
Barriers to Access

• Many users operate in contexts very different
  from yours
• They may not be able to see, hear, or move
• They may not be able to use (or may not have) a
  keyboard or mouse
• They may not be able to process some types of
  information easily or at all

4
Barriers to Access

• They may have difficulty reading or comprehending
  text
• They may have a text-only screen, a small screen,
  or a slow Internet connection
• They may be in a situation where their eyes,
  ears, or hands are busy or interfered with (e.g.,
  driving to work, working in a loud environment,
  etc.)

5
Types of Disabilities

• Visual
• Blindness, low vision, color blindness, tunnel
  vision
• Hearing
• Deafness, limited ability to recognize or
  distinguish sounds
• Mobility, motor functions
• Paralysis, lack of limbs/digits, tremor, erratic
  motion

6
Types of Disabilities

• Seizure and disorders
• Epilepsy (sensitive to flashing, repetitive
  sounds)
• Cognitive and language
• Memory loss, perceptual, dyslexia, Downs Syndrome
• Speech

7
Designing Accessible Web Pages

• Basic process
• Follow Web Accessibility Initiative (WAI)
  guidelines to make pages accessible, usable, and
  appealing
• Test each page's accessibility
• Provide alternate pages for any that are not
  accessible

8
Designing Accessible Web Pages

• Key areas
• Keyboard navigation
• Graphics multimedia
• Links and link text
• Controls, applets, frames
• Tables and forms
• Customization

9
Designing Accessible Web Pages

• Keyboard navigation
• Remember that some people will use Tab, not the
  mouse
• Tab order should make sense
• Dont put too many links on one page
• Consider shortcuts and quick links
• Make sure DHTML is keyboard accessible

10
Designing Accessible Web Pages

• Graphics
• Every image should have ALT text
• Use separate page for complex descriptions
  (someday LONGDESC)
• Provide text links for image map hot spots

11
Designing Accessible Web Pages

• Multimedia
• Provide captioning and transcripts of audio, and
  descriptions of video

12
Designing Accessible Web Pages

• Links
• Avoid using too many on a page
• Link text should be meaningful but brief
• Link text should be able to stand alone (avoid
  duplicates)

13
Designing Accessible Web Pages

• Controls and applets
• Alternative pages when possible
• Use either LABEL or TITLE tags to associate a
  name with every control
• ActiveX/Java controls should use Active
  Accessibility to be compatible with accessibility
  aids

14
Designing Accessible Web Pages

• Frames
• Use NOFRAMES tag to display content on older
  browsers
• Use meaningful titles to aid navigation

15
Designing Accessible Web Pages

• Tables
• Be sure sure tables make sense when read from
  left-to-right, top-to-bottom
• Use markup to provide appropriate names for rows
  and columns
• Consider providing alternate pages that don't use
  tables

16
Designing Accessible Web Pages

• Forms
• Be sure they can be navigated with the keyboard
• Position labels above or to the left of the form
  field
• Associate labels explicitly with their controls

17
Designing Accessible Web Pages

• Customization
• Support the reader's formatting options
• Don't rely on specific fonts, colors, or sizes
• Don't require a specific window size or shape
• Don't require the use of style sheets
• If the page isn't usable without style sheets,
  provide an alternate page which doesn't use them

18
Testing Web Accessibility

• First, recognize that testing isnt going to
  guarantee everyone with a disability will be able
  to use your page to their satisfaction
• There isnt an automated way to test and repair
  Web sites (though work is being done in that area)

19
Testing Web Accessibility

• Testing probably will help you catch some or many
  accessibility problems before you hear about them
  from users

20
Key Areas To Test

• Keyboard
• Graphics and sounds
• Color to convey information
• Customizability
• Text size, font
• Color of links and text

21
Key Areas To Test

• Size and shape of window
• Compatibility with system settings
• Compatibility with accessibility aids such as
  screen readers

22
Keyboard

• Keyboard accessibility is most critical aid for
  many people with disabilities
• Unplug your mouse
• Navigate using only the keyboard
• Can you do everything you can with a mouse?
• How long does it take?

23
Graphics and Sounds

• Graphics themselves are useless for blind people
  and often for people with low vision ALT text is
  what counts
• Turn off graphics and sounds
• In Internet Explorer
• From the Tools menu, choose Internet
  Options/Advanced/Multimedia

24
Style Sheets

• Set your browser to ignore fonts, text size and
  colors specified by page author
• In Internet Explorer
• From the Tools menu, choose Internet
  Options/Accessibility

25
High Contrast

• Use the High Contrast option
• From the Start menu, choose Settings, Control
  Panel, Accessibility Options/Display

26
Font Size

• Use Custom Font Sizes, largest font size
• In Internet Explorer
• From the View menu, choose Text Size

27
Font Size

• If font size doesnt change, with previous test,
  youve hard-coded it (not a good idea)
• In Internet Explorer From the Tools menu,
  choose Internet Options/Accessibility/Ignore Font
  Sizes

28
Window Size

• Resize the window larger and smaller
• Make sure nothing gets cut off or otherwise
  obscured

29
Flow of Content

• Select all text and copy it to the Clipboard,
  ensure it makes sense when pasted into a word
  processor

30
Specialized Browsers

• Use specialized browsers that may be used by
  people with disabilities
• Lynx
• Amaya

31
Accessibility Aids

• Test with screen readers, screen enlargers,
  Braille output
• Best if this done by full-time users or at least
  those very familiar with the aids

32
Windows 2000

• Includes basic accessibility aids that can be
  helpful in testing
• Narrator (try with monitor off)
• Magnifier
• Onscreen keyboard
• Start/Programs/Accessories/Accessibility

33
Bobby

• Use Bobby, the analysis tool, to examine Web
  pages
• http//www.cast.org/bobby/
• Downloadable version at http//cast.org/bobby/inde
  x.cfm?i316

34
Demos

• Using keyboard
• Narrator

35
Resources

• MS Accessibility site
• http//microsoft.com/enable

36
Resources

• W3C Accessibility Initiative page authoring
  (content) guidelines released May 5, 1999
• http//www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/

37
Resources

• Checklist version of WAI content guidelines
  http//www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/
  full-checklist
• Use and distribute WAI Quick Tip cards

38
Questions?