Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Design & Development

Techniques for
Accessibility

(a11y)
Robert Jolly



Project Strategy and Management

with a focus on web accessibility

@iamjolly
What is accessibility?
FOR EVERY PERSON
FOR EVERY DEVICE
making things work for everyone
regardless of their abilities
Who does this impact?
People with disabilities in:
• Vision
• Hearing
• Motor (Physical)
• Cognitive
Visual Disabilities
• Blindness
• 39 milllion
• Low vision
• 246 million
• Color blindness
• 8-10% of men
• Only 0.5% of w...
Hearing Disabilities
• Deafness
• Hearing Loss
360 million people worldwide have disabling
hearing loss. (WHO, 2015)
• Age...
Motor Disabilities
• Arthritis, fibromyalgia, & rheumatism
• Muscular dystrophy
• Amputation and deformity
• Tremors and s...
Cognitive Disabilities
• Learning disabilities / Dyslexia
• Autism
• ADHD
• Acquired brain injuries
• Neurodegenerative di...
BlindnessCognitive
Situational disabilities
Chemo brain
Color blindness
Cystic fibrosis
Gamer’s thumb
Dyslexia
Language ba...
1,000,000,000people have a disability
on our planet today
1 in 7 15%
People with disabilities are, by far, the
largest minority group on the Web.
People with disabilities have
$175 billion
in discretionary spending, per year.
Situational challenges
• Broken mouse
• Fractured wrists
• Using mobile devices
• Sun glare on screens
• Feeling tired or ...
Accessibility benefits all of us.
+ +
What tools do people use?
Devices
Windows high contrast theme
Across most of the Internet, the current
state of web accessibility isn’t great.
• Awareness: Most of us design and
develop for people just like us.
• Bad defaults: Our “starter” code is
problematic.
It’s NOT ALL BAD, though.
Not too shabby, WordPress!
• WP Core/Accessibility Teams
• WP is largely accessible, by default.
• Default themes (2015, 2...
we don’t need accessibility plugins

to fix other plugins and themes.
How do we even…?
We have guidelines!
Technical standard for web site accessibility:

Web Content Accessibility Guidelines (WCAG) 2.0
• 4 Principles, broken int...
Principles of accessibility
erceivable
perable
nderstandable
obust
P
O
U
R
What are some
techniques?
Accessibility as an MVP
Keyboard Images Forms Dynamic content Everything else
Designing
• Keyboard access:
• Ensure focus outlines
• Design great skip to content links.
• Be thoughtful about headings....
Designing
• Form error handling
• Make it easy for users to succeed, but…
• Design for failures.
• Animation & Carousels (...
Designing
• Content design
• Mobile-first, responsive = big accessibility
gains.
• Plain language and consistent interface...
Developing
• Keyboard access ALL THE THINGS
• Focus outlines: change default resets!
• Ensure tab order matches source ord...
Developing
• Document Structure
• Set the language for every page.
• Use unique page titles.
• Heading structure should ma...
Developing
• Forms and error handling
• Every form field requires a label.
• You can hide labels visually, if needed. :)
•...
Developing
• Maintain/set focus on changes
• Ensure audiences know when on-page
changes occur—not just visually.
• Provide...
accessibility problems are 

best solved lower in the stack!
Tools for accessibility
Design & Dev Tools for a11y
• Your keyboard (seriously)
• Your browser’s
• DOM inspector
• Text resize
• Color contrast to...
Design & Dev Tools for a11y
• Automated checkers (YMMV):
• tota11y — https://khan.github.io/tota11y/
• pa11y — http://pa11...
Design & Dev Tools for a11y
• And… most importantly:
• Usability testing with people with
disabilities
• Younger and older...
every project team member

has a role to play in accessibility
Questions?
Thank you! :)
@iamjolly
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
Prochain SlideShare
Chargement dans…5
×

Design and Development Techniques for Accessibility: WordCamp Tampa 2015

785 vues

Publié le

I’ll explore basic web accessibility principles for web designers, developers, and site owners, then show how to turn seemingly daunting and confusing accessibility requirements into understandable, actionable tasks and techniques. The talk will cover some of the accessibility-specific WordPress plugins and themes available, as well as some quick, easy tests to integrate into design and development workflows.

Publié dans : Internet
  • Soyez le premier à commenter

