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

Magento définit la langue d’une page à partir de la locale de sa vue de magasin, par exemple en pour la locale en_US, et la produit par son template racine. Lorsque votre thème surcharge ce template et produit son propre lang, en général le code de locale en_US, qui n’est pas une balise de langue valide, ou n’en produit aucun, le template produit de nouveau les attributs propres à Magento : chaque page reçoit ainsi un lang valide. Un lang défini dans le XML de layout sous la forme d’une locale, comme de_DE, devient de-DE. Une page dont le contenu est dans une autre langue que celle de sa vue de magasin, comme une page juridique allemande dans une boutique anglaise, vous revient : servez-la depuis une vue de magasin dans cette langue, ou indiquez la langue dans le contenu lui-même.

Le thème Luma de Magento a, en haut de chaque page, un lien « Skip to Content » qui mène au début du contenu principal, et ce contenu est la zone <main> de la page. Un thème peut perdre l’un et l’autre. Lorsque le thème a retiré le lien dans son XML de layout, la recette annule ce retrait. Lorsque le template d’en-tête propre au thème ne produit jamais le lien, la recette l’y ajoute avec les classes de Luma ; si les feuilles de style du thème le laissaient sans mise en forme, la recette ajoute des styles qui le gardent masqué jusqu’à ce qu’il reçoive le focus clavier. Lorsque le XML de layout produit le contenu principal sous la forme d’un autre élément, comme un <div>, il redevient <main>. Les zones de navigation sans nom en reçoivent un qui dit ce qu’elles contiennent, par exemple Main menu, Footer links ou Breadcrumbs ; une zone dont le code ne montre pas la fonction, ou qui partagerait son nom avec une autre, est laissée à une personne. Le contenu situé hors de l’en-tête, de la zone principale et du pied de page, comme une barre de promotion, n’est pas déplacé : le déplacer est une modification de votre layout que votre développeur fait dans le XML de layout.

Magento donne à chaque page un titre propre, comme le nom du produit ou de la catégorie, ou « Search results for: » suivi du terme recherché, avec le préfixe ou le suffixe défini pour votre boutique. Un thème peut le remplacer par un <title> vide dans le XML de layout, et la page n’a alors aucun titre. La recette retire ces titres vides, de sorte que le titre propre de Magento s’applique de nouveau. Les titres qui contiennent du texte sont votre formulation et restent tels quels. Si aucun fichier de layout du thème ne vide le titre, la recette ne change rien : le titre vient alors de la page elle-même et des réglages HTML Head de l’Admin de Magento.

Un titre qui saute un niveau, comme un h4 juste après un h2, remonte au niveau suivant, et les titres qui le suivent dans le même template, à son niveau ou à un niveau plus profond, remontent avec lui. Les classes restent, de sorte que les styles que le thème définit par classe continuent de s’appliquer ; votre développeur vérifie les styles que le thème définit par la balise du titre. Lorsque le niveau du titre qui précède ne peut être lu ni dans le scan ni dans le même template, le titre est laissé à une personne. Magento affiche le titre de chaque page sous forme de h1. Un thème qui masque le titre sur une page avec display: none supprime le seul h1 de la page : la recette le masque donc visuellement à la place, comme les styles propres à Magento masquent du texte, et le h1 reste dans le plan que les lecteurs d’écran utilisent. Un titre retiré dans le XML de layout est laissé à une personne, car le rétablir changerait l’aspect de la page.

La feuille de style du thème 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. La couleur vient d’une variable de couleur de marque ou de couleur primaire, à défaut du bouton principal, à défaut de la couleur des liens, et elle est ajustée jusqu’à atteindre un contraste d’au moins 3:1 avec l’arrière-plan de la page. Les zones qui ont un arrière-plan propre, comme une barre supérieure sombre, reçoivent une couleur de contour qui a ce contraste à cet endroit. Les règles du thème qui retirent le contour des liens, des boutons et d’autres commandes au focus sont supprimées, sauf si elles montrent le focus d’une autre façon, par exemple avec une bordure ou une ombre.

Un tabindex supérieur à 0 fait passer un élément en tête de l’ordre de tabulation. De telles valeurs ne fonctionnent que les unes par rapport aux autres sur l’ensemble de la page : dès qu’il est établi qu’un élément signalé en porte une dans les templates du thème, la recette retire tous les tabindex positifs fixes des templates du thème, y compris sur des éléments que le constat n’énumérait pas. Les liens, les boutons et les champs de formulaire perdent l’attribut ; les autres éléments reçoivent tabindex="0", afin qu’ils restent atteignables pendant que la touche Tab suit l’ordre de la page. Un tabindex que du code PHP calcule est laissé à une personne. Le contrôle vs-focus-order de Validiscan signale aussi un focus qui saute d’un endroit à l’autre de la page pour d’autres raisons, par exemple un contenu placé ailleurs par ses styles ; il est MANUAL, et ses constats s’accompagnent donc d’indications, et non de cette modification.

