Not everyone uses a mouse to explore a website. Good HTML must also make sense through a keyboard or screen reader.
What You Need to Know
A manual screen-reader check involves navigating headings, links, forms, and landmarks. Listen for understandable names and useful status changes, then repeat with the keyboard alone.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<main>
<h1>Reading practice</h1>
<h2>Part one</h2>
<p>Start here.</p>
<a href="/lesson-2">Go to part two</a>
</main>Let’s Read the Code
- <main>: The main element marks the primary page content.
- <h1>: A top-level heading explains what the page is about.
- href: Href is the URL to a related resource or destination.
What the example shows: A screen-reader test can examine headings, landmarks, links, and the reading order in a real browser.
What Happens in the Browser?
Try this with Tab and Shift+Tab. If you can, inspect the accessibility tree too; appearance alone does not tell the whole story.
Try a different way of reading. Read only the headings and labels, or navigate through links without looking at the rest of the page. If the page still makes sense, the underlying HTML is probably doing an important part of its job.
Your Turn
Navigate by headings, then by links, and check whether the names are helpful.
Common Beginner Mistakes
- Judging the page only by how it looks, without checking its meaning and keyboard behavior.
- One screen reader and browser pair cannot represent every possible user experience.
Key Takeaways
- A manual screen-reader check involves navigating headings, links, forms, and landmarks.
- <main>: The main element marks the primary page content.
- A meaningful HTML element is usually a stronger starting point than adding an ARIA role to a generic div. Also check what happens using only the keyboard.