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
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