Shopify

Configuration d’une boutique Shopify accessible

Configuration d'une boutique Shopify accessible

Le commerce électronique a parcouru un long chemin pour accueillir les consommateurs handicapés. Au fil des ans, j’ai abordé de nombreux aspects de l’accessibilité des achats en ligne, des lecteurs d’écran aux poursuites judiciaires.

Shopify, l’objet de cet article, est une plate-forme de commerce électronique rare qui fournit des modèles d’accessibilité volontaire des produits, des documents expliquant à quel point son produit est accessible aux utilisateurs handicapés – vision altérée, quadriplégie, maladie de Parkinson, sclérose en plaques, etc. Shopify fournit plusieurs VPAT pour différents aspects de la plate-forme, tels que le processus de paiement et la valeur par défaut Thème « Début ».

Le caractère volontaire d’un VPAT peut parfois signifier qu’il manque de détails et de précision. Pourtant, les VPAT de Shopify donnent beaucoup d’informations utiles.

Shopify fournit des VPAT pour différents aspects de la plate-forme, tels que le processus de paiement et le thème par défaut « Debut ».

Tout VPAT doit être interprété avec prudence. Par exemple, le Paiement Shopify VPAT s’applique uniquement au processus de paiement – l’ajout d’articles au panier n’est pas couvert. Les VPAT thématiques ont un nombre énorme d’indicateurs « partiellement pris en charge », car ces champs ne sont pris en charge que si le propriétaire du magasin (créateur de contenu) fournit les informations requises. Les VPAT traitent de l’accessibilité d’un produit, pas du contenu. Ainsi, bien que les VPAT aident à évaluer certains aspects de Shopify, ils ne répondent pas à toute la question de l’accessibilité.

Shopify a publié un politique d’accessibilité Et un plan d’accessibilité. Les deux sont des signes prometteurs pour l’avenir de l’accessibilité chez Shopify.

Néanmoins, se fier uniquement aux informations d’un fournisseur n’est généralement pas le meilleur moyen d’évaluer son accessibilité.

Comment accessible?

Dans quelle mesure une boutique Shopify est-elle accessible ? Pour répondre, j’ai utilisé une double approche : (i) créer un nouveau site pour apprendre les fonctionnalités d’accessibilité natives et (ii) explorer un magasin établi avec des produits, des intégrations, des modules complémentaires, etc.

La création d’un nouveau site me montre ce que vous êtes susceptible d’obtenir avec un nouveau modèle. L’exploration d’un site établi – dans ce cas, une importante entreprise de vente directe aux consommateurs basée aux États-Unis – me montre l’impact d’un thème professionnel et des défis du monde réel.

Mon impression générale est que les deux scénarios peuvent aboutir à un site raisonnablement accessible. Cependant, il y a certainement des lacunes.

Modèles

Les marchands Shopify peuvent choisir de créer des modèles personnalisés, d’utiliser des modèles de stock ou d’acheter des modèles commerciaux. Shopify lui-même contrôle une grande partie du processus de paiement et de la conception. Mais le thème contrôle des aspects importants du site, ce qui peut entraîner des fonctionnalités inaccessibles dans votre boutique.

J’ai trouvé de nombreuses fonctionnalités d’accessibilité utiles lors de mes tests. Pourtant, des défauts d’accessibilité majeurs étaient présents dans le thème commercial mais pas dans le thème « Debut » par défaut de Shopify, exposant la variabilité.

Une fonctionnalité qui ne figure pas dans l’architecture plus large de Shopify hérite des caractéristiques d’un thème «parent». Certains systèmes permettent de modifier des parties d’un thème tout en utilisant des mises à jour pour les parties non modifiées. Shopify ne le fait pas. Ainsi, la modification d’un thème commercial ou fourni par Shopify crée des maux de tête lors de la mise en œuvre de futures mises à niveau de thème.

Les problèmes d’accessibilité que j’ai trouvés couvraient toute la gamme – de « déroutant mais fonctionnel » à « complètement inutilisable ».

Un exemple de « déroutant mais fonctionnel » est apparu dans l’en-tête des deux thèmes que j’ai testés. Les deux incluent une collection de contrôles qui basculent un menu, un lien vers le compte de l’utilisateur, contrôlent une fonction de recherche et envoient l’utilisateur au panier.

Sur les deux sites, tous ces contrôles fonctionnaient, avaient des noms accessibles et étaient utilisables par les personnes utilisant des technologies d’assistance telles que les lecteurs d’écran. Mais les contrôles étaient déroutants. Ils fonctionnaient de deux manières : ouvrir un modal ou fournir un lien normal qui envoie quelqu’un vers une nouvelle page. Cependant, ils sont balisés de quatre manières.

  • « Menu » est un bouton marqué comme un widget de divulgation déroulant mais ouvrant un modal.
  • La bascule « Rechercher » est un lien qui ouvre un modal.
  • « Compte » est un lien normal.
  • « Cart » est un lien marqué comme un widget de divulgation mais ouvre un modal.

