WCAG framgångskriterier · Level A
WCAG 2.4.2: Sidan har titel
WCAG 2.4.2 kräver att varje webbsida har en beskrivande, meningsfull titel som identifierar dess ämne eller syfte. Detta säkerställer att användare – särskilt de som förlitar sig på skärmläsare eller hanterar flera flikar – snabbt kan orientera sig och navigera effektivt.
Vad den här regeln innebär
WCAG 2.4.2 Page Titled är ett framgångskriterium på nivå A under principen Operable. Det säger: "Web pages have titles that describe topic or purpose." I praktiska termer betyder detta att varje HTML-dokument som levereras till en användare måste innehålla ett <title>-element inuti <head>-sektionen, och det elementet måste innehålla text som på ett meningsfullt sätt identifierar sidans innehåll, funktion eller sammanhang inom webbplatsen.
Kriteriet gäller för varje enskild webbsida — oavsett om det är en statisk HTML-fil, en dynamiskt renderad single-page application (SPA)-vy, en modalsida eller ett steg i en flerstegsguide. Varje distinkt "skärm" som en användare kan navigera till direkt eller som ersätter den aktuella vyn ska ha en egen unik, beskrivande titel.
En sida klarar detta kriterium när dess <title>-element finns, inte är tomt och innehåller text som på ett adekvat sätt beskriver sidans ämne eller syfte. Titeln behöver inte vara unik på hela internet, men den bör vara tillräckligt specifik för att en användare som bara hör eller läser titeln ska kunna förstå vad sidan handlar om utan att behöva ytterligare sammanhang.
En sida misslyckas med detta kriterium när något av följande villkor är uppfyllt: <title>-elementet saknas helt i <head>; <title>-elementet finns men är tomt (innehåller ingen text); titeln innehåller endast generisk platshållartext som "Untitled Document", "New Page" eller enbart domännamnet utan något beskrivande innehåll; eller en single-page application navigerar till en ny logisk vy utan att uppdatera dokumenttiteln dynamiskt.
WCAG definierar inga uttryckliga undantag för detta kriterium på nivå A. Varje webbsida — oavsett storlek, målgrupp eller syfte — måste ha en beskrivande titel. Dokumentet Understanding klargör dock att titeln inte behöver vara det enda sättet att identifiera sidan; den måste helt enkelt finnas och vara tillräckligt beskrivande för att fungera som en grundläggande orienteringssignal.
Varför det är viktigt
Sidtiteln är en av de allra första informationsbitarna en användare möter när hen anländer till eller navigerar mellan webbsidor. Dess frånvaro eller otillräcklighet skapar hinder för flera olika grupper av användare.
Skärmläsaranvändare — de flesta av dem är blinda eller har betydande nedsatt syn — hör sidtiteln annonseras direkt när en sida laddas eller när fokus flyttas till ett nytt dokument. För cirka 2,2 miljarder människor världen över som har någon form av synnedsättning (enligt Världshälsoorganisationen) är denna upplysning det primära sättet att bekräfta att rätt sida har laddats och att förstå vad den innehåller innan de utforskar vidare. Utan en meningsfull titel måste en blind användare som navigerar mellan flikar eller återvänder till en sida efter en paus läsa igenom hela sidans innehåll bara för att orientera sig igen — en uppgift som kan ta flera minuter vid en komplex layout.
Användare med kognitiva och inlärningssvårigheter har stor nytta av tydliga, konsekventa sidtitlar. När en användare med minnessvårigheter öppnar flera flikar under en researchsession är flikens titel ofta den enda synliga etiketten för varje flik. En titel som "Account Settings — Accsible Dashboard" gör att de omedelbart kan identifiera rätt flik; en titel som "Page" eller en tom titel tvingar dem att klicka på varje flik för att upptäcka dess innehåll, vilket skapar kognitiv belastning och potentiell förvirring.
Motoriskt funktionsnedsatta användare som förlitar sig på röststyrningsprogram (som Dragon NaturallySpeaking) kan använda sidtitlar för att verifiera att de har nått den avsedda destinationen efter att ha gett navigeringskommandon. Tydliga titlar minskar behovet av upprepade korrigeringar och om-navigering, vilket sparar både tid och fysisk ansträngning.
Överväg följande konkreta scenario: en sjukhuspatient i Turkiet använder en assisterande skärmläsare för att fylla i ett onlinebokningsformulär för en tid, uppdelat i flera steg. Om varje steg inte uppdaterar sidtiteln för att återspegla det aktuella steget — till exempel "Step 2 of 4: Personal Information — Appointment Booking — Hospital Name" — har patienten inget sätt att snabbt bekräfta sin progress efter en sidomladdning eller efter att ha växlat flik för att kontrollera ett annat webbläsarfönster. Hen måste läsa igenom hela formuläret igen för att förstå var hen befinner sig, vilket är särskilt betungande för någon som redan kan vara sjuk eller stressad.
Utöver tillgänglighet har sidtitlar betydande SEO-värde. Sökmotorer använder <title>-elementet som den primära etiketten för sökresultatslistningar. En beskrivande, nyckelordsrik titel förbättrar klickfrekvens och upptäckbarhet. Webbplatser som implementerar WCAG 2.4.2 korrekt gynnar därför inte bara sina funktionsnedsatta användare utan också sin övergripande organiska söknärvaro — vilket gör tillgänglighet till en affärsmässig och teknisk vinst samtidigt.
Relaterade Axe-core-regler
- document-title: Detta är den primära axe-core-regeln som är kopplad till WCAG 2.4.2. Den kontrollerar om det aktuella HTML-dokumentet innehåller ett
<title>-element inom<head>och om det elementet innehåller åtminstone viss text som inte bara är blanksteg. Regeln flaggar en överträdelse när<title>-elementet saknas helt, när det finns men är tomt eller när det endast innehåller blankstegstecken. Axe-core rapporterar detta som en kritisk överträdelse mappad till WCAG 2.4.2 nivå A. Regeln körs automatiskt vid sidladdning och fångar strukturella utelämnanden på ett tillförlitligt sätt. - Varför manuell testning också krävs: Automatiserade verktyg som axe-core kan bekräfta att ett
<title>-element finns och inte är tomt, men de kan inte bedöma om titeln är meningsfull eller beskrivande. En sida med<title>aaa</title>eller<title>Untitled Document</title>kommer att klara den automatiserade regeln eftersom elementet finns och inte är tomt, men den misslyckas uppenbart med andemeningen i WCAG 2.4.2. Mänsklig granskning krävs för att bedöma om titeln korrekt återspeglar sidans ämne och syfte. På samma sätt fångar automatiska skanningar i single-page applications vanligtvis bara titeln vid den initiala sidladdningen och kan missa fall där titeln inte uppdateras vid klient-side-routningsändringar — dessa övergångar kräver manuell navigationstestning.
Hur man testar
- Automatisk skanning med axe DevTools eller Lighthouse: Öppna den aktuella webbsidan i Chrome eller Firefox. Öppna DevTools (F12), navigera till panelen axe DevTools (om installerad) eller fliken Lighthouse. Kör en tillgänglighetsgranskning. Titta i axe-resultaten specifikt efter eventuella överträdelser av regeln
document-titleunder kategorin "Critical" eller "Serious". Lighthouse kommer på liknande sätt att flagga en saknad eller tom titel under sin Accessibility-granskning. Notera den exakta sidans URL och titeltext (eller avsaknad av sådan) för din rapport. Upprepa detta test för varje unik route eller vy i applikationen, inklusive felsidor (404, 500) och bekräftelsesidor. - Manuell webbläsarinspektion: I valfri webbläsare, granska webbläsarflikens etikett — den ska visa en meningsfull, beskrivande titel som identifierar sidan. Högerklicka på sidan och välj "View Page Source" eller öppna DevTools och navigera till panelen Elements. Lokalisera
<head>-sektionen och verifiera att ett<title>-element finns med lämpligt, icke-generiskt textinnehåll. Kontrollera att titeln är relevant för det synliga sidinnehållet och — för webbplatser med flera sidor — att den skiljer sig från andra sidors titlar på ett sätt som återspeglar sidans unika syfte. - Skärmläsartestning med NVDA + Firefox: Öppna sidan med Firefox och aktivera NVDA. När sidan laddas ska NVDA omedelbart annonsera sidtiteln. Navigera bort och tillbaka till sidan (med Alt+Vänsterpil och sedan Alt+Högerpil) och bekräfta att rätt titel annonseras igen. I en single-page application, utlös en klient-side-routningsändring och lyssna efter den uppdaterade titelannonseringen. Om NVDA inte läser något eller läser en generisk/ointressant sträng vid sidladdning är detta ett fel.
- Skärmläsartestning med VoiceOver + Safari (macOS/iOS): Aktivera VoiceOver (Command+F5 på Mac). Ladda sidan. VoiceOver annonserar sidtiteln vid laddning. Använd Rotor (Control+Option+U) och navigera till listan Web Spots eller Headings — fönstertiteln som visas högst upp på sidan ska matcha innehållet i
<title>-elementet. På iOS visas titeln i Safaris flikväxlare; verifiera att den är beskrivande. - Skärmläsartestning med JAWS + Chrome: Öppna sidan i Chrome med JAWS igång. JAWS annonserar sidtiteln vid laddning. Tryck Insert+F1 för att öppna JAWS Help-fönstret och bekräfta den rapporterade sidtiteln. Använd Insert+T för att läsa titeln när som helst under sessionen för att verifiera att den har uppdaterats korrekt efter SPA-navigeringshändelser.
- Test av routningsändring i single-page application (SPA): Navigera genom olika vyer i SPA:n (till exempel från en startsida till en produktsida till en kassasida). Efter varje navigering, kontrollera webbläsarflikens etikett och använd en skärmläsare för att verifiera att titeln uppdaterades. Om fliketiketten förblir densamma under hela sessionen oavsett aktuell vy är detta ett 2.4.2-fel för varje vy som inte har en distinkt titel.
Hur man åtgärdar
Saknat title-element — Felaktigt
<!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>Saknat title-element — Korrekt
<!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>Generisk platshållartitel — Felaktigt
<!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>Generisk platshållartitel — Korrekt
<!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 uppdaterar inte titeln vid routningsändring — Felaktigt
<!-- 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 uppdaterar inte titeln vid routningsändring — Korrekt
<!-- 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>Flerstegsformulär med identiska titlar i varje steg — Felaktigt
<!-- 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>Flerstegsformulär med identiska titlar i varje steg — Korrekt
<!-- 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>Vanliga misstag
- Att lämna CMS:ets eller ramverkets standardtitel i produktion: Många innehållshanteringssystem (WordPress, Drupal, egna ramverk) levereras med platshållartitlar som "Just another WordPress site" eller webbplatsens råa URL. Utvecklare glömmer att konfigurera titelmallarna före lansering, vilket gör att varje sida får en oanvändbar eller identisk titel. Verifiera alltid titelkonfigurationen i dina CMS-inställningar och testa en live-URL före release.
- Att använda endast webbplatsens namn som titel för varje sida: Att sätta
<title>Accsible</title>på varje sida på en webbplats klarar den automatiseradedocument-title-kontrollen (elementet är inte tomt) men misslyckas med WCAG 2.4.2:s krav på beskrivning. Varje sida måste ha en titel som skiljer den från andra sidor på samma webbplats. - Att sätta webbplatsens namn först istället för sidans specifika innehåll: Mönstret
<title>Accsible — Contact</title>tvingar skärmläsaranvändare att lyssna på varumärkesnamnet innan de får veta vad sidan handlar om. Det rekommenderade mönstret är<title>Contact — Accsible</title>— sidans ämne först, webbplatsens namn sedan — så att användare får den mest relevanta informationen direkt. - Att glömma att uppdatera
document.titlei single-page applications efter klient-side-navigering: Ramverk som React, Vue och Angular uppdaterar inte dokumenttiteln automatiskt när routen ändras. Utvecklare måste uttryckligen sättadocument.titleeller använda ett head-hanteringsbibliotek (som react-helmet-async eller Vue Meta) i varje route-komponent. Om man misslyckas med detta innebär det att varje SPA-vy efter den initiala laddningen delar samma titel. - Att använda tomma eller endast blankstegs-fyllda title-element: Ett
<title> </title>-element som endast innehåller mellanslag eller radbrytningar är funktionellt identiskt med en saknad titel för användare av hjälpmedelsteknik, men kan förbises i visuell QA eftersom webbläsarfliken helt enkelt ser tom ut istället för att kasta ett fel. Axe-core flaggar detta, men det kan slinka förbi manuella granskare. - Att inte uppdatera titeln på felsidor (404, 500, valideringsfel): Felsidor är oftavervade titeln från föregående sida eller återgår till en generisk webbplatstitel. En skärmläsaranvändare som utlöser ett 404-fel behöver höra "Page Not Found — Accsible" istället för titeln på sidan hen tidigare var på, för att förstå att navigeringen misslyckades.
- Duplicerade titlar på olika sidor med distinkt innehåll: När en produktsida med listning och en produktsida med detaljer båda har titeln "Products — Accsible Store" kan användare med kognitiva funktionsnedsättningar eller de som hanterar flera flikar inte skilja dem åt. Varje logiskt distinkt sida bör ha en unik titel som återspeglar dess specifika innehåll.
- Dynamiskt genererade titlar som innehåller råa mallvariabelnamn: Fel i server-side-rendering kan resultera i titlar som
<title>{{page.title}} — MySite</title>när mallvariabler inte renderas. Dessa klarar kontrollen för icke-tomma titlar men ger ingen meningsfull information. Implementera automatiska kontroller av titelns innehåll i din CI/CD-pipeline för att fånga fel i mallrendering innan driftsättning. - Titlar som är för långa eller fullproppade med nyckelord: Även om WCAG inte anger någon teckenbegränsning blir alltför långa titlar (över 60–70 tecken) avkortade i webbläsarflikar och sökresultat, och skärmläsare måste läsa igenom hela strängen innan de annonserar den mest relevanta delen. Håll titlarna kortfattade, specifika och frontladdade med den viktigaste informationen.
- Att utelämna titlar från iframe-dokument: Inline-ramar (
<iframe>) som laddar ett fullständigt HTML-dokument bör också ha ett meningsfullt<title>-element. Även om självaiframe-elementet ska ha etttitle-attribut som beskriver ramens syfte, drar dokumentet som laddas inuti också nytta av ett<title>i sitt eget<head>för hjälpmedelsteknik som navigerar in i raminnehållet.
Relation till Turkiets tillgänglighetsreglering
Turkiets presidentdekret 2025/10, publicerat i den officiella tidningen nr 32933 den 21 juni 2025, fastställer bindande tillgänglighetskrav för ett brett spektrum av digitala tjänster inom offentlig och privat sektor. WCAG 2.4.2 Page Titled är ett framgångskriterium på nivå A, och nivå A-efterlevnad är den obligatoriska miniminivån enligt detta dekret. Berörda aktörer måste uppnå nivå A-efterlevnad inom ett år om de är offentliga institutioner, och inom två år för privata organisationer.
Decretet omfattar en bred uppsättning aktörstyper, vilket gör WCAG 2.4.2 relevant för en betydande del av Turkiets digitala ekonomi. Berörda aktörer inkluderar alla offentliga institutioner och statliga organ, e-handelsplattformar, banker och finansiella institutioner, sjukhus och vårdgivare, telekommunikationsföretag med 200,000 eller fler abonnenter, licensierade resebyråer, privata transportföretag och privatskolor auktoriserade av Ministry of National Education (MoNE).
För dessa organisationer är det inte bara en förbiseende av bästa praxis att inte tillhandahålla en meningsfull sidtitel — det är en risk för regulatorisk bristande efterlevnad. Tänk på de praktiska konsekvenserna: en turkisk e-handelsplattform där produktsidor för kategorier alla delar samma generiska titel, eller ett offentligt sjukhus bokningssystem för tider där varje steg i bokningsflödet har samma odifferentierade titel, skulle båda stå i direkt strid med dekretets tillgänglighetskrav. Tillsynsmyndigheter eller klagande skulle kunna åberopa dessa brister som överträdelser av den obligatoriska standarden på nivå A.
Att implementera WCAG 2.4.2 korrekt är en av de mest lättgenomförda och mest effektfulla tillgänglighetsåtgärderna som finns, eftersom det vanligtvis bara kräver en ändring på mallnivå för att säkerställa att varje sida har ett välformat, beskrivande <title>-element. För organisationer som omfattas av dekret 2025/10 bör åtgärdande av sidtitlar vara bland de första punkterna som löses i en åtgärdsplan för tillgänglighet — det är enkelt att implementera, lätt att verifiera och kan testas direkt med axe-core-regeln document-title, vilket gör det enkelt att demonstrera efterlevnad för revisorer eller tillsynsmyndigheter.
Organisationer som betjänar turkisktalande målgrupper bör också säkerställa att sidtitlar tillhandahålls på rätt språk som matchar sidans innehåll, som komplement till kravet på lang-attributet (WCAG 3.1.1), så att skärmläsare i turkisktalande användares miljöer korrekt tolkar och uttalar den annonserade titeln vid sidladdning.