Nous travaillons à rendre notre site de commerce électronique accessible aux lecteurs d'écran et avons un conflit de prix. Nos catégories et pages de produits répertorient plusieurs montants en dollars lorsqu'un produit est en promotion:
Existe-t-il un moyen standard de communiquer toutes ces informations aux utilisateurs malvoyants? Nous ne voulons rien omettre, mais nous voulons également éviter de rendre la liste de produits trop longue à parcourir.
Actuellement, VoiceOver lit nos prix comme "prix, 9,99 $" [TAB] "solde, 7,99 $" [TAB] "d'économies, 2 $"
Nous envisageons de renommer tout cela en une seule instruction afin que l'utilisateur n'ait pas à parcourir chaque prix. "était de 9,99 $, maintenant en solde pour 7,99 $, économisez 2 $"
Est-ce que ce qui précède fonctionnerait ou existe-t-il une manière plus standardisée de communiquer cela?
3 Réponses :
Pour autant que je sache, il n'existe pas de véritable norme indiquant précisément comment présenter les informations de tarification. A vous de trouver la meilleure formulation pour votre cas particulier. Tant que tout est clairement indiqué dans le texte, ça devrait aller.
La chose que vous devez absolument éviter est de donner (implicitement) une information uniquement par sa mise en forme visuelle. Par exemple, faire un prix barré sans dire explicitement quelque part qu'il s'agit du prix d'origine et qu'il existe actuellement une remise crée un problème d'accessibilité pour les utilisateurs de lecteurs d'écran et ceux qui ne voient pas bien le barré.
Vous êtes donc fondamentalement sur la bonne voie en indiquant tout textuellement.
Maintenant, personnellement par expérience en tant qu'utilisateur de lecteur d'écran moi-même, à partir de votre exemple, je dirais:
Merci pour cela. C'est ce que je vais présenter et voir ce que pensent l'UX et l'entreprise.
@QuentinC a de bons conseils sur l'ordre des informations (le plus important d'abord - le prix que vous allez payer) mais une chose qui me dérange dans l'OP est pourquoi l'utilisateur va dans l'onglet kbd> à travers tous les prix. Les prix sont-ils des éléments interactifs? Ou peut-être s'agit-il simplement d'un problème de terminologie. Je pense que par onglet , vous voulez vraiment dire glisser vers la droite pour déplacer le focus VoiceOver. Une chose à considérer si vous décidez d'en faire une seule grande phrase, cela rend les choses un peu plus difficiles pour analyser toutes ces informations. Un utilisateur VoiceOver peut changer son rotor en «mots», puis faire glisser vers le haut / bas pour parcourir un mot à la fois afin d'entendre les informations, mais ce n'est peut-être pas la meilleure expérience utilisateur pour le forcer à le faire. Mais le fait que vous fournissiez toutes ces informations est vraiment la partie importante, alors bravo à vous. De plus, VoiceOver s'arrête aux limites des éléments lorsque vous balayez vers la droite, donc si vous avez quelque chose comme: Vous allez entendre "bonjour" glisser vers la droite "là" glisser vers la droite "monde". p> Si vous voulez simplement entendre "bonjour le monde" d'un seul coup, vous aurez besoin du rôle "texte" non documenté (et donc non officiellement pris en charge). En remarque, même si <div role="text">
<span>hello</span>
<s>there</s>
<span>world</span>
</div>
<div>
<span>hello</span>
<s>there</s>
<span>world</span>
</div>
et sont des éléments sémantiques, leur signification n'est pas transmise aux lecteurs d'écran. Une façon de gérer cela est documentée dans un " Petite note sur comment faire votre marque (plus accessible) ".
Merci pour cela, la voix off a été le cadeau qui ne cesse de donner pour notre projet d'accessibilité. Mon point en combinant toutes ces informations en une seule et longue déclaration est qu'aucun des éléments n'est interactif. C'est une page de liste de produits, donc chaque vignette de la grille est un lien qui vous amène à la même page de détails du produit, que vous cliquiez ou non sur le nom du produit, l'image ou le prix. Il y a un bouton d'ajout au panier que nous voulons garder séparé, mais sinon, je pense qu'il est logique que l'ensemble du résumé du produit soit lu de manière concise sans que l'utilisateur n'ait à tabuler / glisser.
Est-ce que ce qui précède fonctionnerait ou existe-t-il une manière plus standardisée de communiquer cela?
Vous devez éviter de déranger l'attention en introduisant trop d'informations dans le lecteur d'écran.
Je ne dis pas que c'est une solution standard, mais une solution que vous devez envisager est simplement d'ignorer l'ancien prix en utilisant aria-hidden :
7,99 $
De cette façon, un utilisateur de lecteur d'écran n'obtiendra que le nouveau prix et gagnera vraiment en accessibilité. Comme le texte est barré, je ne pense pas que WCAG exigerait une alternative vocale ici.
l'un des objectifs de l'accessibilité est de fournir une expérience égale pour tous, dans la mesure du possible. si les utilisateurs voyants connaissent le prix d'origine, les lecteurs d'écran devraient également en être informés. c'est un problème d'accessibilité si les informations ne sont pas fournies à tous les utilisateurs.
@slugolicious Je suis parfaitement d'accord avec vous, mais, dans ce cas, nous parlons d'un texte qui a été obscurci par «barrer» (ce qui est déjà un problème pour les personnes malvoyantes ou ayant des troubles de la lecture)
s'il est obscurci et difficile à lire pour de nombreuses personnes, il devrait probablement être supprimé complètement. il devrait s'agir d'une simple décision noir / blanc et pas de zones grises. soit le texte est là, peu importe comment il est présenté (barré ou autre), et disponible pour tous les utilisateurs, soit le texte n'y est pas. le juste milieu est le problème d'accessibilité. utiliser aria-hidden ou le formatage CSS qui le rend difficile à lire par certains utilisateurs est ce qui crée le problème a11y.
Mettez-vous en œuvre le barré en utilisant
$9.99$9.99@ChristopheStrobbe, euh, ni l'un ni l'autre. C'est un span avec texte-décoration: line-through;