WCAG 2.4.10: Sectiekoppen

Wat Deze Regel Betekent

WCAG 2.4.10 — Section Headings (Niveau AAA) stelt: "Section headings are used to organize the content." Dit betekent dat wanneer een webpagina of document is opgedeeld in meerdere afzonderlijke secties, elke sectie een programmatisch bepaalbare kop moet hebben die het onderwerp of doel beschrijft. De bedoeling is niet alleen om visueel opgemaakte tekst te hebben die eruitziet als een kop, maar om echte kop-markup te gebruiken die een hiërarchische structuur overbrengt aan zowel browsers als ondersteunende technologieën.

In HTML betekent dit dat de native kop-elementen <h1> tot en met <h6> op de juiste manier worden gebruikt. Een pagina met een hoofdonderwerp moet een <h1> hebben, hoofdsecties moeten <h2> gebruiken, subsecties daarin gebruiken <h3>, enzovoort. Het kopniveau moet de logische diepte van de inhoud weerspiegelen en niet willekeurig worden gekozen om visuele opmaakredenen. Waar ARIA wordt gebruikt, is de combinatie van role="heading" met aria-level ook acceptabel, al hebben native HTML-elementen altijd de voorkeur.

Een pass onder dit criterium betekent dat elke afzonderlijke inhoudssectie op de pagina een kop heeft die nauwkeurig beschrijft wat volgt, dat de kop semantisch is gemarkeerd (niet alleen visueel opgemaakte vette of grote tekst), en dat de kop-hiërarchie de inhoudsorganisatie van het document logisch weerspiegelt. Een fail treedt op wanneer inhoudssecties helemaal geen kop hebben, wanneer kopniveaus willekeurig worden overgeslagen (bijvoorbeeld van <h1> naar <h4> zonder logische reden), of wanneer gewone gestileerde tekst wordt gebruikt in plaats van juiste kop-elementen om een sectie te labelen.

Het is belangrijk om de officiële WCAG-uitzondering te benadrukken: dit criterium is alleen van toepassing wanneer de pagina zelf secties bevat. Zeer korte pagina's met één enkel, samenhangend onderwerp — zoals een eenvoudig inlogformulier zonder afzonderlijke secties — hoeven geen meerdere koppen te hebben. De verplichting wordt geactiveerd door de aanwezigheid van meerdere afzonderlijke inhoudsgebieden die baat hebben bij labeling. Daarnaast schrijft dit criterium geen specifieke kop-hiërarchiestructuur voor buiten logische organisatie; de kernvereiste is dat koppen bestaan en zinvol worden gebruikt waar secties bestaan.

Dit criterium is geclassificeerd als Niveau AAA, wat betekent dat het niet vereist is voor basisconformiteit met WCAG 2.2, maar het vertegenwoordigt een best practice op het gebied van toegankelijkheid die de ervaring voor een brede groep gebruikers aanzienlijk verbetert.

Waarom Het Belangrijk Is

Schermlezers gebruiken koppen als hun primaire middel om door lange documenten en webpagina's te navigeren. Volgens WebAIM's Screen Reader User Survey navigeert de overgrote meerderheid van de schermlezergebruikers regelmatig via koppen — het wordt consequent gerangschikt als een van de meest gebruikte navigatiemethoden. Wanneer koppen ontbreken of onjuist zijn gestructureerd, moet een schermlezergebruiker elk stukje inhoud sequentieel vanaf de bovenkant van de pagina beluisteren, wat gelijkstaat aan het dwingen van een ziende gebruiker om een heel boek te lezen zonder inhoudsopgave of hoofdstuktitels.

Denk aan een voorbeeld uit de praktijk: een Turkse e-commercesite die elektronica verkoopt, kan een productdetailpagina hebben met secties over productspecificaties, klantbeoordelingen, verzendinformatie en een retourbeleid. Als geen van deze secties een kop-element heeft, kan een blinde gebruiker die met NVDA in Firefox navigeert, niet tussen deze secties springen. Die moet ofwel alle inhoud beluisteren of gebruikmaken van trial-and-error-zoekstrategieën, wat de cognitieve belasting en de benodigde tijd aanzienlijk verhoogt. Met juiste <h2>-koppen voor elke sectie kan dezelfde gebruiker op de toets H drukken om binnen enkele seconden direct van sectie naar sectie te springen.

Gebruikers met cognitieve beperkingen profiteren ook aanzienlijk. Duidelijke koppen fungeren als wegwijzers, waardoor mensen met aandachtsstoornissen, leesproblemen of geheugenstoornissen zich snel kunnen heroriënteren nadat ze hun focus zijn kwijtgeraakt. De Wereldgezondheidsorganisatie schat dat wereldwijd ongeveer 1,3 miljard mensen met een of andere vorm van beperking leven, en cognitieve en neurologische aandoeningen vormen een groot en groeiend deel van deze populatie.

