Top Banner
A11Y* Accessibility and UX/Design *Accessibility is often abbreviated to A11y. Where the number 11 refers to the number of letters omitted.
31

Mando UX and Design Accessibility Training

Jan 29, 2018

Download

Technology

Heidi Crook
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 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.

Page 2: Mando UX and Design  Accessibility Training

WHO?

Page 3: Mando UX and Design  Accessibility Training

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?

Page 4: Mando UX and Design  Accessibility Training

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?

Page 5: Mando UX and Design  Accessibility Training

CASE STUDIES

Page 6: Mando UX and Design  Accessibility Training

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

Page 7: Mando UX and Design  Accessibility Training

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

Page 8: Mando UX and Design  Accessibility Training

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.

Page 9: Mando UX and Design  Accessibility Training

DESIGN FOR

DIFFERENT

INPUT METHODS

• Mouse

• Keyboard

• Track ball/pad

• Touch/Gesture

• Switch

• Voice

• Sip and Puff

Page 10: Mando UX and Design  Accessibility Training

COMMON

PITFALLS

Page 11: Mando UX and Design  Accessibility Training

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

Page 12: Mando UX and Design  Accessibility Training

DON’T RELY ON

COLOUR ALONE

Not very helpful Better!

Page 13: Mando UX and Design  Accessibility Training

COLOUR

TESTING IN

PHOTOSHOP

Page 14: Mando UX and Design  Accessibility Training

CHECK COLOUR

CONTRAST FOR AA

Page 15: Mando UX and Design  Accessibility Training

ACTIVE AREAS

Not very helpful Better!

Page 16: Mando UX and Design  Accessibility Training

LINKS

Not very helpful Better!

Page 17: Mando UX and Design  Accessibility Training

ALTERNATIVE

METHODS OF

NAVIGATION

Headings Links

Page 18: Mando UX and Design  Accessibility Training

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

Page 19: Mando UX and Design  Accessibility Training

CLEAR LABELS

AND INPUTS

Not very helpful Better!

1.

2.

3.

1.

2.

3.

Page 20: Mando UX and Design  Accessibility Training

ERROR

PREVENTION

Not very helpful Better!

Page 21: Mando UX and Design  Accessibility Training

ON CHANGE &

AUTO UPDATE EVENTS

Not very helpful Better!

Page 22: Mando UX and Design  Accessibility Training

DRAG AND DROP

Not very helpful Better!

A simple “Add” button

makes this more accessible

Page 23: Mando UX and Design  Accessibility Training

REDUCE

COGNITIVE &

VISUAL LOAD

Page 24: Mando UX and Design  Accessibility Training

TYPOGRAPHY

Not very helpful Better!

Page 25: Mando UX and Design  Accessibility Training

MOVEMENT

Not very helpful Better!

Page 26: Mando UX and Design  Accessibility Training

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

Page 27: Mando UX and Design  Accessibility Training

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!)

Page 28: Mando UX and Design  Accessibility Training

RESPONSIVE

CHALLENGES

Page 29: Mando UX and Design  Accessibility Training

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

Page 30: Mando UX and Design  Accessibility Training

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”

Page 31: Mando UX and Design  Accessibility Training

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