Accessibility – 1h

Why produce web sites for people with a disability?

• Moral Reasons• Business

– A growing market that gets bigger as the population ages– Loyal customer base

• The wider view– Accessible sites benefit almost everyone (Universal Design Concept)

• Legislation– Disability Discrimination Act (1995)– Special Education Needs and Disability Act (2001)– Section 508 (USA)

Inclusive Design

• Accessibility– Physical access to equipment (devices, times, places)– Everyone has impairments at different times, in different contexts.

“Temporarily unimpaired”– “Disability” and “handicap” are the result of society’s failure to cope

• Usability– The quality of the interaction (flexibility, learnability, user satisfaction,

errors, speed)

• Acceptability– The acceptability of the system to users in its context of use

Incidence of Impairments in the EU

0 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85

1

Reduced co-ordination

Reduced strength

Cannot use one arm

Cannot use fingers

Intellectually impaired

Dyslexic

Language impaired

Speech impaired

Low vision

Blind

Hard of hearing

Profoundly deaf

Walks with aid

Wheelchair user

Figures in millions (Gill, 1997)

Disability/Impairment facts:

• UK - 8.5 million people (UK Office of National Statistics)

• UK Disability Discrimination Act (1995)– A person is considered disabled if they have …a physical or mental

impairment which has a substantial and long term adverse effect on their ability to carry out normal day-to-day activities

– Disabled people have the right of access to the same services as the rest of us

– “Reasonable adjustment” is required to accommodate disabled users– Latest Code of Practice refers to Web Accessibility

A financial reason...Charge:

In 2000 the Sydney Organising Committee for the Olympic Games (SOCOG) was sued for having an inaccessible web site by a visually-impaired user who was unable to access ticketing information, event schedules or postings of event results.

Verdict:

The court determined that the complaint was correct and SOCOG was found guilty of breaching the Disability Discrimination Act and fined.

Accessibility - Disability

• Impairment of sight, hearing or movement• Difficulty in processing certain types of

information• Difficulty in reading or understanding text• Unable to use certain input devices (e.g.

mouse, keyboard)• May not understand/speak fluently the

language in which the document is written

Accessibility - Context

• Text-only screen, small screen, slow internet connection

• Early version of a browser, a different browser entirely (e.g. Lynx), a voice browser (e.g. Home Page Reader, Jaws), or a different operating system

• Users may be in a situation where their eyes, ears or hands are busy or interfered with (e.g. working in a busy, loud environment)

Assistive Technologies for physical disabilities - examples

• Drag-lock• Keyboard customisation• Simple switches• Head movement• Foot controlled devices• Joysticks• Touch pads• Trackballs• Light pens

Assistive technologies for other disabilities - examples

• Hearing impairment– Induction loops– System sounds &

Symbols (e.g. Sound Sentry)

• Others– Speech synthesisers– Word- / phrase-

prediction

Visual impairmentScreen readersRedirect monitor output to speech synthesis or a refreshable Braille displayAudio browsersRead and interpret HTML (and style sheets) and are capable of producing inflected speech outputVoice recognition

Accessibility Evaluation Tools

• But note that compliance with automated checking does not necessarily make sites accessible (see Diaper & Worman, 2003)

• There is no single tool that can be used to guarantee absolute accessibility

• Human evaluation is still required• Guidelines are available

– http://www.w3.org/WAI/

Conformance Levels• Priority 1: Checkpoints that must be satisfied

otherwise one or more groups will find it impossible to access information in the web site.

• Priority 2: Checkpoints that should be satisfied otherwise one or more groups will find it difficult to access information in the web site.

• Priority 3: Checkpoints that may be addressed otherwise one or more groups will find it difficult to access information in the web site.

Web Content Accessibility Guidelines

• HTML tags (elements)<element_name attribute=“value”>

• Cascading Style Sheets– For controlling presentation (e.g. for controlling the font and

colour attributes of a particular tag)– Allows the actual html file to contain “meaning”

• Non-HTML technologies generally pose greater problems than HTML

Provide equivalent alternatives to auditory and visual content

• Text equivalents of non-text content– Includes: images, animations, applets, buttons,

sounds, frames, audio and video files– “alt” “longdesc” attributes, element content– Text can be output to speech synthesizers, voice

browsers and braille displays– Helps blind, deaf and learning impaired

Examples: An image of the moon• As an image

<img src=“moon.jpg” width=“100” height=“100” alt=“Photo of the Moon”>

• As an image/link to further information (inside an anchor element <a>….< /a>) <img src= ………… alt=“Go to Moon Information Page”>

• As a purely decorative image – no relevance to content <img src=“moon.jpg” width=“100” height=“100” alt=“”>

• “longdesc” attribute could also be used

What can you see in these images?

Don’t rely on colour alone

• Text and graphics must be understandable when viewed without colour

• Helps users with a visual impairment– Colour blindness (8% males, 0.5%females)– Inability to distinguish colours due to insufficient

contrast

• Quick test: print out web pages in black & white

Use mark-up and style sheets and do so properly

• Use header elements to describe the document’s information structure and not to control presentation (e.g. changing font type, size or colour):– <h1> major heading– <h2> sub heading– <h3> sub, sub heading etc.

• Use tables for tabular information not presentation• Use markup rather than images to give information• HTML has specific elements for describing:

– Lists <ol>, <ul>, <dl>– Quotes <q>, <blockquote>– Abbreviations <abbr>– Acronyms <acronym>

Use mark-up and style sheets...

• Control presentation with style sheets– Format text – Control layout– Browsers will process html associated with meaning– Pages controlled using attached style sheets will

download faster

• Use relative (e.g. %) rather than absolute units in markup language html attribute values and style sheet property values

Design for device independence

• Allow users to interact with the web site using their preferred input (or output) device e.g. mouse, keyboard, head wand, track ball etc.

• Text equivalents for images make it possible for users to interact with them without a pointing device

• Usually, web pages that allow interaction through the keyboard are also accessible through speech input or a command line interface

Design web pages for keyboard interaction

• Produce a logical tab order through links, form controls and objects– use the “tabindex” attribute which can be placed in: anchor, area,

object, button, input, select and textarea elements– tabindex values can be any positive integer including zero (lowest

priority in the tab sequence)

Example using anchors: <a href=“chapter1.htm” tabindex=“1”> Chapter 1 </a>

<a href=“chapter2.htm” tabindex=“2”> Chapter 2 </a>

Provide clear navigation mechanisms

• Clearly identify the target of each link– Link text should be concise, and meaningful enough to

make sense when read out of context e.g try to avoid writing “click here”

– The target of a link can be further clarified using the “title” attribute (general purpose)

• Provide a site map• Provide navigation bars• Group related links

Summary (1/2)

• Using HTML to convey meaning/structure rather than for presentation (use style sheets)

• Use technologies compatible with assistive technologies (screen readers, speech browsers, screen magnifiers, alt input devices)

• Be aware of improved accessibility features in “embedded interfaces” (e.g. Flash MX 2004) and monitor others for improvements (pdf, javascript). Watch for accessibility features being limited to full-price products eg Adobe Acrobat

Summary (2/2)

• Take advantage of accessibility solutions for technologies (Dreamweaver accessibility stylesheets, Java accessibility API)

• Use accessibility evaluation tools• Test with various browsers• Follow the web content accessibility guidelines

(WCAG 1.0) produced by the W3C, and track new developments (WCAG 2.0)