Headings: alleen voor primaire content

Iedereen die mijn artikelen kent weet dat ik toegankelijkheid van websites belangrijk vind. Er is echter een trend om headings (kopopmaakprofielen) te misbruiken met als argument een betere toegankelijkheid, bijvoorbeeld headings voor het menu. Headings zijn echter bedoeld voor het structureren van de primaire content van een pagina. En nergens anders voor. Dat is goed voor toegankelijkheid, goed voor vindbaarheid en past in het principe van zelfstandige content. En daarmee is het uiteindelijk goed voor de gebruiker.

Primaire, secundaire en metacontent

Wat is content? Content is in principe alle informatie die op een website is te vinden. In dit artikel gaan we uit van 3 soorten content: primaire-, secundaire- en metacontent. In het screenshot hieronder (gemeente Deventer, overigens een van de betere gemeentewebsites) zijn de primaire en secundaire content aangegeven.

Primaire content

Als we uitgaan van een artikel – bijvoorbeeld het bovenstaande over het paspoort -, dan draait de webpagina primair om het onderwerp van dit artikel, het paspoort. Dit noem ik de primaire content van de pagina.

Voor de vindbaarheid van het artikel is deze content het belangrijkst. Mensen zoeken immers naar een bepaald onderwerp, in dit geval informatie over een paspoort aanvragen. Pas als de informatie interessant blijkt, kijkt men verder, bijvoorbeeld naar gerelateerde informatie of naar de afzender om een idee te krijgen van de betrouwbaarheid van de informatie.

Secundaire content

Op een webpagina is meer informatie dan alleen de primaire content van het artikel. Er is bijvoorbeeld ook nog:

• een header: de bovenkant van de pagina met bijna altijd het logo, soms een slogan van de organisatie, de zoekfunctie, de taalkeuze en soms de mogelijkheid tot inloggen;
• een menu: links, rechts en/of boven;
• een nieuwsblok;
• een blok met ‘Direct naar’ (of een variant daarop);
• een footer: de onderkant van de pagina, vaak met enkele menuknoppen, zoals sitemap en contact.

Deze informatie is de secundaire content van de pagina. In het voorbeeld hierboven van de gemeente Deventer is dat links het menu met ‘Producten en Diensten’ en rechts de blokken ‘Zie ook’ en ‘Digitaal loket’.

Metacontent

Naast alle zichtbare informatie kent een pagina ook nog informatie die we niet direct kunnen zien. Deze informatie is wel zichtbaar in de broncode van de pagina. Het gaat het om de informatie die in de metatags staan. Dit zijn bijvoorbeeld de metatag keywords, metatag description en de Dublin Core Metadata. Het belang van deze metatags was ooit groot, maar is tegenwoordig minimaal. We bespreken deze metacontent verder niet in dit artikel.

Structureren van primaire content

Een artikel heeft een bepaalde structuur, net zoals een rapport of een boek dat heeft. Voor het aanbrengen van de structuur gebruik je koppen en tussenkoppen. Vanuit het oogpunt van usability, vindbaarheid en toegankelijkheid is het belangrijk dat deze kopteksten de juiste HTML-code meekrijgen. Zo is de titel bovenaan de pagina omsloten door een heading1-tag (h1-tag):

<h1>Paspoort</h1>

De paragraafkoppen hebben vervolgens een heading2-opmaak (h2). Subkoppen binnen een paragraaf krijgen een h3 enzovoort. Bijvoorbeeld:

<h2>Omschrijving</h2>

<p>Stukje tekst</p>

<h3>Aanvragen</h3>

Door content met deze headings te structureren is de content optimaal toegankelijk voor mensen met braille- en spraakuitvoer. Zij gebruiken voor het snel scannen van een pagina namelijk een zogenaamde headingslist (zie afbeelding hieronder). Via hun software vragen zij deze lijst op. In deze lijst staan alle headings en zo krijgen ze snel een overzicht van de pagina.