Motorisch beperkte gebruikers die afhankelijk zijn van uitsluitend toetsenbordnavigatie of schakelhulpmiddelen profiteren eveneens, omdat de kopstructuur door veel ondersteunende technologieën wordt gebruikt om mogelijkheden voor het overslaan van navigatie te creëren, waardoor de fysieke inspanning die nodig is om het gewenste inhoudsgebied te bereiken, wordt verminderd.

Naast toegang voor mensen met een beperking heeft een goede kopstructuur aanzienlijke SEO-voordelen. Zoekmachines gebruiken de kop-hiërarchie om de thematische structuur van een pagina te begrijpen, wat invloed kan hebben op de ranking en op hoe inhoud in zoekresultaten wordt getoond. Een goed gestructureerde kop-outline geeft zowel gebruikers als crawlers een signaal van inhoudskwaliteit. Dit maakt het zakelijke argument voor implementatie van dit AAA-criterium overtuigend, zelfs voor organisaties die niet wettelijk verplicht zijn om eraan te voldoen.

Gerelateerde Axe-core Regels

WCAG 2.4.10 vereist handmatige tests en kan niet volledig worden geautomatiseerd. Dit is waarom geautomatiseerde tools tekortschieten, en wat ze wel en niet kunnen detecteren:

• Handmatige test vereist — structurele volledigheid: Geautomatiseerde tools zoals axe-core kunnen de aanwezigheid of afwezigheid van kop-elementen op een pagina detecteren en kunnen problemen signaleren zoals overgeslagen kopniveaus (bijvoorbeeld van <h1> naar <h3>). Ze kunnen echter niet bepalen of de inhoud van een pagina logisch is opgedeeld in secties of dat een kop de sectie die hij inleidt nauwkeurig beschrijft. Een tool kan een correcte kop-hiërarchie zien en de controle laten slagen, terwijl de pagina in werkelijkheid vier afzonderlijke inhoudssecties heeft waarvan er drie helemaal geen kop hebben. De semantische geschiktheid van de plaatsing van koppen vereist een menselijke beoordelaar die het doel en de structuur van de inhoud begrijpt.
• axe-core-regel — heading-order: Deze regel signaleert gevallen waarin kopniveaus worden overgeslagen op een manier die de logische document-outline doorbreekt (bijvoorbeeld direct van <h1> naar <h4>). Hoewel dit een gerelateerd kwaliteitssignaal is, garandeert het slagen voor deze regel geen naleving van 2.4.10, omdat de regel alleen de relatieve volgorde controleert van koppen die bestaan — hij kan niet bepalen of een kop ontbreekt in een sectie die er een nodig heeft.
• axe-core-regel — page-has-heading-one: Deze regel controleert of de pagina ten minste één <h1>-element bevat, wat een basisstructuurvereiste is. Ook hier is het slagen voor deze controle een positief signaal, maar het bevestigt geen volledige naleving van 2.4.10, omdat een pagina een <h1> kan hebben en toch meerdere niet-gelabelde secties daaronder.
• Waarom volledige automatisering onmogelijk is: Bepalen of een inhoudsgebied een "sectie" vormt die een kop verdient, vereist begrip van de semantiek en het doel van de inhoud — een taak die momenteel menselijke beoordeling vereist. Een algoritme kan niet betrouwbaar onderscheid maken tussen een samenhangende paragraaf die logisch voortvloeit uit wat eraan voorafgaat en een echt nieuw onderwerpgebied dat een eigen gelabelde kop verdient. Daarom wordt 2.4.10 in elke uitgebreide audit altijd vermeld als een criterium dat handmatige evaluatie vereist.

Hoe te Testen

