Sectie 1 · Hoofdstuk 2
Paginatitel
De paginatitel is het eerste wat een schermlezer voorleest. Zorg dat die beschrijvend en uniek is.
Wat is de paginatitel?
De paginatitel is de tekst in het <title>-element in de <head> van je HTML-pagina. Je ziet die tekst in het browsertabblad, in zoekresultaten en in bladwijzers. Maar de belangrijkste functie is misschien wel onzichtbaar: een schermlezer leest de paginatitel als eerste voor wanneer een pagina wordt geladen.
Dat maakt de paginatitel de eerste indruk van je pagina. Als die nietszeggend is, weet de gebruiker niet waar die is beland.
Waarom het ertoe doet
WCAG succescriterium 2.4.2 (Paginatitel) vraagt dat webpagina’s een titel hebben die het onderwerp of doel beschrijft.
Stel je voor wat er gebeurt als een schermlezergebruiker meerdere tabbladen open heeft. De enige manier om te weten welk tabblad welke pagina bevat, is de paginatitel. Als alle pagina’s dezelfde titel hebben - of helemaal geen titel - dan is dat onmogelijk.
De paginatitel helpt ook bij:
- Orientatie - de gebruiker weet direct waar die is
- Zoekresultaten - de titel verschijnt als klikbare link in Google
- Bladwijzers - de standaardnaam van een bladwijzer is de paginatitel
- Tabbladen - de enige identifier in een vol tabblad
Regels voor een goede paginatitel
1. Beschrijf het onderwerp van de pagina
De titel moet duidelijk maken waar de pagina over gaat. “Home” is beter dan niets, maar “Contactgegevens | Proper Access” is veel duidelijker.
2. Maak elke titel uniek
Geen twee pagina’s op je website mogen dezelfde titel hebben. Elke pagina heeft andere content, dus elke pagina verdient een eigen titel.
3. Zet de paginanaam voor de sitenaam
Het specifieke deel eerst, het algemene deel daarna. Zo hoort de schermlezergebruiker meteen het belangrijkste.
Fout
<title>Proper Access | Contact</title>
De gebruiker hoort eerst “Proper Access” - bij elk tabblad hetzelfde.
Goed
<title>Contact | Proper Access</title>
De gebruiker hoort meteen “Contact” en weet waar die is.
4. Houd de titel beknopt maar informatief
Een titel hoeft geen volledige zin te zijn. Kort en beschrijvend is het beste. Gebruik een scheidingsteken zoals |, - of -- tussen paginanaam en sitenaam.
Fout
<title>Welkom</title>
“Welkom” zegt niets over de inhoud. Welkom waarbij?
Goed
<title>Digitale toegankelijkheid: audits en advies | Proper Access</title>
Beschrijft direct wat de bezoeker kan verwachten.
Dynamische paginatitels
Bij single-page applicaties (SPA’s) verandert de URL zonder dat de pagina opnieuw wordt geladen. De paginatitel wordt dan niet automatisch bijgewerkt. Je moet dat zelf regelen met JavaScript:
document.title = "Zoekresultaten voor 'toegankelijkheid' | Mijn Site";
Doe dit bij elke route-wijziging. Anders blijft de titel staan van de eerste pagina die de gebruiker heeft geladen.
Tip: paginatitel bij formulieren
Wanneer een formulier een foutmelding oplevert, voeg dan “Fout:” of het aantal fouten toe aan de paginatitel. Bijvoorbeeld: Fout: Contactformulier | Mijn Site. Zo weet een schermlezergebruiker direct dat er iets mis is gegaan.
Paginatitel en linktekst
Er is een relatie tussen linktekst en paginatitels. Als een link zegt “Lees ons privacybeleid”, dan verwacht de gebruiker op een pagina te landen met een titel die iets met privacybeleid te maken heeft. Als de paginatitel dan “Juridisch” is, is dat verwarrend.
Zorg dat de linktekst en de paginatitel van de bestemmingspagina op elkaar aansluiten.
WCAG-succescriteria
| Succescriterium | Niveau | Toelichting |
|---|---|---|
| 2.4.2 Paginatitel | A | Webpagina’s moeten een titel hebben die het onderwerp of doel beschrijft |
Verder lezen
- SC 2.4.2: Paginatitel ontbreekt – wat er misgaat als de titel ontbreekt