Ook voor de vindbaarheid in zoekmachines zijn deze headings belangrijk. Zoekmachines zoals Google gaan ervan uit dat teksten in headings belangrijk zijn en geven ze daarom extra gewicht mee bij de indexering. Ze dragen daarmee bij aan een betere vindbaarheid van het artikel.

Tot slot zijn headings ook goed voor de uniforme opmaak van een pagina. Als een webredactie consequent de koppen meegeeft, dan hebben alle pagina’s een vergelijkbare opmaak. En dat is goed voor de usability van de site.

Gebruik geen headings voor secundaire content

Omdat de headings de structuur van een artikel weergeven, moeten deze alleen gebruikt worden voor de structurering van de primaire content. Ook hier duiken de laatste tijd weer allerlei vreemde implementaties op: de headings 2 worden dan gebruikt om de secundaire content te ontsluiten. Dus het menu links heeft een h2, het nieuwsblok rechts en de zoekfunctie hebben een h2 enzovoort.

Dit is ook te zien op de website van de gemeente Deventer (zie screenshot hieronder). De h1 is wel goed geplaatst, namelijk op ‘Paspoort’, want dat is de titel van de pagina. In de primaire content zelf is alleen ‘In het kort’ een heading 2 gegeven. Alle andere h2’s worden gebruikt voor secundaire content, zoals ‘Producten en diensten’, ‘De vraag is’, ‘Gemeente en Openingstijden’.

Het argument voor deze wijze van implementeren is enkel omdat het beter zou zijn voor de toegankelijkheid. Door deze blokken een h2 mee te geven, komen ze terug in de headingslist en kunnen ze zo makkelijk bereikt worden. Dit is een vreemde redenering: omdat spraak- en brailleuitvoer makkelijk headingslisten weergeven gaan we de structuur van pagina’s helemaal omgooien? Zodanig dat ze minder goed vindbaar zijn in zoekmachines? Want die krijgen allemaal minder relevante en niet-betekenisvolle informatie in h2-tags in hun database. Ook vanuit het idee van herbruikbare content (bijvoorbeeld vanuit een XML-formaat) is dit niet logisch.

Het gebruik van headings voor het ontsluiten van secundaire content, zoals een menu, is niet juist. Hoe kun je deze blokken wel goed ontsluiten voor mensen die afhankelijk zijn van spraak-/brailleuitvoer?

Een alternatief is te zien op de website van de gemeente Leusden (hoewel ze verder de headings volledig verkeerd gebruiken). Onzichtbaar bij een gewone weergave maar wel aanwezig in de broncode staan bovenaan enkele snellinks naar het menu en dergelijke. Via CSS wordt deze informatie in de gewone weergave verborgen. Bij het weglaten van de CSS wordt het wel zichtbaar. Daarmee worden de blokken direct toegankelijk en zijn ze voor gebruikers van braille- en spraakuitvoer direct bereikbaar.

Een ander alternatief vinden we in HTML 5. In HTML 5 wordt het mogelijk veel meer semantiek aan te brengen in de HTML-code (zie Semantics in HTML 5). Met het attribuut ‘role’ kun je uitstekend de verschillende blokken aangeven. Het menu krijgt dan bijvoorbeeld: role=’navigation’. We zullen echter nog even moeten wachten totdat HTML 5 in alle browsers is geïmplementeerd.

heading 1 is voor de titel van de pagina en nergens anders voor

De heading 1 (h1) is de hoogste in de hiërarchie van headings. De titel van een artikel staat ook bovenaan de hiërarchische structuur van een pagina. Daarom heeft een titel een h1-opmaak. Ook zoekmachines geven h1 het meeste gewicht.

Helaas zijn sommige webbouwers en webeigenaren de laatste tijd de verkeerde kant opgegaan. Ze zijn de h1 gaan gebruiken voor de afzender van de site. Vanuit de optiek van de bezoeker en de zoekmachine is dat een vreemde en onjuiste keuze. Mensen zoeken eerst op inhoud en pas als deze is gevonden zijn ze geïnteresseerd in de afzender, bijvoorbeeld, of de informatie uit een betrouwbare bron komt.

