WCAG 2.4.10: Avsnittsrubriker

Vad den här regeln innebär

WCAG 2.4.10 — Avsnittsrubriker (Nivå AAA) säger: "Section headings are used to organize the content." Detta innebär att när en webbsida eller ett dokument delas upp i flera tydligt avgränsade avsnitt, måste varje avsnitt ha en programmatiskt fastställbar rubrik som beskriver dess ämne eller syfte. Avsikten är inte bara att ha visuellt formaterad text som ser ut som en rubrik, utan att använda faktisk rubrikmarkup som förmedlar hierarkisk struktur till både webbläsare och hjälpmedel.

I HTML innebär detta att de inbyggda rubrikelementen <h1> till <h6> används på ett lämpligt sätt. En sida med ett huvudämne ska ha en <h1>, större avsnitt ska använda <h2>, underavsnitt inom dessa använder <h3> och så vidare. Rubriknivån ska återspegla innehållets logiska djup, inte väljas godtyckligt av visuella stilskäl. Där ARIA används är role="heading" i kombination med aria-level också acceptabelt, även om inbyggda HTML-element alltid är att föredra.

Ett godkänt resultat enligt detta kriterium innebär att varje tydligt avgränsat innehållsavsnitt på sidan har en rubrik som korrekt beskriver det som följer, att rubriken är semantiskt markerad (inte bara visuellt formaterad fet eller stor text) och att rubrikhierarkin logiskt återspeglar dokumentets innehållsorganisation. Ett underkänt resultat uppstår när innehållsavsnitt saknar rubrik helt, när rubriknivåer hoppas över godtyckligt (hoppar från <h1> till <h4> utan logisk anledning) eller när vanlig formaterad text används i stället för korrekta rubrikelement för att märka ett avsnitt.

Det är viktigt att notera det officiella WCAG-undantaget: detta kriterium gäller endast när sidan i sig innehåller avsnitt. Mycket korta sidor med ett enda, enhetligt ämne — såsom ett enkelt inloggningsformulär utan tydliga avsnitt — behöver inte ha flera rubriker. Kravet utlöses av förekomsten av flera tydligt avgränsade innehållsområden som gynnas av märkning. Dessutom kräver detta kriterium inte en specifik rubrikhierarkistruktur utöver logisk organisering; huvudkravet är att rubriker finns och används meningsfullt där avsnitt finns.

Detta kriterium är klassificerat som Nivå AAA, vilket innebär att det inte krävs för grundläggande WCAG 2.2-överensstämmelse, men det representerar bästa praxis för tillgänglighet som avsevärt förbättrar upplevelsen för en bred grupp användare.

Varför det är viktigt

Skärmläsaranvändare förlitar sig på rubriker som sitt primära sätt att navigera i långa dokument och webbsidor. Enligt WebAIM:s Screen Reader User Survey navigerar den stora majoriteten av skärmläsaranvändare regelbundet med hjälp av rubriker — det rankas konsekvent som en av de mest använda navigationsmetoderna. När rubriker saknas eller är felaktigt strukturerade måste en skärmläsaranvändare lyssna på varje innehållsdel sekventiellt från sidans början, vilket motsvarar att tvinga en seende användare att läsa en hel bok utan innehållsförteckning eller kapitelrubriker.

Överväg ett verkligt exempel: en turkisk e-handelssajt som säljer elektronik kan ha en produktsida med avsnitt som täcker produktspecifikationer, kundrecensioner, leveransinformation och returpolicy. Om inget av dessa avsnitt har ett rubrikelement kan en blind användare som navigerar med NVDA i Firefox inte hoppa mellan dem. Hen måste antingen lyssna igenom allt innehåll eller använda trial-and-error-baserade sökstrategier, vilket avsevärt ökar den kognitiva belastningen och tiden det tar att utföra uppgiften. Med korrekta <h2>-rubriker för varje avsnitt kan samma användare trycka på tangenten H för att omedelbart hoppa från avsnitt till avsnitt på några sekunder.

Användare med kognitiva funktionsnedsättningar gynnas också i hög grad. Tydliga rubriker fungerar som vägvisare och gör det möjligt för personer med uppmärksamhetsstörningar, lässvårigheter eller minnesnedsättningar att snabbt orientera sig igen efter att ha tappat fokus. Världshälsoorganisationen uppskattar att cirka 1,3 miljarder människor globalt lever med någon form av funktionsnedsättning, och kognitiva och neurologiska tillstånd utgör en stor och växande del av denna befolkning.

