Structuring HTML for Screen Readers
Screen readers are software programs that allow blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer. They rely entirely on properly structured HTML to navigate a page.
When you build a webpage using a bunch of div tags, you're forcing screen reader users to listen to everything line-by-line from top to bottom, without the ability to jump to the sections they care about.
But there are things you can do to make your website more accessible to screen reader users. Below are three of the most important things you can do.
Use Semantic Landmarks
Modern HTML includes semantic structural tags that act as implicit landmarks, allowing screen reader users to quickly navigate web pages. These structural tags provide important context to assistive technology, enabling users to jump directly to specific areas of a page rather than navigating through it linearly.
The most common landmarks include:
header: The top banner of the page.nav: The primary navigation menu.main: The dominant content of the document.article: An independent, self-contained piece of content.aside: A sidebar or related content.footer: The bottom banner.
When building a page, try to use these tags to structure your page. It will make it much easier for screen reader users to navigate your page.
Provide a "Skip Link"
Imagine visiting a website every day, but having to listen to the screen reader read out all 50 navigation menu links before it finally reaches the actual article text. This can be very time consuming and irritating.
A "Skip Link" is an invisible link placed at the very top of your HTML that allows keyboard users to instantly jump over the navigation menu directly to the main content:
Logical Heading Hierarchies
Visually, we use headings like h1 or h3 to make text larger or smaller. But structurally, screen reader users use headings to "skim" an article, just like reading a textbook's table of contents.
You should never skip heading levels for styling purposes. You should always start with an h1, followed by an h2. If you need a sub-section under that, use an h3.
Full Working Example
Below is a skeletal example of a well-structured HTML page combining a Skip Link, semantic structural landmarks, and a sound heading hierarchy. In the live preview, try clicking into the window and pressing Tab to see the invisible Skip Link appear!