Corrections d’accessibilité dans le code de votre thème Shopware

L’élément <html> du layout de base de la Storefront reçoit un attribut lang valide, de sorte que les lecteurs d’écran prononcent la page dans la bonne langue. Lorsque l’attribut manque, la recette ajoute le code de la langue active de la boutique, par exemple de-DE, la valeur que produit le template de base de Shopware lui-même. Lorsque le thème produit un code de locale comme en_GB, qui n’est pas une balise de langue valide, le template le transforme désormais en en-GB. Une page dont le contenu est rédigé dans une autre langue que celle de la boutique, comme un texte juridique allemand dans une boutique anglaise, vous revient : la langue de ce contenu se définit dans l’Administration ou se signale dans le texte lui-même.

Selon ce que le scan a relevé, la recette ajoute un lien d’évitement, balise le contenu principal ou nomme les zones de navigation. Le lien d’évitement devient le premier élément qu’atteint une personne qui navigue au clavier sur chaque page. Il reste masqué jusqu’à ce qu’il reçoive le focus, et il mène au contenu principal. Lorsqu’aucun template ne balise le contenu principal avec <main>, la zone de contenu du layout de base devient la zone <main> de la page. Le texte du lien est le snippet general.skipToContent, en anglais « Skip to main content ». Un lien d’évitement existant est redirigé vers le contenu principal. Les zones de navigation sans nom en reçoivent un, tiré de leur titre ou de leur fonction, par exemple Main navigation, Service navigation ou Breadcrumb. Une zone de navigation dont la fonction n’est pas claire, ou qui partagerait son nom avec une autre, est laissée à une personne.

Lorsque le layout du thème n’écrit que le méta-titre de la page dans le <title>, les catégories et les pages CMS sans méta-titre reçoivent un titre vide. La recette conserve le titre propre au thème et lui donne une valeur de repli : le nom de la boutique, repris de l’endroit où le thème l’affiche déjà ou, à défaut, du nom de la boutique dans les réglages de base de Shopware. Plus aucune page n’a alors de titre vide. Un titre réduit au nom de la boutique n’indique toujours pas ce qu’est la page ; ces pages ont donc besoin d’un méta-titre dans l’Administration. Les titres qui ont déjà une valeur de repli ou un texte fixe sont laissés tels quels.

Un titre qui saute un niveau, comme un h3 juste après un h1, remonte au niveau suivant, et les autres titres du même template, à ce niveau ou à un niveau plus profond, le suivent, de sorte que le plan propre au template reste intact. Lorsque le template définit la balise du titre dans une variable, c’est la variable qui est modifiée. Les classes restent, et lorsqu’aucune classe ne définit la taille, une classe de titre de Bootstrap conserve l’aspect d’origine. Sur une page sans titre principal, l’élément qui lui sert déjà de titre dans son propre template devient le h1, en conservant son aspect. Si une page n’a aucun élément de ce genre, la recette n’ajoute pas de titre, car un nouveau titre suppose d’en choisir les mots.

La feuille de style principale reçoit un seul contour pour le focus clavier : 2 pixels, en trait plein, à 2 pixels de l’élément, dans la couleur de marque du thème. Lorsque cette couleur est trop claire, on utilise la nuance la plus proche de la même teinte dont le contraste avec l’arrière-plan de la page est d’au moins 3:1. Les règles du thème qui suppriment le contour au focus ne s’appliquent désormais qu’au focus à la souris : un clic conserve l’aspect du thème, et le focus clavier affiche le contour. Les règles qui montrent le focus d’une autre façon sont conservées. Sur les zones sombres, comme une barre supérieure, le contour peut demander une couleur plus claire, ce que votre développeur vérifie dans l’aperçu.

Un tabindex supérieur à 0 fait passer un élément en tête de l’ordre de tabulation. La recette le retire des liens, des boutons, des champs de formulaire et des autres éléments qui peuvent de toute façon recevoir le focus, et le fixe à 0 sur les autres éléments, afin qu’ils restent atteignables pendant que la touche Tab suit l’ordre de la page. Un tabindex que le code du template écrit est laissé à une personne. Un scan signale un tel ordre forcé deux fois : par la règle tabindex d’axe-core, dont les constats reçoivent cette modification, et par le contrôle vs-focus-order de Validiscan, du niveau MANUAL, dont les constats s’accompagnent donc d’indications.

La recette retire user-scalable=no et tout maximum-scale inférieur à 2 de la balise viewport des templates de la Storefront, en général dans layout/meta.html.twig, afin que les visiteurs puissent agrandir le texte à 200 % au moins sur un téléphone. Pour la règle de bonne pratique meta-viewport-large, la limite est de 5. Les autres réglages du viewport restent tels quels. Si le blocage servait à empêcher iOS de zoomer sur les champs de formulaire, une taille de police d’au moins 16 pixels pour les champs y suffit sans bloquer le zoom.

