The useful part, up front

What you’ll take away

  • Headings describe subjects and their hierarchy; landmarks describe major page areas.
  • Keyboard focus, structural reading and interaction modes are different parts of navigation.
  • Use the command map for the actual screen reader, platform and current mode.
  • Clear link names help readers choose destinations; context-based accessibility requirements need their own interpretation.
  • Preserve the content order where it affects meaning, and record concrete observations when reviewing a page.
01

A page has more than one way to show its organisation

Imagine opening a museum guide with a large title, coloured panels and a tidy sidebar. You can see where the ticket information begins. A screen reader needs information it can recognise in the page, rather than an assumption that the largest letters must be a heading. Proper headings and named page regions give it useful places to navigate. A visually convincing layout can therefore leave a reader with much less useful structure than its designer intended. [1][2]

This article uses an invented museum guide to follow three different tasks: finding a topic, moving to a major page area, and reaching a control. These tasks need related but different information. A heading explains where a subject begins. A landmark identifies an area such as the main content or a group of navigation links. Keyboard focus allows interaction with controls. A useful page supports all three without making the reader guess which coloured box matters. [1][2][6]

The examples explain documented behaviour, not a completed accessibility audit of a particular website. The NVDA guide retrieved for this article identifies itself as version 2026.3; the Apple examples concern VoiceOver on Mac. Settings, browsers and document types can change the available commands. [5][6]

One museum guide, three kinds of organisation. The museum page is invented. Visual design, authored structure and interaction must be considered together.
The museum page is invented. Visual design, authored structure and interaction must be considered together. · Ameer Journal — original explanatory diagramOriginal editorial illustration; no third-party artwork reused.
02

Use heading levels to describe a relationship

A heading is more useful when it tells the reader both its subject and its place in the page. HTML supplies six heading levels, h1 through h6. In our museum example, “Plan a museum visit” is the main heading. “Before the visit” and “Inside the museum” are sections beneath it. “Tickets” and “Getting here” belong within “Before the visit”. Their levels express these relationships; the size or colour chosen for their lettering is a separate design decision. [1]

The resulting levels are h1 for the page title, h2 for each major section, and h3 for the smaller subjects inside a section. Choosing h4 merely because its default appearance looks right would give the reader a different hierarchy. WAI advises avoiding skipped ranks when opening subsections, such as moving directly from h2 to h4. Returning from a deeply nested subsection to a new h2 is different: it closes that branch and starts the next main section. [1]

Now consider someone who needs ticket information without hearing every introductory paragraph. A heading list can expose “Tickets” directly, provided it is actually a heading. A bold sentence that looks identical may not supply that target. Conversely, marking every short sentence as a heading produces a crowded outline. In this example, headings earn their place by introducing useful subjects; the paragraphs beneath them carry the detail that someone can read after reaching the right subject. [1][5]

03

Follow one reader through the museum guide

Here is the complete small outline used in our example: “Plan a museum visit”; beneath it, “Before the visit”, with “Tickets” and “Getting here”; then “Inside the museum”, with “Gallery map”. That gives six headings, but only three levels. Six headings do not mean six equal sections. Someone browsing the outline can understand that travel information belongs to planning the visit, while the map belongs to being inside the building. [1][5]

Suppose the reader already has a ticket and wants the map. They can choose “Gallery map” from the available headings rather than work through the ticket paragraphs. Another reader may first visit “Before the visit” and then read its subsections in order. This is the practical value of meaningful section names. [1][5]

The example also reveals a useful editorial check. Read only the six heading names and ask whether they still describe the page. If the list becomes “Welcome”, “Discover”, “More” and “Explore”, the outline may be attractive marketing copy but offer little help choosing a destination. Keep the headings specific enough that a person can reasonably predict the information beneath them.

Six headings can describe a three-level outline. Read left to right across each row. The second h2 starts a sibling section; its h3 belongs to that new section.
Read left to right across each row. The second h2 starts a sibling section; its h3 belongs to that new section. · Ameer Journal — original explanatory diagramOriginal editorial illustration; no third-party artwork reused.
04

Landmarks describe larger page areas

Headings are not the only way to move around a page. Landmarks identify areas with a particular purpose. The main landmark contains the page’s primary content. Navigation landmarks identify groups of links used to move around the website or within a page. In HTML, the main and nav elements provide these respective meanings. A reader looking for the article itself can use that page-level organisation before deciding which article heading to visit. [2]

