Challenge #2: Test a Website with a Screen Reader

‍The Challenge

Your task is to visit any website of your choice and navigate it using a screen reader.

Steps to Complete:

Pick a website you use often, such as your own, a news site, or an online store.

Turn on a screen reader:

• Windows: Use NVDA or JAWS. You can also use Narrator (Windows + Ctrl + Enter).
• Mac: Use VoiceOver (Command + F5).
• iPhone/iPad: Enable VoiceOver in Accessibility settings.
• Android: Enable TalkBack in Accessibility settings.

Use these keyboard commands to navigate. Note: Commands may vary depending on your screen reader settings and configuration.Basic Navigation Commands (General)

• Move to the next element: Down Arrow
• Move to the previous element: Up Arrow
• Activate a link or button: Enter or Spacebar
• Pause/resume speech: Ctrl (Windows) or Control (Mac)

Navigating by Element

• Headings: H (Next), Shift + H (Previous)
• Landmarks/Regions: D (Next), Shift + D (Previous)
• Links: K (Next), Shift + K (Previous)
• Buttons: B (Next), Shift + B (Previous)
• Forms/Fields: F (Next), Shift + F (Previous)
• Lists: L (Next), Shift + L (Previous)
• Tables: T (Next), Shift + T (Previous)

Screen Reader-Specific Commands

NVDA (Windows)

• Start/Stop Reading: Insert + Down Arrow
• Open Elements List (Headings, Links, Buttons): Insert + F7
• Navigate Headings: H (next), Shift + H (previous)
• Navigate Form Fields: F (next), Shift + F (previous)
• Read Current Line: Insert + Up Arrow
• Read Entire Document: Insert + Down Arrow

JAWS (Windows)

• Start/Stop Reading: Insert + Down Arrow
• Open Headings List: Insert + F6
• Open Links List: Insert + F7
• Open Forms List: Insert + F5
• Read Current Line: Insert + Up Arrow
• Navigate by Regions: R (next), Shift + R (previous)

VoiceOver (Mac & iOS)

• Start/Stop Reading: Control + Option + A
• Move to Next Element: Control + Option + Right Arrow
• Move to Previous Element: Control + Option + Left Arrow
• Open Rotor (Quick Navigation for Links, Headings, etc.): Control + Option + U
• Navigate by Headings: Control + Option + Command + H

Try Navigating a Website Without Looking at the Screen

• Listen to how headings, buttons, and links are announced.
• Try filling out a form or clicking a link.
• Explore different elements to see how easy or difficult navigation is.

Reflection Questions

• ‍^‍Could you understand and complete tasks on the website?
• Were images missing alt text?
• Did headings and sections make sense?
• Were there any unlabeled buttons or links?
• Would a person relying on a screen reader be able to use this site independently?