How to Make a Web App Accessible to a Blind Person
summary
A demonstration of making a Memory web game accessible by changing <img> to input type="image", adding tabindex=0 and role="button", using proper labels for form fields, and updating alt text from a JavaScript array. It reports testing with screen readers (NVDA, JAWS, Narrator, VoiceOver) and, because TalkBack/Orca may not announce dynamic ALT, adds a conditional aria-live="polite" (or role="status"/assertive) region; user testing showed it works with NVDA and the code increase is about 5.45%.
AI-written summary · about
chapters (10)
- 0:00Accessibility introduction
- 2:27Assistive tech for blind users
- 5:18Memory game case study
- 8:29Form accessibility
- 13:10Keyboard navigation
- 16:01Dynamic images alternatives
- 24:01Live regions and status messages
- 31:56Message reading order
- 34:49Screen reader workarounds
- 40:36Conclusion and user testing
related talks
31mBringing the Web Back to the Blind
43mTalk To Me - Making web sites accessible
16mAccessibility Matters: How to Build Apps for Everyone
23mPractical A11Y for Web Apps
31mAccessible JavaScript applications
11mOne Blind Weekend
33mAccessibility Done Right
21mRethinking web accessibility: Using AR for people with disabilities