WCAG-succescriteria · Level A
WCAG 2.4.2: Pagina getiteld
WCAG 2.4.2 vereist dat elke webpagina een beschrijvende, betekenisvolle titel heeft die het onderwerp of doel ervan identificeert. Dit zorgt ervoor dat gebruikers — vooral degenen die afhankelijk zijn van schermlezers of meerdere tabbladen beheren — zich snel kunnen oriënteren en efficiënt kunnen navigeren.
Wat Deze Regel Betekent
WCAG 2.4.2 Pagina getiteld is een succescriterium op Niveau A onder het principe Bedienbaar. Het stelt: "Web pages have titles that describe topic or purpose." In praktische termen betekent dit dat elk HTML-document dat aan een gebruiker wordt geleverd een <title>-element in de <head>-sectie moet bevatten, en dat dit element tekst moet bevatten die de inhoud, functie of context van de pagina binnen de site op een betekenisvolle manier identificeert.
Het criterium is van toepassing op elke afzonderlijke webpagina — of het nu gaat om een statisch HTML-bestand, een dynamisch gerenderde single-page application (SPA)-view, een modale pagina of een stap in een meerstapswizard. Elk afzonderlijk "scherm" waar een gebruiker direct naartoe kan navigeren of dat de huidige view vervangt, moet een eigen, unieke, beschrijvende titel hebben.
Een pagina voldoet aan dit criterium wanneer het <title>-element aanwezig is, niet leeg is en tekst bevat die het onderwerp of doel van de pagina voldoende beschrijft. De titel hoeft niet uniek te zijn op het hele internet, maar moet specifiek genoeg zijn zodat een gebruiker die alleen de titel hoort of leest, kan begrijpen waar de pagina over gaat zonder extra context nodig te hebben.
Een pagina voldoet niet aan dit criterium wanneer een van de volgende voorwaarden waar is: het <title>-element ontbreekt volledig in de <head>; het <title>-element is aanwezig maar leeg (bevat geen tekst); de titel bevat alleen generieke placeholdertekst zoals "Untitled Document", "New Page" of alleen de kale domeinnaam zonder beschrijvende inhoud; of een single-page application navigeert naar een nieuwe logische view zonder de documenttitel dynamisch bij te werken.
WCAG definieert geen expliciete uitzonderingen voor dit criterium op Niveau A. Elke webpagina — ongeacht de omvang, doelgroep of het doel — moet een beschrijvende titel hebben. Het Understanding-document verduidelijkt echter dat de titel niet het enige identificatiemiddel hoeft te zijn; hij moet simpelweg bestaan en voldoende beschrijvend zijn om als basisoriëntatiepunt te dienen.
Waarom Het Belangrijk Is
De paginatitel is een van de allereerste informatie-elementen die een gebruiker tegenkomt bij het bezoeken van of navigeren tussen webpagina's. Het ontbreken of onvoldoende zijn ervan creëert barrières voor verschillende groepen gebruikers.
Schermlezersgebruikers — van wie de meesten blind zijn of een ernstige visuele beperking hebben — horen de paginatitel direct worden aangekondigd wanneer een pagina laadt of wanneer de focus naar een nieuw document verschuift. Voor ongeveer 2,2 miljard mensen wereldwijd met een of andere vorm van visuele beperking (volgens de Wereldgezondheidsorganisatie) is deze aankondiging de primaire manier om te bevestigen dat de juiste pagina is geladen en om te begrijpen wat deze bevat voordat ze verder verkennen. Zonder een betekenisvolle titel moet een blinde gebruiker die tussen tabbladen navigeert of na een pauze naar een pagina terugkeert, de volledige pagina-inhoud doorlezen om zich opnieuw te oriënteren — een taak die minuten kan duren bij een complexe lay-out.
Gebruikers met cognitieve en leerstoornissen profiteren enorm van duidelijke, consistente paginatitels. Wanneer een gebruiker met geheugenproblemen meerdere tabbladen opent tijdens een onderzoekssessie, is de tabbladtitel vaak het enige zichtbare label voor elk tabblad. Een titel als "Account Settings — Accsible Dashboard" stelt hen in staat onmiddellijk het juiste tabblad te identificeren; een titel als "Page" of een lege titel dwingt hen elk tabblad aan te klikken om de inhoud te ontdekken, wat cognitieve belasting en mogelijke verwarring veroorzaakt.
Motorisch beperkte gebruikers die afhankelijk zijn van spraakbesturingssoftware (zoals Dragon NaturallySpeaking) kunnen paginatitels gebruiken om te verifiëren dat ze de bedoelde bestemming hebben bereikt na het geven van navigatieopdrachten. Duidelijke titels verminderen de noodzaak van herhaalde correcties en opnieuw navigeren, wat zowel tijd als fysieke inspanning bespaart.
Overweeg dit concrete scenario: een ziekenhuispatiënt in Turkije gebruikt een ondersteunende schermlezer om een online afspraakformulier in meerdere stappen in te vullen. Als elke stap de paginatitel niet bijwerkt om de huidige stap weer te geven — bijvoorbeeld "Step 2 of 4: Personal Information — Appointment Booking — Hospital Name" — heeft de patiënt geen manier om na een herlaadbeurt van de pagina of na het overschakelen naar een ander browservenster snel zijn voortgang te bevestigen. Hij moet het volledige formulier opnieuw lezen om te begrijpen waar hij is, wat bijzonder belastend is voor iemand die mogelijk al ziek of gestrest is.
Naast toegankelijkheid hebben paginatitels aanzienlijk SEO-belang. Zoekmachines gebruiken het <title>-element als het primaire label voor zoekresultaatvermeldingen. Een beschrijvende, trefwoordrijke titel verbetert de doorklikratio en vindbaarheid. Websites die WCAG 2.4.2 correct implementeren, komen dus niet alleen hun gehandicapte gebruikers ten goede, maar ook hun algehele organische zoekaanwezigheid — waardoor toegankelijkheid tegelijkertijd een zakelijke en technische winst is.
Gerelateerde Axe-core-regels
- document-title: Dit is de primaire axe-core-regel die is gekoppeld aan WCAG 2.4.2. Deze controleert of het huidige HTML-document een
<title>-element in de<head>bevat en of dat element ten minste enige niet-witruimte-tekstinhoud bevat. De regel markeert een overtreding wanneer het<title>-element volledig ontbreekt, wanneer het bestaat maar leeg is, of wanneer het alleen witruimtetekens bevat. Axe-core rapporteert dit als een kritieke overtreding die is gekoppeld aan WCAG 2.4.2 Niveau A. De regel wordt automatisch uitgevoerd bij het laden van de pagina en zal structurele omissies betrouwbaar detecteren. - Waarom handmatig testen ook nodig is: Geautomatiseerde tools zoals axe-core kunnen bevestigen dat een
<title>-element bestaat en niet leeg is, maar ze kunnen niet beoordelen of de titel betekenisvol of beschrijvend is. Een pagina met<title>aaa</title>of<title>Untitled Document</title>zal slagen voor de geautomatiseerde regel omdat het element aanwezig en niet leeg is, maar voldoet duidelijk niet aan de geest van WCAG 2.4.2. Menselijke beoordeling is nodig om vast te stellen of de titel het onderwerp en doel van de pagina nauwkeurig weergeeft. Evenzo leggen geautomatiseerde scans in single-page applications doorgaans alleen de titel bij de initiële paginalading vast en kunnen ze gevallen missen waarin de titel niet wordt bijgewerkt bij client-side routewijzigingen — die overgangen vereisen handmatige navigatietests.
Hoe te Testen
- Geautomatiseerde scan met axe DevTools of Lighthouse: Open de doelwebpagina in Chrome of Firefox. Open DevTools (F12), ga naar het axe DevTools-paneel (indien geïnstalleerd) of het Lighthouse-tabblad. Voer een toegankelijkheidsaudit uit. Kijk in de axe-resultaten specifiek naar eventuele overtredingen van de
document-title-regel onder de categorie "Critical" of "Serious". Lighthouse zal op vergelijkbare wijze een ontbrekende of lege titel markeren in de toegankelijkheidsaudit. Noteer de exacte pagina-URL en titeltekst (of het ontbreken daarvan) voor je rapport. Herhaal deze test voor elke unieke route of view in de applicatie, inclusief foutpagina's (404, 500) en bevestigingspagina's. - Handmatige browserinspectie: Controleer in een willekeurige browser het label van het browsertabblad — dit moet een betekenisvolle, beschrijvende titel weergeven die de pagina identificeert. Klik met de rechtermuisknop op de pagina en kies "Paginabron weergeven" of open DevTools en ga naar het tabblad Elements. Lokaliseer de
<head>-sectie en controleer of er een<title>-element aanwezig is met passende, niet-generieke tekstinhoud. Controleer of de titel relevant is voor de zichtbare pagina-inhoud en — voor sites met meerdere pagina's — dat deze verschilt van de titels van andere pagina's op een manier die het unieke doel van de pagina weerspiegelt. - Schermlezertest met NVDA + Firefox: Open de pagina met Firefox en activeer NVDA. Wanneer de pagina laadt, moet NVDA de paginatitel onmiddellijk aankondigen. Navigeer weg en terug naar de pagina (met Alt+Pijl links en vervolgens Alt+Pijl rechts) en bevestig dat de juiste titel opnieuw wordt aangekondigd. Trigger in een single-page application een client-side routewijziging en luister naar de bijgewerkte titelaankondiging. Als NVDA niets leest of een generieke/onbruikbare tekenreeks bij het laden van de pagina voorleest, is dit een fout.
- Schermlezertest met VoiceOver + Safari (macOS/iOS): Schakel VoiceOver in (Command+F5 op Mac). Laad de pagina. VoiceOver kondigt de paginatitel aan bij het laden. Gebruik de Rotor (Control+Option+U) en navigeer naar de lijst Web Spots of Headings — de venstertitel die bovenaan de pagina wordt weergegeven, moet overeenkomen met de inhoud van het
<title>-element. Op iOS verschijnt de titel in de Safari-tabbladwisselaar; controleer of deze beschrijvend is. - Schermlezertest met JAWS + Chrome: Open de pagina in Chrome met JAWS actief. JAWS kondigt de paginatitel aan bij het laden. Druk op Insert+F1 om het JAWS Help-venster te openen en bevestig de gerapporteerde paginatitel. Gebruik Insert+T om de titel op elk moment tijdens je sessie te laten voorlezen en te verifiëren dat deze correct is bijgewerkt na SPA-navigatiegebeurtenissen.
- Single-page application (SPA) routewijzigingstest: Navigeer door verschillende views van de SPA (bijvoorbeeld van een homepage naar een productpagina naar een afrekenpagina). Controleer na elke navigatie het label van het browsertabblad en gebruik een schermlezer om te verifiëren dat de titel is bijgewerkt. Als het tabbladlabel gedurende de hele sessie hetzelfde blijft, ongeacht de huidige view, is dit een 2.4.2-fout voor elke view die geen eigen, onderscheidende titel heeft.
Hoe te Herstellen
Ontbrekend title-element — Onjuist
<!DOCTYPE html>
<html lang='tr'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!-- No <title> element present -->
</head>
<body>
<h1>Ürünlerimiz</h1>
</body>
</html>Ontbrekend title-element — Juist
<!DOCTYPE html>
<html lang='tr'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!-- Title added: describes the page topic and includes the site name for context -->
<title>Ürünlerimiz — Accsible Mağaza</title>
</head>
<body>
<h1>Ürünlerimiz</h1>
</body>
</html>Generieke placeholdertitel — Onjuist
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<!-- Generic title provides no useful context to the user -->
<title>Untitled Document</title>
</head>
<body>
<h1>Contact Us</h1>
</body>
</html>Generieke placeholdertitel — Juist
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<!-- Descriptive title: page function first, then site name -->
<title>Contact Us — Accsible Support</title>
</head>
<body>
<h1>Contact Us</h1>
</body>
</html>Single-page application werkt titel niet bij bij routewijziging — Onjuist
<!-- React Router example: title is set only once at app root and never updated -->
<!DOCTYPE html>
<html lang='en'>
<head>
<title>My App</title>
</head>
<body>
<div id='root'></div>
<!-- JavaScript bundle loads React SPA; title never changes during navigation -->
</body>
</html>Single-page application werkt titel niet bij bij routewijziging — Juist
<!-- Use document.title in each route component or a head-management library -->
<!-- Example using React with react-helmet-async -->
<!-- In your ProductPage component: -->
<!-- import { Helmet } from 'react-helmet-async'; -->
<!-- <Helmet><title>{product.name} — Accsible Store</title></Helmet> -->
<!-- Or using plain JavaScript on each route render: -->
<script>
// Called whenever the SPA navigates to a new view
function updatePageTitle(pageTitle, siteName) {
document.title = pageTitle + ' — ' + siteName;
}
// Example: updatePageTitle('Shopping Cart', 'Accsible Store');
// Results in: <title>Shopping Cart — Accsible Store</title>
</script>Meertrapsformulier met identieke titels op elke stap — Onjuist
<!-- Step 1 -->
<title>Checkout — Accsible Store</title>
<!-- Step 2 (same title — user cannot distinguish steps) -->
<title>Checkout — Accsible Store</title>
<!-- Step 3 (same title again) -->
<title>Checkout — Accsible Store</title>Meertrapsformulier met identieke titels op elke stap — Juist
<!-- Step 1: title reflects the current step's purpose -->
<title>Step 1 of 3: Shipping Address — Checkout — Accsible Store</title>
<!-- Step 2: clearly distinct and descriptive -->
<title>Step 2 of 3: Payment Details — Checkout — Accsible Store</title>
<!-- Step 3: confirmation step identified clearly -->
<title>Step 3 of 3: Order Review — Checkout — Accsible Store</title>Veelvoorkomende Fouten
- De standaardtitel van het CMS of framework in productie laten staan: Veel contentmanagementsystemen (WordPress, Drupal, maatwerkframeworks) worden geleverd met placeholdertitels zoals "Just another WordPress site" of de ruwe site-URL. Ontwikkelaars vergeten de titelsjabloon te configureren vóór de lancering, waardoor elke pagina een onhandige of identieke titel heeft. Controleer altijd de titelconfiguratie in je CMS-instellingen en test een live URL vóór release.
- Alleen de sitenaam als titel voor elke pagina gebruiken: Het instellen van
<title>Accsible</title>op elke pagina van een site slaagt voor de geautomatiseerdedocument-title-controle (het element is niet leeg), maar voldoet niet aan de beschrijvende eis van WCAG 2.4.2. Elke pagina moet een titel hebben die haar onderscheidt van andere pagina's op dezelfde site. - De sitenaam vóór de paginaspecifieke inhoud plaatsen: Het patroon
<title>Accsible — Contact</title>dwingt schermlezersgebruikers om eerst naar de merknaam te luisteren voordat ze horen waar de pagina over gaat. Het aanbevolen patroon is<title>Contact — Accsible</title>— paginatopic eerst, sitenaam tweede — zodat gebruikers de meest relevante informatie direct krijgen. - Vergeten
document.titlebij te werken in single-page applications na client-side navigatie: Frameworks zoals React, Vue en Angular werken de documenttitel niet automatisch bij wanneer de route verandert. Ontwikkelaars moeten explicietdocument.titleinstellen of een head-managementbibliotheek gebruiken (zoals react-helmet-async of Vue Meta) in elke routecomponent. Als dit niet gebeurt, delen alle SPA-views na de initiële lading dezelfde titel. - Lege of alleen uit witruimte bestaande title-elementen gebruiken: Een
<title> </title>-element dat alleen spaties of regeleinden bevat, is functioneel identiek aan een ontbrekende titel voor gebruikers van ondersteunende technologie, maar kan over het hoofd worden gezien bij visuele QA omdat het browsertabblad gewoon leeg lijkt in plaats van een fout te geven. Axe-core markeert dit, maar het kan aan handmatige reviewers ontsnappen. - De titel niet bijwerken op foutpagina's (404, 500, validatiefouten): Foutpagina's nemen vaak de titel van de vorige pagina over of vallen terug op een generieke sitenaam. Een schermlezersgebruiker die een 404-fout triggert, moet "Page Not Found — Accsible" horen in plaats van de titel van de pagina waarop hij zich eerder bevond, om te begrijpen dat de navigatie is mislukt.
- Dubbele titels op verschillende pagina's met verschillende inhoud: Wanneer een productoverzichtspagina en een productdetailpagina allebei de titel "Products — Accsible Store" hebben, kunnen gebruikers met cognitieve beperkingen of gebruikers die meerdere tabbladen beheren deze niet van elkaar onderscheiden. Elke logisch verschillende pagina moet een unieke titel hebben die de specifieke inhoud weerspiegelt.
- Dynamisch gegenereerde titels die ruwe sjabloonvariabelen bevatten: Fouten bij server-side rendering kunnen resulteren in titels als
<title>{{page.title}} — MySite</title>wanneer sjabloonvariabelen niet worden gerenderd. Deze slagen voor de niet-lege controle maar bieden geen betekenisvolle informatie. Implementeer geautomatiseerde controles van titelinhoud in je CI/CD-pijplijn om fouten in sjabloonrendering vóór deployment te detecteren. - Titels die te lang zijn of volgepropt met zoekwoorden: Hoewel WCAG geen tekenlimiet vaststelt, worden extreem lange titels (meer dan 60–70 tekens) afgekapt in browsertabbladen en zoekresultaten, en moeten schermlezers de volledige tekenreeks voorlezen voordat ze het meest relevante deel aankondigen. Houd titels beknopt, specifiek en vooraan gevuld met de belangrijkste informatie.
- Titels weglaten uit iframe-documenten: Inline frames (
<iframe>) die een volledig HTML-document laden, moeten ook een betekenisvol<title>-element hebben. Hoewel hetiframe-element zelf eentitle-attribuut moet hebben dat het doel van het frame beschrijft, profiteert het document dat erin wordt geladen ook van een<title>in de eigen<head>voor ondersteunende technologie die in frame-inhoud navigeert.
Relatie met de Toegankelijkheidsregelgeving van Turkije
De Turkse Presidentiële Circulaire 2025/10, gepubliceerd in het Staatsblad nr. 32933 op 21 juni 2025, stelt bindende toegankelijkheidseisen vast voor een breed scala aan digitale diensten in de publieke en private sector. WCAG 2.4.2 Pagina getiteld is een succescriterium op Niveau A, en conformiteit op Niveau A is de verplichte minimumstandaard onder deze circulaire. Onder de circulaire vallende entiteiten moeten binnen één jaar aan Niveau A voldoen als het publieke instellingen zijn, en binnen twee jaar als het organisaties in de private sector zijn.
De circulaire bestrijkt een brede reeks typen entiteiten, waardoor WCAG 2.4.2 relevant is voor een aanzienlijk deel van de digitale economie van Turkije. Onder de circulaire vallende entiteiten zijn alle publieke instellingen en overheidsorganen, e-commerceplatforms, banken en financiële instellingen, ziekenhuizen en zorgaanbieders, telecombedrijven met 200,000 of meer abonnees, erkende reisbureaus, particuliere vervoersbedrijven en particuliere scholen die zijn gemachtigd door het Ministerie van Nationaal Onderwijs (MoNE).
Voor deze organisaties is het niet bieden van een betekenisvolle paginatitel niet slechts een gemiste best practice — het is een risico op niet-naleving van regelgeving. Denk aan de praktische implicaties: een Turks e-commerceplatform waar productcategoriepagina's allemaal dezelfde generieke titel delen, of het afsprakensysteem van een openbaar ziekenhuis waar elke stap in de boekingsflow dezelfde ongedifferentieerde titel heeft, zou in beide gevallen direct in strijd zijn met de toegankelijkheidseisen van de circulaire. Toezichthouders of klagers zouden deze tekortkomingen kunnen aanvoeren als schendingen van de verplichte Niveau A-standaard.
Het correct implementeren van WCAG 2.4.2 is een van de toegankelijkheidsaanpassingen met de laagste inspanning en de hoogste impact, omdat het doorgaans slechts een wijziging op sjabloonniveau vereist om ervoor te zorgen dat elke pagina een goed gevormd, beschrijvend <title>-element heeft. Voor organisaties die onder de circulaire 2025/10 vallen, zou het aanpakken van paginatitels tot de eerste punten moeten behoren die worden opgelost in elk toegankelijkheidsherstelplan — het is eenvoudig te implementeren, gemakkelijk te verifiëren en direct testbaar met de axe-core-regel document-title, waardoor het eenvoudig is om naleving aan auditors of toezichthoudende autoriteiten aan te tonen.
Organisaties die Turkstalige doelgroepen bedienen, moeten er ook voor zorgen dat paginatitels in de juiste taal worden aangeboden die overeenkomt met de pagina-inhoud, als aanvulling op de lang-attribuutvereiste (WCAG 3.1.1), zodat schermlezers in de omgevingen van Turkssprekende gebruikers de aangekondigde titel bij het laden van de pagina correct interpreteren en uitspreken.