Accessibilité

Un store locator sert souvent au moment où l’on se déplace : sur un téléphone, d’une main, parfois avec un lecteur d’écran ou un zoom fort. Les trois blocs de l’app visent le niveau AA des WCAG 2.2, sur tout thème Online Store 2.0, pour que chacun trouve son point de vente.

Parce que les blocs héritent du thème, leur accessibilité se joue à deux : ce que font les blocs, et ce que fait le thème autour d’eux. Cette page détaille les deux, puis donne une vérification rapide à faire après une intégration.

Ce que font les blocs

Couleurs et contraste

Les blocs prennent les couleurs du thème. Les seules couleurs qu’ils imposent (texte atténué, bordures des contrôles) se calculent à partir de la couleur du texte du thème, avec un contraste de 4,5:1 pour le texte et de 3:1 pour les contrôles.
Un état (point de vente choisi, filtre actif) se dessine avec la couleur du texte du thème : une barre, une teinte, une bordure plus épaisse.
La couleur n’est jamais la seule information : le type d’un point de vente est écrit dans la liste et dans l’infobulle, à côté de la couleur de son marqueur, et le statut d’ouverture dit « Ouvert en ce moment » ou « Fermé » à côté de son point vert ou rouge.

Clavier et focus

Tout s’utilise au clavier, dans l’ordre où on le voit : sur téléphone, la recherche, la carte, puis la liste.
Le focus reste visible : les blocs ne retirent jamais l’outline du thème.
La recherche est une combobox ARIA : flèches pour parcourir les suggestions, Entrée pour choisir, Échap pour fermer puis vider. Échap replie aussi le panneau des filtres.

Lecteurs d’écran

Chaque contrôle a un libellé, même quand il n’en montre pas (la recherche, les boutons icônes).
Le nombre de suggestions, le nombre de points de vente après un filtre et la phrase de repli de la vue à l’arrivée sont annoncés.
Un lien qui ouvre un nouvel onglet (itinéraire, carte de la page) le dit.
Une carte de point de vente cliquable n’a qu’un lien lu, son nom ; ses autres liens (téléphone, itinéraire) gardent leur action.
Les photos ont un texte alternatif.
La page d’un point de vente a un seul h1, le nom, et des titres dans l’ordre.

Taille et mouvement

Les zones cliquables font 24 px au moins.
Les tailles sont en em et rem : elles suivent la taille de texte du thème et le zoom du navigateur.
Les animations sont coupées quand le visiteur demande moins de mouvement (prefers-reduced-motion).

Textes

Tous les textes des blocs, y compris ceux lus seulement par les lecteurs d’écran, viennent des fichiers de langue de l’app : ils suivent la langue de la page (anglais, français, allemand, espagnol, italien).
Dates, heures et distances s’écrivent dans le format de la langue de la page.

Ce qui reste au thème

Les couleurs du color scheme de la section : le contraste entre son texte et son fond. Choisissez pour la section du bloc un color scheme qui tient 4,5:1.
Le style des liens et des boutons : les blocs gardent ceux du thème.
Le titre de la page : si vous placez le titre du thème au-dessus du bloc Page point de vente, videz le champ Titre du bloc, pour qu’il n’y ait qu’un h1.

Quand vous restylez un bloc (voir Blocs de thème) :

gardez un contraste de 4,5:1 pour le texte et de 3:1 pour les bordures des contrôles ;
ne retirez pas l’outline du focus ;
ne rendez pas visible un élément réservé aux lecteurs d’écran (store-locator__visually-hidden), et ne le masquez pas avec display: none ;
gardez des zones cliquables de 24 px au moins.

Vérifier votre intégration

Après avoir placé et restylé les blocs, cinq minutes suffisent pour les gestes qui comptent :

Au clavier seul, sur la page du store locator : tabulez de la recherche à la liste. Le focus doit rester visible à chaque étape. Tapez une ville, choisissez une suggestion avec les flèches et Entrée.
Zoom à 200 % dans le navigateur : rien ne doit se chevaucher, ni sortir de l’écran.
Sur un téléphone, ou à 375 px de large : la recherche, la carte et la liste doivent tenir ensemble, et au bout de la liste le défilement doit passer à la page.
Avec un lecteur d’écran (VoiceOver sur Mac et iPhone, NVDA sur Windows) : sur la page d’un point de vente, parcourez les titres ; sur le store locator, appliquez un filtre et écoutez le nombre de points de vente annoncé.
Contraste : vérifiez les couleurs que vous avez changées avec un outil de contraste.