How to Develop with Accessibility in Mind

What does accessibility entail as it is related to the web? Most developers don't consider that someone with any variety of impairments may use their applications and don't think about what this experience may be like for someone who has an impairment. The current trend is to push access-driven design to the end of feature building, but we will explore why this needs to be a top priority.

Transcript

1. HOW TO DEVELOP WITH ACCESSIBILITY IN MIND RailsConf 2015 Chandra Carney @chandracarney
5. Hello. I’m Chandra
6. ACCESSIBILITY (a11y)
7. What?
8. • Inclusive • Universally usable • Accessed regardless of device
9. Why?
10. Software: 
 Built for People

11. Who?
12. • Visual • Auditory • Mobility
 • Speech • Cognitive • Neurological
 TYPES OF INCLUSION:
13. How?
14. ASSISTIVE TECHNOLOGIES • Screen magnifiers • Screen readers • Braille displays • Voice control • Mouse pedals • Assistive touch • Switch access • Eye gaze
15. The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
 
 —Tim Berners-Lee
16. WHY THIS SUBJECT?
18. VISUAL IMPAIRMENT • Partially sighted • Low vision • Legally blind • Completely blind
19. Braille displays
21. Screen readers
22. Windows Chrome Apple Jaws Window-Eyes Voice Over Chromevox
23. Screen readers Traverse the DOM
25. ARIA
26. Assistive
 Rich Internet Applications
27. Role attributes
28. States and properties
42. Recap Good • Skip to navigation • Skip to content • Top stories heading • Good content at top • Clear Ideas • Buttons and links
57. Was this successful? • Can’t skip content • Lots of repetition • Can’t log in • Nav pushed down • Search gets lost • Button not clear
58. Low Contrast
64. Low Contrast (continued)
68. MOBILITY IMPAIRMENT • Fine motor control • Limited movement
 • Low strength • Single-handedness
72. Voice Control
73. Voice Control Utilizes the DOM
75. COGNITIVE IMPAIRMENT • Reading disorder • Schizophrenia
 • Memory loss • Stroke
76. On-screen Content
77. NEUROLOGICAL IMPAIRMENT • Epilepsy • Parkinson’s
 • Vertigo • Multiple Sclerosis
79. HEARING IMPAIRMENT • Deaf • Hard of hearing
81. HOW CAN DEVELOPERS IMPROVE THIS?
85. Kickstarter Closed Captioning
89. Netflix Audio Description
92. TYPOGRAPHY
93. Size { browser standards }
94. Readability
95. LAYOUT
96. Forms
100. Click Targets
103. SCALING SIZE
104. Fixed
107. Relative
110. HOW CAN DEVELOPERS INTEGRATE THIS?
111. Linters
113. Checklists
115. Workflow Integration
116. Advocate
117. Try Assistive Technologies
118. Find User Groups
119. Audits
120. Thank You @chandracarney