Toegankelijke koppen

Voor veel mensen begint de ochtend bij een goede bak koffie en een (digitale) krant. Snel kijk je van kop naar kop, op zoek naar die ene tekst die je aanspreekt en overhaalt om de kleine letters te lezen.

Koppen, kopteksten, headings; Allemaal verschillende termen voor de, vaak groter en duidelijker opgemaakte, tekst tussen paragrafen op een pagina.

Koppen helpen om content te verdelen in behapbare brokken door een onderverdeling te maken of juist informatie te groeperen. Zo bieden ze de lezer een structuur om te volgen door een samenvatting te geven van de content die erna komt.

Visuele structuur

Visueel onderscheiden koppen zich duidelijk van de gewone tekst. Ze zijn voorzien van hun eigen tekststijlen (lettertype, lettergrootte, kleur, gewicht). Voor onderling onderscheid tussen niveaus, worden vaak aflopende lettergrootte gebruikt. Van de grootste letters voor een paginatitel steeds een stapje kleiner voor elk niveau eronder.

Technische structuur

Op het technische gebied van digitale toegankelijkheid zijn koppen ook erg belangrijk. Naast dat ze zichtbaar structuur bieden aan je website, doen ze dat namelijk ook op een technische manier. Daarvoor moeten ze wel goed worden opgemaakt met semantische HTML.

Terug naar het voorbeeld van de krant. Bezoekers die gebruikmaken van ondersteunende programma's als screen readers (voorlees software), gebruiken deze koppen namelijk op eenzelfde manier. Door snelkoppelingen kunnen ze makkelijk en snel van kop naar kop springen om zo een goed overzicht van de pagina te krijgen.

Relevante WCAG succescriteria

We weten nu dat koppen een goede toevoeging zijn voor je website of document, maar hoe zit het met de richtlijnen? Er zijn binnen de WCAG richtlijnen drie succescriteria belangrijk voor het gebruik van koppen op je website of in documenten. We kijken in de loop van dit artikel naar de volgende succescriteria:

• 1.3.1 Info en relaties (Niveau A)
• 2.4.6 Koppen en labels (Niveau AA)
• 2.4.10 Paragraafkoppen (Niveau AAA)

1.3.1 Info en relaties

Dit succescriterium stelt niet dat je koppen moet gebruiken op je pagina. Onder succescriterium 1.3.1 valt wel dat, wanneer je koppen gebruikt, deze worden opgemaakt met semantische HTML.

Voor koppen betekent het dat je gebruikmaakt van de HTML heading elementen h1 tot en met h6. Hierbij is h1 het hoogste niveau. 

Soms is het niet mogelijk om bestaande HTML aan te passen. Een andere mogelijkheid is dan om ARIA toe te passen. Daarvoor gebruik je de attributen role="heading"⁣, in combinatie met een aria-level="". 

Een veelgemaakte fout is dat koppen worden opgemaakt met dikke letters (<b> of <strong>). Visueel wordt er dan iets gezegd over de structuur, maar daarmee wordt geen technische relatie gelegd met de rest van de tekst. Hetzelfde geldt andersom, je moet geen koppen gebruiken voor decoratie.

2.4.6 Koppen en labels

Ook dit succescriterium stelt nog geen eisen over de aanwezigheid van koppen op je pagina. Het gaat bij succescriterium 2.4.6 om de vraag of de koppen die je gebruikt betekenisvol zijn. 

Teruggaand naar het voorbeeld van de krant, zijn koppen bedoeld om snel een overzicht te krijgen van de content. Een kop moet daarom vertellen, samenvatten, waar de content die volgt over gaat. Om dat om een goede manier te doen beschikt een goede kop over de volgende kenmerken:

• Een kop is omschrijvend
• Een kop is niet te lang
• Een kop is duidelijk

2.4.10 Paragraafkoppen

Op het hoogste niveau van de WCAG, niveau AAA vinden we succescriterium 2.4.10. Pas vanaf dit niveau gaat de WCAG eisen stellen over het gebruik van koppen in je tekst. Hier wordt gezegd dat je tekst, als die uit verschillende onderdelen bestaat, van koppen moet worden voorzien. De pagina waar je je nu op bevindt, is daar een voorbeeld van.

Het is niet in elke situatie mogelijk om aan deze eis te voldoen, afhankelijk van zaken als content of technische mogelijkheden. Daarnaast is het een subjectief onderwerp om te toetsen wanneer een tekst dan voorzien moet worden van koppen en wanneer (nog) niet. Daarom valt hij onder niveau AAA. 

