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

Un layout dont l’élément <html> n’a pas d’attribut lang, ou en a un vide ou invalide, reçoit la langue que votre boutique affiche, de sorte que les lecteurs d’écran prononcent la page dans la bonne langue. Lorsque le thème conserve déjà la langue propre à une page dans un métachamp, par exemple pour des pages juridiques allemandes dans une boutique anglaise, le layout utilise ce métachamp s’il est renseigné. Sans un tel champ, la recette ne devine pas la langue d’une page.

Un lien « Skip to content » devient le premier élément de chaque page. Il reste masqué jusqu’à ce qu’un utilisateur du clavier l’atteigne, et il mène au contenu principal, qui est balisé comme la zone principale de la page. Les zones de navigation présentes sur une même page reçoivent des noms distincts, par exemple Main menu, Footer menu ou Breadcrumbs, et le contenu situé hors de toute zone de la page, comme une barre d’annonces, devient une région nommée. Un lien d’évitement existant qui ne mène nulle part est redirigé vers le contenu principal. Les modifications effectivement apportées dépendent de ce que le scan a relevé.

Chaque layout dont l’élément <title> est absent, vide ou contient le même texte fixe sur toutes les pages reçoit un titre construit à partir des variables de Shopify. Si votre layout principal a déjà un titre qui nomme la page, les autres layouts reçoivent le même. Sinon, le titre contient le titre de la page, le numéro de page d’une liste paginée et le nom de la boutique, le mot « page » étant traduit grâce aux fichiers de langue du thème.

Un titre qui saute un niveau, comme un h4 juste après un h2, reçoit le niveau qui suit directement celui du titre précédent, dans le fichier de section où il est écrit. Lorsque le thème met en forme les titres selon leur niveau, une petite règle de style conserve l’aspect d’origine du titre. Sur une page sans titre principal, l’élément qui a déjà l’apparence de son titre devient le h1 ; sur la page d’accueil, c’est l’option du thème qui permet d’afficher le logo comme h1. Si une page n’a aucun élément de ce genre, la recette n’ajoute pas de titre masqué, car c’est une décision de contenu.

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 d’accent de votre thème (ou la couleur de son texte, ou noir ou blanc, lorsque le thème n’a pas de couleur d’accent), éclaircie ou assombrie dans la même teinte jusqu’à atteindre un contraste d’au moins 3:1 avec l’arrière-plan de la page. Les règles du thème qui masqueraient encore le contour perdent leur outline: none, sauf si elles montrent le focus d’une autre façon, par exemple avec une bordure ou une ombre. Le contour a une seule couleur pour tout le thème : sur les sections dotées d’un schéma de couleurs sombre, il peut donc avoir besoin d’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 écrit par le code des templates du thème est laissé à une personne. La recette traite aussi les constats du contrôle de l’ordre de tabulation vs-focus-order qui portent sur un tabindex supérieur à 0 ; le reste de ce contrôle demeure MANUAL.

Les éléments cliquables qui ne fonctionnent qu’à la souris, comme les points d’un diaporama ou les choix d’un bandeau cookies construits avec des éléments <div> ou <span>, deviennent de vrais éléments <button>. Chaque classe et chaque attribut sont conservés, de sorte que le script du thème continue de fonctionner, et les touches Entrée et Espace font désormais ce que fait un clic. Un bouton sans nom en reçoit un d’après sa fonction, par exemple « Load slide 2 of 3 », et une petite réinitialisation de style conserve son apparence. Un élément qu’aucun script n’écoute, ou dont la fonction n’est pas claire, est laissé tel quel.

La recette retire user-scalable=no et tout maximum-scale inférieur à 5 des balises viewport des fichiers Liquid du thème, de sorte que les visiteurs puissent agrandir votre boutique en zoomant avec deux doigts jusqu’à 500 %. Les autres réglages du viewport restent exactement tels quels. Une limite de zoom fixée par le code des templates du thème est laissée à une personne.

Les commandes que le scan a trouvées trop petites, comme les icônes de l’en-tête, les pastilles de couleur ou les boutons de quantité, reçoivent dans la feuille de style principale une taille minimale de 24 × 24 pixels, ciblée par leur classe. Les icônes qu’elles contiennent gardent leur taille. Un lien ou un autre élément que le thème laisse en affichage inline passe en inline-flex, avec son icône centrée, car les éléments inline ignorent une taille minimale.

