mando ux and design accessibility training
TRANSCRIPT
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