Our museum guide has two different groups of navigation links. One links to the museum’s other pages; the other links to sections of this guide. Calling the first “Site” and the second “In this guide” distinguishes their purposes. A label need not repeat the role word “navigation”, because the screen reader can already report that role. Two differently named navigation areas are more informative here than two unexplained destinations that both sound like the same menu. [2]

Not every coloured panel needs its own landmark. A region is intended for content important enough to be a navigation destination. WAI also explains that an HTML section becomes a region landmark when it has an accessible name. Merely wrapping text in a section does not always create that result. Choose page areas for their purpose, then use headings to organise the subjects inside them. This gives the fictional guide a clear main area without turning each ticket paragraph into another competing region. [2]

05

Moving to a control is different from finding a subject

A person may be able to press Tab through every link on the museum page and still struggle to find the travel section. Tab-based keyboard focus and heading navigation answer different questions. Apple’s VoiceOver guidance describes keyboard navigation between controls such as text boxes and checkboxes. Its rotor separately provides routes to items such as headings and links. A page title is useful for orientation even when it is not a button or a field that needs keyboard input. [6]

NVDA makes another useful distinction. In browse mode, a supported document can be explored as a readable representation, with information such as headings and links reported along the way. To type into certain controls, the reader uses focus mode, where keys are passed to the control. Depending on the control and settings, NVDA may change modes automatically. The documented NVDA-plus-Space command also switches between browse and focus modes. A letter typed into a search box therefore should not be assumed to mean the same thing as a navigation command. [5]

For the museum guide, check the tasks separately. Can the reader find “Getting here” through the document structure? Can they then reach and use the travel-search field if one exists? Can they return to the surrounding explanation? A sequence of reachable controls does not answer the first question, while a good heading list does not establish that a field works. [5][6]

06

Keep the page structure and the command map separate

NVDA’s Elements List can show different kinds of items in a browser document, including headings, links, form fields, buttons and landmarks. The retrieved guide gives NVDA-plus-F7 as the browse-mode command for that list. The reader can choose an item type, filter the list and move to or activate an item as appropriate. “NVDA” in that command means the configured modifier key, not a key literally printed with the product’s name. [5]

On Mac, Apple describes the VoiceOver rotor as a way to jump to web items such as headings, links and tables. It also documents Item Chooser, Quick Nav and choices between document-based and grouped navigation. These are related ways to find information, but the NVDA key sequence should not be presented as a VoiceOver instruction. A help panel should name the relevant product and platform instead of telling every reader to press the same shortcut. [6]

Return to the ticket example. The authored heading “Tickets” is the stable piece of content; the method used to reach it depends on the reader’s tools. A good review therefore records both the target and the route: which screen reader, which browser, which mode, and which kind of navigation list. “Tickets is absent from the headings list in this setup” is much more precise than “the page is inaccessible”. [5][6]

The same heading can be reached through different tools. Documented examples: NVDA 2026.3 guidance and VoiceOver on Mac. These are not universal device shortcuts.
Documented examples: NVDA 2026.3 guidance and VoiceOver on Mac. These are not universal device shortcuts. · Ameer Journal — original explanatory diagramOriginal editorial illustration; no third-party artwork reused.
07

Make a link understandable before it is opened

Headings help readers find a subject, but links must still explain where they lead. Consider two links called “Read more”, one about tickets and one about the gallery map. In the full page, their surrounding paragraphs might make the difference clear. In a list that presents links as navigation choices, those repeated names may offer much less help. WAI recommends making link text meaningful whenever possible so a reader can decide whether to follow it. [4]

For this fictional page, “Read ticket conditions” and “View the gallery map” are clearer choices. They describe different destinations directly. That does not mean every short link called “Read more” automatically fails an accessibility rule. WCAG’s Link Purpose in Context criterion allows purpose to be determined from the link text together with appropriate programmatically associated context. Its explanation includes context in a sentence, paragraph, list item or relevant table structure. Visual proximity alone is a weaker assumption. [4]

Review the link in both situations: while reading its surrounding content, and while choosing it from an available links list. If the destination is a map, say so where that information helps the decision. If the link is part of a particular ticket condition, keep that association clear. The aim is to make the next step predictable before a reader spends time opening it. [4][5]

08

Keep instructions in an order that preserves their meaning

A responsive layout can move panels around on a wide screen or a narrow one. That visual arrangement does not by itself prove that the reading sequence still makes sense. WCAG’s Meaningful Sequence criterion concerns cases where order affects meaning: software must be able to determine a correct reading order. It also recognises that some independent page areas can appear in more than one sensible order. The important question is what the content needs, not whether every box has an identical position. [3]