Een voorbeeld waarin dit mis gaat is de website van het waterschap Hunze & Aa’s, www.hunzeenaas.nl (zie afbeelding hieronder). Elke pagina heeft als heading1-tekst “Logo Waterschap Hunze & Aa’s”. De eigenlijke titel van de pagina heeft een h2 (zelfs nog een dubbele).

Ik heb nog eens nagekeken hoe dit oorspronkelijk bedoeld is door de ‘uitvinder’ van het World Wide Web, Tim Berners Lee. In zijn boek ‘Weaving the Web’ (ik zal de pagina nog eens opzoeken) geeft hij aan dat de heading 1 bedoeld is voor de titel van de pagina. Sommige mensen zullen volhouden dat hij wellicht bedoeld heeft dat de titel gelijk is aan de afzender. Dat snijdt geen hout: dan zouden alle artikelen van een website dezelfde titel hebben. Dat zal nooit de bedoeling zijn geweest.

Elke pagina heeft één h1

Een artikel heeft één titel. Er kan natuurlijk wel een sub of supertitel (chapeau) zijn, maar een artikel heeft één titel. Een webpagina heeft één h1.

Ook deze richtlijn wordt vaak niet goed geïmplementeerd. Zo gebruikt de gemeente Leusden maar liefst 9 h1-tags voor de structuur van een pagina (zie hieronder).

Sla geen niveaus over

Na een h2 kan nog een h2 komen of een h3. En geen h4. Zo geldt dat voor alle niveaus. Dit is ook een eis in Webrichtlijnen 1. Vergelijk dit met hoe je een gewoon rapport opmaakt. Daar start je ook direct na de titel van een hoofdstuk met een paragraaf en niet met een subparagraaf.

Een voorbeeld waar dit goed gaat is de overzichtspagina van WCAG 2 op de site van het W3C, Web Content Accessibility Guidelines (WCAG) 2.0.

Headings op de homepage

Een bijzondere pagina is de homepage. Wat is nu de titel van de homepage, want de pagina heeft niet echt één onderwerp? In dit geval ontsluit de pagina de rest van de site. Gebruikelijk is dat deze pagina ‘home’ heet. Omdat ‘home’ voor een bezoeker van buiten de site geen inhoud weergeeft, is het goed om hier – naast home – ook het onderwerp van de site te noemen. Dat kan de naam van de afzender zijn, maar dat hoeft niet.

Een homepage bevat vaak blokken met informatie, bijvoorbeeld een blok met nieuws of een blok met snellinks. Gebruik voor blokken die op elke pagina worden getoond ook geen headings. Gebruik daarvoor bijvoorbeeld snellinks die via CSS onzichtbaar zijn gemaakt. Geef de blokken in het primaire contentvlak h2-tags mee. Het nieuwsblok krijgt dan bijvoorbeeld een h2 en de nieuwsberichten een h3.

Headings bij een zoekresultatenpagina

Een andere bijzondere pagina is de zoekresultatenpagina (Search Engine Results Page of SERP). Google gebruik voor haar resultaten ook headings. Geef elk zoekresultaat een h2. Dat is ideaal voor mensen met spraak- en brailleuitvoer, want ze kunnen makkelijk van resultaat naar resultaat springen. De titel van deze pagina is ‘Zoekresultaten’, eventueel aangevuld met het aantal resultaten, en heeft deze een h1-opmaak.

Conclusie

Het lijkt alsof webbouwers en webeigenaren de laatste tijd verder verwijderd zijn geraakt van een goede implementatie van headings, dit alles met als argument toegankelijkheid. Het gaat hierbij met name om het gebruik van headings voor secundaire content en het gebruik van de h1 voor de afzender van de site. Het gebruik van headings voor secundaire content is echter helemaal niet nodig voor een betere toegankelijkheid. Er kunnen beter enkele links worden toegevoegd, die via CSS onzichtbaar worden gemaakt. Op termijn kan daar het role-attribuut in HTML 5 voor gebruikt worden.

Het gebruik van de h1 voor de afzender van de site is helemaal nergens goed voor. Gebruik gewoon de h1 voor de titel van de primaire content, de content waar de bezoeker voor komt.