Motoriskt nedsatta användare som förlitar sig på enbart tangentbordsnavigering eller switch-styrda hjälpmedel gynnas också eftersom rubrikstrukturen används av många hjälpmedel för att skapa möjligheter att hoppa över navigation, vilket minskar den fysiska ansträngning som krävs för att nå det önskade innehållsområdet.

Utöver tillgång för personer med funktionsnedsättning har korrekt rubrikstruktur betydande SEO-fördelar. Sökmotorer använder rubrikhierarki för att förstå den ämnesmässiga strukturen på en sida, vilket kan påverka rankning och hur innehåll visas i sökresultat. En välstrukturerad rubriköversikt signalerar innehållskvalitet till både användare och sökrobotar. Detta gör det affärsmässiga argumentet för att implementera detta AAA-kriterium övertygande även för organisationer som inte är juridiskt skyldiga att uppfylla det.

Relaterade Axe-core-regler

WCAG 2.4.10 kräver manuell testning och kan inte automatiseras fullt ut. Här är varför automatiserade verktyg inte räcker till, och vad de kan och inte kan upptäcka:

• Manuell testning krävs — strukturell fullständighet: Automatiserade verktyg som axe-core kan upptäcka förekomst eller avsaknad av rubrikelement på en sida och kan flagga problem som överhoppade rubriknivåer (t.ex. att hoppa från <h1> till <h3>). De kan dock inte avgöra om innehållet på en sida har delats upp logiskt i avsnitt eller om en rubrik korrekt beskriver avsnittet den introducerar. Ett verktyg kan se en korrekt rubrikhierarki och godkänna kontrollen, medan sidan i själva verket har fyra tydliga innehållsavsnitt, varav tre helt saknar rubrik. Den semantiska lämpligheten i rubrikplaceringen kräver en mänsklig granskare som förstår innehållets syfte och struktur.
• axe-core-regel — heading-order: Denna regel flaggar fall där rubriknivåer hoppas över på ett sätt som bryter den logiska dokumentöversikten (till exempel att gå direkt från <h1> till <h4>). Även om detta är en relaterad kvalitetsindikator garanterar ett godkänt resultat för denna regel inte efterlevnad av 2.4.10, eftersom regeln endast kontrollerar den relativa ordningen för rubriker som finns — den kan inte avgöra om en rubrik saknas i ett avsnitt som behöver en.
• axe-core-regel — page-has-heading-one: Denna regel kontrollerar om sidan innehåller minst ett <h1>-element, vilket är ett grundläggande strukturellt krav. Även här är ett godkänt resultat en positiv signal men bekräftar inte full efterlevnad av 2.4.10, eftersom en sida kan ha en <h1> och ändå ha flera omärkta avsnitt under den.
• Varför fullständig automatisering är omöjlig: Att avgöra om ett innehållsområde utgör ett "avsnitt" som motiverar en rubrik kräver förståelse för innehållets semantik och syfte — en uppgift som för närvarande kräver mänskligt omdöme. En algoritm kan inte på ett tillförlitligt sätt skilja mellan ett sammanhängande stycke som naturligt fortsätter från det föregående och ett verkligt nytt ämnesområde som förtjänar en egen märkt rubrik. Detta är anledningen till att 2.4.10 alltid listas som ett kriterium som kräver manuell utvärdering i alla heltäckande granskningar.

Hur man testar