Lorsqu’un texte échoue au contrôle du contraste et que sa couleur est définie à un seul endroit, cette couleur passe à la nuance la plus proche, plus claire ou plus foncée, de la même teinte, qui atteint le contraste requis avec chaque arrière-plan que le scan a relevé pour ce texte. Cet endroit peut être la règle de feuille de style qui met le texte en forme, ou une variable CSS ou un réglage de couleur de config/settings_data.json que rien d’autre dans le thème n’utilise. Une couleur calculée en Liquid ou définie à plusieurs endroits est laissée à une personne, de même qu’une couleur partagée, car la modifier affecterait des paires de couleurs que le scan n’a pas mesurées.

Lorsque l’appareil d’un visiteur est réglé pour réduire les mouvements, un bloc placé à la fin de la feuille de style principale ne laisse chaque animation CSS s’exécuter qu’une fois, trop brièvement pour qu’on la voie, raccourcit les transitions et désactive le défilement fluide. Lorsque le script du thème lance lui-même la lecture automatique d’un diaporama, ce lancement n’a pas lieu pour ces visiteurs. Le mouvement piloté par un script tiers n’est pas modifié par cette recette.

Un diaporama qui défile tout seul reçoit un bouton visible et traduit pour le mettre en pause et le relancer, placé parmi ses commandes et affiché seulement lorsque la lecture automatique est active. Un court script ajouté au fichier de script principal du thème relie le bouton à la lecture automatique propre au diaporama, qu’il s’agisse de celui de Dawn, de Swiper, de Slick, de Flickity, de Splide ou d’une animation CSS. Pour les visiteurs dont l’appareil demande de réduire les mouvements, le diaporama démarre en pause.

Les éléments <blink> et <marquee> 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, ou un <span> lorsque le marquee se trouve dans un paragraphe ou un lien. 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, de sorte qu’elle continue de jouer en silence, comme une vidéo d’arrière-plan, et le filtre video_tag de Shopify reçoit muted: true. Un son qui démarre tout seul ne le fait plus. Les lecteurs YouTube et Vimeo intégrés 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, qui remplace la règle d’axe-core que cette recette couvre. vs-media a le niveau MANUAL, et sur Shopify cette recette n’est pas utilisée pour ses constats.

Un champ de formulaire dont le texte d’étiquette est déjà visible sur la page, mais sans lien avec le champ, est relié à ce texte : un <label> placé à côté reçoit un for qui pointe vers le champ, ou un texte situé juste avant le champ, comme le nom d’une option de taille ou de couleur, devient son étiquette grâce à aria-labelledby, de sorte que la mise en page ne change pas. 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 d’adresse, de compte, de connexion et de contact que le scan a signalés reçoivent la valeur autocomplete qui correspond à ce qu’ils demandent, comme l’e-mail, le prénom et le nom, l’adresse postale, le code postal, le pays, le numéro de téléphone ou le mot de passe. La valeur est déduite du type du champ, de son nom, de son étiquette et de son texte indicatif. Lorsqu’un snippet produit ses champs à partir de paramètres, les champs reprennent un paramètre autocomplete, et chaque appel render du snippet transmet la valeur qui correspond à ses propres arguments. Les navigateurs peuvent alors remplir les champs, et les technologies d’assistance peuvent savoir à quoi sert chacun. Un champ dont le code ne montre pas la finalité est laissé tel quel.

La partie d’une page que le script du thème réécrit lorsqu’un client choisit une autre variante ou change une quantité, comme le prix, la mention de stock ou le sous-total du panier, est marquée comme une région d’état. Les lecteurs d’écran annoncent alors la nouvelle valeur sans que le client ait à s’y déplacer. Le script du thème lui-même n’est pas modifié. Une zone qui contient aussi des boutons ou des liens, qui seraient lus avec elle, est laissée telle quelle.

Les boutons et les liens qui n’affichent qu’une icône, comme la recherche, le panier, le compte, les flèches d’un diaporama, les boutons de quantité et les choix de cookies, reçoivent un nom qui dit ce qu’ils font, lorsque le code montre leur fonction. Le nom est un texte visuellement masqué à l’intérieur de la commande, ou un aria-label lorsque le thème n’a pas de classe pour le texte masqué. Un lien de logo dont l’image n’a pas d’alternative textuelle reçoit le nom de votre boutique. Une commande dont le nom devrait venir de votre propre contenu est laissée à une personne.

Une image n’est marquée comme décorative que lorsque le code prouve qu’elle n’apporte rien : elle se trouve dans un lien ou un bouton qui a son propre texte, 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 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 ou le mot « image ». Toute autre image est du contenu, et son alternative textuelle est laissée à une personne.

Un cadre intégré sans titre, comme une carte ou une vidéo YouTube ou Vimeo, reçoit un titre traduit qui dit ce qu’il montre. La recette le déduit de l’adresse source ou du contenu du cadre. Un cadre dont le code ne montre pas le contenu ne reçoit aucun titre générique ; il est laissé à une personne.