Suppose our invented guide explains a booking process with three steps: choose a date, select a ticket, then confirm the booking. A visual layout might put them in that order while the underlying content presents date, confirmation, ticket. Reading that sequence gives the instruction to confirm before the selection has been explained. In this example, the order carries meaning. Fixing a heading label alone would leave the broken sequence; the steps themselves need to be available in a sensible order. [3]

Now compare a museum address panel and a separate newsletter panel. Their relative order might not change either panel’s meaning. The standard does not demand a single universal position for all independent content. A useful review therefore follows connected instructions and paragraphs through their actual reading sequence, especially after layout changes. Keep each explanation together and preserve dependencies. This supports different screen sizes while giving the reader a coherent account of what to do next. [3]

Preserve the sequence when the instruction depends on it. Original booking example. Independent page areas may have several valid orders; this procedure has dependencies.
Original booking example. Independent page areas may have several valid orders; this procedure has dependencies. · Ameer Journal — original explanatory diagramOriginal editorial illustration; no third-party artwork reused.
09

Add meaning to the page without creating noise

It is tempting to repair an unclear page by adding more labels everywhere. That can create a new problem: a long collection of regions with nearly identical names. For the museum guide, the main content, site links and within-guide links have distinct jobs. A small paragraph about ticket collection does not need another landmark simply because it sits inside a border. WAI’s region guidance asks whether the area is important enough to be a navigation destination. [2]

A visible heading can also name an appropriate region when it is connected using the documented aria-labelledby mechanism. This lets the visible subject and the programmatic label stay related. Alternatively, aria-label can provide a region name where suitable. The choice should make the existing structure clearer, not create an unrelated hidden title that describes something different. Our example can use “In this guide” consistently for the contents links rather than maintaining several competing names for the same group. [2]

Finally, revisit the ordinary writing. A correct outline full of vague labels still makes navigation laborious, and a well-named region cannot untangle an instruction that appears before its explanation. Review names, nesting and sequence as one piece of editing. The best repair may be a clearer heading or a reordered paragraph, rather than another landmark. [1][2][3]

10

Keep a review record that another person can follow

Start with the reader’s task, such as finding ticket conditions or reaching the gallery map. Write down the heading names and levels, the main page areas and their names, and the sequence of any connected instructions. Then examine the page using the relevant screen reader and browser. Record their versions and important settings. The documentation provides the available navigation methods, while the observations show what this particular page and setup actually expose. [1][2][3][5][6]

A useful finding names the target and the problem: “The gallery-map title looks like a section heading, but it is absent from this headings list,” or “The booking explanation reads confirmation before ticket selection.” These are hypothetical report examples, not results from a tested museum site. They point to evidence a reviewer can check and a repair another person can assess. Keep screenshots if useful, but also preserve the relevant structure and reading order; appearance alone cannot capture the whole issue. [1][3][5]

After a repair, repeat the affected task and check that nearby content still makes sense. A structural review is one part of broader accessibility work; it does not by itself establish that every control, image, dialog or journey is usable. Its particular value is concrete: readers get dependable ways to locate subjects, understand page areas and follow content in a meaningful sequence. Those capabilities can remain useful even when the visual design changes substantially between phone, tablet and desktop. [1][2][3]

Record the target, the structure and the observation. A review workflow, not a claimed test result. Structural checks form one part of broader accessibility evaluation.
A review workflow, not a claimed test result. Structural checks form one part of broader accessibility evaluation. · Ameer Journal — original explanatory diagramOriginal editorial illustration; no third-party artwork reused.
Follow the evidence

Sources & further reading

Explore the references behind this guide. External pages may change after our review.

  1. Headings | Web Accessibility Initiative (WAI) | W3C
    W3C WAI · Accessed 6 Nov 2026
  2. Landmark Regions | APG | WAI | W3C
    W3C WAI · Accessed 6 Nov 2026
  3. Understanding Success Criterion 1.3.2: Meaningful Sequence | WAI | W3C
    W3C WAI · Accessed 6 Nov 2026
  4. Understanding Success Criterion 2.4.4: Link Purpose (In Context) | WAI | W3C
    W3C WAI · Accessed 6 Nov 2026
  5. NVDA 2026.3 User Guide
    NV Access · Accessed 6 Nov 2026
  6. Intro to advanced navigation with VoiceOver on Mac - Apple Support
    Apple · Accessed 6 Nov 2026

Article updated 6 Nov 2026.

Found something we should revisit?

Good explanations get better with thoughtful feedback.

Suggest a correction