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

Clauses de la norme EN 301 549

La clause de la norme EN 301 549 pour chaque critère, selon la version de la norme
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)
Avant et après Données d’exemple

layout/theme.focused.liquid Modifications apportées à layout/theme.focused.liquid (lignes ajoutées : 1, lignes supprimées : 1)

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 %} &ndash; {{ 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)
gives the layout title a shop-name fallback and the empty CMS title is gone Données d’exemple

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)

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)
lets the empty custom SEO title fall back to the generated title Données d’exemple

functions.php Modifications apportées à functions.php (lignes ajoutées : 2, lignes supprimées : 1)

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)
removes the blank search results title and validates Données d’exemple

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)

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 gratuite

Ou é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

Écrire à Validiscan

Pour une vérification gratuite, indiquez l’adresse de votre boutique et sa plateforme.

Validiscan utilise ce que vous envoyez pour vous répondre. Politique de confidentialité