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

La recette fait en sorte que l’élément <html> de vos templates d’en-tête prenne sa langue dans la fonction language_attributes() de WordPress, qui produit la langue du site, ou celle que définit un plugin multilingue, afin que les lecteurs d’écran prononcent correctement la page. Un template d’en-tête qui omet la langue se voit ajouter l’appel, et une valeur lang fixe qui n’est pas valide est remplacée par cet appel. Si la mauvaise valeur vient du réglage Langue du site de votre administration WordPress, la recette ne change rien, car il s’agit d’un réglage et non du code du thème. Lorsque le thème lit déjà un champ de langue pour chaque page, par exemple pour des pages juridiques allemandes dans une boutique anglaise, un filtre dans functions.php déclare la langue de cette page, et l’en-tête et le pied de page du site gardent la langue de la boutique. Sans un tel champ, la recette ne devine pas la langue.

Chaque template d’en-tête sans lien d’évitement reçoit un lien « Skip to content » juste après la balise d’ouverture <body>, ou après l’appel wp_body_open() qui la suit. Il reste masqué jusqu’à ce qu’il reçoive le focus, et il mène au contenu de la page. Si votre thème est un thème enfant de Storefront et qu’il a désactivé les liens d’évitement de Storefront, ils sont réactivés à la place. Lorsque les templates n’ont pas encore de zone principale, le conteneur de contenu des templates de page, un <div> d’id main ou de classe site-main, devient un élément <main>, qui le désigne comme la zone principale de la page ; lorsque les styles ou les scripts du thème sélectionnent ce conteneur comme un div, il reste tel quel. Les zones de navigation dont la fonction apparaît dans leur id ou leur classe reçoivent un nom, par exemple Primary navigation, Breadcrumb, Footer navigation ou Pagination. Un lien d’évitement existant qui ne mène nulle part est redirigé vers le contenu. Le texte du lien et les noms sont ajoutés en anglais.

WordPress construit lui-même le titre d’une page, à partir du nom de la page ou du produit, du numéro de page d’une liste paginée et du nom de la boutique. La recette répare ce qui, dans le thème, empêche l’apparition de ce titre. Un filtre de titre qui renvoie un titre personnalisé, par exemple issu d’un champ SEO, se rabat sur le titre généré lorsque le champ est vide. Un texte <title> fixe dans un template d’en-tête est remplacé par le titre que WordPress génère. Dans un thème qui n’est pas un thème enfant et n’affiche aucun titre, la prise en charge des titres de WordPress est activée dans functions.php. Lorsque le titre vient d’un plugin SEO ou des réglages propres à une page, la recette ne change rien.

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 template ou dans la chaîne PHP qui l’affiche. Les titres de widgets et les titres du pied de page ou d’une barre latérale deviennent des h2. Lorsque le saut vient d’un template WooCommerce affiché juste après le titre de la page, comme Billing details et Shipping details dans le tunnel de commande, les titres du même niveau dans les templates voisins suivent. Seul le niveau change : chaque titre garde ses classes, et un titre que les styles ou les scripts du thème sélectionnent par son niveau est laissé tel quel. Un titre sans classe prend l’aspect que le thème donne à son nouveau niveau. Sur une page sans titre principal, l’élément qui ressemble déjà à son titre, avec une classe de titre définie à 24 pixels au moins, devient le h1. Si une page n’a aucun élément de ce genre, la recette n’ajoute pas de titre et le cas est laissé à une personne.

La feuille de style principale du thème reçoit un seul contour pour le focus clavier : 2 pixels, en trait plein, à 2 pixels de l’élément, dans une couleur que le thème utilise déjà. Il s’agit d’une variable de couleur dont le nom contient focus, accent, brand, primary ou link, ou à défaut de la couleur des liens ou du texte courant. La première de ces couleurs dont le contraste avec l’arrière-plan de la page est d’au moins 3:1 est utilisée ; si aucune ne l’atteint, la première est éclaircie ou assombrie dans la même teinte jusqu’à ce qu’elle l’atteigne. Sur les zones sombres à texte clair, comme une barre supérieure sombre, le contour prend la couleur claire du texte. Un outline: none au focus qui ne laisse rien à sa place est retiré des règles du thème ; les règles qui ne masquent le contour que pour les clics de souris restent. Un thème qui a déjà un contour de focus visible, et aucune règle qui le masque, est laissé tel quel.

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 et des champs de formulaire, 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. Seule la balise du template qui produit l’élément signalé est modifiée. Un tabindex que du code PHP produit ou qu’un script définit est laissé à une personne.

