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/

Robert DeLuca

May 17, 2018
Tweet

More Decks by Robert DeLuca

Other Decks in Programming

Transcript

  1. TESTING YOUR APPS
    WITH A SCREEN READER

    View Slide

  2. HAPPY GLOBAL
    ACCESSIBILITY
    AWARENESS DAY!

    View Slide

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

    View Slide

  4. VOICEOVER

    View Slide

  5. ENABLE IT FOR IOS & MACOS
    VOICEOVER
    • iOS: Settings —> General —> Accessibility —> VoiceOver
    (or “hey siri turn on voiceover”)
    • macOS: CMD + F5

    View Slide

  6. TWO MAIN WAYS
    TO NAVIGATE

    View Slide

  7. TAB

    View Slide

  8. VOICEOVER KEYS
    + ARROW KEYS

    View Slide

  9. ⌘ + ⌥
    VOICEOVER KEYS

    View Slide

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

    View Slide

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

    View Slide

  12. ROLE, NAME, VALUE

    View Slide

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

    View Slide

  14. BUTTON AS AN EXAMPLE
    ROLE, NAME, VALUE
    • Role: Button
    • Name: The content of the button
    • Value: N/A

    View Slide

  15. LETS TEST ON
    REACTJS.ORG

    View Slide

  16. THANKS!

    View Slide

  17. FRONTSIDE.IO

    View Slide