Les documents doivent avoir un élément <title> pour faciliter la navigation
Le titre de la page est la première chose qu’annonce un lecteur d’écran, et le texte affiché dans les onglets et les favoris du navigateur. Sans lui, les clients aveugles et toute personne qui a plusieurs onglets ouverts ne savent pas s’ils se trouvent sur la fiche produit, dans le panier ou au paiement.
- Identifiant de la règle
- document-title
- Source
- axe-core 4.13.0
- Impact
- Grave
- Niveau de correction
- AUTO
- sur Shopify, Shopware, WooCommerce et Magento
- Statut
- exécutée
Ce que fait le contrôle
Vérifier que chaque document HTML contient un élément <title> non vide
La règle ne teste que le document de premier niveau dans lequel axe-core a été lancé ; les titres des documents contenus dans un iframe ne sont pas testés.
Le contrôle lit document.title, c’est-à-dire le titre tel que le navigateur le rapporte à cet instant, et non le HTML brut. Le scanner de Validiscan lance axe-core après avoir attendu, dans la limite d’un délai, que la page soit chargée et que son trafic réseau se calme ; un titre défini par un script avant ce moment est donc celui qui est testé. Les espaces en début et en fin de texte sont retirés, les espaces insécables comptant comme des espaces ; s’il reste quelque chose, la page réussit. Un <title> absent et un <title> qui ne contient que des espaces échouent tous les deux. L’évaluation renvoie simplement vrai ou faux ; il n’y a donc pas de résultat « à examiner ».
Aucun aspect de la formulation n’est mesuré, et les titres ne sont pas comparés d’une page à l’autre. Le même titre « Accueil » sur chaque type de page réussit, tout comme le seul nom de la boutique sur une fiche produit. Savoir si un titre décrit sa page et la distingue des autres, c’est à une personne d’en décider.
Comment corriger
Donnez à chaque page un <title> unique et descriptif, défini une seule fois dans le modèle de mise en page du thème sous la forme « Nom de la page – Nom de la boutique » (par exemple « Écharpe en laine – Boutique Exemple »). Assurez-vous que les modèles de recherche, de compte client et de page d’erreur génèrent eux aussi un titre.
Critères de succès WCAG
- 2.4.2 Page Titled, niveau A
Clauses de la norme EN 301 549
| Critère WCAG | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 2.4.2 | 9.2.4.2 | 9.2.4.2 |
Où une recette corrige le problème
Shopify : recette document-title-template
Afficher l’avant et l’après (1)
layout/theme.focused.liquid Modifications apportées à layout/theme.focused.liquid (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 11 | 11 | <meta charset="utf-8"> | |
| 12 | 12 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| 13 | 13 | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| 14 | Supprimée | <title></title> | |
| 14 | Ajoutée | <title>{{ page_title }}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}</title> | |
| 15 | 15 | <link rel="canonical" href="{{ canonical_url }}"> | |
| 16 | 16 | <!-- Theme assets: //cdn.shopify.com/s/files/1/0712/3456/7890/t/12/assets/ (served locally by the fixture server) --> | |
| 17 | 17 | {% render 'meta-tags' %} |
Shopware : recette document-title-template
Afficher l’avant et l’après (1)
Resources/views/storefront/layout/meta.html.twig Modifications apportées à Resources/views/storefront/layout/meta.html.twig (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 36 | 36 | {% endblock %} | |
| 37 | 37 | ||
| 38 | 38 | {% block layout_head_title %} | |
| 39 | Supprimée | <title>{{ page.metaTitle }}</title> | |
| 39 | Ajoutée | <title>{{ page.metaTitle|default(shop.name) }}</title> | |
| 40 | 40 | {% endblock %} | |
| 41 | 41 | ||
| 42 | 42 | {% block layout_head_stylesheet %} |
WooCommerce : recette document-title-template
Afficher l’avant et l’après (1)
functions.php Modifications apportées à functions.php (lignes ajoutées : 2, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 87 | 87 | if ( is_singular() && metadata_exists( 'post', get_the_ID(), '_kb_seo_title' ) ) { | |
| 88 | 88 | // VALIDISCAN-SEED document-title: the Contact page has the field saved empty, and an empty | |
| 89 | 89 | // string wins over the generated title, so <title> is empty there. | |
| 90 | Supprimée | return (string) get_post_meta( get_the_ID(), '_kb_seo_title', true ); | |
| 90 | Ajoutée | $custom_title = trim( (string) get_post_meta( get_the_ID(), '_kb_seo_title', true ) ); | |
| 91 | Ajoutée | return '' !== $custom_title ? $custom_title : $title; | |
| 91 | 92 | } | |
| 92 | 93 | return $title; | |
| 93 | 94 | } |
Magento : recette document-title-template
Afficher l’avant et l’après (1)
app/design/frontend/Validiscan/fixture/Magento_CatalogSearch/layout/catalogsearch_result_index.xml Modifications apportées à app/design/frontend/Validiscan/fixture/Magento_CatalogSearch/layout/catalogsearch_result_index.xml (lignes ajoutées : 0, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 4 | 4 | <!-- VALIDISCAN-SEEDED document-title: a "hide the SEO title" customisation sets an empty page title, | |
| 5 | 5 | so the rendered <title></title> is empty. The visible h1 is set separately by the page.main.title block. | |
| 6 | 6 | Fixed variant: <title>Search results for: 'jacket'</title>. --> | |
| 7 | Supprimée | <title> </title> | |
| 8 | 7 | </head> | |
| 9 | 8 | <body> | |
| 10 | 9 | <referenceBlock name="search_result_list" template="Magento_Catalog::product/list.phtml"/> |
Commencez par une vérification gratuite de votre boutique.
Envoyez l’adresse de votre boutique. Validiscan la scanne et vous envoie chaque échec que le scan peut prouver, avec sa page et son code.
Demander une vérification gratuiteOu écrivez à info@validiscan.com.
Ce que couvre la vérification gratuite, et ce qu’elle laisse de côté- Vous envoyez
- l’adresse de votre boutique
- Pages scannées
- jusqu’à 15
- Vous recevez
- chaque échec que le scan peut prouver, avec la page et le code
- Sur votre boutique
- pages publiques uniquement ; aucune connexion, aucun achat, aucun formulaire envoyé
- Ce qu’elle n’est pas
- un audit complet