The Complete Accessibility Guide to Bookmarks, Tables of Contents, and Headings: Building Structures That Are “Findable, Navigable, and Never Confusing” in Long Text, Documents, PDF/HTML (WCAG 2.1 AA)

Executive Summary (Key Points First)

• Even if long-form writing or documents have excellent content, they are unreadable if they are not findable. The key to accessibility is not making people get lost through structure.
• In HTML, the basic set is heading hierarchy (h1 → h2 → h3) + page table of contents (ToC) + skip links + landmarks. In PDFs, it is tagged structure + bookmarks + reading order.
• ToC links should not only jump somewhere; they should also ensure that focus lands properly after navigation, so keyboard users do not lose their place.
• Section naming should be standardized with “noun phrases that clearly indicate content,” and the same vague words should not be overused (an explosion of headings like “Overview,” “Details,” or “Other” is dangerous).
• This article includes HTML/Markdown writing methods, ToC implementation examples, PDF bookmark guidance, and an editorial operations checklist.

Intended readers (specific): editors, writers, documentation owners, municipal/public-sector document staff, educational content creators, frontend engineers, UI/UX designers, QA/review staff
Accessibility target level: WCAG 2.1 AA compliance (related: 1.3.1, 2.4.1, 2.4.2, 2.4.6, 2.4.10, 2.4.7, etc.)

1. Introduction: The reason long content goes unread is not “it’s difficult,” but “it’s hard to find”

Long text alone is tiring for readers. And on smartphones, during commuting, between work tasks, or when not feeling well, people usually want to jump to the needed part before they want to read everything.
Screen reader users especially explore pages through heading lists and landmark lists. If headings are missing, they may have no choice but to listen endlessly to the content being read aloud. Keyboard users, if they cannot reach the section they want through a table of contents, end up repeating scrolling and Tab navigation.
In other words, accessibility for long-form content cannot be achieved by “good writing” alone. Structure (headings, table of contents, bookmarks) creates the reader’s freedom. This article explains, in practical terms, how to build structures that are “findable, navigable, and not confusing” in both HTML and PDF.

2. The Basic HTML Set: Heading hierarchy + table of contents + skip links + landmarks

2.1 Heading hierarchy is the “map scale”

• h1: the main subject of the page (one only)
• h2: chapters/major sections
• h3: subsections
• h4: smaller subheadings (if needed)

Choose headings by meaning, not by visual size. Design can always be adjusted with CSS, so HTML headings should be decided logically.

Example (natural hierarchy)

<h1>Accessibility of Bookmarks and Tables of Contents</h1>

<h2>HTML Design</h2>
<h3>Heading hierarchy</h3>
<h3>Page table of contents</h3>

<h2>PDF Design</h2>
<h3>Tagged PDFs</h3>
<h3>Bookmarks</h3>

2.2 Page table of contents (ToC): give the “destinations” first

A table of contents reduces reader anxiety in long documents. Having a short summary and a ToC near the beginning helps stabilize reading pace.

<nav aria-label="Page table of contents">
  <ol>
    <li><a href="#sec-html">HTML Design</a></li>
    <li><a href="#sec-pdf">PDF Design</a></li>
    <li><a href="#sec-check">Checklist</a></li>
  </ol>
</nav>

<h2 id="sec-html" tabindex="-1">HTML Design</h2>

Key points:

• Use nav aria-label to clearly identify it as a table of contents
• Add an id to the destination heading
• Adding tabindex="-1" makes it easier to place focus on the heading after jumping via a link, so keyboard users do not lose their position

2.3 Skip links: jump straight to the table of contents

On sites with long headers, it is helpful not only to provide “Skip to content,” but also “Skip to table of contents.”

<a class="skip" href="#toc">Skip to table of contents</a>
<nav id="toc" aria-label="Page table of contents">…</nav>

2.4 Landmarks: the “outer map” around headings

If header/nav/main/footer are properly structured, screen reader users can navigate through landmarks, making it much less likely to get lost even in long content.

3. Accessibility of ToC Links: Not just jumping, but creating a proper “landing”

3.1 The problem of fixed headers hiding headings

When a page-internal link jumps to a section, a fixed header can cover the destination heading. This creates a state where “you arrived, but cannot see where,” which is cognitively unsettling.

:target { scroll-margin-top: 6rem; }

3.2 Create a focus landing point (recommended)

If JavaScript places focus on the heading, both screen reader announcements and orientation become more stable.

document.addEventListener('click', (e)=>{
  const a = e.target.closest('a[href^="#"]');
  if(!a) return;
  const id = a.getAttribute('href').slice(1);
  const target = document.getElementById(id);
  if(target){
    target.setAttribute('tabindex','-1');
    target.focus({preventScroll:true});
  }
});

If tabindex="-1" is already present, you do not need to add it again.

4. Section Naming: Titles affect both search and screen reader output

The wording of headings affects heading lists in screen readers and also search. A good rule set is as follows.

4.1 Use noun phrases that clearly indicate content

