This was a lightning talk given for Bleeding Edge Web ATX: https://www.meetup.com/bleeding-edge-web/events/250296668/
TESTING YOUR APPSWITH A SCREEN READER
View Slide
HAPPY GLOBALACCESSIBILITYAWARENESS DAY!
ALL MACS AND IOSDEVICES HAVE A BUILT INSCREEN READER
VOICEOVER
ENABLE IT FOR IOS & MACOSVOICEOVER• iOS: Settings —> General —> Accessibility —> VoiceOver(or “hey siri turn on voiceover”)• macOS: CMD + F5
TWO MAIN WAYSTO NAVIGATE
TAB
VOICEOVER KEYS+ ARROW KEYS
⌘ + ⌥VOICEOVER KEYS
PROTIP: REMAPPED CAPSLOCK TO CONTROLWORKS AS VO KEYS
USE THE SCREEN CURTAINVOICEOVER KEYS + SHIFT + FN + _
ROLE, NAME, VALUE
CHECKBOX AS AN EXAMPLEROLE, NAME, VALUE• Role: Checkbox (from type=“checkbox”)• Name: The linked label (or aria-label)• Value: Checked or Unchecked
BUTTON AS AN EXAMPLEROLE, NAME, VALUE• Role: Button• Name: The content of the button• Value: N/A
LETS TEST ONREACTJS.ORG
THANKS!
FRONTSIDE.IO