Accessible By Design

An introduction to accessibility guidelines and a look at how to design accessible UI components.

Transcript

1. Accessible by Design with Tim Knight
2. Hi! I’m Tim Knight Director User Experience @ GravityFree Studios Organizer of the St. Petersburg Front-End Meetup www.iamtimknight.com
3. “I’m not a lawyer and not the person you want interpreting the law for you, but I can tell you how to make better digital products.” Tim Knight The guy on the stage right now
4. Looking at Today • The roles of the ADA, Section 508, and WCAG on modern accessibility design • Changing our view on accessibility • Technology won’t save poor design: designing CRiSP • Designing components to be individually accessible • Think outside the structure • Accessibility testing tools that I love • Things you should read
5. The Legal Stuff
6. We’re Not Going Into Detail on This
7. “Federal procurement law requires that [Interactive transaction machines] purchased by the Federal government comply with standards issued by the Access Board under Section 508 of the Rehabilitation Act of 1973, as amended.” Section 707 of The American’s with Disability Act http://www.ada.gov/regs2010/2010ADAStandards/2010ADAstandards.htm#pgfId-1006537
8. “Federal procurement law requires that [Interactive transaction machines] purchased by the Federal government comply with standards issued by the Access Board under Section 508 of the Rehabilitation Act of 1973, as amended.” Section 707 of The American’s with Disability Act http://www.ada.gov/regs2010/2010ADAStandards/2010ADAstandards.htm#pgfId-1006537
9. If your company receives federal funding, current court rulings are starting to set precedent that this could include you too. Don’t Get Too Excited
10. WCAG • Perceivable - Information and user interface components must be presentable to users in ways they can perceive. • Operable - User interface components and navigation must be operable. • Understandable - Information and the operation of user interface must be understandable. • Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. Web Content Accessibility Guidelines
11. Changing Our View
12. This is about creating products everyone can use.
13. “We’re all just temporarily abled.” Cindy Li Freelance Designer, Previously with Yahoo!
14. You wouldn’t make a website that wasn’t responsive would you?
15. Designing CRiSP
16. The visual presentation of text and images of text should have a contrast ratio of at least 4.5:1 Large-scale text and images of large-scale text should have a contrast ratio of at least 3:1 (14pt and bold or larger, or 18pt or larger) Contrast (AA)
17. The visual presentation of text and images of text should have a contrast ratio of at least 7:1 Large-scale text and images of large-scale text should have a contrast ratio of at least 4.5:1 (14pt and bold or larger, or 18pt or larger) Contrast (AAA)
18. Contrast (for Mac) https://usecontrast.com
19. Contrast Analyser for Sketch https://github.com/getflourish/Sketch-Color-Contrast-Analyser
20. Color Contrast Checker http://webaim.org/resources/contrastchecker/
21. Alerting with blinking, shaking, or other techniques that “flash” an item on the screen should not flash that item more than 3 times per second to reduce the chance of seizures. Refresh Rate
22. Make it clear to the user where they are, where they’ve been, and what their options are. State
23. State
24. State Pressing tab on BBC let’s you access accessibility features.
26. Avoid extended cognitive load to decipher the meaning of abstract images or complicated text. Perception (Yes, there’s probably a simple way I could have said that)
27. Accessible Components
28. Buttons
29. Links
30. Cards
31. Card: Alt Attributes
32. Card: Embrace Your Focus Ring
33. Icon Links Lists
34. Icon Links Lists
35. Forms
36. One option…
38. Buttons Menus & Toggling State
39. Buttons Menus & Toggling State
40. Tab Trapping
46. Thinking outside the document structure
47. Subtitle Workshop XE http://www.uruworks.net/
48. Aegisub http://www.aegisub.org/
49. YouTube https://www.youtube.com
50. Using Subtitle with HTML5 Video
51. Testing Tools I Love
52. Chrome DevTools / Lighthouse
53. Chrome DevTools / Lighthouse
54. aXe https://www.deque.com/axe/
55. pa11y https://github.com/pa11y/pa11y
56. Learning More
57. Accessibility for Everyone https://abookapart.com/products/accessibility-for-everyone
58. A Web for Everyone https://rosenfeldmedia.com/books/a-web-for-everyone/
59. Accessibility Handbook http://shop.oreilly.com/product/0636920024514.do
60. Inclusive Components http://book.inclusive-components.design/
61. The a11y Project https://a11yproject.com/
62. Questions?
63. thank you. Tim Knight iamtimknight.com Find this and other talks at https://speakerdeck.com/timknight