Can You Use It Without the Visual Interface?

Last class, we looked at what the browser knows about a page. Today, use a screen reader to hear what that information becomes in practice.

Next: Listen to It

Use the primary option that matches your computer and keep the user guide open while you work.

Primary options:

• Windows: NVDA — install it, turn it on, and keep the NVDA guide open.
• macOS: VoiceOver — turn it on in Accessibility settings and keep the VoiceOver guide open.
• Linux: Orca — enable it in the system settings and keep the Orca guide open.
• Optional Windows reference: JAWS is available, but NVDA is the main classroom path.

Use the actual documentation for your chosen screen reader and learn only the pieces you need for a web page.

Find out how to:

1. move forward and backward through content
2. move by heading
3. find links or buttons
4. find form controls
5. activate a control

Open the Structure demo and use the screen reader to navigate it.

Ask:

• Can you understand the page structure from its headings?
• Can you find major regions quickly?
• Does the order you hear match the order you expected visually?
• What disappears when visual styling is no longer doing the organizing?

Task:

1. Open the Structure page.
2. Use the screen reader to find the page title.
3. Move through the headings.
4. Find the navigation.
5. Find the main content.
6. Find one specific link without reading the entire page line by line.

Open the Controls demo and navigate it without pointing with the mouse.

Ask:

• What does the screen reader call each control?
• Does the name tell you what it does?
• Does the announced control type match how it behaves?
• If something changes state, can you tell?

Task:

1. Open the Controls page.
2. Compare the link and button. Notice the link versus button role.
3. Compare the native button and clickable div. What can you reach and activate from the keyboard, and which is exposed as a button?
4. Use the checkbox and listen for checkbox role and checked or unchecked state.
5. Navigate the radio group. Listen for radio controls, selection, and group or question context where exposed.
6. Inspect the email field for its label, editable field semantics, value, and type where exposed.
7. Open and close the disclosure. Notice its control and expanded or collapsed state.
8. Compare the icon buttons: one has a useful Share workshop name; the other has no accessible name.

Use the same Workshop Registration form from Session 10. The goal is to test it through a different interface, not to re-teach the whole form lesson.

Listen for:

• field labels
• required state
• instructions
• group context
• error messages
• whether the relevant control is understandable after an error

Task:

1. Find Full name.
2. Find Email.
3. Find Phone.
4. Navigate the Workshop choice group.
5. Enter several values.
6. Make one mistake intentionally.
7. Submit.
8. Correct the problem.
9. Submit successfully.

For two minutes, stop relying on the visual interface. Look away, dim the display, or simply commit to using only screen-reader navigation.

This is a testing constraint, not an attempt to simulate blindness.

Use these prompts:

• What was easy to find?
• What depended on good HTML structure?
• What sounded different from what you saw?
• What information was missing or misleading?
• Did anything you thought was fine in Session 10 look different after testing it this way?

Reopen MakerMap and add the screen-reader pass to your Challenge 05 review.

Before class ends:

1. Open your Challenge 05 Review Record.
2. Add your screen-reader setup: screen reader, operating system, browser, and what you tested.
3. Navigate MakerMap page structure and controls.
4. Test the orientation form.
5. Record at least two observations from the screen-reader pass.
6. Revisit one observation from Session 10 and decide whether your conclusion changed.

Students are adding a screen-reader pass and refining evidence. Do not require all 20 findings during class.