Accessibility - Learn how to get your whole team involved

Transcript

1. Accessibility Learn how to get your whole team involved MICHAELA BLACKHAM
2. Michaela
 Blackham FRONT-END DEVELOPER
3. @atendesign aten.io
4. Work That
 Matters
5. Work That
 Matters
6. Accessibility Learn how to get your whole team involved
8. What is the problem?
9. 53 million adults live with some form of a disability in the USA — CDC: CENTERS FOR DISEASE CONTROL & PREVENTION
10. That’s 1 in every 5 adults in the USA — CDC: CENTERS FOR DISEASE CONTROL & PREVENTION
12. What is accessibility? Easy to obtain, use and understand.
13. P O U R
14. P: Perceivable O U R
15. P: Perceivable O: Operable U R
16. P: Perceivable O: Operable U: Understandable R
17. P: Perceivable O: Operable U: Understandable R: Robust
18. P: Perceivable O: Operable U: Understandable R: Robust
19. P: Perceivable O: Operable U: Understandable R: Robust
20. P: Perceivable O: Operable U: Understandable R: Robust
21. P: Perceivable O: Operable U: Understandable R: Robust
22. needs an accessible website? Who
23. Everyone benefits from an accessible website.
24. There are 4 main categories
25. Visual Motor or Physical Auditory Cognitive
26. Visual Motor or Physical Auditory Cognitive
27. What does this mean? • Someone with low, obstructed, or constricted vision • My color blind father • Each of our aging grandparents VISUAL
31. • Navigation • Visual content • Orientation & boundaries • Contrast & size • Peripheral interaction What should I look for? VISUAL
32. • Design • Keyboard navigation • Screen readers How is this solved? VISUAL
33. Visual Motor or Physical Auditory Cognitive
34. • Someone like my cousin Emily, with a disability from birth • The wounded vet that uses prosthetics • Or even my niece with her broken arm or finger What does this mean? MOTOR OR PHYSICAL
35. • Gesture alternatives & sensitivity touches • Reach/orientation on mobile • Non physical navigation What should I look for? MOTOR OR PHYSICAL
36. • Keyboard or touch navigation • Speech • Eye trackers, tongue sensitivity clickers etc How is this solved? MOTOR OR PHYSICAL
37. Visual Motor or Physical Auditory Cognitive
38. • Someone who is completely non hearing • My grandfather who wears a hearing aid What does this mean? AUDITORY
39. • Embedded videos • Alternative contact information What should I look for? AUDITORY
40. • Closed captioning & transcripts • Alternative communication How is this solved? AUDITORY
41. Visual Motor or Physical Auditory Cognitive
42. • My cousin Matthew who has down syndrome • The little boy I babysit with autism • Your friend who may have dyslexia • Me with extreme motion sickness What does this mean? COGNITIVE
43. • Visual density • Memory gestures • Distracting content • Fonts • Excessive movements What should I look for? COGNITIVE
44. • K.I.S.S. • Clear & consistent layouts • Smart color palettes • Controllable interactions • Subtle movements How is this solved? COGNITIVE
45. Where are we today?
46. Not awful, but not great.
47. There are so many devices
48. Where can I start?
49. Accessibility takes a full team
50. Project managers
51. Make accessibility a priority from the beginning PROJECT MANAGERS
52. Educate the client PROJECT MANAGERS
53. Content creators
54. Include meaningful alternative (alt) text for 
 all visuals CONTENT CREATORS
55. Headings to organize structure and content CONTENT CREATORS
56. Descriptive link text CONTENT CREATORS
57. Provide captions, transcripts and descriptions for media CONTENT CREATORS
58. Designers
59. Content first DESIGNERS
60. Be mindful of typography DESIGNERS
61. Provide good contrast for colorblindness and low vision DESIGNERS
66. Don’t rely on color only, to show distinctions DESIGNERS
69. Create clear and intuitive layouts DESIGNERS
71. Critique Critique Critique DESIGNERS
72. Developers
73. Use semantic markup for hierarchy & structure DEVELOPERS
75. Pay special attention to markup on forms DEVELOPERS
77. Capture content creators needs DEVELOPERS
78. Enable keyboard navigation DEVELOPERS
79. Include ARIA attributes (Accessible Rich Internet Applications) DEVELOPERS
80. Quality assurance testers
81. Computers aren’t humans QUALITY ASSURANCE TESTERS
82. your heart into it! P.O.U.R
83. Thanks! michaela@aten.io Michaela Blackham /
84. Resources • The A11Y Project: a11yproject.com • Simply Accessible: simplyaccessible.com • Web Aim: webaim.org
 Color Testing • Color contrast: webaim.org/resources/ contrastchecker/ • Spectrum Chrome extension • Stark Sketch Plugin: getstark.co Screen Readers (free) • Safari Voicebox (built in) • Chromevox Chrome extension • NVDA (windows): nvaccess.org Transcribing media files (free) • Transcribe Chrome extension Accessibility checker • wave.webaim.org/