Save 37% off PRO during our Black Friday Sale! »

Being An a11y: Accessibility For Web Apps

Being An a11y: Accessibility For Web Apps

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


Tejas Upmanyu

June 27, 2020


  1. None
  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

  4. Tejas Upmanyu Engineering@HashedIn @tejasupmanyu

  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

  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
  18. None
  19. Small Steps Towards Accessibility

  20. Semantics Matter ✔ • <div> is not the only HTML

  21. Semantics Matter ✔ • Don’t Skip heading levels • Add

    hidden headings, if not in present in design
  22. None
  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.
  25. None
  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
  30. None
  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

  40. None
  41. Delivering Considerate Experiences

  42. Deliver Delight Strive to deliver delightful, inclusive experiences.

  43. None
  44. Thank you @tejasupmanyu