Two ways to find your way around a page
Headings describe the structure of the content. Landmarks identify broad areas of the page, such as navigation and main content. They serve different purposes: a heading can take someone directly to “Delivery options,” while a navigation landmark helps them find the site menu. Many screen readers offer separate lists for headings and landmarks, so both are useful when they accurately reflect the page.
Think of the outline before choosing visual styles. A large, bold line of text is not necessarily a heading, and a heading does not have to look large. Use heading elements for section titles, then use CSS to control their appearance. Similarly, choose landmark elements for their purpose rather than as generic styling containers.
Build a heading hierarchy around the content
Start with a heading that identifies the page’s main subject. Use the next level for its major sections, and a further level for subsections within them. For example, a page titled “Shipping information” might have major sections called “Delivery options” and “Tracking an order.” Within “Delivery options,” “Standard delivery” and “Express delivery” could be subsections. When those subsections end, the next major section returns to the same level as “Delivery options.”
Avoid skipping levels just to get a preferred font size. A jump from a top-level heading straight to a third-level heading can make the relationship between sections harder to understand. You do not need a heading for every paragraph or decorative group. Aim for labels that tell a reader what they will find, rather than repeated headings such as “More information.” A simple document may need only a page heading and a few section headings.
Use landmarks for the page’s major areas
On a typical page, the site header can contain branding and a navigation area; the main landmark contains the page’s primary content; and the site footer contains information that applies across the site. Use a navigation landmark for a group of navigation links, not for every group of links. An aside can identify supporting content that relates to, but is distinct from, the primary content. A named section can also become a region landmark when that extra navigation point is genuinely helpful.
Most pages should have one main landmark. If there are two navigation areas, give them distinct accessible names, such as “Primary” and “On this page,” so a landmark list can distinguish them. Keep those names short: the landmark type already conveys that each is navigation. Do not add landmarks around every small widget. Too many indistinguishable regions can make a page harder, rather than easier, to navigate.
Plan a page without duplicating its structure
Consider a help article viewed in a current desktop browser with JavaScript disabled. Its page plan could be: site header and primary navigation; a skip link to the main content; main content with the article title, an introduction, and sections for “Before you begin,” “Change your settings,” and “Troubleshooting”; an optional “On this page” navigation area linking to those sections; and a site footer. This plan works as ordinary HTML before any interface enhancements load.
The “On this page” links and the headings have complementary jobs. The links provide shortcuts, while the headings identify where each section begins. If the page has a sidebar of related articles, decide whether it is a navigation area or supporting content based on what it does, then name it if another landmark of the same type is present. Avoid adding a second page-title heading in the sidebar merely to make its text look prominent.
Check the experience, not just the element names
Test the page in a modern browser with a keyboard first. Press Tab from the top and confirm that the skip link appears when focused, is readable, and takes you to the main content. Follow the “On this page” links and check that their destinations are visible and not obscured by a fixed header. If a skip link scrolls to main content but keyboard focus remains in the header, the implementation may need a focusable target and deliberate focus handling.
Next, inspect the browser’s accessibility tree or use a screen reader’s heading and landmark lists. Read each list on its own: can you predict the page’s organization from the heading names, and can you tell the landmark areas apart? Finally, compare those lists with the visible page. Fix missing, misleading, or repeated labels at the source. A useful outline is one that matches the content people actually encounter.
