Accessible design and development

I talk I gave about Supercool's approach to accessible design

Transcript

2. Accessibility
3. Who cares?
4. Who cares? visually impaired
5. Who cares? colour blind
6. Who cares? epilepsy
7. Who cares? deaf
8. Who cares? motor issues
9. Stats
10. 23% of UK population is over 60
11. Approx. 1/3 of over 65s are affected by disabling hearing loss.
12. 2 million people in the UK are living with sight loss
13. 10% of the UK population
 suffer from colour blindness
14. 3/4 of UK population require some form of vision correction
15. 8% of the UK population
 suffer from Dyslexia
16. Not just about disability
17. More than disability technology
18. More than disability environment
19. More than disability language
20. More than disability connection speed
21. More than disability unusual devices
22. Not just about frontend
23. Not just about frontend •Structure & planning •Content •Design and interaction • Functionality • Control panels • And, yes … frontend
24. Our responsibility
25. Features
26. alt="Supercool logo"
27. WAI-ARIA landmarks and roles
28. Common ARIA roles <header role="banner"> <nav role="navigation"> <form role="search"> <main role="main"> <aside role="complementary"> <footer role="contentinfo">
29. Common ARIA roles <header role="banner"> <nav role="navigation"> <form role="search"> <main role="main"> <aside role="complementary"> <footer role="contentinfo">
30. Common ARIA roles <header role="banner"> <nav role="navigation"> <form role="search"> <main role="main"> <aside role="complementary"> <footer role="contentinfo">
31. Common ARIA roles <header role="banner"> <nav role="navigation"> <form role="search"> <main role="main"> <aside role="complementary"> <footer role="contentinfo">
32. Common ARIA roles <header role="banner"> <nav role="navigation"> <form role="search"> <main role="main"> <aside role="complementary"> <footer role="contentinfo">
33. Common ARIA roles <header role="banner"> <nav role="navigation"> <form role="search"> <main role="main"> <aside role="complementary"> <footer role="contentinfo">
34. Common ARIA roles <header role="banner"> <nav role="navigation"> <form role="search"> <main role="main"> <aside role="complementary"> <footer role="contentinfo">
35. Common ARIA roles <header role="banner"> <nav role="navigation"> <form role="search"> <main role="main"> <aside role="complementary"> <footer role="contentinfo"> https://dev.opera.com/articles/introduction-to-wai-aria/#landmarks
36. Fallbacks
37. Fallbacks <noscript> <h2>Become a member</h2> <p>Download our application form</p> </noscript>
38. Styling a:focus { outline: none }
39. Keyboard controls Cancel modals
40. Keyboard controls Sliders
41. Maximise link targets Submit
42. Clear interactive elements Submit
43. Avoid vague copy See image on the right for more information about the project.
44. Avoid vague copy See fig.3 for more information 
 about the project.
45. Avoid vague copy Download our brochure Click here
46. Avoid vague copy Download our brochure
47. Testing tools
48. Colour contrast https://snook.ca/technical/colour_contrast/colour.html
49. Colour contrast
50. Mac VoiceOver
51. WAVE Evaluation Tool
52. Compliance Disability Discrimination Act 2005 Equality Act 2010 W3 WCAG Guidelines
53. WCAG Get familiar with techniques https://www.wuhcag.com/wcag-checklist/
54. Not just about compliance
55. Build better software • Better UX • Better SEO • Increase conversions • Functionality • Control panels • And, yes … frontend
56. We benefit •Standard-based = maintainability •Be a better class of dev
57. Accessibility = Everybody wins
58. Keep it simple •Consider the problem •Think about the user •Use common sense
59. Toot!
60. supercool.co