Slide 1

Slide 1 text

TESTING YOUR APPS WITH A SCREEN READER

Slide 2

Slide 2 text

HAPPY GLOBAL ACCESSIBILITY AWARENESS DAY!

Slide 3

Slide 3 text

ALL MACS AND IOS DEVICES HAVE A BUILT IN SCREEN READER

Slide 4

Slide 4 text

VOICEOVER

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

TWO MAIN WAYS TO NAVIGATE

Slide 7

Slide 7 text

TAB

Slide 8

Slide 8 text

VOICEOVER KEYS + ARROW KEYS

Slide 9

Slide 9 text

⌘ + ⌥ VOICEOVER KEYS

Slide 10

Slide 10 text

PROTIP: REMAPPED CAPS LOCK TO CONTROL WORKS AS VO KEYS

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ROLE, NAME, VALUE

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

LETS TEST ON REACTJS.ORG

Slide 16

Slide 16 text

THANKS!

Slide 17

Slide 17 text

FRONTSIDE.IO