Dans un bandeau cookies ou un diaporama qui fait partie de votre thème, les éléments cliquables <span>, <div>, <li> ou <i> qui ne fonctionnent qu’à la souris deviennent de vrais éléments <button>. Chaque classe et chaque attribut restent, de sorte que les styles et les scripts du thème continuent de fonctionner, et les touches Entrée et Espace font désormais ce que fait un clic. Une courte réinitialisation de style, limitée à ces classes, conserve leur apparence. Un bouton qui n’a qu’une icône, dans le même bandeau ou le même diaporama, reçoit un nom en anglais, comme décrit plus bas à propos des noms d’icônes. Un élément qu’aucun script n’écoute, un élément que le thème met en forme ou pilote par le nom de sa balise, ou un élément vide dont la fonction n’est pas claire, est laissé tel quel.

La recette retire user-scalable=no et tout maximum-scale inférieur à 2 de la balise viewport, dans les templates d’en-tête ou dans le code PHP qui produit la balise, de sorte que les visiteurs puissent de nouveau zoomer avec deux doigts sur votre boutique. Pour la règle plus stricte meta-viewport-large d’axe-core, tout maximum-scale inférieur à 5 est retiré. Les autres réglages du viewport restent exactement tels quels. Une balise viewport dont PHP calcule le contenu, ou qu’un plugin produit, est laissée à une personne.

Les commandes que le scan a trouvées plus petites que 24 × 24 pixels, comme les icônes de réseaux sociaux, les pastilles de couleur ou les boutons de quantité, reçoivent cette taille minimale. La recette repère les règles des feuilles de style qui donnent à ces éléments précis une largeur ou une hauteur fixe inférieure à 24 pixels et la portent à 24 pixels ; lorsque l’élément dispose son icône avec flexbox ou grid, l’icône est centrée pour ne pas se retrouver dans un coin. Une commande dont la taille vient de la marge intérieure (padding) ou de son contenu ne peut pas être mesurée à partir des feuilles de style et est laissée à une personne.

Lorsqu’un texte échoue au contrôle du contraste et que sa couleur est définie à un seul endroit dans les feuilles de style du thème, comme variable CSS ou comme couleur de la règle qui met ce texte en forme, cette couleur passe à la nuance la plus proche, plus claire ou plus foncée, de la même teinte, qui atteint le contraste que le scan a mesuré comme requis, sur chaque arrière-plan qu’il a mesuré. Une couleur définie à plusieurs endroits, qui modifierait aussi des éléments dont le scan n’a pas mesuré le contraste, ou que le thème utilise aussi pour des arrière-plans ou des bordures, est laissée à une personne.

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 du thème laisse chaque animation s’exécuter une seule fois, trop brièvement pour qu’on la voie, de sorte qu’elle s’arrête dans son état final ; les transitions deviennent instantanées et le défilement fluide est désactivé. Lorsque les scripts du thème lancent le défilement automatique d’un diaporama, avec Slick, Swiper, Splide, Owl ou Flickity, celui-ci ne démarre que pour les visiteurs qui n’ont pas demandé de réduire les mouvements. Le mouvement qui vient d’un plugin ou d’un script inline n’est pas modifié.

Un diaporama des templates de votre thème qui défile tout seul reçoit un bouton visible pour le mettre en pause et le relancer, intitulé « Pause slideshow » et « Play slideshow » en anglais. Le bouton devient le premier élément du diaporama : les personnes qui naviguent au clavier l’atteignent donc avant les diapositives. Un court script du fichier de script principal du thème relie le bouton au défilement automatique propre au slider : une animation CSS du thème, Slick, Swiper ou Flickity. Pour les visiteurs dont l’appareil demande de réduire les mouvements, le diaporama démarre en pause. Un slider qu’un plugin ou un script inline pilote est laissé à une personne.

