Normen · WCAG 2.2

SC 2.4.2 Niveau A WCAG 2.0

Pagina heeft een titel

Elke pagina moet een `<title>` hebben die het onderwerp of doel beschrijft. De titel is wat schermlezers aankondigen bij het laden van de pagina en wat gebruikers zien in tabbladen, bladwijzers, geschiedenis en zoekresultaten.

Wat het vereist

Het <title>-element in de documenthead moet beschrijven waar de pagina over gaat. Schermlezersgebruikers horen het zodra een pagina laadt — het is de eerste oriëntatieaanwijzing die zij ontvangen. Ziende gebruikers zien het in het browsertabblad, in hun geschiedenis, bij bladwijzers en in de SERP. Een titel die niet aan dit succescriterium voldoet, laat al deze gebruikers in het ongewisse over waar zij zijn terechtgekomen.

De titel hoeft niet pakkend te zijn. Hij moet specifiek zijn. „Home“ voldoet niet. „Prijzen — Acme CRM“ voldoet wel.

Hoe te voldoen

  • Schrijf een titel die de pagina eerst benoemt en de site als tweede: "Rolstoeltoegankelijke hotels in Berlijn — Disability World".
  • Werk de titel aan de clientzijde bij bij routewijzigingen in een SPA. Next.js, React Router en Vue Router vereisen allemaal expliciete document.title-updates of frameworkspecifieke hulpmiddelen.
  • Verwerk formulierfouten en zoekresultaten in de titel: "3 fouten — Accountinstellingen" of "Zoeken: chronische vermoeidheid — 47 resultaten".
  • Plaats de meest onderscheidende informatie aan het begin. In een tabbalk van 30 tekens verbergt „Disability World — Hoe SSDI aan te vragen“ het onderwerp.
  • Neem voor meerstapsformulieren de stap op: "Stap 2 van 4: Adres — Voordelen aanvragen".

Veelvoorkomende fouten

  • Algemene sitewijze titels: elke pagina toont "Acme Inc." omdat de template de standaard nooit overschrijft.
  • Leeg <title></title> — verrassend vaak aangetroffen wanneer CMS-sjablonen ervan uitgaan dat de redacteur het altijd invult.
  • Naamloze SPA-routes: de initiële HTML heeft een algemene titel en de router werkt deze niet bij bij navigatie.
  • Titel is uitsluitend de merknaam zonder paginaonderwerp ("Acme" op de contact-, prijs- en productpagina’s).
  • „Untitled Document“ afkomstig van een WYSIWYG-export.

Waarom dit belangrijk is

Voor een schermlezersgebruiker is de paginatitel het equivalent van bovenaan het browservenster kijken — het vertelt hen of zij zich bevinden waar zij wilden zijn. Zonder die titel klinkt elke pagina bij het laden hetzelfde. Het is ook bepalend voor SEO en linkvoorbeelden, waardoor dit succescriterium herstellen doorgaans een eenvoudige overtuiging is voor product-, marketing- en inhoudsteams.