Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Listen to UI: Making Apps Accessible

Listen to UI: Making Apps Accessible

You can hear how your application sounds when assertive technology (like VoiceOver, TalkBack) turned on. But have you ever listen to it? I want you to close your eyes and try to navigate the application using keyboard and voice instructions. Then I will show how to handle all labeling, color, and navigation issues found. As a final touch, we will create e2e and unit tests for accessibility features.

Vitalii Bobrov

December 05, 2020
Tweet

More Decks by Vitalii Bobrov

Other Decks in Programming

Transcript

  1. VITALII BOBROV • Lead SW Engineer at EPAM Poland •

    originally from Mykolaiv • @AngularWroclaw org and tech speaker @bobrov1989 https://bobrov.dev
  2. WEB A11Y LAWSUITS • USA - 11k+ in 2019, 2020

    shows about 20% grow • EU - about 5k in 2020
  3. EUROPEAN ACCESSIBILITY ACT E A A • WCAG (Web Content

    Accessibility Guidelines) 2.1 • September 23rd was the deadline to implement it
  4. A11Y TESTING • Manual still required • Tools like Lighthouse,

    Chrome extensions • a11y testing libraries - aXe core
  5. PROBLEMS DETECTED • Missed lang attribute • 4 tab presses

    to reach content • Wrong structure of navigation links
  6. PROBLEMS DETECTED • Images have no description • Some content

    seems to be random text • Non-descriptive link text • Hard to navigate between cards
  7. FOCUS LIST I M P R O V E N

    AV I G AT I O N W I T H
  8. PROBLEMS DETECTED • Link used as a button • Strange

    close button • Unknown input field • Focus moves outside dialog
  9. FOCUS TRAP P R E V E N T U

    N WA N T E D F O C U S W I T H
  10. V I S U A L S • prefers-reduced-motion •

    prefers-color-scheme • color contrast • UI elements size • focus indicator
  11. R E C A P • a11y is forced by

    laws, every user will benefit from it • care about it from the start • test it manually, with browser tools, e2e and unit tests • requires UX input
  12. THANK YOU M A K E W E B F

    O R E V E RY O N E @bobrov1989 https://bobrov.dev