Les éléments <blink> et <marquee> des templates du thème, et des chaînes PHP qui les produisent, 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. Les réglages de défilement du marquee sont retirés, de sorte qu’aucun texte ne bouge tout seul. Un élément que le code ouvre et ferme à des endroits différents est laissé à une personne.

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 se lit dans la page sur iPhone au lieu de passer en plein écran ; lorsque la vidéo a des commandes, les visiteurs peuvent toujours activer le son. Un son qui démarre tout seul ne le fait plus. Les médias qu’un script lance 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 d’axe-core que cette recette couvre ; vs-media est MANUAL (voir la liste plus bas) : sur WooCommerce, 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à dans le template, mais n’est pas relié au champ, est relié à celui-ci : le <label> placé juste avant le champ, ou juste après une case à cocher ou un bouton radio, reçoit un for qui pointe vers le champ, ou bien un élément de texte désigné comme étiquette est relié par aria-labelledby. Les lecteurs d’écran lisent alors l’étiquette lorsque le champ reçoit le focus, et un clic sur un <label> relié déplace le focus vers le champ. 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 sur le client, comme les champs de connexion, d’inscription et de commande, reçoivent la valeur autocomplete qui correspond à ce qu’ils demandent, comme l’adresse e-mail, le nom d’utilisateur, le mot de passe actuel ou nouveau, le prénom et le nom, la société, l’adresse, le code postal, le pays ou le numéro de téléphone. La valeur est déduite du type, du nom, de l’id et de l’étiquette du champ. Une valeur manquante, off ou non valide est remplacée ; une valeur valide reste. Les champs de facturation et de livraison de WooCommerce sont produits par WooCommerce, et non par le thème : un filtre dans functions.php définit donc leurs valeurs. Il s’exécute après les filtres propres au thème pour ces champs, qui peuvent supprimer les valeurs. Les champs qui ne demandent aucune donnée personnelle, comme les champs de recherche, de code promo ou de quantité, sont laissés tels quels, de même qu’un champ dont le code ne montre pas la fonction.

Lorsqu’un client choisit une autre taille ou une autre couleur, la zone qui affiche le prix et le stock de la variation choisie est réécrite sur place. Cette zone devient une région live, de sorte que les lecteurs d’écran annoncent le nouveau prix et le nouveau stock sans que le client ait à s’y déplacer. Le lien du panier dans l’en-tête est remplacé en bloc lorsqu’un produit est ajouté : il ne peut donc pas porter lui-même l’annonce. À côté, la recette ajoute un message d’état masqué visuellement, et un court bloc du script du thème y écrit « Product added to your cart. » ou « Product removed from your cart. » lorsque WooCommerce signale le changement. Les deux messages sont ajoutés en anglais. Une zone qui est déjà une région live ou qui se trouve dans l’une d’elles, ou que le script du thème remplace en bloc, est laissée telle quelle.

Les boutons et les liens qui n’affichent qu’une icône reçoivent un nom qui dit ce qu’ils font, lorsque le code montre leur fonction : d’après le nom de l’icône elle-même, d’après la classe ou l’id de la commande, ou d’après la destination d’un lien, comme le panier, la page du compte ou un réseau social. Par exemple Search, Cart, My account, Show password, Close et Menu. 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é, et il est ajouté en anglais. Les noms de réseaux sociaux sont des noms de marque et restent tels quels. Une commande dont le code ne montre pas la fonction 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, comme un logo à côté du nom de la boutique, c’est une petite 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 alt="", et une icône SVG reçoit aria-hidden="true", de sorte que les lecteurs d’écran l’ignorent au lieu d’annoncer un graphique sans nom. 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 en anglais qui dit ce qu’il montre. La recette le tire du titre d’un fichier intégré dans le thème, du fournisseur indiqué dans l’adresse du cadre, ou de mots comme map ou video dans sa classe ou son id. Un cadre dont le code ne montre pas le contenu ne reçoit aucun titre générique ; il est laissé à une personne.