La langue de la page doit être déclarée et correspondre au contenu
Les lecteurs d’écran s’appuient sur la langue déclarée pour choisir la prononciation. Une boutique allemande qui déclare l’anglais, ce qui arrive souvent quand chaque traduction conserve la langue par défaut, est lue avec le mauvais accent : les noms de produits, les prix et les consignes deviennent difficiles à comprendre. La traduction et la correction orthographique du navigateur en dépendent aussi.
- Identifiant de la règle
- vs-lang
- Source
- Contrôle Validiscan
- Impact
- Modéré
- Niveau de correction
- AUTO
- sur Shopify, Shopware, WooCommerce et Magento
- Statut
- exécutée
Ce que fait le contrôle
Signale un attribut lang absent ou invalide sur l’élément <html>, ainsi qu’une différence entre la langue déclarée et la langue détectée dans le contenu de la page (3.1.1). Remplace les règles axe html-has-lang et html-lang-valid.
Le contrôle lit uniquement l’attribut lang de l’élément <html>. Une valeur est valide quand c’est une étiquette de langue BCP 47 bien formée dont la sous-étiquette principale est un code ISO 639-1 à deux lettres connu, ou compte trois lettres. Les étiquettes à usage privé, comme x-shop, sont acceptées ; en_US, english et xx ne le sont pas.
Pour la comparaison, le contrôle prend le texte de main ou de role="main" s’il contient au moins 300 caractères, sinon celui de tout le corps de la page, et y compte les mots-outils courants de l’anglais, de l’allemand, du danois, du français, de l’espagnol, du néerlandais, de l’italien, du suédois, du norvégien, du polonais et du portugais.
Une discordance ne donne lieu à un constat que si le texte compte au moins 300 caractères et si la langue en tête réunit au moins 10 correspondances, au moins 8 % de tous les mots, au moins deux fois plus de correspondances que la langue déclarée et au moins 8 de plus qu’elle. Des indices plus faibles ne produisent pas de constat, pas plus qu’une discordance sur une page déclarée dans une langue qui ne figure pas parmi ces onze. L’attribut lang des autres éléments n’est pas vérifié.
Comment corriger
Générez l’attribut lang de <html> à partir de la langue active de la boutique, par exemple <html lang="de">, afin que chaque version linguistique déclare son propre code valide (de, da, fr-BE, etc.) au lieu d’une valeur par défaut codée en dur.
Critères de succès WCAG
- 3.1.1 Language of Page, niveau A
Clauses de la norme EN 301 549
| Critère WCAG | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 3.1.1 | 9.3.1.1 | 9.3.1.1 |
Où une recette corrige le problème
Shopify : recette html-lang
Afficher l’avant et l’après (1)
layout/checkout.liquid Modifications apportées à layout/checkout.liquid (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 3 | 3 | Checkout layout (the Shopify Plus `checkout.liquid` era). Only the first step | |
| 4 | 4 | (contact, delivery, billing) is modelled; nothing is ever submitted. | |
| 5 | 5 | {% endcomment %} | |
| 6 | Supprimée | <html class="no-js"> | |
| 6 | Ajoutée | <html class="no-js" lang="{{ request.locale.iso_code }}"> | |
| 7 | 7 | <head> | |
| 8 | 8 | <meta charset="utf-8"> | |
| 9 | 9 | <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> |
layout/theme.liquid Modifications apportées à layout/theme.liquid (lignes ajoutées : 3, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 6 | 6 | {% endcomment %} | |
| 7 | 7 | {%- liquid | |
| 8 | 8 | assign page_lang = request.locale.iso_code | |
| 9 | Ajoutée | if page.metafields.custom.content_language != blank | |
| 10 | Ajoutée | assign page_lang = page.metafields.custom.content_language | |
| 11 | Ajoutée | endif | |
| 9 | 12 | -%} | |
| 10 | 13 | <html class="no-js" lang="{{ page_lang }}"> | |
| 11 | 14 | <head> |
Shopware : recette html-lang
Afficher l’avant et l’après (1)
Resources/views/storefront/base.html.twig Modifications apportées à Resources/views/storefront/base.html.twig (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 9 | 9 | {% block base_doctype %}<!DOCTYPE html>{% endblock %} | |
| 10 | 10 | ||
| 11 | 11 | {% block base_html %} | |
| 12 | Supprimée | <html lang="{{ page.lang }}" itemscope="itemscope" itemtype="https://schema.org/WebPage"> | |
| 12 | Ajoutée | <html lang="{{ page.lang|replace({'_': '-'}) }}" itemscope="itemscope" itemtype="https://schema.org/WebPage"> | |
| 13 | 13 | {% endblock %} | |
| 14 | 14 | ||
| 15 | 15 | {% block base_head %} |
WooCommerce : recette html-lang
Afficher l’avant et l’après (1)
header-checkout.php Modifications apportées à header-checkout.php (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 8 | 8 | ||
| 9 | 9 | ?><!doctype html> | |
| 10 | 10 | <?php // VALIDISCAN-SEED vs-lang: copied from a landing-page plugin, language_attributes() is missing, so <html> has no lang. ?> | |
| 11 | Supprimée | <html> | |
| 11 | Ajoutée | <html <?php language_attributes(); ?>> | |
| 12 | 12 | <head> | |
| 13 | 13 | <meta charset="<?php bloginfo( 'charset' ); ?>"> | |
| 14 | 14 | <?php // VALIDISCAN-SEED meta-viewport: zooming is disabled. ?> |
Magento : recette html-lang
Afficher l’avant et l’après (1)
app/design/frontend/Validiscan/fixture/Magento_Theme/templates/root.phtml Modifications apportées à app/design/frontend/Validiscan/fixture/Magento_Theme/templates/root.phtml (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 15 | 15 | ?> | |
| 16 | 16 | <!doctype html> | |
| 17 | 17 | <!-- VALIDISCAN-SEEDED vs-lang: root.phtml prints the Magento locale code (en_US) instead of a BCP 47 language tag --> | |
| 18 | Supprimée | <html lang="<?= $block->escapeHtmlAttr($htmlLocale) ?>"> | |
| 18 | Ajoutée | <html <?= /* @noEscape */ $htmlAttributes ?>> | |
| 19 | 19 | <head <?= /* @noEscape */ $headAttributes ?>> | |
| 20 | 20 | <?= /* @noEscape */ $requireJs ?> | |
| 21 | 21 | <?= /* @noEscape */ $headContent ?> |
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