Accessibility

Derek Bridge

Department of Computer Science,
University College Cork

Accessibility

Aims:

Who is everyone?

Assistive technologies for visual impairments

Blindness
screen readers, braille displays, text-based browsers, voice browsers
Low vision (tunnel vision, central field loss, clouded vision, etc.)
extra-large monitors, modified fonts & colours, screen magnifiers
Colour blindness
reader stylesheets

Assistive technologies for auditory impairments

Deafness
rely on captions and images
Hard of hearing
amplifiers, also benefit from captions and images

Assistive technologies for mobility impairments

No use of hands
specialised keyboards, keypads & switches, virtual keyboards, specialised pointing devices (e.g. hand and mouth wands), face and eye tracking devices, voice recognition
Problems with fine motor control
Similar technologies

Assistive technologies for cognitive impairments

Visual and auditory perception, e.g. dyslexia, dyscalculia
may rely on using multiple modalities at the same time
Attention deficit disorder
may need to switch off animations
Intellectual disabilities, e.g. Down syndrom
may rely more on graphics

Assistive technologies for more cognitive impairments

Memory impairments
may need consistency in the site
Mental health disabilities
may need to switch off animations
Seizure disorders
may need to switch off animations, blinking text or audio at certain frequencies

Web accessibility: reasons to care

The legal argument
There is national and international law
The business argument
Directly and indirectly, it may bring more customers
The moral argument
Simply, it's the right thing to do

The Web Accessibility Initiative (WAI)

Logos from the WAI

Text equivalents to images

Relative versus absolute units of length

Use the right kind of markup

Use colour intelligently

  • Ensure proper contrast between foreground and background colours
  • Avoid certain combinations
  • Ensure information is not conveyed through colour alone
  • Class exercise: Who benefits?

Consistency

  • Use external stylesheets
  • Use a consistent navigation scheme
    • permanent navigation on each page
    • same way of presenting local navigation on each page
  • Class exercise: Who benefits?

Facilitate navigation around a page

  • Include an in-page link that allows users to skip over the permanent navigation 
    <a id="skiplink" href="#content">Skip to main content</a>
    • You can decide whether this link should be
    • either visible to everyone (as above)
    • or not visible but still readable by screen readers, e.g. use this CSS: 
      #skiplink {position: absolute; left: -999em;}
  • Class exercise: Who benefits?

Use the focus state for links

  • We often highlight a link when the mouse is over it: 
    a:hover {background-color: rgb(100%, 70%, 70%);}
  • Do the same when the link has focus: 
    a:focus {background-color: rgb(100%, 70%, 70%);}
  • (And ensure a logical and useful tab order)
  • Class exercise: Who benefits?

Think about your link text

  • Good link text:
    • should indicate the nature of the target
    • should be consistent if repeated on the same page
  • E.g. bad and good: 
    <a href="http://www.wombat.com/">Click here!</a>

<a href="http://www.wombat.com/">More information about wombats</a>
  • (By the way, generally do not use links that cause pop-ups or other windows to appear)
  • Class exercise: Who benefits?

Validate and evaluate

Want to read more?

There are numerous other techniques (e.g. how to markup tables so that they make sense when 'linearised').