• Good: “How to Fix Errors,” “Form Input Assistance,” “How to Create Tagged PDFs”
• Bad: “Overview,” “Details,” “Other,” “Points”

The more abstract words you use, the less useful the table of contents becomes.

4.2 Do not overuse the same word

If headings continue as “Settings,” “Settings,” “Settings…,” they become impossible to distinguish in a heading list.
Instead, attach the object or purpose, such as:

• “Notification Settings”
• “Privacy Settings”
• “Display Settings”

5. Markdown Operations: Decide “editorial rules” for headings and tables of contents

Markdown is convenient in CMSs and Git-based workflows, but without editorial rules, heading structure easily breaks down.

5.1 Recommended heading rules for Markdown

• Use # only once (for h1)
• Use ## for chapters/major sections (h2)
• Use ### for subsections (h3)
• Place the table of contents immediately after the first ## in long content

5.2 Do not rely too heavily on auto-generated ToCs

Automatic ToCs are useful, but readability drops when:

• headings are too long
• the same headings appear repeatedly

It can be very effective to include only important sections manually in the table of contents.

6. PDF Bookmarks: Complete only when paired with tagged structure

PDF bookmarks play the same role as an HTML table of contents. However, in PDFs, bookmarks alone are not enough. They must be paired with tagged PDF structure.

6.1 Why are bookmarks useful?

• You can move instantly to a chapter
• Screen reader users can understand the document structure more easily
• Long documents become navigable as “find → read”

6.2 Conditions for good bookmarks

• They match the heading structure
• The hierarchy is not too deep (2–3 levels is a good guideline)
• Labels are short and specific (not just “Chapter 1,” but something with actual content words)
• They are named by content, not by page number

6.3 Adding bookmarks to an untagged PDF has clear limits

Bookmarks are a navigation tool, but if the PDF itself is untagged, reading order and paragraph structure may still be broken.
The standard approach to PDF accessibility is: structure tags → reading order → bookmarks.

7. Creating “jump targets” for tables and figures: avoiding confusion inside long documents

In long articles, figures, tables, and sample code are often scattered.
A good approach is to provide, separately from the main ToC, a list of “frequently referenced items on this page.”

Examples:

• Sample code index
• Figure/table list
• Shortcut links to checklists

This kind of “index” is especially helpful for people with cognitive differences.

8. Common pitfalls and fixes

9. 5-minute smoke test: minimum checks for ToCs, bookmarks, and headings

HTML (articles/pages)

1. There is one h1, and the h2 → h3 sequence is natural
2. A table of contents exists, and links can be followed by keyboard
3. After jumping via a ToC link, the heading is visible and not hidden (scroll-margin)
4. The new position is clear after navigation (through focus or visual emphasis)
5. Heading wording is specific and meaningful in a list
6. Skip links can reach the content / table of contents (where applicable)

PDF (documents)

1. Text can be selected (it is not just a scanned image)
2. It is tagged and contains heading structure
3. Bookmarks allow movement to chapters
4. Reading order is natural (for example, no broken two-column order)
5. Tables and figures have alternative information where needed

10. Value for the intended audience (specific)

• Screen reader users: They can move instantly to their destination via heading lists and bookmarks, greatly reducing reading burden.
• Keyboard users: ToC links plus proper focus landing help them avoid losing their place.
• People with cognitive differences: Chapters and indexes make the overall structure easier to grasp and create reassurance.
• Older users / zoom users: Even when zoomed in, it remains clear where they are reading and easy to return to needed sections.
• Editorial and operations teams: With heading rules in place, quality becomes more stable as content grows, and SEO/internal search also improve.

11. Accessibility level assessment (what this article aims to achieve)

• Main related WCAG 2.1 AA criteria
  • 1.3.1 Info and Relationships: structure through headings, lists, and landmarks
  • 2.4.1 Bypass Blocks: skip links and shortened navigation paths through ToCs
  • 2.4.2 Page Titled: document identification
  • 2.4.6 Headings and Labels: specific and consistent headings
  • 2.4.10 Section Headings (AAA): important in practice even when aiming for AA
  • 2.4.7 Focus Visible: maintaining orientation after ToC jumps
• On the PDF side, tagged structure plus bookmarks can significantly raise accessibility quality for web-distributed documents.

12. Conclusion: Structure creates the reader’s freedom

1. Long content cannot be read unless it is structured so that it can be found. Headings and tables of contents are central to accessibility.
2. In HTML, follow h1 → h2 → h3 and create the shortest path with a ToC and skip links.
3. ToC links should not only jump, but also provide a proper landing after arrival (scroll-margin / focus).
4. Heading names should be concrete. Overgrowth of vague labels destroys the usefulness of the ToC.
5. In PDFs, the basic set is tagged structure + reading order + bookmarks.
6. Add a 5-minute smoke test to your editorial workflow so updates do not create more lost readers.

Bookmarks and tables of contents are quiet features, but for readers they are a great help.
Let’s shape that “invisible kindness” called structure together, so your content can reach the people who need it, right where they need it.