1. Geautomatiseerde scan met axe DevTools of Lighthouse: Installeer de browserextensie axe DevTools (beschikbaar voor Chrome en Firefox) en voer een volledige paginascan uit. Bekijk alle problemen met betrekking tot heading-order en page-has-heading-one. Let erop dat een schone geautomatiseerde scan WCAG 2.4.10-naleving niet bevestigt — deze dekt alleen de automatiseerbare subset van controles. Lighthouse in Chrome DevTools toont ook kop-gerelateerde problemen in de Accessibility-audit; let op waarschuwingen als "Heading elements are not in a sequentially-descending order".
2. Handmatige inhoudsreview — document-outline: Gebruik een browserextensie zoals HeadingsMap (beschikbaar voor Chrome en Firefox) om een visuele outline van alle kop-elementen op de pagina te genereren. Beoordeel deze outline kritisch: weerspiegelt hij de inhoudsstructuur van de pagina nauwkeurig? Wordt elke afzonderlijke sectie vertegenwoordigd door een kop? Zijn er inhoudssecties die zichtbaar zijn op de pagina maar niet in de outline voorkomen? Zo ja, dan ontbreken daar koppen en voldoet de pagina niet aan 2.4.10.
3. Schermlezernavigatie met NVDA en Firefox: Open de pagina in Firefox met NVDA actief. Druk op H om vooruit te springen tussen koppen en op Shift+H om terug te gaan. Let bij elke kop waarop je landt op de vraag of de aangekondigde kop de inhoud die volgt nauwkeurig beschrijft. Let ook op of je substantiële inhoudsblokken tegenkomt die nooit worden aangekondigd als behorend bij een kop. Open NVDA's Elements List (NVDA+F7), selecteer het tabblad Headings en bekijk de volledige koplijst om ontbrekende of verkeerd gelabelde secties op te sporen.
4. Schermlezernavigatie met VoiceOver en Safari (macOS/iOS): Schakel op macOS VoiceOver in (Command+F5) en open de pagina in Safari. Gebruik VO+Command+H om door koppen te navigeren. Gebruik op iOS de rotor (veeg met twee vingers om deze op Headings in te stellen) en veeg vervolgens omlaag om door koppen te gaan. Controleer of alle inhoudssecties via kopnavigatie bereikbaar zijn.
5. Schermlezernavigatie met JAWS en Chrome: Druk in JAWS op H om door koppen te bladeren en open de Headings List met Insert+F6. Beoordeel de lijst op volledigheid en logische hiërarchie. Bevestig dat koppen niet alleen voor styling worden gebruikt — alleen echte sectielabels mogen als koppen verschijnen.
6. Controle van navigatie met alleen toetsenbord: Probeer met alleen het toetsenbord door alle hoofdsecties van de pagina te navigeren zonder gebruik te maken van koppen. Noteer hoe vaak je door interactieve elementen moet tabben om elke sectie te bereiken. Dit geeft een indruk van de belasting voor toetsenbordgebruikers wanneer een goede kopstructuur ontbreekt.

Hoe te Herstellen

Secties alleen gelabeld met gestileerde tekst — Onjuist

<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>

Secties alleen gelabeld met gestileerde tekst — 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>

Overgeslagen kopniveaus omwille van styling — Onjuist

<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>

Overgeslagen kopniveaus omwille van styling — 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>

Geen kop voor een belangrijke paginasectie — Onjuist

<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>

Geen kop voor een belangrijke paginasectie — 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-rol gebruikt zonder aria-level — Onjuist

<!-- 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-rol gebruikt zonder 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>

Veelvoorkomende Fouten

• CSS-klassen zoals .title of .section-header gebruiken op <p>- of <div>-elementen in plaats van echte <h1>–<h6>-elementen: Alleen visuele opmaak communiceert geen structuur aan ondersteunende technologieën. De kop moet een echte kop zijn of een geldige ARIA heading-rol met een expliciet niveau hebben.
• Kopniveaus kiezen op basis van lettergrootte in plaats van documenthiërarchie: <h4> selecteren omdat het de gewenste visuele grootte heeft, terwijl het logisch een <h2> zou moeten zijn, doorbreekt de document-outline en verwart schermlezergebruikers die "heading level 4" horen zonder voorafgaand niveau 2 of 3.
• font-size- of font-weight-overrides toepassen om <h1> visueel te verkleinen in plaats van een kop-element op een lager niveau te gebruiken: Dit creëert een mismatch tussen visuele hiërarchie en semantische hiërarchie; gebruik CSS om de grootte te bepalen en native kopniveaus om structuur over te brengen.
• Koppen weglaten bij dynamisch geladen inhoudssecties (bijv. tabbladen, modale dialogen of via AJAX geladen resultaten): Wanneer nieuwe inhoud in de pagina wordt geïnjecteerd, ontbreekt vaak een kopstructuur. Elke dynamisch gerenderde sectie moet een passende kop bevatten zodat gebruikers die via koppen navigeren niet stranden in een niet-gelabeld inhoudseiland.
• Slechts één <h1> gebruiken voor de paginatitel en geen verdere koppen op een pagina met vijf of meer afzonderlijke inhoudssecties: Het bestaan van een <h1> voldoet aan geautomatiseerde controles, maar niet aan 2.4.10 als daaropvolgende hoofdsecties niet zijn gelabeld.
• Koppen nesten binnen <button>- of <a>-elementen: Een kop binnen een interactief element plaatsen creëert conflicterende rollen voor ondersteunende technologieën en is ongeldige HTML. Koppen moeten inhoudssecties labelen, geen interactieve bedieningselementen.
• role='heading' gebruiken zonder aria-level te specificeren: Het impliciete standaardniveau van ARIA is 2, wat mogelijk niet overeenkomt met de beoogde documentstructuur en stilzwijgend een onjuiste outline oplevert als de sectie op een ander niveau staat.
• Decoratieve of herhaalde koppen toevoegen — bijvoorbeeld de paginatitel herhalen als een <h2> in elke contentkaart — die kop-ruis creëren zonder zinvolle navigatiewaarde: Koppen moeten de sectie die ze inleiden uniek en nauwkeurig beschrijven; redundante koppen verminderen de bruikbaarheid van kopnavigatie voor schermlezergebruikers.
• Koppen visueel verbergen met display:none of visibility:hidden in een poging om alleen voor schermlezers structuur te bieden: Deze CSS-eigenschappen verbergen het element ook voor ondersteunende technologieën. Gebruik de standaardtechniek voor visueel verbergen (position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);) als een kop wel in de toegankelijkheidsboom aanwezig moet zijn maar niet op het scherm zichtbaar hoeft te zijn.
• De kopstructuur niet bijwerken wanneer de pagina-inhoud tijdens een redesign wordt heringericht: Koppen die tijdens de initiële ontwikkeling zijn toegevoegd, blijven vaak verouderd wanneer inhoudssecties worden herschikt, samengevoegd of vervangen. Kop-audits moeten deel uitmaken van elke inhouds- of designreviewcyclus, niet een eenmalige toegankelijkheidsfix.

