Landmark structure and the skip link.
Landmark structure means marking a page’s sections — header, navigation, main content, footer — explicitly in the HTML, and it directly shapes how a screen reader user moves through the page.
A sighted user scans the page at a glance: menu on top, content in the middle, footer below. That scan reads instantly from the layout’s visual cues — position, spacing, lines. A screen reader user has no such glance; they hear the page linearly, start to finish. Landmark structure is what gives that user the lost glance back.
With landmarks marked, the screen reader can offer the user a list of the page’s sections, and the user jumps straight to the one they want. Unmarked, the only option is listening from the top — on every page, menu included.
The landmark elements and their roles
HTML offers ready-made elements for marking landmarks, and using them is both shorter and safer than doing the same job with role declarations. Use the element and the role comes automatically.
- Header region — the page’s top strip: logo, main navigation, language switcher. One per page.
- Navigation region — groups of links. There can be several (main menu, footer menu, breadcrumb), and then each needs a distinguishing name.
- Main content region — the content specific to the page. One per page, and the skip link’s target is here.
- Complementary region — material related to the content but separable from it: a sidebar, related links.
- Footer region — copyright, legal links, contact.
- Search region — a separate role exists for the search form, to be used when search is prominent on the page.
With more than one navigation region, naming each becomes critical. Three unnamed navigation regions appear in the screen reader’s list as “navigation, navigation, navigation,” and the user cannot tell which is the main menu. Naming is done with a label and is a one-line job.
The same problem appears when there is more than one main content region: with two mains on a page, which one is the real content becomes unclear. The rule is simple — one main content region per page.
The skip link: why it is needed
If the same navigation menu sits at the top of every page, a keyboard user must pass through the whole menu on every page. With a twenty-link menu, that is twenty keystrokes to reach the content — and two hundred needless keystrokes for someone visiting ten pages.
2.4.1 “Bypass Blocks” solves exactly this and sits at level A — failing it is a fundamental violation. Its most common solution is placing, as the page’s first focusable element, a link that jumps straight to the main content.
The link is normally invisible and becomes visible on focus. That behavior matters: leaving it focusable but invisible means the user does not know where their first Tab went. Moving it off-screen and sliding it in on focus is the standard pattern.
Two frequent mistakes
The skip link looks simple but silently breaks at two points, and neither is noticed without testing.
First: the link only scrolls and does not move the focus. It looks like it works — the page really slides to the main content — but the next Tab takes the user back to the top of the menu, because the focus never moved. Making the target element focusable solves it.
Second: the link stays invisible even when focused. If the off-screen technique forgets to bring it back on focus, the link remains accessible but becomes unusable — the user loses the focus on the first Tab and does not know what they pressed. The test is single: open the page, press Tab once, SEE the link.
A skip link that only scrolls is a feature that looks like it works and does not.
Landmarks and heading hierarchy work together
Landmarks and headings are the screen reader user’s two separate navigation tools, and they do not substitute for each other. Landmarks say roughly how many sections the page has; headings give the structure inside those sections. Without one, the other stays incomplete.
The practical consequence: marking the landmarks while leaving the heading hierarchy broken means jumping quickly to the main content and getting lost there. The reverse holds too — a flawless heading structure without landmark markup does not separate the menu from the content.
The practical way to verify both together is reading the page by structure alone: with browser extensions or developer tools, extract the page’s landmark and heading tree and ask whether the page’s story is intelligible from that tree. If it is not, the structure is lacking — an order that only CSS conveys does not come back in the screen reader.
The page title is a navigation tool too
Landmark structure organizes the inside of the page; the page title says which page the user is on. When a page loads, the screen reader reads the title first — the title is the first thing the user hears, and it does the job of identifying the page on its own.
That is why the title’s order matters: the page-specific part should come FIRST, the brand after. On a site where every page starts with “Company Name — …,” a user moving between tabs hears the same words every time and reaches the distinguishing part only at the end. Reversing the order carries the same information and shortens the listening.
The same shows in browser tabs: narrow tabs display only the first few words. With the page-specific part first, the user recognizes the tab; starting with the brand, all tabs look the same. Accessibility and usability point to the same fix here as well.
Verifying the structure
The fastest way to tell whether the landmark and heading structure is right is to see the page structurally, not visually. There are three methods, and each takes a few minutes.
- Open the browser’s accessibility tree — the developer tools list how the page appears to assistive technology as a tree. Does the tree you see tell the page’s story?
- Extract the landmark list — an accessibility extension or a short script lists the page’s landmarks and their names. Any unnamed or duplicated regions?
- Walk the page landmark by landmark with a screen reader — this is the real verification. Move through with the landmark shortcut and check whether you understand where you are going.
The third method cannot be replaced by the other two, because only it shows whether the structure actually helps. A technically flawless landmark structure with poor naming does not help the user — and you only learn that by listening.
On this site the landmark structure and the skip link are measured in the suite: that the first Tab brings up the skip link, that the link is visible on focus, and that it really moves the focus to the main content are verified on every run. Three separate tests, because the three break in separate ways.