Les boutons et les liens que le scan a trouvés plus petits que 24 × 24 pixels, comme les icônes de l’en-tête, les boutons de quantité ou les pastilles de couleur, reçoivent une taille minimale de 24 × 24 pixels. Ce minimum est ajouté à la règle de style du thème qui a rendu la commande petite, à côté de la déclaration qui l’a réduite, de sorte que l’ordre des styles du thème ne change pas et que les icônes à l’intérieur gardent leur taille. Une commande petite sans règle de ce genre reçoit, dans la feuille de style principale, une taille minimale pour sa classe. Une commande que la recette ne peut pas identifier par sa classe est laissée à une personne.

Lorsque l’appareil d’un visiteur est réglé pour réduire les mouvements, un bloc de la feuille de style principale fait se terminer aussitôt les animations et les transitions et désactive le défilement fluide. Le bloc s’applique à chaque élément de la page ; il couvre donc aussi les animations que définissent d’autres feuilles de style, y compris celles des plugins. Lorsque le script de la Storefront du thème démarre un minuteur, comme le défilement automatique d’un diaporama, uniquement si une option de défilement automatique est définie, cette condition tient désormais compte aussi du réglage du visiteur. Les autres mouvements qu’un script déclenche sont consignés à l’intention de la personne qui relit, et non devinés.

Le slider de base de Shopware, celui qui se trouve derrière le slider d’images du CMS, reçoit un bouton visible et traduit pour le mettre en pause et le relancer, à côté de ses flèches précédente et suivante. Un bloc de code du script de la Storefront du thème relie le bouton au défilement automatique du slider, par le plugin de slider de Shopware lui-même. Lorsque le thème pilote le défilement automatique avec son propre minuteur, ce minuteur reçoit une ligne qui saute une étape tant que le slider est en pause. Le bouton reste masqué jusqu’à ce que le script l’ait relié : il n’apparaît donc jamais sans défilement automatique à mettre en pause. Pour les visiteurs dont l’appareil demande de réduire les mouvements, le slider démarre en pause. Les sliders construits avec d’autres bibliothèques sont laissés à une personne.

Les éléments <blink> et <marquee> des templates Twig deviennent des éléments statiques, avec le même contenu, les mêmes classes et les mêmes id : un <span> pour blink, un <div> pour marquee, ou un <span> lorsque le marquee se trouve dans un paragraphe ou un élément de texte semblable. Les réglages de défilement du marquee sont retirés, de sorte qu’aucun texte ne bouge tout seul.

Une vidéo qui se lance toute seule reçoit muted et playsinline : elle continue ainsi de jouer en silence, comme une vidéo d’arrière-plan, et se lit dans la page sous Safari sur téléphone au lieu d’ouvrir le lecteur plein écran. Un son qui démarre tout seul ne le fait plus ; les visiteurs le lancent eux-mêmes. La lecture automatique que définit le code d’un template ou un script, ainsi que les lecteurs intégrés dans des cadres, sont laissés à une personne. Dans un scan Validiscan, le son qui démarre tout seul est signalé par le contrôle des médias vs-media de Validiscan, qui remplace la règle no-autoplay-audio d’axe-core. vs-media, qui couvre aussi les sous-titres et les transcriptions, est MANUAL : sur Shopware, un tel constat s’accompagne donc d’indications plutôt que de cette modification.

Un champ de formulaire dont le texte d’étiquette figure déjà sur la page, juste avant le champ, est relié à ce texte. Un <label> sans for en reçoit un qui pointe vers le champ. Un élément de texte que le thème désigne par sa classe comme un titre ou une étiquette, comme le nom d’un groupe de variantes sur une fiche produit, devient le <label> du champ, en gardant ses classes et sa propre ligne. Les lecteurs d’écran lisent alors l’étiquette lorsque le champ reçoit le focus. Un champ qui n’a qu’un texte indicatif (placeholder) est laissé à une personne, car rédiger une étiquette est une décision de contenu.

Les champs qui demandent des données propres au client, comme ceux des formulaires d’inscription, d’adresse, de connexion, de contact et de newsletter, reçoivent la valeur autocomplete qui correspond à ce qu’ils demandent, comme l’adresse e-mail, le prénom et le nom, le code postal, le numéro de téléphone ou le mot de passe. La valeur est déduite du type, du nom, de l’identifiant, de l’étiquette et du texte indicatif du champ. Les mots de passe reçoivent new-password dans les formulaires d’inscription et current-password ailleurs. Les champs de recherche, de code promo, de quantité, de captcha et de message restent tels quels, et une valeur que le code d’un template écrit est laissée à une personne. Les navigateurs peuvent alors remplir les champs, et les technologies d’assistance peuvent savoir à quoi sert chacun.