Tous sont fonctionnels, mais ils sont extrêmement incohérents et peuvent créer beaucoup de confusion pour un acheteur aveugle ou malvoyant.

Pour l’utilisateur voyant, rien de tout cela n’a probablement d’importance. Un utilisateur voyant avec une souris ne sait généralement pas si un contrôle est un bouton ou un lien, et peu importe qu’il soit balisé comme un widget de divulgation ou un modal. Mais les différences faire important pour les utilisateurs de lecteurs d’écran qui forment des attentes sur la façon dont l’interface fonctionne en fonction de la façon dont elle est décrite.

Un défaut plus intermédiaire est les étiquettes manquantes dans le thème commercial. L’entrée « Quantité » n’était que marginalement fonctionnelle au clavier et n’était pas étiquetée. Un utilisateur sur un lecteur d’écran aurait du mal à découvrir le but du champ.

Un élément plus sévère, toujours dans le thème commercial, est le système de sélection des variations de produits. Il était entièrement non fonctionnel depuis le clavier et Lecteur d’écran. Un utilisateur de technologie assistée ne serait pas en mesure de choisir une taille, une couleur ou une autre variation de produit. Étant donné qu’ils sont d’une importance cruciale pour de nombreux produits, il s’agit d’un problème grave.

Cependant, aucun des deux problèmes matériels n’était présent dans le thème par défaut. C’est une preuve claire que Shopify valorise l’accessibilité et a fait le travail pour s’assurer que des options accessibles sont disponibles. Cependant, comme toutes les plateformes de gestion de contenu qui permettent la thématisation, il incombe au propriétaire du magasin de s’assurer que le thème choisi répond aux besoins d’accessibilité.

La boutique de thèmes Shopify n’identifie malheureusement pas les thèmes accessibles.

Teneur

Le devoir de Shopify est de s’assurer que les commerçants ont les moyens de créer du contenu accessible. Shopify fournit une petite zone modifiable pour les descriptions de produits et une autre zone pour télécharger des supports de produits. L’éditeur de contenu propose une mise en forme de base du texte, l’insertion de tableaux et l’ajout d’images et de vidéos.

Descriptifs des produits. Les outils de mise en forme du texte mettent l’accent sur la structure plutôt que sur l’apparence et ne disposent pas de fonctionnalités permettant de modifier la couleur ou la taille du corps du texte. Cela conduit probablement les créateurs à utiliser des en-têtes structurels pour un corps de texte plus volumineux, ce qui peut créer une structure de document inappropriée. Cependant, le manque de taille de police et d’outils de couleur réduit également la probabilité que le propriétaire du magasin crée des problèmes de contraste de couleur ou omette entièrement une structure de titre.

L’inséreuse de table est simple, sans mécanisme pour créer des tables accessibles. Il est cependant toujours possible, en basculant vers la vue de balisage HTML, de personnaliser directement le code du tableau.

L’interface d’image montre bien en évidence le champ de texte alternatif, encourageant probablement son utilisation. Mais il n’explique pas le texte alternatif pour aider les éditeurs à comprendre son objectif.

Les vidéos ne sont prises en charge qu’en insérant du code intégrable provenant d’un fournisseur externe, transférant la responsabilité de l’accessibilité au fournisseur. Les lecteurs vidéo de Vimeo ou YouTube, par exemple, sont effectivement accessibles. D’autres fournisseurs peuvent ne pas l’être.

Dans l’ensemble, les marchands peuvent absolument créer des descriptions de produits accessibles dans Shopify, avec, encore une fois, quelques mises en garde. Tout d’abord, l’utilisation de données tabulaires nécessite de modifier directement le code de la table pour garantir l’accessibilité. Deuxièmement, évitez la tentation d’utiliser des titres pour augmenter la taille de la police du corps du texte.

Téléchargement de médias. Les propriétaires de magasins peuvent télécharger une variété de types de médias, y compris des vidéos, des images et des modèles en trois dimensions. Tous seront affichés selon les modèles de médias de votre thème. L’interface est simple mais fournit un champ de texte alternatif uniquement pour la vignette du média. De plus, il n’y a aucun moyen de fournir des sous-titres pour les vidéos. Vous devez télécharger une vidéo avec des sous-titres ouverts pour la rendre accessible.

Utilisable, avec devoirs

Shopify a fourni une interface utilisable et accessible aux propriétaires de magasins et acheteurs. Cependant, une grande partie du fardeau de l’accessibilité incombe aux éditeurs et aux développeurs de thèmes. Shopify ne fournit pas d’aide significative pour guider les propriétaires vers des thèmes accessibles ou pour les aider à créer un contenu de produit accessible. En bref, faites vos devoirs pour éviter les poursuites en matière d’accessibilité.