Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0 Effective Inclusive Design Through Testing
69
Beyond WCAG 2.0: Effective Inclusive Design Through Testing
-
Upload
jackarmley -
Category
Technology
-
view
37 -
download
2
Transcript of Expedia Tech Know How Talks August 2016: Beyond WCAG 2.0 Effective Inclusive Design Through Testing
Beyond WCAG 2.0:
Effective Inclusive Design Through Testing
@jackarmley
What is inclusive design?
What is a “disability”
Our toolset for including users with a disability
Picking a screenreader
4 inclusive design golden rules
An automated quick win
Setting the ground Demo time!
http://bit.ly/knowhowquote
“The design of products that are accessible to, and usable by, as many people as reasonably possible, without special adaptation or specialised design”
British Standards Institute (2005) - Edited
“The design of products, devices, services, or environments for people with disabilities”
Wikipedia
Can we understand the user?
Can we replicate their experience?
michellecharlton.co.uk/responsive/
✔
Can we understand the user?
Can we replicate their experience?
✔
“...you have a physical or mental impairment that has a ‘substantial’ and ‘long-term’ negative effect on your ability to do normal daily activities.”
- gov.uk
...blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities.
- W3C
“In the UK, there are almost 2 million people living with sight loss.” - NHS
“People with disabilities … includes anyone who might become disabled at any point in life through injury, disease, or aging. (Which is potentially everyone.)”- eone-time.com/inclusive-design-is-a-social-justice-issue/
Permanent Temporary Acquired
Born with blindness Forget glasses at home for the day
Vision gets poorer with age
Permanent Temporary Acquired
Born with dyspraxia Fall and break an arm Develop arthritis later on in life
Born with blindness Forget glasses at home for the day
Vision gets poorer with age
Permanent Temporary Acquired
Born with dyslexia Learning a new subject Develop dementia when older
Born with dyspraxia Fall and break an arm Develop arthritis later on in life
Born with blindness Forget glasses at home for the day
Vision gets poorer with age
Permanent Temporary Acquired
Can we understand the user?
Can we replicate their experience?
✔
What is inclusive design?
What is a “disability”
Our toolset for including users with a disability
Picking a screenreader
4 inclusive design golden rules
An automated quick win
Setting the ground Demo time!
✔
✔
w3.org/TR/WCAG20/
“Web Content Accessibility Guidelines (WCAG) 2.0 covers a wide range of recommendations for making Web content more accessible to a wider range of people with disabilities. -WCAG 2.0 Spec
Perceivable Operable
RobustUnderstandable
1 2
3 4
Perceivable1
Can I find it?
Operable2
Can I use it?
Understandable3
Can I understand what to do, and what will happen?
Robust4
Can I use it with my chosen device, browser and assistive technology?
Essential Achievable on all modern websites
Specialist techniques only possible on
simpler sites or those specifically targeted to
a certain need
A AA AAA
What is inclusive design?
What is a “disability”
Our toolset for including users with a disability
Picking a screenreader
4 inclusive design golden rules
An automated quick win
Setting the ground Demo time!
✔
✔
✔
Demo time!
OS Preinstalled Cost Recommended browser
NVDA ✘ $0
JAWS ✘ $895 - $1,095
Voiceover ✔ $0
Talkback ✔ $0
OS Preinstalled Cost Recommended browser
NVDA ✘ $0
JAWS ✘ $895 - $1,095
Voiceover ✔ $0
Talkback ✔ $0
VO key ctrl ⌥
Move item by item VO ← →
Move to the start of the document VO ⇧ ↓
Rotor VO U
Start VO ⌘ F5
Skip by heading VO ⌘ H
Skip by form control VO ⌘ J
⇧Reverse
webaim.org
What is inclusive design?
What is a “disability”
Our toolset for including users with a disability
Picking a screenreader
4 inclusive design golden rules
An automated quick win
Setting the ground Demo time!
✔
✔
✔
✔
Voiceover tour
Golden rule no.1:Images have an aural equivalent
Benefits
Screenreader users can enjoy your images.
Makes images more effectively parsable by robots (like Google images).
Golden rule no.2:Links make sense out of context
Benefits
Screenreader users can more quickly jump to links in any part of your page, using the element quick nav.
If links are buried within content, they will be generally more readable by all users.
Golden rule no.3:Markup is fit for purpose
Screen curtain VO ⇧ F11
Benefits
Screenreader users get an accurate aural equivalent for rich interactions.
Keyboard-only users can navigate your content.
Often forces you to use more semantic elements (like buttons) where previously <spans /> or <a /> elements may have been used.
Golden rule no.4:Colors have sufficient contrast
Benefits
Colorblind users can read your content
Your content will be more readable in bright sunlight, or if someone’s mobile screen is dimmed to save power (for example)
An automated quick win
http://leaverou.github.io/contrast-ratio/
✔
Can we understand the user?
Can we replicate their experience?
✔
“We are all T.A.B.S (Temporarily Able Bodied)”
- Robin Christopherson, Head of Digital Inclusion at AbilityNet
Questions?codepen.io/jackarmley/
bit.ly/knowhowquote
