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. Navigating Screen Readers Connectaha – April 24, 2023
2. WARNING 2 !
3. 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. 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. VISION DRIVING, WORKING, EYE SURGERY 5
6. VISION DIABETIC RETINOPATHY, GLAUCOMA, MACULAR DEGENERATION, CATARACTS 6
7. VISION BLINDNESS 7
8. 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. Assistive Technologies SCREEN READERS & MORE!
10. Developing screen readers • 1.7% of participants in the 2022 StackOverflow survey were blind/have difficulty seeing 10
11. Refreshable Braille Displays 11 Source: Wisconsin Council of the Blind & Visually Impaired
12. 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. Demographics 13 Age Do you use a screen reader due to a disability?
14. Demographics 14
15. Primary Screen Reader 15
16. Primary Screen Reader 16
17. Screen Reader & Browser Combos 17
18. How Assistive Tech Gets Info THE ACCESSIBILITY API 18
19. Accessibility APIs? • Windows: MSAA/IAccessible, UIAExpress, IAccessible2 • macOS: NSAccessibility • Linux: AT-SPI • Android: Accessibility framework • iOS: UIAccessibility 19
20. The Accessibility Tree 20
21. The Accessibility Tree 21
22. 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. Document Structure • List • IMG • Headings Widget • Searchbox • Tab • Menu Types of ARIA Roles Landmark • Form • Main Live • Timer • Status Window • Dialog 23 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
24. Setting up a Screen Reader ADDITIONAL SETTINGS 24
25. 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” 25
26. 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” 26
27. 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” 27
28. Navigating with a Screen Reader NEW SKILLS TO LEARN 28
29. Deque One Pagers 29 https://dequeuniversity.com/screenreaders/
30. Methods for Navigating - Links 30
31. Methods for Navigating - Headings 31
32. Methods for Navigating – Reading the Page 32
33. Methods for Navigating - Tables 33
34. Demo LET’S PUT ALL THIS TOGETHER! 34
35. Screen Reader Workshop https://sr- workshop101.glitch.me/ The Hidden History of Screen Readers https://www.theverge.com/2320 3911/screen-readers-history- blind-henter-curran-teh-nvda Resources Deque One Pagers https://dequeuniversity.com/screen readers/ WebAIM Screen Reader Survey https://webaim.org/projects/screen readersurvey9/ MDN: ARIA Roles https://developer.mozilla.org/en- us/docs/web/accessibility/aria/roles 35
36. Thank you! Slides http://tiny.cc/ConnectahaNavSRs 36