1. Automatisk skanning med axe DevTools eller Lighthouse: Installera webbläsartillägget axe DevTools (tillgängligt för Chrome och Firefox) och kör en fullständig sidskanning. Granska alla problem relaterade till heading-order och page-has-heading-one. Observera att en ren automatisk skanning inte bekräftar efterlevnad av WCAG 2.4.10 — den rensar bara den delmängd av kontroller som kan automatiseras. Lighthouse i Chrome DevTools lyfter också fram rubrikrelaterade problem under sin Accessibility-granskning; leta efter varningar om att "Heading elements are not in a sequentially-descending order".
2. Manuell innehållsgranskning — dokumentöversikt: Använd ett webbläsartillägg som HeadingsMap (tillgängligt för Chrome och Firefox) för att generera en visuell översikt över alla rubrikelement på sidan. Granska denna översikt kritiskt: återspeglar den sidans innehållsstruktur på ett korrekt sätt? Representeras varje tydligt avsnitt av en rubrik? Finns det innehållsavsnitt som är synliga på sidan men som inte visas i översikten? Om ja, saknar dessa avsnitt rubriker och sidan underkänns enligt 2.4.10.
3. Skärmläsarnavigering med NVDA och Firefox: Öppna sidan i Firefox med NVDA igång. Tryck på H för att hoppa framåt mellan rubriker och Shift+H för att gå bakåt. När du landar på varje rubrik, notera om den upplästa rubriken korrekt beskriver innehållet som följer. Notera också om du stöter på några större textblock som aldrig annonseras som tillhörande en rubrik. Öppna NVDAs elementlista (NVDA+F7), välj fliken Headings och granska den fullständiga rubriklistan för att upptäcka saknade eller felmärkta avsnitt.
4. Skärmläsarnavigering med VoiceOver och Safari (macOS/iOS): På macOS, aktivera VoiceOver (Command+F5) och öppna sidan i Safari. Använd VO+Command+H för att navigera mellan rubriker. På iOS använder du rotorn (svep med två fingrar för att ställa in den på Headings) och sveper sedan nedåt för att gå mellan rubriker. Kontrollera att alla innehållsavsnitt är nåbara via rubriknavigering.
5. Skärmläsarnavigering med JAWS och Chrome: I JAWS trycker du på H för att gå igenom rubriker och öppnar rubriklistan med Insert+F6. Granska listan för fullständighet och logisk hierarki. Bekräfta att rubriker inte används enbart för styling — endast genuina avsnittsetiketter ska förekomma som rubriker.
6. Kontroll av navigering med enbart tangentbord: Försök att med enbart tangentbord navigera genom alla större avsnitt på sidan utan att använda rubriker. Notera hur många gånger du måste tabba genom interaktiva element för att nå varje avsnitt. Detta ger en uppfattning om den belastning som läggs på tangentbordsanvändare när korrekt rubrikstruktur saknas.

Hur man åtgärdar

Avsnitt märkta endast med formaterad text — Felaktigt

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

Avsnitt märkta endast med formaterad text — Korrekt

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

Överhoppade rubriknivåer av stilskäl — Felaktigt

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

Överhoppade rubriknivåer av stilskäl — Korrekt

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

Ingen rubrik för ett större sidavsnitt — Felaktigt

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

Ingen rubrik för ett större sidavsnitt — Korrekt

<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-rubrikroll använd utan aria-level — Felaktigt

<!-- 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-rubrikroll använd utan aria-level — Korrekt

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

Vanliga misstag

• Att använda CSS-klasser som .title eller .section-header på <p>- eller <div>-element i stället för faktiska <h1>–<h6>-element: Visuell styling i sig kommunicerar inte struktur till hjälpmedel. Rubriken måste vara ett genuint rubrikelement eller bära en giltig ARIA-rubrikroll med en explicit nivå.
• Att välja rubriknivåer baserat på typsnittsstorlek i stället för dokumenthierarki: Att välja <h4> eftersom den återges i önskad visuell storlek, när den logiskt borde vara en <h2>, bryter dokumentöversikten och förvirrar skärmläsaranvändare som hör "heading level 4" utan någon föregående nivå 2 eller 3.
• Att tillämpa font-size- eller font-weight-överstyrningar för att visuellt förminska <h1> i stället för att använda ett rubrikelement på lägre nivå: Detta skapar en mismatch mellan visuell hierarki och semantisk hierarki; använd CSS för att styra storlek och inbyggda rubriknivåer för att förmedla struktur.
• Att utelämna rubriker i dynamiskt inladdade innehållsavsnitt (t.ex. flikpaneler, modala dialoger eller AJAX-inlästa resultat): När nytt innehåll injiceras på sidan saknar det ofta rubrikstruktur. Varje dynamiskt renderat avsnitt bör innehålla en lämplig rubrik så att användare som navigerar med rubriker inte blir strandsatta i en omärkt innehölsö.
• Att bara använda en <h1> för sidtiteln och inga ytterligare rubriker på en sida med fem eller fler tydliga innehållsavsnitt: Förekomsten av en <h1> uppfyller automatiska kontroller men uppfyller inte 2.4.10 om efterföljande större avsnitt är omärkta.
• Att kapsla in rubriker i <button>- eller <a>-element: Att placera en rubrik inuti ett interaktivt element skapar motstridiga roller för hjälpmedel och är ogiltig HTML. Rubriker ska märka innehållsavsnitt, inte interaktiva kontroller.
• Att använda role='heading' utan att ange aria-level: Den implicita standardnivån i ARIA är 2, vilket kanske inte stämmer med den avsedda dokumentstrukturen och tyst skapar en felaktig översikt om avsnittet är på en annan nivå.
• Att lägga till dekorativa eller upprepade rubriker — t.ex. att upprepa sidtiteln som en <h2> i varje innehållskort — som skapar rubrikbrus utan meningsfullt navigationsvärde: Rubriker ska unikt och korrekt beskriva avsnittet de introducerar; redundanta rubriker urholkar nyttan av rubriknavigering för skärmläsaranvändare.
• Att dölja rubriker visuellt med display:none eller visibility:hidden i ett försök att tillhandahålla en struktur endast för skärmläsare: Dessa CSS-egenskaper döljer också elementet för hjälpmedel. Använd den standardiserade tekniken för visuellt dolda element (position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);) om en rubrik behöver finnas i tillgänglighetsträdet men inte vara synlig på skärmen.
• Att inte uppdatera rubrikstrukturen när sidinnehållet omorganiseras under en redesign: Rubriker som lades till under den initiala utvecklingen lämnas ofta föråldrade när innehållsavsnitt omordnas, slås ihop eller ersätts. Rubrikgranskningar bör vara en del av varje innehålls- eller designgranskningscykel, inte en engångsåtgärd för tillgänglighet.

