Listen to your own page
Turn on the screen reader that is already on your machine and try to use the site you built. Bring a notebook.
Turn it on. On macOS, Command-F5 starts VoiceOver; the tutorial that appears the first time is worth the ten minutes. On Windows, Control-Windows-Enter starts Narrator. On either, NVDA is a free download and is what a large share of real users actually use.
Learn exactly four commands before you begin, and no more. How to move to the next item. How to activate the current item. How to list the headings. How to list the landmarks. That is enough to navigate any page, and learning more at this stage will slow you down.
Now close your eyes, really, not metaphorically, and try to do one task on your own site. Read the main heading. Find the navigation. Follow one link. If your site has a form, fill it in and submit it.
Write down every moment you got stuck. Not "this is hard", but the specific thing: a button announced as "button" with no name, a link that says "click here" out of context, an image read as "IMG_4471 dot jpeg", a form field with no label, a modal that did not move focus, a section you could not find because it had no heading.
Then navigate again using only the heading list, then only the landmark list. Notice how much faster it is when those exist and how useless it is when they do not. This is exactly what you built in the outline chapter, now experienced from the other side.
Fix the top three problems you found. Then listen again. The second listen is shorter, and the fact that it is shorter is the goal of the exercise.
Build this in your own editor
This one runs on your machine rather than in the browser workbench. Work to the outcomes below, then come back and mark it complete.
Worth reading
- Screen Reader Basics: NVDA: A11ycasts ↗, Rob Dodson teaching the commands you need. Watch this before you start rather than fighting the software.
- How A Screen Reader User Surfs The Web ↗, Léonie Watson using the web at her normal speed, which is much faster than yours will be.
You should now be able to
- Operate a screen reader well enough to navigate a page
- Find real defects that no automated checker reports
- Navigate by heading and by landmark, and feel why both exist
Loading…