WCAG 2.4.10: Section Headings

What This Rule Means

WCAG 2.4.10 — Section Headings (Level AAA) states: "Section headings are used to organize the content." This means that when a web page or document is divided into multiple distinct sections, each section must have a programmatically determinable heading that describes its topic or purpose. The intent is not merely to have visually styled text that looks like a heading, but to use actual heading markup that conveys hierarchical structure to both browsers and assistive technologies.

In HTML, this means using the native heading elements <h1> through <h6> appropriately. A page with a main topic should carry an <h1>, major sections should use <h2>, subsections within those use <h3>, and so on. The heading level should reflect the logical depth of the content, not be chosen arbitrarily for visual styling reasons. Where ARIA is used, the role="heading" combined with aria-level is also acceptable, though native HTML elements are always preferred.

A pass under this criterion means every distinct content section on the page has a heading that accurately describes what follows, that the heading is marked up semantically (not just visually styled bold or large text), and that the heading hierarchy logically reflects the document's content organization. A fail occurs when sections of content have no heading at all, when headings are skipped arbitrarily (jumping from <h1> to <h4> without logical reason), or when plain styled text is used instead of proper heading elements to label a section.

It is important to note the official WCAG exception: this criterion applies only when the page itself contains sections. Very short pages with a single, unified topic — such as a simple login form with no distinct sections — are not required to have multiple headings. The requirement is triggered by the presence of multiple distinct content areas that benefit from labeling. Additionally, this criterion does not mandate a specific heading hierarchy structure beyond logical organization; the key requirement is that headings exist and are used meaningfully wherever sections exist.

This criterion is classified as Level AAA, meaning it is not required for basic WCAG 2.2 conformance, but it represents best-in-class accessibility practice that significantly improves the experience for a wide range of users.

Why It Matters

Screen reader users rely on headings as their primary means of navigating long documents and web pages. According to WebAIM's Screen Reader User Survey, the vast majority of screen reader users navigate by headings regularly — it is consistently ranked as one of the most used navigation methods. When headings are absent or improperly structured, a screen reader user must listen to every piece of content sequentially from the top of the page, which is the equivalent of forcing a sighted user to read an entire book without a table of contents or chapter titles.

Consider a real-world example: a Turkish e-commerce site selling electronics might have a product detail page with sections covering product specifications, customer reviews, shipping information, and a returns policy. If none of these sections has a heading element, a blind user navigating with NVDA on Firefox cannot jump between them. They must either listen through all the content or use trial-and-error search strategies, significantly increasing cognitive load and time on task. With proper <h2> headings for each section, the same user can press the H key to jump instantly from section to section in seconds.

Users with cognitive disabilities also benefit substantially. Clear headings act as signposts, allowing people with attention disorders, reading difficulties, or memory impairments to quickly reorient themselves after losing focus. The World Health Organization estimates that approximately 1.3 billion people live with some form of disability globally, and cognitive and neurological conditions represent a large and growing portion of this population.

Motor-impaired users who rely on keyboard-only navigation or switch access devices also benefit because heading structure is used by many assistive technologies to create skip navigation opportunities, reducing the physical effort needed to reach the desired content area.

Beyond disability access, proper heading structure has significant SEO benefits. Search engines use heading hierarchy to understand the topical structure of a page, which can influence ranking and how content is surfaced in search results. A well-structured heading outline signals content quality to both users and crawlers. This makes the business case for implementing this AAA criterion compelling even for organizations not legally required to meet it.

Related Axe-core Rules

WCAG 2.4.10 requires manual testing and cannot be fully automated. Here is why automated tools fall short, and what they can and cannot catch:

• Manual Testing Required — Structural Completeness: Automated tools like axe-core can detect the presence or absence of heading elements on a page, and can flag issues such as skipped heading levels (e.g., jumping from <h1> to <h3>). However, they cannot determine whether the content of a page has been logically divided into sections or whether a heading accurately describes the section it introduces. A tool might see a correct heading hierarchy and pass the check, while the page actually has four distinct content sections, three of which have no heading at all. The semantic appropriateness of heading placement requires a human reviewer who understands the content's purpose and structure.
• axe-core rule — heading-order: This rule flags cases where heading levels are skipped in a way that breaks the logical document outline (for example, going directly from <h1> to <h4>). While this is a related quality signal, passing this rule does not guarantee compliance with 2.4.10, because the rule only checks the relative order of headings that exist — it cannot determine whether a heading is missing from a section that needs one.
• axe-core rule — page-has-heading-one: This rule checks whether the page contains at least one <h1> element, which is a basic structural requirement. Again, passing this check is a positive signal but does not confirm full compliance with 2.4.10, since a page can have an <h1> and still have multiple unlabeled sections below it.
• Why full automation is impossible: Determining whether a region of content constitutes a "section" that warrants a heading requires understanding the semantics and purpose of the content — a task that currently requires human judgment. An algorithm cannot reliably distinguish between a coherent paragraph that naturally continues from what precedes it versus a truly new topic area that deserves its own labeled heading. This is why 2.4.10 is always listed as requiring manual evaluation in any comprehensive audit.