Relation till Turkiets tillgänglighetsreglering

Turkiets Presidential Circular 2025/10, publicerad i den officiella tidningen nr 32933 den 21 juni 2025, fastställer omfattande krav på digital tillgänglighet för ett brett spektrum av aktörer som är verksamma i Turkiet. Cirkuläret anpassar sig till WCAG 2.2 som teknisk standard för efterlevnad av digital tillgänglighet och gäller för offentliga institutioner, e-handelsplattformar, banker och finansiella institutioner, sjukhus och vårdgivare, telekommunikationsföretag med 200,000 eller fler abonnenter, resebyråer, privata transportföretag och privatskolor som auktoriserats av utbildningsministeriet (MoNE).

WCAG 2.4.10 — Avsnittsrubriker är ett kriterium på Nivå AAA. Detta innebär att det inte ingår bland de minimikriterier som juridiskt krävs enligt cirkuläret, som föreskriver överensstämmelse på nivå A och AA för berörda aktörer. Cirkulärets övergripande syfte är dock att säkerställa meningsfull digital tillgång för alla användare, och AAA-kriterier som 2.4.10 erkänns uttryckligen som representerande bästa praxis för tillgänglighet.

För berörda aktörer — särskilt offentliga institutioner, banker, sjukhus och stora telekomoperatörer — visar implementering av WCAG 2.4.10 ett engagemang för tillgänglighet som går utöver de regulatoriska minimikraven. I praktiken är välstrukturerade rubrikhierarkier också en förutsättning för flera kriterier på AA-nivå (såsom 1.3.1 Info and Relationships och 2.4.6 Headings and Labels), vilket innebär att organisationer som siktar på full överensstämmelse på AA-nivå naturligt kommer att närma sig efterlevnad av 2.4.10 som en del av det arbetet.

Specialiserade tjänster som riktar sig till användare med funktionsnedsättning, eller digitala tjänster som erbjuds av offentliga institutioner till en bred medborgargrupp inklusive äldre användare, användare med kognitiva funktionsnedsättningar eller användare av hjälpmedel, skulle särskilt gynnas av full implementering av 2.4.10. Turkiets växande fokus på digitala offentliga tjänster (e-devlet) och expansionen av e-handel gör en robust innehållsstruktur inte bara till ett tillgänglighetskrav utan också till en prioritet för användbarhet och hantering av juridiska risker.

Organisationer i Turkiet som frivilligt certifierar sig enligt WCAG 2.2 Nivå AAA — inklusive 2.4.10 — positionerar sig som ledare inom tillgänglighet, vilket stärker varumärkesförtroendet, minskar risken för rättsprocesser och breddar deras potentiella målgrupp till att omfatta de uppskattningsvis 8,5 miljoner personer med funktionsnedsättning i Turkiet enligt Turkstat (Turkish Statistical Institute, TÜİK).