Download as PDF, PPTX
Uploaded byRobert Jolly
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
The document discusses web accessibility (a11y), emphasizing the importance of designing for diverse abilities to include around 1 billion people worldwide with disabilities. It outlines the estimated impacts of various disabilities and presents guidelines and techniques for creating accessible web content, focusing on principles such as perceivable, operable, understandable, and robust (POUR). The document also highlights tools and practices to enhance accessibility during the design and development phases, underscoring the necessity of usability testing with individuals who have disabilities.
More Related Content
Similar to Design and Development Techniques for Accessibility: WordCamp Tampa 2015
![Number_Guessing_Game_Dsbsbssbzboc[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/numberguessinggamedoc1-251206215042-a076fc05-thumbnail.jpg?width=640&height=640&fit=bounds)
Design and Development Techniques for Accessibility: WordCamp Tampa 2015
- 1. Design & Development Techniquesfor Accessibility (a11y)
- 2. Robert Jolly Project Strategyand Management with a focus on web accessibility @iamjolly
- 4.
- 5.
- 6.
- 7. making things workfor everyone regardless of their abilities
- 8. Who does thisimpact?
- 9. People with disabilitiesin: • Vision • Hearing • Motor (Physical) • Cognitive
- 10. Visual Disabilities • Blindness •39 milllion • Low vision • 246 million • Color blindness • 8-10% of men • Only 0.5% of women
- 11. 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%
- 12. Motor Disabilities • Arthritis,fibromyalgia, & rheumatism • Muscular dystrophy • Amputation and deformity • Tremors and spasms • Paralysis / spinal cord injury • Repetitive stress injury
- 13. Cognitive Disabilities • Learningdisabilities / Dyslexia • Autism • ADHD • Acquired brain injuries • Neurodegenerative diseases • Age-related dementia
- 14. BlindnessCognitive Situational disabilities Chemo brain Colorblindness 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
- 16. 1,000,000,000people have adisability on our planet today 1 in 7 15%
- 17. People with disabilitiesare, by far, the largest minority group on the Web.
- 18. People with disabilitieshave $175 billion in discretionary spending, per year.
- 20. Situational challenges • Brokenmouse • Fractured wrists • Using mobile devices • Sun glare on screens • Feeling tired or unwell • Noisy environments • Kids playing around • Long, stressful day
- 22. Accessibility benefits allof us. + +
- 23. What tools dopeople use?
- 28.
- 33.
- 34. Across most ofthe Internet, the current state of web accessibility isn’t great.
- 35. • Awareness: Mostof us design and develop for people just like us. • Bad defaults: Our “starter” code is problematic.
- 37. It’s NOT ALLBAD, though.
- 38. 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.
- 42. we don’t needaccessibility plugins to fix other plugins and themes.
- 43. How do weeven…?
- 44.
- 45. Technical standard forweb 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
- 46.
- 47.
- 48.
- 49. Accessibility as anMVP Keyboard Images Forms Dynamic content Everything else
- 50. 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
- 51. Designing • Form errorhandling • 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.
- 52. Designing • Content design •Mobile-first, responsive = big accessibility gains. • Plain language and consistent interfaces. • Link text should be unique. AVOID: “Read more…”
- 53. Developing • Keyboard accessALL 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.
- 54. Developing • Document Structure •Set the language for every page. • Use unique page titles. • Heading structure should make sense when linearized. • Employ semantic markup.
- 55. Developing • Forms anderror 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.
- 56. Developing • Maintain/set focuson 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.
- 57. accessibility problems are best solved lower in the stack!
- 58.
- 59. Design & DevTools 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
- 60. Design & DevTools for a11y • Automated checkers (YMMV): • tota11y — https://khan.github.io/tota11y/ • pa11y — http://pa11y.org/ • Quail.js — http://quailjs.org/
- 61. Design & DevTools for a11y • And… most importantly: • Usability testing with people with disabilities • Younger and older people are great to test with, too!
- 62. every project teammember has a role to play in accessibility
- 63.
- 64.