Le focus clavier doit être visible
Les personnes qui naviguent au clavier, dont beaucoup ont un handicap moteur, parcourent la boutique avec la touche Tab. Quand le thème masque le contour de focus, elles ne voient pas où elles se trouvent et ne savent pas quel lien, quelle taille ou quel bouton elles s’apprêtent à activer.
- Identifiant de la règle
- vs-focus-visible
- Source
- Contrôle Validiscan
- Impact
- Grave
- Niveau de correction
- AUTO
- sur Shopify, Shopware, WooCommerce et Magento
- Statut
- exécutée
Ce que fait le contrôle
Parcourt avec la touche Tab chaque élément focalisable et compare les valeurs calculées d’outline, box-shadow, border et background avant et après la prise de focus ; un élément qui a le même aspect avec le focus échoue (2.4.7).
Le contrôle recense les liens dotés d’un href, les commandes de formulaire, summary, audio et video avec controls, les éléments dotés d’un tabindex et le contenu contenteditable. Il écarte iframe, object, embed, les valeurs négatives de tabindex ainsi que les éléments désactivés, masqués ou de taille nulle, et conserve les 150 premiers dans l’ordre du document.
Il appuie d’abord une fois sur Tab, pour que Chromium considère les déplacements de focus suivants comme venant du clavier. Il donne ensuite le focus à chaque élément, l’un après l’autre, et relève le contour (outline), box-shadow, les bordures, l’arrière-plan, la couleur du texte, text-decoration-line, filter, transform et opacity, sans focus puis avec focus, transitions CSS désactivées. Le relevé couvre aussi ::before, ::after, le parent pour les styles :focus-within et les cinq premiers descendants.
Les éléments qui ne prennent pas le focus ou ne correspondent pas à :focus-visible sont écartés. Seuls des relevés identiques donnent lieu à un constat : un style de focus qui ne modifie qu’une propriété non relevée, comme text-shadow, est donc signalé. Le contrôle ne mesure ni la taille ni le contraste du changement ; il ne juge pas si un style de focus est facile à voir.
Comment corriger
Ajoutez un style :focus-visible à l’échelle du thème, par exemple un contour de 2 à 3 pixels avec un décalage, dans une couleur de la marque offrant un contraste d’au moins 3:1 avec l’arrière-plan environnant, et supprimez les règles outline: none qui ne sont pas remplacées par un style tout aussi visible.
Critères de succès WCAG
- 2.4.7 Focus Visible, niveau AA
Clauses de la norme EN 301 549
| Critère WCAG | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 2.4.7 | 9.2.4.7 | 9.2.4.7 |
Où une recette corrige le problème
Shopify : recette focus-visible-styles
Afficher l’avant et l’après (1)
assets/base.css.liquid Modifications apportées à assets/base.css.liquid (lignes ajoutées : 7, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1866 | 1866 | } | |
| 1867 | 1867 | ||
| 1868 | 1868 | /* ----------------------------------------------------------------- motion */ | |
| 1869 | Ajoutée | ||
| 1870 | Ajoutée | /* validiscan:focus-visible-styles */ | |
| 1871 | Ajoutée | :focus-visible { | |
| 1872 | Ajoutée | outline: 2px solid #1f4d3a; | |
| 1873 | Ajoutée | outline-offset: 2px; | |
| 1874 | Ajoutée | } | |
| 1875 | Ajoutée | /* /validiscan:focus-visible-styles */ |
Shopware : recette focus-visible-styles
Afficher l’avant et l’après (1)
Resources/app/storefront/src/scss/_variant-broken.scss Modifications apportées à Resources/app/storefront/src/scss/_variant-broken.scss (lignes ajoutées : 5, lignes supprimées : 5)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 21 | 21 | } | |
| 22 | 22 | ||
| 23 | 23 | /* "Remove the ugly blue ring" (vs-focus-visible). */ | |
| 24 | Supprimée | .header-actions-btn:focus, | |
| 25 | Supprimée | .header-search-btn:focus, | |
| 26 | Supprimée | .main-navigation-link:focus, | |
| 27 | Supprimée | .product-name:focus, | |
| 28 | Supprimée | .footer-link:focus { | |
| 24 | Ajoutée | .header-actions-btn:focus:not(:focus-visible), | |
| 25 | Ajoutée | .header-search-btn:focus:not(:focus-visible), | |
| 26 | Ajoutée | .main-navigation-link:focus:not(:focus-visible), | |
| 27 | Ajoutée | .product-name:focus:not(:focus-visible), | |
| 28 | Ajoutée | .footer-link:focus:not(:focus-visible) { | |
| 29 | 29 | outline: 0; | |
| 30 | 30 | box-shadow: none; | |
| 31 | 31 | } |
Resources/app/storefront/src/scss/base.scss Modifications apportées à Resources/app/storefront/src/scss/base.scss (lignes ajoutées : 8, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1708 | 1708 | margin: 8px 0 0; | |
| 1709 | 1709 | font-size: 0.875rem; | |
| 1710 | 1710 | } | |
| 1711 | Ajoutée | ||
| 1712 | Ajoutée | /* validiscan:focus-visible-styles */ | |
| 1713 | Ajoutée | /* Visible keyboard focus (WCAG 2.4.7): brand colour sw-color-brand-primary, 8.9:1 on #ffffff. */ | |
| 1714 | Ajoutée | :focus-visible { | |
| 1715 | Ajoutée | outline: 2px solid #6b3f1d; | |
| 1716 | Ajoutée | outline-offset: 2px; | |
| 1717 | Ajoutée | } | |
| 1718 | Ajoutée | /* /validiscan:focus-visible-styles */ |
WooCommerce : recette focus-visible-styles
Afficher l’avant et l’après (1)
assets/css/main.css Modifications apportées à assets/css/main.css (lignes ajoutées : 9, lignes supprimées : 3)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 137 | 137 | box-shadow: 0 0 0 2px var(--kb-ink); | |
| 138 | 138 | } | |
| 139 | 139 | ||
| 140 | Supprimée | /* VALIDISCAN-SEED vs-focus-visible: "remove the ugly focus ring" - nothing replaces it. */ | |
| 141 | Supprimée | :focus { | |
| 142 | Supprimée | outline: none !important; | |
| 140 | Ajoutée | /* validiscan:focus-visible-styles */ | |
| 141 | Ajoutée | :focus-visible { | |
| 142 | Ajoutée | outline: 2px solid var(--kb-focus); | |
| 143 | Ajoutée | outline-offset: 2px; | |
| 143 | 144 | } | |
| 144 | 145 | ||
| 146 | Ajoutée | .kb-topbar :focus-visible { | |
| 147 | Ajoutée | outline-color: #fff; | |
| 148 | Ajoutée | } | |
| 149 | Ajoutée | /* /validiscan:focus-visible-styles */ | |
| 150 | Ajoutée | ||
| 145 | 151 | /* Buttons ------------------------------------------------------------------ */ | |
| 146 | 152 | ||
| 147 | 153 | .button, |
Magento : recette focus-visible-styles
Afficher l’avant et l’après (1)
app/design/frontend/Validiscan/fixture/web/css/source/_theme.less Modifications apportées à app/design/frontend/Validiscan/fixture/web/css/source/_theme.less (lignes ajoutées : 10, lignes supprimées : 12)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1079 | 1079 | color: #fff; | |
| 1080 | 1080 | } | |
| 1081 | 1081 | ||
| 1082 | Supprimée | // VALIDISCAN-SEEDED vs-focus-visible: the theme removes the focus ring from links and actions. | |
| 1083 | Supprimée | .navigation a:focus, | |
| 1084 | Supprimée | .header.links a:focus, | |
| 1085 | Supprimée | .product-item-link:focus, | |
| 1086 | Supprimée | .footer a:focus, | |
| 1087 | Supprimée | .action:focus, | |
| 1088 | Supprimée | .logo:focus, | |
| 1089 | Supprimée | .block-promo:focus, | |
| 1090 | Supprimée | .journal-link:focus { | |
| 1091 | Supprimée | outline: none; | |
| 1092 | Supprimée | } | |
| 1093 | Supprimée | ||
| 1094 | 1082 | // VALIDISCAN-SEEDED vs-headings-landmarks: the home page title is display:none, so the page has no h1. | |
| 1095 | 1083 | .cms-index-index .page-title-wrapper { | |
| 1096 | 1084 | display: none; | |
| 1264 | 1252 | height: 18px; | |
| 1265 | 1253 | stroke-width: 3; | |
| 1266 | 1254 | } | |
| 1255 | Ajoutée | ||
| 1256 | Ajoutée | /* validiscan:focus-visible-styles */ | |
| 1257 | Ajoutée | :focus-visible { | |
| 1258 | Ajoutée | outline: 2px solid #1979c3; | |
| 1259 | Ajoutée | outline-offset: 2px; | |
| 1260 | Ajoutée | } | |
| 1261 | Ajoutée | .panel.wrapper :focus-visible { | |
| 1262 | Ajoutée | outline-color: #a1d0f3; | |
| 1263 | Ajoutée | } | |
| 1264 | Ajoutée | /* /validiscan:focus-visible-styles */ |
app/design/frontend/Validiscan/fixture/web/css/styles-m.css Modifications apportées à app/design/frontend/Validiscan/fixture/web/css/styles-m.css (lignes ajoutées : 10, lignes supprimées : 11)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1058 | 1058 | color: #fff; | |
| 1059 | 1059 | } | |
| 1060 | 1060 | ||
| 1061 | Supprimée | .navigation a:focus, | |
| 1062 | Supprimée | .header.links a:focus, | |
| 1063 | Supprimée | .product-item-link:focus, | |
| 1064 | Supprimée | .footer a:focus, | |
| 1065 | Supprimée | .action:focus, | |
| 1066 | Supprimée | .logo:focus, | |
| 1067 | Supprimée | .block-promo:focus, | |
| 1068 | Supprimée | .journal-link:focus { | |
| 1069 | Supprimée | outline: none; | |
| 1070 | Supprimée | } | |
| 1071 | Supprimée | ||
| 1072 | 1061 | .cms-index-index .page-title-wrapper { | |
| 1073 | 1062 | display: none; | |
| 1074 | 1063 | } | |
| 1232 | 1221 | height: 18px; | |
| 1233 | 1222 | stroke-width: 3; | |
| 1234 | 1223 | } | |
| 1224 | Ajoutée | ||
| 1225 | Ajoutée | /* validiscan:focus-visible-styles */ | |
| 1226 | Ajoutée | :focus-visible { | |
| 1227 | Ajoutée | outline: 2px solid #1979c3; | |
| 1228 | Ajoutée | outline-offset: 2px; | |
| 1229 | Ajoutée | } | |
| 1230 | Ajoutée | .panel.wrapper :focus-visible { | |
| 1231 | Ajoutée | outline-color: #a1d0f3; | |
| 1232 | Ajoutée | } | |
| 1233 | Ajoutée | /* /validiscan:focus-visible-styles */ |
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