La recette retire user-scalable=no et tout maximum-scale inférieur à 2 de la balise viewport dans le XML de layout du thème, comme default_head_blocks.xml, où Luma la déclare, ou dans ses templates, afin que les visiteurs puissent zoomer sur la page avec 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. Une valeur de viewport que du code PHP calcule est consignée à l’intention de votre développeur, qui la vérifie. Si la balise qui bloque le zoom ne vient pas du thème, par exemple des réglages HTML Head de l’Admin de Magento ou d’un module, la recette ne change rien.

Les boutons et les liens que le scan a trouvés trop petits, comme les icônes de réseaux sociaux ou les boutons de quantité, reçoivent une taille minimale de 24 × 24 pixels dans un bloc à la fin de la feuille de style du thème. Le bloc reprend les sélecteurs avec lesquels le thème les a rendus petits, ou leurs propres classes, et définit une largeur et une hauteur minimales, qui l’emportent sur une largeur ou une hauteur plus petite. Les icônes à l’intérieur et la mise en page autour restent telles quelles. Un lien ou un autre élément inline sans règle display passe en inline-flex, car les éléments inline ignorent une taille minimale. Une commande sans classe que la feuille de style peut cibler est laissée à une personne.

Lorsque l’appareil d’un visiteur est réglé pour réduire les mouvements, un bloc à la fin de chaque feuille de style du thème désactive les animations, les transitions de 5 secondes ou plus et le défilement fluide que cette feuille de style déclenche, sélecteur par sélecteur. Lorsque les scripts du thème dans web/js démarrent un slider avec le défilement automatique activé, le slider démarre sans défilement automatique pour ces visiteurs. Une règle imbriquée dans une autre règle LESS est consignée à l’intention de votre développeur. Les animations du code de Magento ou des extensions ne figurent pas dans les fichiers du thème et demandent leur propre protection.

Sur Magento, cette recette n’ajoute pas de bouton de pause. Le slider de Page Builder fonctionne avec les propres scripts de Magento, et un thème ne peut pas lui donner de bouton de pause sans surcharger le code de Magento. La recette utilise à la place le réglage propre au slider : sur chaque slider Page Builder à défilement automatique présent dans les fichiers du thème, le défilement automatique est désactivé, comme le fait l’interrupteur Autoplay de Page Builder, et les flèches sont activées là où le slider n’aurait sinon aucun moyen de passer d’une diapositive à l’autre. Les animations CSS sans fin qui font bouger un slider d’elles-mêmes sont retirées. Les diapositives ne changent alors que lorsque le visiteur utilise les points ou les flèches : rien ne bouge tout seul, il n’y a donc rien à mettre en pause. Un slider stocké dans la base de données de Magento n’est pas un fichier du thème : vous désactivez son défilement automatique avec le réglage Autoplay de Page Builder. Un slider que les propres scripts du thème démarrent avec le défilement automatique, comme un slider Slick ou Swiper, a besoin d’un bouton de pause relié à ce script, ce qui est laissé à une personne.

Les éléments <blink> et <marquee> des templates du thème 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. Les attributs propres au marquee, comme sa vitesse et sa direction de défilement, sont retirés, de même que le style text-decoration: blink dans les feuilles de style du thème : aucun texte ne bouge ni ne clignote donc tout seul.

Une vidéo des templates du thème qui se lance toute seule reçoit muted et playsinline : elle continue ainsi de jouer en silence et dans la page sur téléphone. Un contenu audio ne démarre plus tout seul. Les lecteurs YouTube et Vimeo intégrés qui démarrent seuls sont réglés pour démarrer sans le son. La lecture automatique qu’active du code PHP est laissée à 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 d’axe-core que cette recette couvre. vs-media, qui couvre aussi les sous-titres et les transcriptions, est MANUAL : sur Magento, 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, avant le champ, est relié à ce texte. Un <label> sans for en reçoit un qui pointe vers le champ. Un texte d’étiquette dans un <span> ou un <strong>, comme un texte « Sort By » portant la classe sorter-label de Luma à côté du menu de tri d’une page de catégorie, devient un <label> avec les mêmes classes. Un texte d’étiquette dans un élément de bloc, comme <div class="label">, garde sa balise et est relié par aria-labelledby. Le texte doit se trouver dans un conteneur sans autre champ, de sorte qu’il ne puisse pas appartenir à un autre. 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 des templates du thème qui demandent des données propres au client, dans les formulaires d’adresse, de compte, de connexion, de contact et de newsletter, reçoivent la valeur autocomplete qui correspond à ce qu’ils demandent, comme l’adresse e-mail, le nom, le numéro de téléphone, l’adresse postale, le code postal ou le mot de passe. La valeur est déduite du type, du nom, de l’id, de l’étiquette, du texte indicatif et du titre du champ, selon les mêmes règles que le contrôle des formulaires de Validiscan, et les champs de facturation et de livraison reçoivent leur section, comme dans shipping given-name. Dès qu’un champ d’un formulaire est signalé, tous les champs de ce formulaire sont traités. Les mots de passe reçoivent new-password dans les formulaires d’inscription et de réinitialisation et dans les formulaires qui comportent plusieurs champs de mot de passe, et current-password ailleurs. Les champs de code promo, de recherche, de destinataire de cadeau, de commentaire, de quantité et de CAPTCHA ne reçoivent jamais de valeur. Une valeur que le code d’un template écrit, ou une valeur valide qui semble erronée pour le champ, est laissée à une personne.

