mando ux and design accessibility training

A11Y*Accessibility and UX/Design

*Accessibility is often abbreviated to A11y. Where the number 11 refers to the number of letters omitted.

WHO?

1 in 5 people of working age have a disability

1 in 6 struggle with literacy

1 in 6 are unable to read, write or add up

WHO?

14.2 millionpeople in the UK are over 60 years old

11 millionpeople in the UK have a long-term illness, impairment or disability

Over 10 millionpeople in the UK have some form of hearing loss

2.7 millionpeople in the UK are colour blind

WHO?

CASE STUDIES

CASE STUDIES

Voice Recognition

Mayo Marriot uses Dragon Naturally Speaking voice recognition software (04:06)

http://www.bbc.co.uk/accessibility/best_practice/case_studies/mayo.shtml

Sip and Puff

Darren Carr uses a head mouse and an on-screen keyboard (04:41)

http://www.bbc.co.uk/accessibility/best_practice/case_studies/darren.shtml

CASE STUDIES

Screen Reader

Robin Christopherson uses the Jaws screenreader (04:32)

http://www.bbc.co.uk/accessibility/best_practice/case_studies/robin.shtml

Screen Magnification

Geoff Adams-Spink uses ZoomText software (04:19)

http://www.bbc.co.uk/accessibility/best_practice/case_studies/geoff.shtml

CASE STUDIES

Voiceover on iPhone

Victor Tsaran shows you how to navigate a web page using VoiceOver on an iPhone

https://www.youtube.com/watch?v=t60voPIY5xY

Note: Android equivalent is TalkBack, Windows Phone has “ease of access” options which include a screen reader.

DESIGN FOR

DIFFERENT

INPUT METHODS

• Mouse

• Keyboard

• Track ball/pad

• Touch/Gesture

• Switch

• Voice

• Sip and Puff

COMMON

PITFALLS

COMMON

PITFALLS

• Reliance on colour

• Active areas too small

• Undescriptive links

• Hidden labels

• Interactive elements aren’t keyboard friendly

• Interactive elements cannot be visually distinguished from non-actionable ones

DON’T RELY ON

COLOUR ALONE

Not very helpful Better!

COLOUR

TESTING IN

PHOTOSHOP

CHECK COLOUR

CONTRAST FOR AA

ACTIVE AREAS

Not very helpful Better!

LINKS

Not very helpful Better!

ALTERNATIVE

METHODS OF

NAVIGATION

Headings Links

SCREEN READER

FRIENDLY LINKS

Not very helpful Better!

16 -17 years

“Link one six one seven years end link”

www.londontoylibrary.co.uk

“Link Double-U, Double-U, Double-U, Dot, El-

Oh-En-Dee-Oh-En…”

16 to 17 years

“Link sixteen to seventeen years end link”

London Toy Library

“Link London Toy Library end link

CLEAR LABELS

AND INPUTS

Not very helpful Better!

1.

2.

3.

1.

2.

3.

ERROR

PREVENTION

Not very helpful Better!

ON CHANGE &

AUTO UPDATE EVENTS

Not very helpful Better!

DRAG AND DROP

Not very helpful Better!

A simple “Add” button

makes this more accessible

REDUCE

COGNITIVE &

VISUAL LOAD

TYPOGRAPHY

Not very helpful Better!

MOVEMENT

Not very helpful Better!

REDUCE

COGNITIVE &

VISUAL LOAD

Keep it simple

• Efficient, clear, concise

• Avoid overloading the user with too much content.

• Utilise progressive disclosure to reveal more as needed

• No more than 4 steps to a goal

www.lingscars.com

REDUCE

COGNITIVE &

VISUAL LOAD

1. Avoid duplication

2. Provide a clear hierarchy

3. Predictable

4. Keep users informed

5. Avoid verbosity

6. Chunk/sequence steps (not too many steps!)

RESPONSIVE

CHALLENGES

RESPONSIVE

Challenges

• Touch interaction can be difficult

• Notifications appearing off screen

• Long pages

• Permanence of place – as resolutions change, elements may move to an unfamiliar place

Benefits

• Auto adjust to users device

• Designing for mobile focuses on key features and accessibility.

• Sites also remember preferences

• Having less content can be easier to understand

SOMETIMES IT’S

JUST NOT POSSIBLE

Pragmatic (/prag m̍atɪk/)

“dealing with things sensibly and realistically in a way that is based on practical rather than theoretical considerations”

http://www.w3.org/WAI/WCAG20/quickref/http://wave.webaim.org – a11y test

http://www.paciellogroup.com/resources/contrastAnalyserhttp://www.nvaccess.org/ - free NVDA screen reader

http://www.abilitynet.org.uk/factsheets

RESOURCES