WCAG 2.2 Demo Suite

2.4.10 Level AAA Guideline 2.4 Navigable Added in WCAG 2.0 Partly detectable automatically

Section Headings

Section headings are used to organise content. This applies where content divides into sections, not to every paragraph.

Who this affects

Screen reader users navigating by heading, and users with cognitive disabilities who need long content broken into signposted chunks.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 2.4.10

Open the failing example in a new tab

fail.html — the problem

<h1>Terms of sale</h1>

<!-- FAILURE: a long document divided into clear topics, with no headings
     between them. There is exactly one h1 and nothing else.

     Note this page does NOT fail 1.3.1: there are no visual headings being
     faked with styled divs, so nothing is being misrepresented. It fails
     2.4.10 because sections that need headings do not have them.

     For a screen reader user, heading navigation is the primary way to skim.
     Without headings they must listen to the whole document linearly. For a
     user with a cognitive disability, an undifferentiated wall of text is
     close to unusable. -->
<p>These terms apply to all orders placed with Riverline Books.</p>
<p>Payment is taken when your order is dispatched, not when it is placed. We accept
   all major cards. Gift vouchers may be redeemed against any purchase but cannot be
   exchanged for cash.</p>
<p>Standard delivery takes three to five working days. Orders over twenty-five pounds
   are delivered free. We deliver to addresses within the United Kingdom only.
   Collection from any of our three shops is free and usually available the next day.</p>
<p>You may return any item within thirty days for a full refund, provided it is in
   saleable condition. Second-hand books may be returned only if they were described
   inaccurately. Postage on returns is at your own cost unless the item was faulty.</p>
<p>We hold your address and order history to fulfil your orders and to handle returns.
   We do not sell your data. You may ask us to delete your account at any time, and we
   will do so within thirty days.</p>
<p>If something goes wrong, contact us by email or by telephone during shop hours.
   We aim to reply within two working days. If we cannot resolve your complaint you
   may refer it to the retail ombudsman.</p>

Meets 2.4.10

Open the passing example in a new tab

pass.html — the fix

<h1>Terms of sale</h1>
<p>These terms apply to all orders placed with Riverline Books.</p>

<!-- FIX: each topic gets a heading at the right level, in order, with no
     levels skipped. The headings alone now work as a table of contents, and a
     screen reader user can jump straight to the section they need.

     They must also be DESCRIPTIVE, which is 2.4.6 - "Section 3" would satisfy
     2.4.10 and fail 2.4.6. The two criteria work together. -->
<h2>Payment</h2>
<p>Payment is taken when your order is dispatched, not when it is placed. We accept
   all major cards.</p>
<h3>Gift vouchers</h3>
<p>Gift vouchers may be redeemed against any purchase but cannot be exchanged for cash.</p>

<h2>Delivery and collection</h2>
<p>Standard delivery takes three to five working days. Orders over twenty-five pounds
   are delivered free. We deliver to addresses within the United Kingdom only.</p>
<h3>Collecting from a shop</h3>
<p>Collection from any of our three shops is free and usually available the next day.</p>

<h2>Returns and refunds</h2>
<p>You may return any item within thirty days for a full refund, provided it is in
   saleable condition. Second-hand books may be returned only if they were described
   inaccurately. Postage on returns is at your own cost unless the item was faulty.</p>

<h2>Your data</h2>
<p>We hold your address and order history to fulfil your orders and to handle returns.
   We do not sell your data. You may ask us to delete your account at any time.</p>

<h2>Complaints</h2>
<p>Contact us by email or by telephone during shop hours. We aim to reply within two
   working days. If we cannot resolve your complaint you may refer it to the retail
   ombudsman.</p>

<!-- 2.4.10 applies where content IS divided into sections. It does not demand
     a heading above every paragraph, and it does not apply to a short page with
     one idea. The test is whether a reader would perceive distinct topics -
     and if they would, each needs a signpost. -->

How to test it

Check that long content is divided by headings at the right level, with no skipped levels, and that the outline is navigable.

  • Automated

    Heading level order is checkable; whether sections that need headings have them is not.

    This demo's failure is not machine-detectable. The failing page has a correct h1 and no skipped levels, so heading-order and page-has-heading-one both pass. The failure is that headings are ABSENT where the content needs them, and no rule can tell that a wall of prose contains four distinct topics that each deserve a signpost.

    Relevant axe rules:

    • heading-order
    • page-has-heading-one

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification