This page demonstrates how the Table of Contents block builds accessible navigation from real WordPress heading blocks. Each link points to an explicit heading anchor in the example guide below.

Baseline: Marked List

A visible title and bullet markers provide a familiar table of contents for headings from H2 through H3.

---

Numbers in Native Details

This version uses hierarchical numbering, native details disclosure, and smooth scrolling for in-page links.

---

Plain Accordion Navigation

A compact accordion starts collapsed on the frontend and presents the same anchors without markers.

Example Guide

The headings in this guide are the live source for all three tables of contents above.

Choose a Clear Structure

Start with a small set of descriptive sections so readers can understand the page before they begin scrolling.

Write Descriptive Headings

Use headings that communicate the purpose of each section and remain meaningful when read inside a navigation list.

Implementation Notes

Keep Anchors Stable

Explicit anchors make shared links predictable and let each table-of-contents entry target the intended section.

Review Keyboard Behavior

Disclosure controls and in-page links should remain operable with a keyboard and expose their state to assistive technology.