Campus Design System

Appearance

2.4.2 Paginatitel niveau A ​

Uitleg ​

Het WCAG-criterium 2.4.2 Paginatitel vereist dat elke webpagina een duidelijk en uniek titel heeft die goed aangeeft waar de pagina over gaat. De titel moet het voor de gebruiker gemakkelijk maken om te begrijpen wat ze kunnen verwachten van de pagina en om deze te onderscheiden van andere pagina’s op dezelfde website.

Dit is vooral belangrijk voor gebruikers die een schermlezer gebruiken, omdat een goed geformuleerde paginatitel hen helpt snel de inhoud van de pagina te begrijpen zonder de hele pagina te hoeven doorleiden. Ook voor gebruikers die veel tabbladen open hebben staan in hun browser, kan een duidelijke titel helpen om de tabbladen beter te organiseren.

Wat betekent dit in de praktijk? ​

Elke webpagina moet een titel bevatten die informatief is en de inhoud of het doel van de pagina weerspiegelt. Het moet eenvoudig zijn om onderscheid te maken tussen verschillende pagina's op dezelfde website. De titel wordt meestal weergegeven in de browser-tab, maar wordt ook door schermlezers voorgelezen bij het navigeren tussen pagina's.

De titel moet kort en krachtig zijn, zonder overbodige woorden, en direct aangeven waar de gebruiker zich bevindt. Als een titel te vaag is of niet specifiek genoeg, kan het verwarrend zijn voor gebruikers die afhankelijk zijn van tekstgeleide technologieën.

Oplossing voor dit probleem ​

Zorg ervoor dat elke pagina een unieke en betekenisvolle titel heeft die duidelijk aangeeft waar de pagina over gaat. Vermijd generieke titels zoals "Pagina 1" of "Welkom", en gebruik in plaats daarvan titels die informatief zijn en de inhoud beschrijven.

Voorbeeld van het probleem ​

Stel je voor dat een website meerdere pagina's heeft met de titel "Home", ongeacht de inhoud van die pagina. Dit maakt het voor gebruikers moeilijk om de verschillende pagina's te onderscheiden, vooral als ze meerdere tabbladen in hun browser open hebben staan of als ze een schermlezer gebruiken.

Oplossing voor dit probleem ​

De oplossing zou zijn om pagina's een titel te geven die de inhoud of het doel duidelijk reflecteert. Bijvoorbeeld:

Goed voorbeeld:

html
<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta charset="UTF-8" />
    <title>Contact - Onze Webwinkel</title>
  </head>
  <body>
    <h1>Contacteer Ons</h1>
    <p>Informatie over hoe je ons kunt bereiken...</p>
  </body>
</html>

In dit voorbeeld geeft de paginatitel "Contact - Onze Webwinkel" duidelijk aan dat de gebruiker op de contactpagina van de website is, wat nuttig is voor zowel gebruikers als schermlezers.

Slecht voorbeeld:

html
<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta charset="UTF-8" />
    <title>Pagina 1</title>
  </head>
  <body>
    <h1>Welkom</h1>
    <p>Inhoud van de pagina...</p>
  </body>
</html>

In dit geval is de titel "Pagina 1" te vaag en biedt het geen informatie over de inhoud van de pagina. Dit kan verwarrend zijn voor gebruikers die proberen de pagina's in hun browser of schermlezer te identificeren.

Belangrijke overwegingen ​

  • Unieke titels: Zorg ervoor dat elke pagina op je website een unieke titel heeft die de inhoud of het doel van de pagina weerspiegelt.
  • Schermlezers: Schermlezers lezen de paginatitel voor, dus het is belangrijk om ervoor te zorgen dat de titel duidelijk is en nuttige context biedt.
  • Korte en informatieve titels: De titel moet kort genoeg zijn om in de browser-tab weergegeven te kunnen worden, maar tegelijkertijd voldoende informatie bieden over de inhoud van de pagina.

Tools en Hulpmiddelen ​

  • WAVE Accessibility Tool: Deze tool helpt je om te controleren of je pagina een juiste paginatitel heeft die toegankelijk is. WAVE Tool.
  • aXe Accessibility Tool: Dit is een handige tool voor het testen van toegankelijkheidsrichtlijnen, inclusief die voor het instellen van een goede paginatitel. aXe Tool.

Referenties ​