Pour les lecteurs d'écran: comment baliser un groupe d'éléments de texte à lire comme un seul élément? Dois-je même essayer?
Comment puis-je baliser le composant suivant conformément aux directives WCAG 2.1, aux meilleures pratiques d'accessibilité et avec autant de compatibilité de technologie d'assistance que possible (je ne veux pas cibler uniquement JAWS, NVDA ou VoiceOver)?
Ou les utilisateurs de lecteurs d'écran (et d'autres technologies d'assistance) se soucient-ils même de cette interaction particulière?
En tant qu'utilisateur voyant, je consomme visuellement les éléments suivants comme une seule information:
Mais en tant qu'utilisateur de lecteur d'écran, lorsque vous naviguez par "élément", chaque morceau de texte balisé est lu individuellement.
Le texte est fortement marqué pour la stylabilité, la sémantique et pour transmettre du texte caché uniquement aux utilisateurs de lecteurs d'écran, ce qui est courant dans l'industrie.
Le balisage ressemble à ceci (Remarque: le comportement est remarqué avec n'importe quelle combinaison de balises, donc ne commentez pas la sémantique dans cet exemple spécifique):
<data value="0.99">
<span class="sr-only">Sale:</span>
<mark>$0.99</mark>
<span class="sr-only">discounted from</span>
<s>$1.00</s>
</data>
L'expérience utilisateur du lecteur d'écran est donc la suivante:
Remarque: l'affichage des devises varie selon les paramètres du lecteur et de l'utilisateur.
[User executes "Read current item" command]
Vente:
[User executes "Read next item" command]
Quatre-vingt-dix-neuf cents
[User executes "Read next item" command]
à partir de
[User executes "Read next item" command]
Un dollar
Cela semble contre-intuitif et potentiellement ennuyeux, car il expose les détails de mise en œuvre de mon balisage à l'utilisateur qu'ils n'ont pas nécessairement besoin de connaître ou de se soucier.
En revanche, si j'avais choisi de ne pas majorer le prix de la sémantique ou du style, et que j'utilisais du texte brut pour transmettre les mêmes informations à tous les utilisateurs, il serait lu par les lecteurs d'écran comme un élément =:
<span>Sale: $0.99 discounted from $1.00</span>
L'expérience du lecteur d'écran est donc la suivante:
Remarque: l'affichage des devises varie selon les paramètres du lecteur et de l'utilisateur.
[User executes "Read current item" command]
Vente: 99 cents de moins qu'un dollar
Cela ressemble à une bien meilleure expérience et correspond mieux à la façon dont un utilisateur voyant consomme visuellement les informations, et comment je voudrais que tous les utilisateurs consomment les informations.
(développer le commentaire en réponse :)
Pour les utilisateurs mobiles, vous pouvez utiliser le non standard role="text" sur l'élément parent . C'est hacky et ne fonctionne que sur WebKit, mais c'est bien car, à ma connaissance, seul VoiceOver cassera (incorrectement) une ligne en plusieurs parties lorsqu'il rencontrera un élément en ligne. NVDA, JAWS et (je crois) TalkBack liront immédiatement la ligne correctement, mais comme @andrewmcpherson l'a commenté, veuillez tester en utilisant une variété de plusieurs lecteurs d'écran.
En utilisant role="text" ne (et heureusement, ne peut pas) casser la sélection de granularité, donc si les utilisateurs veulent lire le texte par ligne, mot ou caractère, ils peuvent continuer à le faire à la demande en utilisant les raccourcis du lecteur d'écran (le Rotor sur iOS, par exemple ). L'utilisation de ce rôle regroupe uniquement les enfants lors de la navigation entre les éléments (balayage gauche/droite sur iOS).
Je considérerais également si l'ajout de "Sale:" est d'abord utile, vous dites déjà "à prix réduit", donc l'ajout de Sale fait double emploi avec cela, et peut créer un encombrement audio lorsque vous parcourez de nombreux articles.
Comment baliser un groupe d'éléments de texte à lire comme un seul élément? Dois-je même essayer?
En d'autres termes, la question est un peu erronée, car:
en tant qu'utilisateur de lecteur d'écran, lors de la navigation par "élément",
Les lecteurs d'écran peuvent lire des morceaux de texte de granularité différente, selon les préférences de l'utilisateur. Cela peut être un paragraphe, une ligne, un mot ou un caractère à la fois. Les utilisateurs expérimentés de lecteurs d'écran peuvent changer de granularité assez souvent.
Certains éléments peuvent provoquer une pause ou un arrêt d'un lecteur d'écran. Il n'y a pas moyen de contourner cela si vous voulez le fond coloré pour le prix de vente et barré pour le prix d'origine.
Cela ressemble à une bien meilleure expérience et correspond mieux à la façon dont un utilisateur voyant consomme visuellement les informations, et comment je voudrais que tous les utilisateurs consomment les informations.
C'est moi qui souligne, là. Il est bon que vous réfléchissiez à la façon de fournir une expérience équivalente aux utilisateurs de lecteurs d'écran, mais attention à ne pas forcer une expérience particulière sur quelqu'un. Après tout, vous ne savez pas pourquoi ils utilisent un lecteur d'écran. Peut-être qu'ils sont aveugles, peut-être qu'ils ne le sont pas ..