Omdat koppen in een goede structuur helpend zijn voor iedere bezoeker, raad ik altijd aan deze (waar mogelijk) te gebruiken.

Wat mag nou wel, wat mag niet?

Goede semantische koppen gaan hand in hand met de (digitale) toegankelijkheid van je teksten. We hebben gezien dat ze structuur bieden, zowel visueel als technisch, en dat ze daarmee mensen de mogelijkheid geven om snel belangrijke informatie te vinden. Maar hoe zit het nu met de regels? Wat mag wel onder de WCAG en wat wordt als fout aangemerkt?

Zijn koppen verplicht?

Zoals we bij de genoemde WCAG succescriteria hebben gezien worden er op niveau A en AA nog geen eisen gesteld over de aanwezigheid van koppen. Dit betekent dat op het toetsingsniveau dat we in Europa als standaard hanteren onder EN 301 549 (pdf, versie 3.2.1) er geen verplichting is om koppen toe te passen.

Succescriterium 2.4.6 stelt namelijk niet de eis dat koppen worden gebruikt, alleen dat aanwezige koppen betekenisvol zijn. Succescriterium 1.3.1 stelt alleen dat, daar waar koppen worden gebruikt, deze semantisch zijn opgemaakt.

Een, geen of meerdere <h1> koppen?

Een belangrijk voordeel van het gebruik van koppen in je tekst is structuur. Een <h1> wordt als hoogste niveau vaak gebruikt om de paginatitel weer te geven.

De WCAG stelt echter geen eisen aan de aanwezigheid van een paginatitel op deze manier. Succescriterium 2.4.2 'Paginatitel' eist alleen een paginatitel via een <title> element. 

Ook de HTML specificaties stellen geen eisen aan de aanwezigheid van dit element. Hoewel het voor bezoekers verwarrend kan zijn, zijn meerdere H1 elementen op een pagina volgens de specificaties ook toegestaan. 

Een situatie waarin dat wel eens voorkomt, is een overzichtspagina van meerdere artikelen, waarbij per artikel een nieuwe H1 voor de titel wordt gebruikt. Het is daarbij wel belangrijk dat er ook geen visueel onderscheid is tussen de verschillende H1 koppen, omdat anders visueel alsnog een andere structuur wordt overgebracht.

Het volgende punt, 'Koppen volgorde of overslaan', is in deze situatie ook belangrijk om rekening te houden.

Koppen volgorde of overslaan

Een onderwerp waar veel discussie over is, is het overslaan van niveaus in koppen. Een van de argumenten is dat het natuurlijk niet bijdraagt aan het bieden van een goed opgebouwde pagina.

Een niveau overslaan hoeft echter geen fout te zijn, als de rangorde maar klopt. 

<h2>Pannenkoek met spek</h2>
<p>Voor een goede pannenkoek met spek, is het belangrijk dat je […] </p>
<h4>Bereidingswijze</h4>
<ol>
    <li>Zeef 400 gram volkorenbloem boven een beslagkom […] </li>
</ol>

In dit voorbeeld zien we dat we van een H2 doorgaan naar een H4. Omdat de relatieve volgorde nog klopt (de bereidingswijze is informatie die hoort binnen het bovenliggende stuk over pannenkoeken met spek) is dit geen fout onder de WCAG.

De WCAG hanteert de term 'passend bij de content' bij techniek H42 (engels, w3.org), wat ruimte over laat voor interpretatie. De werkgroep heeft hier nadrukkelijk voor gekozen vanuit pragmatisch en realistisch oogpunt. Zeker als het bijvoorbeeld gaat om het inladen van externe content is het niet altijd mogelijk een juiste volgorde te hanteren. 

Conclusie

We hebben gezien dat het gebruik van koppen belangrijk is voor de toegankelijkheid van je website. Aan de andere kant worden er in de WCAG niet veel harde eisen aan koppen gesteld, vaak uit praktisch oogpunt. 

Bij een toetsing is het daarom belangrijk daar onderscheid in te maken, want hoewel het vaak afbreuk doet aan je website, is het dus niet per se een fout onder de WCAG.

Het blijft sterk aan te raden goed naar je gebruik van koppen te kijken en een juiste rangorde aan te houden. Bij bevindingen maak ik hier persoonlijk een opmerking over in een rapportage. Puur ter attentie, zodat een redacteur kan kijken of de koppen passend zijn voor (de betekenis van) de content en, of er een mogelijke oplossing is.