How to Test

1. Automated scan with axe DevTools or Lighthouse: Install the axe DevTools browser extension (available for Chrome and Firefox) and run a full-page scan. Review any issues related to heading-order and page-has-heading-one. Note that a clean automated scan does not confirm WCAG 2.4.10 compliance — it only clears the automatable subset of checks. Lighthouse in Chrome DevTools also surfaces heading-related issues under its Accessibility audit; look for "Heading elements are not in a sequentially-descending order" warnings.
2. Manual content review — document outline: Use a browser extension such as HeadingsMap (available for Chrome and Firefox) to generate a visual outline of all heading elements on the page. Review this outline critically: does it accurately reflect the page's content structure? Is every distinct section represented by a heading? Are there sections of content visible on the page that do not appear in the outline? If yes, those sections are missing headings and the page fails 2.4.10.
3. Screen reader navigation with NVDA and Firefox: Open the page in Firefox with NVDA running. Press H to jump forward through headings and Shift+H to go backward. As you land on each heading, note whether the announced heading accurately describes the content that follows. Also note whether you encounter any substantial blocks of content that are never announced as being under a heading. Open NVDA's Elements List (NVDA+F7), select the Headings tab, and review the complete heading list to spot missing or mislabeled sections.
4. Screen reader navigation with VoiceOver and Safari (macOS/iOS): On macOS, enable VoiceOver (Command+F5) and open the page in Safari. Use VO+Command+H to navigate through headings. On iOS, use the rotor (swipe with two fingers to set it to Headings) and then swipe down to move through headings. Verify that all content sections are reachable via heading navigation.
5. Screen reader navigation with JAWS and Chrome: In JAWS, press H to cycle through headings and open the Headings List with Insert+F6. Review the list for completeness and logical hierarchy. Confirm that headings are not used merely for styling — only genuine section labels should appear as headings.
6. Keyboard-only navigation check: Using only the keyboard, attempt to navigate through all major sections of the page without using headings. Note how many times you must tab through interactive elements to reach each section. This gives a sense of the burden placed on keyboard users when proper heading structure is absent.

How to Fix

Sections labeled with styled text only — Incorrect

<div class='section'>
  <p class='section-title'>Product Specifications</p>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</div>

<div class='section'>
  <p class='section-title'>Customer Reviews</p>
  <p>This product exceeded my expectations.</p>
</div>

Sections labeled with styled text only — Correct

<!-- Using semantic heading elements makes sections navigable by screen readers -->
<section>
  <h2>Product Specifications</h2>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</section>

<section>
  <h2>Customer Reviews</h2>
  <p>This product exceeded my expectations.</p>
</section>

Skipped heading levels for styling purposes — Incorrect

<h1>Annual Report 2024</h1>
<!-- h4 used here because it looks smaller visually, skipping h2 and h3 -->
<h4>Financial Overview</h4>
<p>Revenue grew by 12% this year...</p>
<h4>Regional Performance</h4>
<p>The Istanbul region led growth...</p>

Skipped heading levels for styling purposes — Correct

<h1>Annual Report 2024</h1>
<!-- h2 used for major sections; CSS controls visual size, not heading level -->
<h2>Financial Overview</h2>
<p>Revenue grew by 12% this year...</p>
<h2>Regional Performance</h2>
<p>The Istanbul region led growth...</p>

No heading for a major page section — Incorrect

<main>
  <h1>Contact Us</h1>
  <form>
    <label for='name'>Name</label>
    <input type='text' id='name' name='name'>
    <label for='message'>Message</label>
    <textarea id='message' name='message'></textarea>
    <button type='submit'>Send</button>
  </form>
  <!-- This office locations section has no heading -->
  <div>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </div>
</main>

No heading for a major page section — Correct

<main>
  <h1>Contact Us</h1>
  <section>
    <h2>Send Us a Message</h2>
    <form>
      <label for='name'>Name</label>
      <input type='text' id='name' name='name'>
      <label for='message'>Message</label>
      <textarea id='message' name='message'></textarea>
      <button type='submit'>Send</button>
    </form>
  </section>
  <!-- Office locations section now has a descriptive heading -->
  <section>
    <h2>Our Offices</h2>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </section>
</main>

ARIA heading role used without aria-level — Incorrect