Les scripts propres à Magento réécrivent le texte à l’intérieur de conteneurs fixes lorsqu’un client choisit une taille ou une couleur ou ajoute un produit au panier. La recette transforme ces conteneurs, dans les templates du thème, en régions live, de sorte que les lecteurs d’écran lisent la nouvelle valeur sans que le client ait à s’y déplacer. Le bloc de prix et le compteur du mini-panier sont lus en entier lorsqu’ils changent ; le message de stock et les messages de la page, comme la note indiquant qu’un produit a été ajouté au panier, reçoivent role="status". Les scripts eux-mêmes ne sont pas modifiés. Lorsque le thème désigne toute la page comme une région live, ce qui pousse les lecteurs d’écran à lire chaque changement à voix haute, cette désignation est retirée. Lorsque c’est le script d’une extension qui l’ajoute pendant l’exécution de la page, le cas est laissé à une personne.

Un cadre intégré sans titre, comme une carte, une vidéo YouTube ou Vimeo, un calendrier, un formulaire ou un widget d’avis, reçoit un titre traduisible qui dit ce qu’il montre. La recette déduit ce que montre le cadre de son adresse, y compris les parties fixes d’une adresse que construit du code PHP, ainsi que de ses classes, de son id et de son nom. Un cadre dont le code ne révèle pas le contenu ne reçoit aucun titre de la recette et est laissé à une personne.

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 couleur la plus proche de la même teinte qui atteint le contraste requis avec chaque arrière-plan que le scan a mesuré pour ce texte. Cet endroit peut être une variable LESS ou une propriété personnalisée CSS utilisée uniquement pour la couleur du texte, ou une seule règle color. Lorsque le thème fournit un styles-m.css compilé, il reçoit la même modification. Une couleur utilisée à plusieurs endroits, aussi comme arrière-plan ou comme bordure, ou dans des règles dont le scan n’a pas mesuré l’arrière-plan, est laissée à une personne.

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 qui a déjà un texte ou un nom, comme une vignette de promotion avec son propre titre ; c’est une icône, de 48 pixels au plus ou avec une classe ou un nom de fichier d’icône, placée à côté de sa propre étiquette textuelle ; ou c’est un espaceur ou un séparateur. Un <img> reçoit alors un alt vide, et une icône SVG reçoit aria-hidden="true", de sorte que les lecteurs d’écran l’ignorent au lieu de lire un nom de fichier. Toute autre image est traitée comme du contenu, et son alternative textuelle demande des mots qu’une personne choisit.

Les éléments cliquables <div> et <span> des sliders et des bandeaux cookies deviennent de vrais boutons. La recette ne considère un élément comme une commande que si le code l’indique : il a role="button", un gestionnaire de clic ou une liaison de clic Knockout, ou une classe ou un attribut data que le script du thème sélectionne pour gérer les clics. Les classes, les attributs data et les attributs ARIA restent, de sorte que les styles et les scripts du thème retrouvent la commande comme avant, et les touches Entrée et Espace font désormais ce que fait un clic. Une petite réinitialisation de style à la fin de la feuille de style du thème conserve son apparence, y compris au survol et au focus, et les contours de focus ne sont pas touchés. Une commande qui contient des blocs, des liens ou des champs, ou qui n’a pas de classe, est laissée à une personne.

Les boutons et les liens qui n’affichent qu’une icône, comme la recherche, le mini-panier, le compte, la liste de souhaits, la comparaison, le menu, la fermeture, les boutons précédent et suivant, ainsi que les choix d’un bandeau cookies, reçoivent un aria-label qui dit ce qu’ils font, dans la formulation du thème Luma de Magento lorsque Luma en a une, comme « Search », « My Cart » ou « Allow Cookies ». La fonction est déduite des classes, de l’id, des attributs data et de la cible de lien de la commande, de son icône et du formulaire ou du bandeau cookies qui l’entoure. Une commande dont le code ne révèle pas la fonction, comme un lien de réseau social construit dans une boucle à partir d’une adresse stockée sous forme de données, ou un lien dont le seul contenu est une photo de produit, est laissée à une personne, car son nom dépend de votre contenu.