Les parties d’une page que le script de la Storefront met à jour sur place, comme le prix après le choix d’une variante par un client, la disponibilité ou les totaux du panier, deviennent des régions live en mode poli. Les lecteurs d’écran lisent alors la nouvelle valeur une fois, en entier, sans interrompre. Lorsqu’un script remplace l’élément lui-même au lieu de son contenu, une région live ne fonctionnerait pas : la recette laisse donc cet élément à une personne.

Un cadre intégré sans titre, comme une carte ou une vidéo YouTube ou Vimeo, reçoit un titre traduit, tiré des fichiers de snippets du thème, qui dit ce qu’il montre. La recette déduit ce que montre le cadre de son adresse, de sa classe et de son nom, ou du template qui l’entoure. Un cadre dont le code ne révèle pas le contenu ne reçoit aucun titre de la recette, car un titre inventé est pire que pas de titre.

Lorsqu’un texte échoue au contrôle du contraste et que sa couleur est définie à un seul endroit du thème, cet endroit passe à la nuance la plus proche de la même teinte qui atteint le contraste requis, de sorte que le design reste reconnaissable. Cet endroit peut être un champ de couleur de theme.json avec la variable SCSS qui le répète, une variable SCSS ou une propriété personnalisée utilisée uniquement pour du texte, ou une seule déclaration color. Une couleur utilisée à plusieurs endroits ou aussi comme arrière-plan ou comme bordure, ainsi que les champs de couleur de base de Shopware pour la marque, les bordures, les arrière-plans, les messages d’état et le bouton d’achat, sont laissés à une personne. Une couleur enregistrée dans les réglages du thème de l’Administration l’emporte sur theme.json : si elle y a été modifiée, c’est aussi là qu’il faut la modifier. La règle color-contrast a le niveau ASSISTED : dans un projet, un constat de contraste suit donc la voie ASSISTED et cette recette ne lui est pas appliquée.

Une image n’est marquée comme décorative que lorsque le template prouve qu’elle n’apporte rien : elle se trouve dans un lien ou un bouton nommé autrement, c’est une icône placée à côté de sa propre étiquette textuelle, ou c’est un espaceur ou un séparateur. Un <img> reçoit un alt vide, une image affichée avec la balise sw_thumbnails de Shopware reçoit un alt vide dans ses attributs, et les icônes SVG reçoivent aria-hidden="true", de sorte que les lecteurs d’écran les ignorent au lieu de lire un nom de fichier. Toute autre image est du contenu, comme les logos de moyens de paiement dans un pied de page, et son alternative textuelle demande des mots qu’une personne choisit. Les règles que couvre cette recette ont le niveau ASSISTED : dans un projet, leurs constats suivent donc la voie ASSISTED et cette recette ne leur est pas appliquée.

Les éléments cliquables <div>, <span>, <i> et <li> des sliders et des bandeaux cookies, ainsi que les liens sans adresse, qui ne réagissent qu’à la souris deviennent de vrais boutons. Les classes, les attributs data et les id restent, de sorte que le script du thème les retrouve comme avant, et les touches Entrée et Espace font désormais ce que fait un clic. Un élément de liste garde sa place dans la liste et reçoit le bouton à l’intérieur. Une commande sans texte reçoit un nom traduit d’après sa fonction, par exemple « Show slide 2 », et une petite réinitialisation de style conserve son apparence. Une commande sans texte dont la fonction n’est pas claire, ou dont la mise en forme dépend de sa balise ou de sa position, est laissée à une personne. Dans un projet, cette recette est essayée sur les constats de diaporama de vs-carousel ; les constats du contrôle du bandeau cookies vs-cookie-banner ont le niveau ASSISTED et suivent la voie ASSISTED.

Les boutons et les liens qui n’affichent qu’une icône, comme la recherche, le panier, le compte, le lien du logo, les flèches de slider, les boutons de quantité et les choix de cookies, reçoivent un aria-label traduit qui dit ce qu’ils font. La fonction est déduite des classes de la commande, de la cible de son lien, de l’icône qu’elle contient et du composant qui l’entoure. Une commande dont le code ne révèle pas la fonction, comme un lien de réseau social dont le réseau est stocké sous forme de données, est laissée à une personne, car un nom inventé est pire que pas de nom. Dans un projet, cette recette est essayée sur les commandes de diaporama que signale vs-carousel ; les autres commandes qui n’ont qu’une icône sont signalées par des règles du niveau ASSISTED et suivent la voie ASSISTED.