Learning on Web Dev Open is free for all.

Take It Apart > HTML is a data structureListen to your own page
Phase 01HTML is a data structure42 of 434

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.

Build25 minAI off

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.

Done when

  • A screen reader actually run against your own deployed site, not a local file
  • A written list of at least five specific defects with the exact announcement that was wrong
  • The top three fixed
  • A second pass confirming the fixes, with a note on what is still awkward
  • Navigation by heading and by landmark both tried

Nobody marks this for you. It goes into your phase checkpoint, where a person does.

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

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
Ask the community

Loading…