<!-- role=heading without aria-level defaults to level 2, which may be wrong -->
<div role='heading'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

ARIA heading role used without aria-level — Correct

<!-- Native HTML is strongly preferred; if ARIA is used, aria-level must be explicit -->
<!-- Preferred: -->
<h2>Shipping Policy</h2>
<p>Orders are shipped within 2 business days...</p>

<!-- Acceptable when native heading cannot be used: -->
<div role='heading' aria-level='2'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

Common Mistakes

• Using CSS classes like .title or .section-header on <p> or <div> elements instead of actual <h1>–<h6> elements: Visual styling alone does not communicate structure to assistive technologies. The heading must be a genuine heading element or carry a valid ARIA heading role with an explicit level.
• Choosing heading levels based on font size rather than document hierarchy: Selecting <h4> because it renders at the desired visual size, when it should logically be an <h2>, breaks the document outline and confuses screen reader users who hear "heading level 4" without any preceding level 2 or 3.
• Applying font-size or font-weight overrides to visually downsize <h1> rather than using a lower-level heading element: This creates a mismatch between visual hierarchy and semantic hierarchy; use CSS to control size and native heading levels to convey structure.
• Omitting headings from dynamically loaded content sections (e.g., tab panels, modal dialogs, or AJAX-loaded results): When new content is injected into the page, it often lacks heading structure. Each dynamically rendered section should include an appropriate heading so users who navigate by heading are not stranded in an unlabeled content island.
• Using only one <h1> for the page title and no further headings on a page with five or more distinct content sections: The existence of an <h1> satisfies automated checks but does not fulfill 2.4.10 if subsequent major sections are unlabeled.
• Nesting headings inside <button> or <a> elements: Placing a heading inside an interactive element creates conflicting roles for assistive technologies and is invalid HTML. Headings should label sections of content, not interactive controls.
• Using role='heading' without specifying aria-level: The default ARIA implicit level is 2, which may not match the intended document structure and will silently produce an incorrect outline if the section is at a different level.
• Adding decorative or repeated headings — e.g., repeating the page title as an <h2> inside every content card — that create heading noise without meaningful navigation value: Headings should uniquely and accurately describe the section they introduce; redundant headings dilute the utility of heading navigation for screen reader users.
• Hiding headings visually with display:none or visibility:hidden in an attempt to provide screen-reader-only structure: These CSS properties also hide the element from assistive technologies. Use the standard visually-hidden technique (position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);) if a heading needs to be present in the accessibility tree but not visible on screen.
• Failing to update heading structure when page content is reorganized during a redesign: Headings added during initial development are often left stale when content sections are reordered, merged, or replaced. Heading audits should be part of any content or design review cycle, not a one-time accessibility fix.

Relation to Turkey's Accessibility Regulations

Turkey's Presidential Circular 2025/10, published in the Official Gazette No. 32933 on June 21, 2025, establishes comprehensive digital accessibility obligations for a broad range of entities operating in Turkey. The circular aligns with WCAG 2.2 as the technical standard for digital accessibility compliance and applies to public institutions, e-commerce platforms, banks and financial institutions, hospitals and healthcare providers, telecommunications companies with 200,000 or more subscribers, travel agencies, private transport companies, and private schools authorized by the Ministry of National Education (MoNE).

WCAG 2.4.10 — Section Headings is a Level AAA criterion. This means it is not among the minimum legally required criteria under the circular, which mandates conformance at Levels A and AA for covered entities. However, the circular's broader intent is to ensure meaningful digital access for all users, and Level AAA criteria like 2.4.10 are explicitly recognized as representing best-in-class accessibility practice.

For covered entities — particularly public institutions, banks, hospitals, and large telecom providers — implementing WCAG 2.4.10 demonstrates a commitment to accessibility that goes beyond regulatory minimums. In practice, well-structured heading hierarchies are also a precondition for several AA-level success criteria (such as 1.3.1 Info and Relationships and 2.4.6 Headings and Labels), meaning that organizations targeting full AA conformance will naturally approach 2.4.10 compliance as part of that effort.

Specialized services targeted at users with disabilities, or digital services offered by public institutions serving diverse citizen populations including elderly users, users with cognitive disabilities, or users of assistive technologies, would especially benefit from the full implementation of 2.4.10. Turkey's growing emphasis on digital government services (e-devlet) and the expansion of e-commerce makes robust content structure not only an accessibility requirement but a usability and legal risk management priority.

Organizations in Turkey that voluntarily certify at WCAG 2.2 Level AAA — including 2.4.10 — position themselves as accessibility leaders, which supports brand trust, reduces litigation risk, and broadens their addressable audience to include the estimated 8.5 million people with disabilities in Turkey as reported by the Turkish Statistical Institute (TÜİK).