Critères de succès WCAG · Level A
WCAG 2.4.2 : Page titrée
Les WCAG 2.4.2 exigent que chaque page web ait un titre descriptif et significatif qui identifie son sujet ou son objectif. Cela permet aux utilisateurs — en particulier ceux qui s’appuient sur des lecteurs d’écran ou qui gèrent plusieurs onglets — de s’orienter rapidement et de naviguer efficacement.
Ce que signifie cette règle
WCAG 2.4.2 Page Titled est un critère de succès de niveau A relevant du principe « Utilisable ». Il stipule : « Les pages Web ont des titres qui décrivent le sujet ou la finalité. » Concrètement, cela signifie que chaque document HTML livré à un utilisateur doit inclure un élément <title> dans la section <head>, et que cet élément doit contenir un texte qui identifie de manière significative le contenu, la fonction ou le contexte de la page au sein du site.
Ce critère s’applique à chaque page Web distincte — qu’il s’agisse d’un fichier HTML statique, d’une vue d’application monopage (SPA) rendue dynamiquement, d’une page modale ou d’une étape dans un assistant multi-étapes. Chaque « écran » distinct auquel un utilisateur peut accéder directement ou qui remplace la vue actuelle doit avoir son propre titre unique et descriptif.
Une page répond à ce critère lorsque son élément <title> est présent, non vide, et contient un texte qui décrit de manière adéquate le sujet ou la finalité de la page. Le titre n’a pas besoin d’être unique sur l’ensemble d’Internet, mais il doit être suffisamment spécifique pour qu’un utilisateur qui n’entend ou ne lit que le titre puisse comprendre de quoi parle la page sans avoir besoin de contexte supplémentaire.
Une page ne répond pas à ce critère lorsque l’une des conditions suivantes est vraie : l’élément <title> est totalement absent de la section <head> ; l’élément <title> est présent mais vide (ne contient aucun texte) ; le titre ne contient qu’un texte générique de type espace réservé comme « Untitled Document », « New Page » ou le simple nom de domaine sans contenu descriptif ; ou une application monopage navigue vers une nouvelle vue logique sans mettre à jour dynamiquement le titre du document.
WCAG ne définit aucune exception explicite pour ce critère au niveau A. Chaque page Web — quelle que soit sa taille, son public ou sa finalité — doit avoir un titre descriptif. Cependant, le document Understanding précise que le titre n’a pas besoin d’être le seul moyen d’identification ; il doit simplement exister et être suffisamment descriptif pour servir d’indice d’orientation de base.
Pourquoi c’est important
Le titre de la page est l’une des toutes premières informations qu’un utilisateur rencontre en arrivant sur une page Web ou en naviguant entre des pages. Son absence ou son insuffisance crée des obstacles pour plusieurs groupes d’utilisateurs distincts.
Les utilisateurs de lecteurs d’écran — dont la plupart sont aveugles ou ont une basse vision importante — entendent le titre de la page annoncé immédiatement au chargement de la page ou lorsque le focus se déplace vers un nouveau document. Pour environ 2,2 milliards de personnes dans le monde qui présentent une forme de déficience visuelle (selon l’Organisation mondiale de la Santé), cette annonce est le principal moyen de confirmer que la bonne page s’est chargée et de comprendre ce qu’elle contient avant d’explorer davantage. Sans titre significatif, un utilisateur aveugle qui navigue entre des onglets ou revient sur une page après une pause doit lire l’intégralité du contenu de la page simplement pour se réorienter — une tâche qui peut prendre plusieurs minutes avec une mise en page complexe.
Les utilisateurs ayant des troubles cognitifs et d’apprentissage bénéficient énormément de titres de page clairs et cohérents. Lorsqu’un utilisateur ayant des difficultés de mémoire ouvre plusieurs onglets pendant une session de recherche, le titre de l’onglet est souvent la seule étiquette visible pour chaque onglet. Un titre comme « Paramètres du compte — Tableau de bord Accsible » lui permet d’identifier instantanément le bon onglet ; un titre comme « Page » ou un titre vide l’oblige à cliquer sur chaque onglet pour découvrir son contenu, ce qui crée une charge cognitive et un risque de confusion.
Les utilisateurs ayant une déficience motrice qui s’appuient sur des logiciels de commande vocale (tels que Dragon NaturallySpeaking) peuvent utiliser les titres de page pour vérifier qu’ils ont atteint la destination souhaitée après avoir émis des commandes de navigation. Des titres clairs réduisent le besoin de corrections répétées et de renavigations, ce qui permet d’économiser du temps et des efforts physiques.
Considérons ce scénario concret : un patient hospitalisé en Turquie utilise un lecteur d’écran d’assistance pour remplir un formulaire de rendez-vous en ligne en plusieurs étapes. Si chaque étape ne met pas à jour le titre de la page pour refléter l’étape en cours — par exemple, « Étape 2 sur 4 : Informations personnelles — Prise de rendez-vous — Nom de l’hôpital » — le patient n’a aucun moyen de confirmer rapidement sa progression après un rechargement de page ou après avoir changé d’onglet pour consulter une autre fenêtre du navigateur. Il doit relire l’intégralité du formulaire pour comprendre où il en est, ce qui est particulièrement pénible pour quelqu’un qui peut déjà être malade ou stressé.
Au-delà de l’accessibilité, les titres de page ont une valeur SEO significative. Les moteurs de recherche utilisent l’élément <title> comme étiquette principale pour les résultats de recherche. Un titre descriptif, riche en mots-clés, améliore les taux de clics et la découvrabilité. Les sites Web qui appliquent correctement WCAG 2.4.2 bénéficient donc non seulement à leurs utilisateurs handicapés, mais aussi à leur présence globale dans la recherche organique — faisant de l’accessibilité un gain à la fois commercial et technique.
Règles axe-core associées
- document-title : Il s’agit de la règle axe-core principale associée à WCAG 2.4.2. Elle vérifie si le document HTML actuel contient un élément
<title>dans le<head>et si cet élément contient au moins un certain contenu textuel non blanc. La règle signale une violation lorsque l’élément<title>est totalement absent, lorsqu’il existe mais est vide, ou lorsqu’il ne contient que des caractères d’espacement. Axe-core signale cela comme une violation critique mappée à WCAG 2.4.2 niveau A. La règle s’exécute automatiquement au chargement de la page et détecte de manière fiable les omissions structurelles. - Pourquoi des tests manuels sont également nécessaires : Les outils automatisés comme axe-core peuvent confirmer qu’un élément
<title>existe et n’est pas vide, mais ils ne peuvent pas évaluer si le titre est significatif ou descriptif. Une page avec<title>aaa</title>ou<title>Untitled Document</title>passera la règle automatisée parce que l’élément est présent et non vide, mais elle ne respecte clairement pas l’esprit de WCAG 2.4.2. Un examen humain est nécessaire pour évaluer si le titre reflète correctement le sujet et la finalité de la page. De même, dans les applications monopage, les analyses automatisées capturent généralement uniquement le titre au chargement initial de la page et peuvent manquer les cas où le titre n’est pas mis à jour lors des changements de route côté client — ces transitions nécessitent des tests de navigation manuels.
Comment tester
- Analyse automatisée avec axe DevTools ou Lighthouse : Ouvrez la page Web cible dans Chrome ou Firefox. Ouvrez DevTools (F12), accédez au panneau axe DevTools (s’il est installé) ou à l’onglet Lighthouse. Lancez un audit d’accessibilité. Dans les résultats axe, recherchez spécifiquement toute violation de la règle
document-titledans la catégorie « Critical » ou « Serious ». Lighthouse signalera de la même manière un titre manquant ou vide dans son audit Accessibilité. Notez l’URL exacte de la page et le texte du titre (ou son absence) pour votre rapport. Répétez ce test pour chaque route ou vue unique de l’application, y compris les pages d’erreur (404, 500) et les pages de confirmation. - Inspection manuelle dans le navigateur : Dans n’importe quel navigateur, examinez le libellé de l’onglet du navigateur — il doit afficher un titre significatif et descriptif qui identifie la page. Faites un clic droit sur la page et choisissez « Afficher le code source de la page » ou ouvrez DevTools et accédez au panneau Éléments. Repérez la section
<head>et vérifiez qu’un élément<title>est présent avec un contenu textuel approprié et non générique. Vérifiez que le titre est pertinent par rapport au contenu visible de la page et — pour les sites multipages — qu’il diffère des titres des autres pages d’une manière qui reflète la finalité unique de la page. - Test avec lecteur d’écran NVDA + Firefox : Ouvrez la page avec Firefox et activez NVDA. Lorsque la page se charge, NVDA doit annoncer immédiatement le titre de la page. Naviguez ailleurs puis revenez sur la page (en utilisant Alt+Flèche gauche puis Alt+Flèche droite) et confirmez que le bon titre est à nouveau annoncé. Dans une application monopage, déclenchez un changement de route côté client et écoutez l’annonce du titre mis à jour. Si NVDA ne lit rien ou lit une chaîne générique/inutile au chargement de la page, c’est un échec.
- Test avec lecteur d’écran VoiceOver + Safari (macOS/iOS) : Activez VoiceOver (Commande+F5 sur Mac). Chargez la page. VoiceOver annonce le titre de la page au chargement. Utilisez le Rotor (Contrôle+Option+U) et accédez à la liste Web Spots ou Titres — le titre de la fenêtre affiché en haut de la page doit correspondre au contenu de l’élément
<title>. Sur iOS, le titre apparaît dans le sélecteur d’onglets de Safari ; vérifiez qu’il est descriptif. - Test avec lecteur d’écran JAWS + Chrome : Ouvrez la page dans Chrome avec JAWS en cours d’exécution. JAWS annonce le titre de la page au chargement. Appuyez sur Insert+F1 pour ouvrir la fenêtre d’aide JAWS et confirmez le titre de la page indiqué. Utilisez Insert+T pour lire le titre à tout moment pendant votre session afin de vérifier qu’il a été correctement mis à jour après les événements de navigation de la SPA.
- Test de changement de route dans une application monopage (SPA) : Naviguez à travers différentes vues de la SPA (par exemple, de la page d’accueil à une page produit puis à une page de paiement). Après chaque navigation, vérifiez le libellé de l’onglet du navigateur et utilisez un lecteur d’écran pour confirmer que le titre a été mis à jour. Si le libellé de l’onglet reste identique pendant toute la session quel que soit la vue actuelle, il s’agit d’un échec du critère 2.4.2 pour chaque vue qui n’a pas de titre distinct.
Comment corriger
Élément title manquant — Incorrect
<!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>Élément title manquant — Correct
<!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>Titre générique d’espace réservé — Incorrect
<!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>Titre générique d’espace réservé — Correct
<!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>Application monopage ne mettant pas à jour le titre lors du changement de route — Incorrect
<!-- 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>Application monopage ne mettant pas à jour le titre lors du changement de route — Correct
<!-- 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>Formulaire multi-étapes avec des titres identiques à chaque étape — Incorrect
<!-- 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>Formulaire multi-étapes avec des titres identiques à chaque étape — Correct
<!-- 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>Erreurs courantes
- Laisser le titre par défaut du CMS ou du framework en production : De nombreux systèmes de gestion de contenu (WordPress, Drupal, frameworks personnalisés) sont livrés avec des titres d’espace réservé comme « Just another WordPress site » ou l’URL brute du site. Les développeurs oublient de configurer le modèle de titre avant le lancement, laissant chaque page avec un titre inutile ou identique. Vérifiez toujours la configuration du titre dans les paramètres de votre CMS et testez une URL en production avant la mise en ligne.
- Utiliser uniquement le nom du site comme titre pour chaque page : Définir
<title>Accsible</title>sur chaque page d’un site permet de passer la vérification automatiséedocument-title(l’élément n’est pas vide) mais ne respecte pas l’exigence de description de WCAG 2.4.2. Chaque page doit avoir un titre qui la distingue des autres pages du même site. - Mettre le nom du site en premier au lieu du contenu spécifique à la page : Le modèle
<title>Accsible — Contact</title>oblige les utilisateurs de lecteurs d’écran à écouter le nom de la marque avant de savoir de quoi parle la page. Le modèle recommandé est<title>Contact — Accsible</title>— sujet de la page en premier, nom du site en second — afin que les utilisateurs reçoivent immédiatement l’information la plus pertinente. - Oublier de mettre à jour
document.titledans les applications monopage après la navigation côté client : Les frameworks comme React, Vue et Angular ne mettent pas automatiquement à jour le titre du document lorsque la route change. Les développeurs doivent définir explicitementdocument.titleou utiliser une bibliothèque de gestion de l’en-tête (telle que react-helmet-async ou Vue Meta) dans chaque composant de route. Ne pas le faire signifie que chaque vue de la SPA après le chargement initial partage le même titre. - Utiliser des éléments title vides ou ne contenant que des espaces : Un élément
<title> </title>ne contenant que des espaces ou des sauts de ligne est, pour les utilisateurs de technologies d’assistance, fonctionnellement identique à un titre manquant, mais peut être négligé lors de la QA visuelle parce que l’onglet du navigateur apparaît simplement vide au lieu de générer une erreur. Axe-core signale ce cas, mais il peut échapper aux examinateurs manuels. - Ne pas mettre à jour le titre sur les pages d’erreur (404, 500, erreurs de validation) : Les pages d’erreur héritent fréquemment du titre de la page précédente ou reviennent à un titre générique du site. Un utilisateur de lecteur d’écran qui déclenche une erreur 404 doit entendre « Page Not Found — Accsible » plutôt que le titre de la page sur laquelle il se trouvait auparavant, afin de comprendre que sa navigation a échoué.
- Titres dupliqués sur différentes pages ayant un contenu distinct : Lorsqu’une page de liste de produits et une page de détail de produit portent toutes deux le titre « Products — Accsible Store », les utilisateurs ayant des troubles cognitifs ou ceux qui gèrent plusieurs onglets ne peuvent pas les distinguer. Chaque page logiquement distincte doit avoir un titre unique qui reflète son contenu spécifique.
- Titres générés dynamiquement qui incluent des noms de variables de modèle bruts : Des bogues de rendu côté serveur peuvent produire des titres comme
<title>{{page.title}} — MySite</title>lorsque les variables de modèle ne sont pas rendues. Ces titres passent la vérification « non vide » mais ne fournissent aucune information significative. Mettez en place des vérifications automatisées du contenu des titres dans votre pipeline CI/CD pour détecter les échecs de rendu de modèles avant le déploiement. - Titres trop longs ou bourrés de mots-clés : Bien que WCAG ne fixe pas de limite de caractères, des titres excessivement longs (plus de 60–70 caractères) sont tronqués dans les onglets de navigateur et les résultats de recherche, et les lecteurs d’écran doivent lire l’intégralité de la chaîne avant d’annoncer la partie la plus pertinente. Gardez les titres concis, spécifiques et structurés de manière à placer l’information la plus importante au début.
- Omettre les titres dans les documents chargés dans des iframes : Les cadres en ligne (
<iframe>) qui chargent un document HTML complet doivent également avoir un élément<title>significatif. Bien que l’élémentiframelui-même doive avoir un attributtitledécrivant la finalité du cadre, le document chargé à l’intérieur bénéficie également d’un<title>dans son propre<head>pour les technologies d’assistance qui naviguent dans le contenu du cadre.
Lien avec la réglementation d’accessibilité de la Turquie
La circulaire présidentielle 2025/10 de la Turquie, publiée au Journal officiel n° 32933 le 21 juin 2025, établit des exigences d’accessibilité contraignantes pour un large éventail de services numériques du secteur public et privé. WCAG 2.4.2 Page Titled est un critère de succès de niveau A, et la conformité de niveau A constitue le minimum obligatoire en vertu de cette circulaire. Les entités concernées doivent atteindre la conformité de niveau A dans un délai de un an si ce sont des institutions publiques, et dans un délai de deux ans pour les organisations du secteur privé.
La circulaire couvre un large éventail de types d’entités, ce qui rend WCAG 2.4.2 pertinent pour une part significative de l’économie numérique turque. Les entités concernées comprennent toutes les institutions publiques et organismes gouvernementaux, les plateformes de commerce électronique, les banques et institutions financières, les hôpitaux et prestataires de soins de santé, les entreprises de télécommunications comptant 200 000 abonnés ou plus, les agences de voyage agréées, les entreprises de transport privées et les écoles privées autorisées par le ministère de l’Éducation nationale (MoNE).
Pour ces organisations, ne pas fournir de titre de page significatif n’est pas simplement un oubli de bonne pratique — c’est un risque de non-conformité réglementaire. Considérez les implications pratiques : une plateforme de commerce électronique turque où toutes les pages de catégories de produits partagent le même titre générique, ou le système de prise de rendez-vous d’un hôpital public où chaque étape du parcours de réservation porte le même titre indifférencié, seraient tous deux en violation directe des exigences d’accessibilité de la circulaire. Les régulateurs ou les plaignants pourraient invoquer ces manquements comme des violations de la norme obligatoire de niveau A.
La mise en œuvre correcte de WCAG 2.4.2 est l’une des corrections d’accessibilité les plus simples et les plus impactantes disponibles, car elle nécessite généralement seulement une modification au niveau du modèle pour garantir que chaque page possède un élément <title> bien formé et descriptif. Pour les organisations soumises à la circulaire 2025/10, le traitement des titres de page devrait figurer parmi les premiers éléments à résoudre dans toute feuille de route de remédiation en accessibilité — c’est simple à mettre en œuvre, facile à vérifier et directement testable par la règle axe-core document-title, ce qui facilite la démonstration de la conformité auprès des auditeurs ou des autorités de régulation.
Les organisations qui s’adressent à des publics turcophones doivent également veiller à ce que les titres de page soient fournis dans la langue correcte correspondant au contenu de la page, en complément de l’exigence relative à l’attribut lang (WCAG 3.1.1), afin que les lecteurs d’écran dans les environnements des utilisateurs turcophones interprètent et prononcent correctement le titre annoncé au chargement de la page.