HCID2014: Accessibility primer. Joe Chidzik, Abilitynet

Accessibility PrimerJoe Chidzik, AbilityNet

Whistle stop tour covering

What we mean by accessibility

Why accessibility is important

How disabled people use computers

Incorporating accessibility into your work

Designers

Developers

Planning

Testing for accessibility

What do we mean by accessibility?

“Web accessibility means that people

with disabilities can perceive,

understand, navigate, interact with, and

contribute to, the web.“

Why accessibility is important

Ethical – it's the right thing to do

1 in 8 people have a disability in the UK – around 8 million people

Disability prevalence increases with age:

6% children

16% adults of working age

45% of adults over state pension age

Legal - case study: Target

May 2005: NFB notified Target of accessibility issues on their site

Lack of alt text

Missing headings

Customer unable to purchase without using a mouse

Legal - case study: Target outcome

$10,000,000Cost to Target USA from an inaccessible website

Financial

$4 trillion \ $4,000,000,000Global disposable income of disabled people

More reasons?

An accessible website…

Demonstrates corporate social responsibility

Is usable by more people, on more devices

Garners loyalty, particularly from disabled people

Is more easily found via search engines

Is easier to use for all users

Good SEO = Good accessibility

Search engines cannot understand the content of an image, but they do benefit from alt text

Search engines cannot understand audio content, but they do benefit from transcripts

Search engines need content to be marked up semantically to infer relationships and relevance

All of this not only benefits both disabled users and makes your site easier to find, it also makes the site easier to use for everyone.

How disabilities can affect computer use

Disability is an analogue spectrum, but useful to consider categories

Vision – no useful vision, colour blindness, tunnel

vision

Hearing – both deaf and hard of hearing

Mobility – affect keyboard/mouse use, also

touchscreen interaction

Cognitive – Dyslexia, learning difficulties,

attention disorders

Vision

Colour blindness – difficulty

distinguishing red\green. 1 in 14 adult

males affected

Low vision – problems reading small text,

making out fine detail or low contrast

No useful vision – cannot rely on vision

for access to content

Vision: colour blindness

Colour blindness

Tube map

Tube map: simulated colour blindness

Low vision

Typically can use built in browser zoom and O\S colour features to make content more readable

Rely on sites being able to be scaled properly

Low vision – text zoom

No useful vision

Rely on pages being well structured

Non-text content needs text-alternatives provided

Visual cues, such as a colour, need text counterpart

Keyboard access to all functionality

Screenshot of JAWS headings

Hearing

BSL users may have English (or their locale) as a secondary language

Multimedia e.g. videos, typical cause of difficulties – require captions

Do not use audio as the only means of conveying information e.g. error beep

Ensure sufficient ‘contrast’ between foreground and background audio (dialog over background noises)

Mobility

Potential difficulty using the mouse and clicking on small targets e.g. checkboxes

Likely to use keyboard to navigate

Can have difficulties interacting with sensitive fly out menus

May use voice recognition – say what they see

Cognitive

Includes dyslexia, memory impairments and attention deficit disorders

Often difficulties with literacy\reading, especially with jargon heavy content

"wall of text" content can be difficult to read for any users, particularly those with a cognitive difficulty

Benefits from simple language, icons as navigational aids, consistent & clear structure

Simple, clear instructions – form examples

Incorporating accessibility into your workflowDesigning, Developing and Planning Projects

PlanningHow to incorporate accessibility into projects from the outset

Planning - stages

Initial accessibility work can begin in design stage

As designs progressed to functional pages, conduct disabled\user testing

Expert AT testing can be done throughout project

Final review once project is delivered

Planning

Allocate one key member of staff to be goto person for accessibility of a project – simplifies communication with 3rd parties \ inhouse staff

Consider training designers\developers in basic accessibility testing\requirements

If commissioning 3rd party products, invest in BS8878; this standards document details how to ensure suppliers have accessibility in mind

For developers

Good coding practise

Using semantic, valid markup

Be aware of, and use, the Web Content Accessibility Guidelines (WCAG)

For rich and dynamic content, look into ARIA (Accessible Rich Internet Applications)

http://w3.org/wai For all your guideline needs

Build using a progressive enhancement methodology

Standards

Governed by the W3C

Content covered by WCAG: Web Content Accessibility Standards

Standards exist for user agents and authoring tools too (UAAG and ATAG)

Mobile content covered by MWBP: Mobile Web Best Practises

w3.org/wai

Progressive enhancement

For designers

Accessibility needn't mean compromise

Design

Colour palette – ensuring sufficient contrast for text

Consistency of appearance throughout site. A visual theme helps users with cognitive difficulties

Clear layout and structure – use white space to delineate sections

Contrast: checking

Specific guidance exists for websites; can also be used for applications

Contrast ratio between text and background:

4.5:1 for standard text

3:1 for large text

Tools exist to check contrast:

Contrast analyser application

Web based tools; input colour hex values

Consistent theme

Clearly defined structure: layout

Practical examplesSimple checks you can make

NVDA

If confident, try out the free and open source NVDA screenreader

Are controls announced as the correct type, and labelled correctly?

What about images?

VoiceOver

Free – built into iOS devices

Use Explore By Touch - trace your finger around the screen to hear content and components read out

Summary – what and why

Accessibility

The practise of making content so that disabled users can perceive, operate, understand, and above all, contribute

Reasons

Ethical – right thing to do

Legal – monetary\reputation cost

Commercial\Financial – increased target audience, loyalty

Summary - incorporating

Planners

Accessibility from the outset

Named individual

Designers

Do not rely on users being able to perceive colour

Visible structure – white space, headings

Developers

Be aware of guidelines

Progressive enhancement

Keyboard accessibility!

Screenreader testing (mobile and desktop)

Summary - testing

Keyboard

Visible focus highlighter

Skip links

All content keyboard accessible (menus, flash players)

Visual

Colour – good contrast and not only method

Animations

Zooming in, ensure page is still usable

Automated tools – quick checks

WebAIM WAVE

Cynthia Says

Disabled user testing

Source from employees for initial testing

Encourage feedback via an accessibility page

Any questions?joe.chidzik@abilitynet.org.uk

@joechidzik