Search topics
Long pages with no subheadings
A shop's returns page runs twelve paragraphs under its title with no subheadings, so there is nothing to skim by to find the part on refunds.
The problem
People looking for one answer on a long page can't skim to it, by eye or by heading, and have to read from the top
A clothing shop's help centre has a page called Returns and refunds. It was written in one go in the CMS's text block: under the title, twelve paragraphs, each about one thing. The first two give the time limit, the next three say what can be returned, three more say how to send a parcel back, two cover refunds, and the last two cover exchanges and damaged items. The paragraphs are well written, and the page reads well from top to bottom.
Most people don't read it from top to bottom. They come with one question, such as how long a refund takes, and look for the part that answers it. A sighted reader sees twelve grey blocks that look alike, with nothing that marks where refunds start. A screen reader user opens the headings list, or presses H to jump from heading to heading, and finds one entry: "Returns and refunds, heading level 1". The refund time is in the ninth paragraph, and the only way to it is to listen from the top.
Success Criterion 2.4.10 Section Headings (Level AAA) asks that section headings be used to organise content. Its Understanding page says that when a page is organised into sections, those sections need headings that introduce them, and that rules, boxes and other visual presentation can complement headings but are not enough on their own to identify a section. WCAG defines a section as a self-contained part of written content that deals with one or more related topics, and it may be a single paragraph. The returns page has six such sections, from the time limit to damaged items, and none of them starts with a heading. Technique G141 tests exactly this: examine a page with content organised into sections, and check that a heading for each one exists.
Nothing in HTML asks for a heading. A page with one h1 and twelve p elements is valid, the browser shows it without complaint, and the CMS's text block saves whatever is typed into it. Whether the text has topics is something only the writer knows, so the headings are added only if the writer adds them.
This is a different failure from the one in headings that don't match the page's sections. There, the sections have titles that are drawn but not marked up, and 1.3.1 fails. Here, there are no titles at all to mark up.
Nobody who reads the page through from the start misses anything. The failure reaches people who look for one part of a long page, which is how help pages, policies, terms and guides are often read, and who find nothing on the page to look for it by.
3 of 10 groups affected
- No vision (affected)
- Low vision (affected)
- Colour vision (not affected)
- No hearing (not affected)
- Hard of hearing (not affected)
- No speech (not affected)
- Motor (not affected)
- Reach, strength (not affected)
- Cognitive (affected)
- Seizures (not affected)
- Without vision On a long page, most screen reader users look for what they need by heading first. Here the headings list holds only the page title, so the refund time is found by listening from the top, through eight paragraphs.
- Limited language, cognitive and learning abilities With no titles to skim, someone who finds long text hard to read has to read all of it to find one answer, and keep track of where each topic ended without anything on the page to mark it.
- Limited vision At high zoom only a few lines are in view at once. With no headings to catch the eye, scrolling through the page shows one paragraph after another that look alike, and nothing says where refunds begin.
Every element on the page is valid, so a scan has nothing to report. axe's page-has-heading-one passes, since the title is an h1, and heading-order has only one heading to compare. The audit sends a page to review as ew:section-headings-manual-check when six or more paragraphs, or twelve or more form fields, run on in its main content with no heading between them. The paragraphs have to hold 1,000 characters or more between them, with a Japanese or Chinese character, or any other full-width one, counted as two, and a group of radio buttons or checkboxes counts as one field. It can't tell whether the text falls into topics: a letter or a short story can run on for pages and need no headings at all. Where the topics start, and what to call each one, take a person who reads the text. When a tool adds headings for you, read them: check that each one names what its section really says, and that no topic has been split in two or given a heading for every paragraph.
Try it
Find out how long a refund takes
Scroll the returns page and look for the refund time, or choose an entry in the list under it: that is every heading a screen reader finds on the page, and choosing one jumps there. Then apply the fix and look again.
Broken Can you fix this?
You can return most items within 30 days of delivery. The 30 days start on the day your order arrives, not the day you placed it.
Orders placed between 1 November and 24 December can be returned until 31 January.
Items must be unused and in their original packaging, with any tags still attached. We can’t take back earrings, opened cosmetics or gift cards.
Items bought in a sale can be returned like any other, and we refund the price you paid.
Personalised items, such as engraved jewellery, can only be returned if they arrive damaged.
To start a return, sign in, open Your orders and choose Return next to the item. If you checked out as a guest, email [email protected] with your order number.
We’ll email you a prepaid label. Print it, stick it on the parcel and drop it at any post office. Returns are free within the country; from abroad, you pay the postage.
Pack the items securely, and keep the post office receipt until your refund arrives.
Once your parcel reaches us, we check it within two working days. The refund then goes back to the card or account you paid with, and usually shows within 5 to 10 working days, depending on your bank.
If you paid with a gift card, the refund goes onto a new gift card, which we email to you.
If you’d like another size or colour, return the item and place a new order, so you get the new one without waiting for the return to arrive.
If something arrives damaged or isn’t what you ordered, email us a photo within 7 days. We’ll send a replacement or refund you in full, postage included.
Headings a screen reader finds on this page:
The fix
Start each topic with a heading that names it
<main> <h1>Returns and refunds</h1> <p>You can return most items within 30 days of delivery. …</p> <p>Orders placed between 1 November and 24 December can be returned until 31 January.</p> <p>Items must be unused and in their original packaging, with any tags still attached. …</p> <p>Items bought in a sale can be returned like any other, and we refund the price you paid.</p> <p>Personalised items, such as engraved jewellery, can only be returned if they arrive damaged.</p> <p>To start a return, sign in, open Your orders and choose Return next to the item. …</p> <p>We'll email you a prepaid label. …</p> <p>Pack the items securely, and keep the post office receipt until your refund arrives.</p> <p>Once your parcel reaches us, we check it within two working days. …</p> <p>If you paid with a gift card, the refund goes onto a new gift card, which we email to you.</p> <p>If you'd like another size or colour, return the item and place a new order, …</p> <p>If something arrives damaged or isn't what you ordered, email us a photo within 7 days. …</p></main>What is wrong3 points
- Twelve paragraphs follow the title, and nothing on the page marks where a new topic starts.
- The time limit, what can be returned, sending it back, refunds, exchanges and damaged items are six topics, and none of them has a heading.
- A screen reader's headings list holds only Returns and refunds, so finding the refunds means listening from the top.
<main> <h1>Returns and refunds</h1> <h2>Return window</h2> <p>You can return most items within 30 days of delivery. …</p> <p>Orders placed between 1 November and 24 December can be returned until 31 January.</p> <h2>What can be returned</h2> <p>Items must be unused and in their original packaging, with any tags still attached. …</p> <p>Items bought in a sale can be returned like any other, and we refund the price you paid.</p> <p>Personalised items, such as engraved jewellery, can only be returned if they arrive damaged.</p> <h2>Sending it back</h2> <p>To start a return, sign in, open Your orders and choose Return next to the item. …</p> <p>We'll email you a prepaid label. …</p> <p>Pack the items securely, and keep the post office receipt until your refund arrives.</p> <h2>Refunds</h2> <p>Once your parcel reaches us, we check it within two working days. …</p> <p>If you paid with a gift card, the refund goes onto a new gift card, which we email to you.</p> <h2>Exchanges</h2> <p>If you'd like another size or colour, return the item and place a new order, …</p> <h2>Damaged or wrong items</h2> <p>If something arrives damaged or isn't what you ordered, email us a photo within 7 days. …</p></main>How it is fixed3 steps
- Read the text and mark where each topic starts. Paragraphs about the same thing stay together: what can be returned and sale items are one topic, and so are starting a return and the label.
- Start each topic with an
h2, one level below the page'sh1. A screen reader lists it, and jumping to it lands at the start of its topic. - Name each heading after what its topic answers, in the words people come looking for: Refunds, Exchanges, Damaged or wrong items.
The six topics now each start with a heading, so the page shows its outline on screen and in the headings list, and the refund time is one jump away. This fixes the Before and passes 2.4.10. Because the headings are h2 elements, the structure people see is in the code too, as 1.3.1 asks. The text of the paragraphs hasn't changed.
The headings go missing most often where the editor makes them hard to add.
- A page builder's text widget, or a CMS field, that offers bold but no heading styles. Give the field a heading option limited to the levels its content can use, usually h2 to h4, so a writer doesn't draw a heading in bold instead. A heading drawn in bold is the failure in headings that don't match the page's sections.
- Text pasted from a word processor, where the headings were bold lines and arrive as paragraphs. Paste as plain text and add the headings in the editor.
- A template that puts the whole body in one field. A policy or help article that will grow benefits from a field per section, each with its own heading.
Divide by topic, not by length. A section can be one paragraph, as Exchanges is here, and a heading on every paragraph makes the headings list as long as the page. Where one topic has parts of its own, such as refunds by card and refunds by gift card, give each part an h3 inside its h2 section.
Rules, extra space and boxes can show where a section ends, but they don't name it, and a screen reader doesn't list them. Use them beside a heading, never in place of one.
On a very long page, a list of links to the headings at the top lets anyone jump to a section, not only screen reader users. Give each h2 an id and link to it. The list adds to the headings and doesn't replace them.
A long form is divided the same way. A settings page, or an application form with contact details, delivery and payment, gets a heading for each group of fields. A fieldset with a legend names a group when a screen reader moves into it, but a legend doesn't appear in a screen reader's headings list, so the groups people jump between on a long form need headings as well.
Some writing has no sections. The Understanding page gives two examples: a letter, which may cover several topics but where headings would be strange, and an existing document posted as it was written, whose author included none. A story or a news report that reads straight through is the same. 2.4.10 asks for headings where the content is organised into sections, not on every long page. Its note adds that it covers sections within writing, not user interface components, which 4.1.2 covers.
Verify the fix
4 checks, no mouse.
Test with: Screen reader
Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat whenever the page's text, its template or the editor's styles change.
Limits
This is a starting pattern, not a guarantee for every application. The text, the shop and the … in the code are placeholders. Screen readers word the headings list differently, so listen for the headings and their levels rather than the exact phrasing. Where the topics start, and what each heading should say, depend on the text, and no rule can settle them for every page. This guide covers whether long content has headings at all. Whether the headings that exist are marked up, at the right levels and with words that describe their sections, is in headings that don't match the page's sections. Test the complete journey with your target assistive technology.
This is a recreated teaching example, not a finding about a named client. The code is a starting pattern: test it in your own product. No completed assistive-technology test is claimed here.
References
- WCAG Understanding: section-headings (opens in a new tab)
- WCAG Technique G141 (opens in a new tab)
- WCAG Technique H69 (opens in a new tab)
- WCAG Understanding: info-and-relationships (opens in a new tab)
- webaim.org: screenreadersurvey11 (opens in a new tab)
- WAI Tutorial: page-structure/headings (opens in a new tab)
- developer.mozilla.org: Heading_Elements (opens in a new tab)
EaseWeb service
Fixed it? Keep it from coming back.
I turn guides like this one into rules your coding agents follow and checks your CI runs. Then I retest by hand with a keyboard and screen readers, periodically.