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

Testing your app with VoiceOver

Testing your app with VoiceOver

This was a lightning talk given for Bleeding Edge Web ATX: https://www.meetup.com/bleeding-edge-web/events/250296668/

53f03faec1f8e5de88b555cb02ae6ac9?s=128

Robert DeLuca

May 17, 2018
Tweet

Transcript

  1. TESTING YOUR APPS WITH A SCREEN READER

  2. HAPPY GLOBAL ACCESSIBILITY AWARENESS DAY!

  3. ALL MACS AND IOS DEVICES HAVE A BUILT IN SCREEN

    READER
  4. VOICEOVER

  5. ENABLE IT FOR IOS & MACOS VOICEOVER • iOS: Settings

    —> General —> Accessibility —> VoiceOver (or “hey siri turn on voiceover”) • macOS: CMD + F5
  6. TWO MAIN WAYS TO NAVIGATE

  7. TAB

  8. VOICEOVER KEYS + ARROW KEYS

  9. ⌘ + ⌥ VOICEOVER KEYS

  10. PROTIP: REMAPPED CAPS LOCK TO CONTROL WORKS AS VO KEYS

  11. USE THE SCREEN CURTAIN VOICEOVER KEYS + SHIFT + FN

    + _
  12. ROLE, NAME, VALUE

  13. CHECKBOX AS AN EXAMPLE ROLE, NAME, VALUE • Role: Checkbox

    (from type=“checkbox”) • Name: The linked label (or aria-label) • Value: Checked or Unchecked
  14. BUTTON AS AN EXAMPLE ROLE, NAME, VALUE • Role: Button

    • Name: The content of the button • Value: N/A
  15. LETS TEST ON REACTJS.ORG

  16. THANKS!

  17. FRONTSIDE.IO