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/

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