Navigating Screen Readers

Are you intimidated by operating a screen reader? For most sighted individuals using a screen reader is something they've never done before. If you're a developer or a QA that is producing accessible products using a screen reader becomes something that we must use for our jobs. And frankly, learning how to use one is not a easy feat.

This talk will go over how screen readers interact with the web, the basics of getting a screen reader setup on your computer, and how to operate it. You'll leave this session greater knowledge of accessible development and how to use a screen reader effectively.

Transcript

1. @courtneyheitman Navigating Screen Readers My Slides http://tiny.cc/CodePaLOUsa-NavigatingSRs
2. @courtneyheitman WARNING 2 It’s time to put on your empathy hat. !
3. @courtneyheitman Disability A mismatch in interaction between the features of a person's body and the features of the environment in which they live 3
4. @courtneyheitman We will all be disabled in our lifetimes. 4 Graphic from Microsoft’s Inclusive Design Toolkit One arm Arm injury New parent Deaf Ear infection Bartender Non-verbal Laryngitis Heavy Accent Blind Cataracts Distracted Driver
5. @courtneyheitman VISION DRIVING, WORKING, EYE SURGERY 5
6. @courtneyheitman VISION DIABETIC RETINOPATHY, GLAUCOMA, MACULAR DEGENERATION, CATARACTS 6
7. @courtneyheitman VISION BLINDNESS 7
8. @courtneyheitman Opportunity “THE POWER OF THE WEB IS IN ITS UNIVERSALITY.” 8 Tim Berners-Lee, Director of W3C and Inventor of the World Wide Web
9. @courtneyheitman Assistive Technologies SCREEN READERS & MORE!
10. @courtneyheitman Developing screen readers • 1.7% of participants in the 2022 StackOverflow survey were blind/have difficulty seeing 10
11. @courtneyheitman Refreshable Braille Displays 11 Source: Wisconsin Council of the Blind & Visually Impaired
12. @courtneyheitman WebAIM Screen Reader Survey • Conducted every 2 years • Volunteer based • Provides demographics and screen reader stats • Survey 9 (May-June 2021): https://webaim.org/projects/screenreadersurvey9/ 12
13. @courtneyheitman Demographics 13 Age Do you use a screen reader due to a disability?
14. @courtneyheitman Demographics 14
15. @courtneyheitman Primary Screen Reader 15
16. @courtneyheitman Primary Screen Reader 16
17. @courtneyheitman Screen Reader & Browser Combos 17
18. @courtneyheitman How Assistive Tech Gets Info THE ACCESSIBILITY API 18
19. @courtneyheitman Accessibility APIs? • Windows: MSAA/IAccessible, UIAExpress, IAccessible2 • macOS: NSAccessibility • Linux: AT-SPI • Android: Accessibility framework • iOS: UIAccessibility 19
20. @courtneyheitman The Accessibility Tree 20
21. @courtneyheitman The Accessibility Tree 21
22. @courtneyheitman Semantic v ARIA Roles RICH <div role=”button” aria- pressed="false">click me!</div> <span role="link" onclick="goToLink(event, '#')" onkeydown="(goToLink(event, #')"> click me!</span> 22 SEMANTIC <button type="button"> click me!</button> <a href="#" class="button"> click me!</a> CLICK ME!
23. @courtneyheitman Setting up a Screen Reader ADDITIONAL SETTINGS 23
24. @courtneyheitman VoiceOver • Configure Safari tab key – Open Safari. Preferences > Advanced > Check “press tab to highlight each item on a webpage” • Configure VoiceOver – System Preferences > Accessibility > VoiceOver > Open Voice Over Utility • Navigation > Mouse Pointer > Select “Ignores VoiceOver cursor” 24
25. @courtneyheitman NVDA • Change NVDA to not automatically start – Insert (key) + N > Preferences > Settings • Uncheck “Automatically start NVDA after I log on to Windows • Uncheck “Use NVDA on Windows logon screen” • Disable Mouse Tracking – Insert (key) + N > Preferences > Settings > Mouse • Uncheck “Enable mouse tracking” 25
26. @courtneyheitman NVDA • Turn on Speech Viewer – Insert (key) + N > Tools > Speech Viewer • Check ”Show speech viewer on startup” • Turn on Focus Highlighting – Insert (key) + N > Settings • Under Vision, check “enable highlighting” 26
27. @courtneyheitman Navigating with a Screen Reader NEW SKILLS TO LEARN 27
28. @courtneyheitman Deque One Pagers 28 https://dequeuniversity.com/screenreaders/
29. @courtneyheitman Methods for Navigating - Links 29
30. @courtneyheitman Methods for Navigating - Headings 30
31. @courtneyheitman Methods for Navigating – Reading the Page 31
32. @courtneyheitman Methods for Navigating - Tables 32
33. @courtneyheitman Demo LET’S PUT ALL THIS TOGETHER! 33
34. @courtneyheitman Screen Reader Workshop https://sr- workshop101.glitch.me/ The Hidden History of Screen Readers https://www.theverge.com/ 23203911/screen-readers- history-blind-henter-curran- teh-nvda Resources Deque One Pagers https://dequeuniversity.com/s creenreaders/ WebAIM Screen Reader Survey https://webaim.org/projects/s creenreadersurvey9/ 34
35. @courtneyheitman Thank you! TWITTER @courtneyheitman SLIDES http://tiny.cc/CodePaLOUsa- NavigatingSRs 35