Relatie met de Toegankelijkheidsregelgeving van Turkije

De Turkse Presidential Circular 2025/10, gepubliceerd in het Staatsblad nr. 32933 op 21 juni 2025, stelt uitgebreide digitale toegankelijkheidsverplichtingen vast voor een brede groep entiteiten die in Turkije actief zijn. De circulaire sluit aan bij WCAG 2.2 als technische standaard voor digitale toegankelijkheidsconformiteit en is van toepassing op overheidsinstellingen, e-commerceplatforms, banken en financiële instellingen, ziekenhuizen en zorgaanbieders, telecommunicatiebedrijven met 200.000 of meer abonnees, reisbureaus, particuliere vervoersbedrijven en particuliere scholen die zijn gemachtigd door het Ministerie van Nationaal Onderwijs (MoNE).

WCAG 2.4.10 — Section Headings is een criterium op Niveau AAA. Dit betekent dat het niet behoort tot de minimaal wettelijk vereiste criteria onder de circulaire, die conformiteit op niveaus A en AA voorschrijft voor de betrokken entiteiten. De bredere bedoeling van de circulaire is echter om zinvolle digitale toegang voor alle gebruikers te waarborgen, en AAA-criteria zoals 2.4.10 worden expliciet erkend als best practices op het gebied van toegankelijkheid.

Voor betrokken entiteiten — met name overheidsinstellingen, banken, ziekenhuizen en grote telecomaanbieders — toont implementatie van WCAG 2.4.10 een inzet voor toegankelijkheid die verder gaat dan de wettelijke minimumeisen. In de praktijk zijn goed gestructureerde kop-hiërarchieën ook een randvoorwaarde voor verschillende AA-criteria (zoals 1.3.1 Info and Relationships en 2.4.6 Headings and Labels), wat betekent dat organisaties die volledige AA-conformiteit nastreven, 2.4.10 in de praktijk vanzelf grotendeels zullen invullen.

Gespecialiseerde diensten die gericht zijn op gebruikers met een beperking, of digitale diensten die door overheidsinstellingen worden aangeboden aan diverse burgerpopulaties, waaronder oudere gebruikers, gebruikers met cognitieve beperkingen of gebruikers van ondersteunende technologieën, zouden in het bijzonder profiteren van volledige implementatie van 2.4.10. De groeiende nadruk in Turkije op digitale overheidsdiensten (e-devlet) en de uitbreiding van e-commerce maken een robuuste inhoudsstructuur niet alleen een toegankelijkheidsvereiste, maar ook een prioriteit op het gebied van bruikbaarheid en juridisch risicobeheer.

Organisaties in Turkije die zich vrijwillig laten certificeren op WCAG 2.2 Niveau AAA — inclusief 2.4.10 — positioneren zich als koplopers op het gebied van toegankelijkheid, wat het vertrouwen in het merk versterkt, het risico op rechtszaken vermindert en hun potentiële doelgroep vergroot tot de naar schatting 8,5 miljoen mensen met een beperking in Turkije, zoals gerapporteerd door het Turkse Statistische Instituut (TÜİK).