web-dev-qa-db-fra.com

Conformité WCAG AA et modèles de cartes

Question sur les cartes de produits et la conformité WCAG AA.

enter image description here

Nous remettons spécifiquement en question les styles de liens de ces cartes cliquables, qui vous mèneront à une nouvelle page.

Chaque carte que vous voyez a un état focus + survol pour le titre à souligner.

Légende A: La flèche à côté du titre est-elle requise pour être conforme aux AA, ou le contexte de cet élément en tant que carte cliquable est-il suffisamment clair?

Légende B: Ici, un traitement de carte similaire. Le contexte entourant d'autres cartes est-il suffisant pour indiquer qu'elles sont cliquables, ou une indication visuelle est-elle requise pour le texte du titre?

Encore une fois, tout cela suppose des états de mise au point appropriés. Ceci est une page réactive.

Merci d'avance pour tout aperçu! J'ai trouvé des informations sur les meilleures pratiques en ce qui concerne les cartes et l'accessibilité, mais j'ai du mal à interpréter des critères de réussite spécifiques pour les modèles de cartes.

2
Ramsey

D'après mon expérience, faire en sorte que le lien ressemble à un lien aussi explicitement que possible dans le contenu et l'interface utilisateur est la meilleure chose que vous puissiez faire, utilisez une couleur accessible pour l'exprimer davantage et peut-être le souligner en permanence. Et la mise au point/survol et l'état précédemment cliqué sont conseillés.

L'icône en forme de flèche est un extra supplémentaire et ne doit pas être utilisée comme élément central d'un élément pour indiquer qu'il s'agit d'un lien. Mais cela ajoutera un peu plus de clarté aux utilisateurs, mais le lien devrait faire la plupart du travail.

Une aide visuelle supplémentaire est nécessaire pour indiquer que ces cartes sont cliquables, les tendances actuelles de l'interface utilisateur ont beaucoup de ces cartes, certaines cliquables et d'autres non, il n'y a pas de véritable convention définie pour cela car c'est assez nouveau. Donc, je le rendrais plus évident. Encore une fois, il est évident dans l'interface utilisateur et dans le contexte de ce que dit le lien, un simple "en savoir plus>" n'est pas accessible. Les différents États y ajouteront également.

Je sais que tout le monde parle de gov.uk mais c'est un très bon exemple d'accessibilité à son meilleur et ils ont de bons exemples de liens. Les sites Web de la BBC sont également d'excellents exemples et certains utilisent des interfaces de carte. Peut-être regardez-les pour vous inspirer et vérifiez simplement ce que vous proposez si vous respectez les directives d'accessibilité.

2
UIO

Pour répondre à votre question: Non, la flèche n'est pas requise par les directives WACAG. Cependant, en termes de convivialité, il vaut toujours mieux être évident plutôt qu'ambigu.

Heydon Pickering a écrit un article très complet sur l'accessibilité pour la conception de cartes si cela aide: https://inclusive-components.design/cards/

1
Aaron Benjamin