Les composants de type carte sont souvent utilisés dans les listes d'articles, etc. Bien qu'ils paraissent simples, ils présentent des problèmes de conception étonnamment profonds en matière d'accessibilité.
Une carte typique du dessus
- image
- Titre de l'article
- Résumé de l'article
- Plus de détails ici
Prenons l'exemple d'un modèle d'implémentation pour une disposition verticale.
Principaux points à prendre en compte lors de la conception
1. Ordre visuel et structure HTML
Les lecteurs d'écran lisent généralement le HTML dans l'ordre où il est écrit.Critère de réussite 1.3.2 (Séquence significative, niveau A)Donc,Le principe de base est de faire correspondre l'ordre visuel à l'ordre HTML.Voilà ce que nous disons.
Cependant, modifier l'ordre des éléments CSS ne constitue pas en soi une violation des WCAG. Il n'y a pas de problème si l'ordre visuel et l'ordre HTML diffèrent, du moment que le contenu reste compréhensible. Il est important de faire preuve de flexibilité et d'adapter ses décisions au contexte.
2. Comment gérer les images
Les images sur les fiches d'articles sont souventdécoratifLe titre de l'article suffit à en transmettre le contenu, il est donc peu nécessaire de lire la description de l'image.
Lorsqu'elle est traitée comme une image décorativealt=""C'est suffisant.
<img src="thumbnail.jpg" alt="">
3. Étiquette du lien Détails
Les textes génériques comme « En savoir plus » doivent être évités pour les raisons suivantes :
Problèmes visuels
Il est difficile de déterminer ce qu'est un lien sans le contexte environnant.
Problèmes de lecteur d'écran
Lorsqu'ils sont affichés dans une liste à l'aide de la fonction de liste de liens, tous les liens sont étiquetés « Voir les détails » et sont indiscernables (WCAG 2.4.4 Objectif des liens, niveau A).
Problèmes de reconnaissance vocale
S'il existe plusieurs textes identiques, vous devrez les sélectionner par numéro, ce qui complique le processus.
Idéalement, le lien devrait comporter un texte qui indique clairement son objectif, comme « Voir les détails concernant XX », mais nous allons ici voir comment l'implémenter si vous souhaitez reproduire exactement le design « Voir les détails ».
4. Zones cliquables des cartes
Pour des raisons d'expérience utilisateur, il est souvent souhaitable de rendre la carte entièrement cliquable. Il existe plusieurs façons d'y parvenir, chacune ayant un impact différent sur l'accessibilité.
5. Les cartes doivent-elles être des articles ou des divisions ?
Le choix dépend de la nature du contenu.
<article>Convient pour :
- Le contenu de la carte constitue un élément de contenu indépendant
<div>Si cela vous convient :
- Il fonctionne simplement comme un ensemble de liens
- Les cartes elles-mêmes n'ont aucune indépendance sémantique
Pour les listes générales d'articles de blog ou les fiches de produits,<article>Cependant, plusieurs<article>Lors de l'utilisation, veuillez tenir compte des déplacements des repères du lecteur d'écran.aria-labelledbyouaria-labelIl est recommandé d'utiliser une balise CSS3 pour identifier chaque article (WCAG 2.4.6, niveau AA).
aria-labelledbySi vous utilisez cette méthode, assurez-vous que l'identifiant est unique.
Ordre visuel et structure HTML
Modèle 1 : Faire correspondre l’ordre visuel à l’ordre HTML