Design and Development Techniques for Accessibility: WordCamp Tampa 2015

  1. 1. Design & Development
 Techniques for Accessibility
 (a11y)
  2. 2. Robert Jolly
 
 Project Strategy and Management
 with a focus on web accessibility
 @iamjolly
  3. 3. What is accessibility?
  4. 4. FOR EVERY PERSON
  5. 5. FOR EVERY DEVICE
  6. 6. making things work for everyone regardless of their abilities
  7. 7. Who does this impact?
  8. 8. People with disabilities in: • Vision • Hearing • Motor (Physical) • Cognitive
  9. 9. Visual Disabilities • Blindness • 39 milllion • Low vision • 246 million • Color blindness • 8-10% of men • Only 0.5% of women
  10. 10. Hearing Disabilities • Deafness • Hearing Loss 360 million people worldwide have disabling hearing loss. (WHO, 2015) • Ages 45 to 54 = 2% • Ages 55 to 64 = 8.5% • Ages 65 to 74 = 25% • Ages 75 and older = 50%
  11. 11. Motor Disabilities • Arthritis, fibromyalgia, & rheumatism • Muscular dystrophy • Amputation and deformity • Tremors and spasms • Paralysis / spinal cord injury • Repetitive stress injury
  12. 12. Cognitive Disabilities • Learning disabilities / Dyslexia • Autism • ADHD • Acquired brain injuries • Neurodegenerative diseases • Age-related dementia
  13. 13. BlindnessCognitive Situational disabilities Chemo brain Color blindness Cystic fibrosis Gamer’s thumb Dyslexia Language barriers Photosensitive epilepsy Astigmatism Hard of hearing Lazy-Eyes Directionally challenged Poor hearing Age-related macular degeneration Multiple sclerosis Learning difficulties Visual impairments Tremors Muscle slowness Deuteranopia Monochromacy Dichromacy Anomalous trichromacy Protanopia Protanomaly Deuteranomaly Tritanopia Tritanomaly Deafness Achromatopsia Loss of fine muscle control Parkinson’s disease Muscular dystrophy Cerebral palsy Stroke Photoepileptic seizures Developmental disabilities Dyscalculia Attention deficit disorder Dementia Acquired brain injuries Neurodegenerative diseases Difficulty concentrating Dysgraphia Getting older Post-concussion syndrome Sleep deprivation Vertigo Illiteracy Amputation Cataracts Glaucoma Hearing Autism Motor Diabetic retinopathy Low vision Noise-induced hearing loss Aphasia Reading disordersVisual Vestibular disorders
  14. 14. 1,000,000,000people have a disability on our planet today 1 in 7 15%
  15. 15. People with disabilities are, by far, the largest minority group on the Web.
  16. 16. People with disabilities have $175 billion in discretionary spending, per year.
  17. 17. Situational challenges • Broken mouse • Fractured wrists • Using mobile devices • Sun glare on screens • Feeling tired or unwell • Noisy environments • Kids playing around • Long, stressful day
  18. 18. Accessibility benefits all of us. + +
  19. 19. What tools do people use?
  20. 20. Devices
  21. 21. Windows high contrast theme
  22. 22. Across most of the Internet, the current state of web accessibility isn’t great.
  23. 23. • Awareness: Most of us design and develop for people just like us. • Bad defaults: Our “starter” code is problematic.
  24. 24. It’s NOT ALL BAD, though.
  25. 25. Not too shabby, WordPress! • WP Core/Accessibility Teams • WP is largely accessible, by default. • Default themes (2015, 2016, etc.) • Creating standards for theme/plugin devs.
  26. 26. we don’t need accessibility plugins
 to fix other plugins and themes.
  27. 27. How do we even…?
  28. 28. We have guidelines!
  29. 29. Technical standard for web site accessibility:
 Web Content Accessibility Guidelines (WCAG) 2.0 • 4 Principles, broken into 
 12 guidelines and 61 success criteria • Success criteria fits at Level A, AA or AAA • 25 are level A • 13 are level AA • 23 are level AAA
  30. 30. Principles of accessibility
  31. 31. erceivable perable nderstandable obust P O U R
  32. 32. What are some techniques?
  33. 33. Accessibility as an MVP Keyboard Images Forms Dynamic content Everything else
  34. 34. Designing • Keyboard access: • Ensure focus outlines • Design great skip to content links. • Be thoughtful about headings. • Low vision: • Color contrast: 4.5:1 ratio for standard text. • Proximity: group related items • Line lengths: not too short or long
  35. 35. Designing • Form error handling • Make it easy for users to succeed, but… • Design for failures. • Animation & Carousels (if you must) • Design user controls for motion/carousels. • Avoid: rapid flashing elements • Avoid overuse of parallax effects.
  36. 36. Designing • Content design • Mobile-first, responsive = big accessibility gains. • Plain language and consistent interfaces. • Link text should be unique. AVOID: “Read more…”
  37. 37. Developing • Keyboard access ALL THE THINGS • Focus outlines: change default resets! • Ensure tab order matches source order. • Be responsible for modal interactions. • Maps, media, and other controls. • Alternate text • Images - functional, content, and decorative.
  38. 38. Developing • Document Structure • Set the language for every page. • Use unique page titles. • Heading structure should make sense when linearized. • Employ semantic markup.
  39. 39. Developing • Forms and error handling • Every form field requires a label. • You can hide labels visually, if needed. :) • Provide contextual help. • Make it easy to correct errors. • Link to error fields from error summary text.
  40. 40. Developing • Maintain/set focus on changes • Ensure audiences know when on-page changes occur—not just visually. • Provide contextual help. • Make it easy to correct errors. • Link to error fields from error summary text.
  41. 41. accessibility problems are 
 best solved lower in the stack!
  42. 42. Tools for accessibility
  43. 43. Design & Dev Tools for a11y • Your keyboard (seriously) • Your browser’s • DOM inspector • Text resize • Color contrast tools: • ColorSafe.co - helps plan color combinations • Lea Verou’s Contrast Ratio tool
  44. 44. Design & Dev Tools for a11y • Automated checkers (YMMV): • tota11y — https://khan.github.io/tota11y/ • pa11y — http://pa11y.org/ • Quail.js — http://quailjs.org/
  45. 45. Design & Dev Tools for a11y • And… most importantly: • Usability testing with people with disabilities • Younger and older people are great to test with, too!
  46. 46. every project team member
 has a role to play in accessibility
  47. 47. Questions?
  48. 48. Thank you! :) @iamjolly

×