Being An a11y: Accessibility For Web Apps

An Introductory talk on accessibility for web applications at NFR Conference by HashedIn, June 27, 2020.

Transcript

2. The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, W3C Director and inventor of the World Wide Web
3. Accessibility For Web Apps Being an a11y @tejasupmanyu tejasupmanyu.dev
4. Tejas Upmanyu Engineering@HashedIn @tejasupmanyu tejasupmanyu.dev
5. What is Accessibility? 5
6. Accessibility noun /əkˌses.əˈbɪl.ə.ti/ The fact of being able to be reached or obtained easily.
7. The Web is fundamentally designed for all. When your Web application meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability. Web Accessibility
8. Why Accessibility Matters?
9. #AccessibleToAll The Web is and should be
10. 1 Billion+ people with some form of disability WHO, 2017 Report
11. Accessibility enriches UX for everyone.
12. Don’t build apps you’ll find hard to use in 2050.
13. Assistive Technologies
14. • Mobility • Visual • Hearing • Cognitive Impairments
15. Assistive Technologies Features/utilities which help people to access the web are called Assistive Technologies Keyboard Navigation Screen Readers (Voiceover on Mac, NVDA on Windows)
16. Principles & Guidelines
17. Principles & Guidelines WCAG (Web Content Accessibility Guidelines) Perceivable Operable ⌨ Understandable Robust
19. Small Steps Towards Accessibility
20. Semantics Matter ✔ • <div> is not the only HTML Tag!
21. Semantics Matter ✔ • Don’t Skip heading levels • Add hidden headings, if not in present in design
23. Semantics Matter ✔ • Use landmark elements <nav>,<aside>,<main> etc.
24. Use the Platform • Use the elements provided by HTML as much as possible. • Just use the <button>! • Understand links vs Buttons.
26. ARIA • Simple HTML elements aren't enough for fulfilling design requirements. • HTML controls are super hard to style. • WAI-ARIA (Web Accessibility Initiative - Accessibility Rich Internet Applications) • Using ARIA we can tell the browser to interpret these elements differently in the accessibility tree.
27. Art of Labelling ✍ • WCAG Guideline 1.1, states that we should provide text alternatives for all non-text content • Labels can be transformed into forms people with disability can understand like speech, braille, symbols or simpler language etc.
28. Hover, Focus ✨ • Distinguished Hover states for control elements. • Focus, focus ring and :focus-visible ⚠ :focus-visible is still a working draft, only available in Firefox.
29. Color Users Impressed • WCAG 2.0, section 1.4.3 suggests some minimum contrast levels 4.5:1 Text & Images 3:1 Large text, bold text
31. Color Users Impressed • Enhanced version (1.4.6) of the guidelines, for content designed for elderly. 7:1 Text & Images Large text, bold text 4.5:1
32. Inert Elements • Users’ focus should not go to off-screen elements. • inert attribute for making browsers ignore elements. ⚠ Inert is still a CSS4 working draft, use the pollyfill
33. 3rd Party a11y • Consciously choosing and using components/ libraries which are accessible or have accessibility as one of their foremost concerns can help your application score more on accessibility.
34. Auditing & Culture
35. Auditing Tools • Axe by Dequeue labs is an open source accessibility testing engine for web UIs. There is a super useful chrome extension for it as well. • Lighthouse also includes accessibility testing built on top of axe-core, right in chrome developer tools.
36. Linting • There are plenty of linter plugins available for pointing out accessibility issues with your code. If you are React dev, make sure to use eslint- plugin-jsx-a11y
37. Quick Accessibility Audit 1. Start navigating use tab key on the web page. 2. Check if focus is not going to elements which are hidden or off screen. 3. Simplistic page navigation using screen reader. 4. Page must be using appropriate headings and semantic HTML, landmark roles. 5. Check for colours and contrast, some sections with low contrast levels might be difficult for users to read, you can use the Axe chrome extension for it.
38. Culture • Advocate accessibility • Put a price on accessibility. • UX over DX
39. Inspirations On The Web
41. Delivering Considerate Experiences
42. Deliver Delight Strive to deliver delightful, inclusive experiences.
44. Thank you @tejasupmanyu tejasupmanyu.dev
45. tejasupmanyu.dev/links