Think of the page as a map
A visitor looking for your opening hours should not have to read every word on your website before finding them. Sighted visitors often scan for a heading or a familiar page area, such as the navigation menu. Many screen reader users can do something similar: they can call up a list of headings or move between landmarks such as navigation and main content. Those shortcuts work best when the page structure reflects what is actually on the screen.
Start with a simple outline of what the page needs to do. For a small community organization’s contact page, that might be: a site header, primary navigation, the main content containing a page title, sections for ways to get in touch and visiting information, and a footer. This outline gives you something to build and test against. It also exposes clutter: if the opening hours are buried under several unrelated sections, the problem is not just markup.
Write headings that describe the content below them
Use one clear main heading for the page, usually an h1, followed by h2 headings for its major sections. If a section needs smaller parts, use h3 headings beneath its h2. The goal is a meaningful hierarchy, not a rule that every page must use every heading level. Avoid jumping from an h2 to an h4 merely because the h4 looks better in the design; change the styling instead. Headings should describe sections, rather than serve as a way to make text large or bold.
Specific labels help visitors decide where to go. On that contact page, “Opening hours” and “Visit our office” are more useful than two headings both called “Information.” Keep the visible heading and the content that follows aligned. If an “Opening hours” section contains only a link to a separate page, make that destination clear rather than leaving visitors expecting the hours to appear below the heading.
When revising an existing page, read just its headings in order. Do they tell a coherent story without the surrounding paragraphs? Can you tell which smaller sections belong to which larger ones? This quick check often reveals vague labels, missing section headings, or text that was styled to look like a heading without being marked up as one.
Give major page areas recognizable landmarks
Landmarks identify broad regions of a page. Use semantic elements where they fit: header for the site banner, nav for a navigation area, main for the page’s primary content, and footer for site-wide closing information. A well-structured page generally has one main landmark. Put the page’s unique content inside it, while keeping repeated site navigation outside it. That makes it easier to move past familiar controls and reach the reason someone opened the page.
Not every container needs to be a landmark. Add them for areas that serve a distinct navigation purpose, not for every visual box. If a page has more than one nav area, give each a descriptive name, such as “Primary navigation” and “Footer navigation,” so visitors can distinguish them. Use an aside for supplementary material when it is genuinely separate from the main flow. A section element can also be useful for a major region, but it should have an accessible name, commonly provided by a heading. Headings organize the content within a region; landmarks identify the region itself.
Make the route to the content practical
Even a page with good landmarks can be tiring to use if keyboard visitors must tab through a long menu on every visit. Consider a “Skip to main content” link as the first focusable item on repeated pages. It can become visible when someone tabs to it and should move focus to the start of the main content. Keep link text straightforward, and make sure the destination exists on every page where the link appears.
Use the same basic structure across the site. If the primary navigation appears before main content on one page, avoid placing it after the footer on another without a good reason. Consistency helps visitors build familiarity. For a small team, a shared page template is often easier to maintain than fixing each page separately: update the header, navigation, skip link, main area, and footer once, then check that the change carries through.
Check the structure, not just the appearance
Begin with a keyboard check. From the top of the page, press Tab: can you find the skip link, see where focus is, and reach the content and controls in a sensible order? Next, inspect the heading list and landmark list with a screen reader if one is available to your team. Listen for duplicate or vague labels, an absent main landmark, and headings that do not match the visible page. Automated checks may flag some markup mistakes, but they cannot tell you whether “More information” is a useful heading.
Make this a small part of your publishing workflow. When someone adds a new page, ask them to draft its heading outline before choosing font sizes. Before publishing, check the rendered page with a keyboard and review its headings and landmarks. If your team changes a shared template, spot-check several page types, including a short page and a longer one. These habits turn page structure into a dependable wayfinding tool rather than a one-time accessibility fix.
