Modèles d'implémentation accessibles pour les composants de type carte

Les composants de type carte sont largement utilisés dans les listes d'articles et ailleurs. Bien que simples en apparence, leur conception soulève des enjeux surprenamment complexes lorsqu'on considère l'accessibilité.

Considérons un modèle de carte classique avec, de haut en bas :

• Image
• Titre de l'article
• Résumé de l'article
• Lien vers plus de détails

et explorions les modèles d'implémentation dans une disposition verticale.

Principaux points de conception à considérer

1. Ordre visuel et structure HTML

Les lecteurs d'écran lisent généralement le contenu dans l'ordre du code HTML. WCAG 2.0 établit que le critère de succès 1.3.2 (ordre logique, niveau A) pose comme principe fondamental l'alignement de l'ordre visuel avec l'ordre HTML.

Cependant, modifier l'ordre via CSS ne constitue pas en soi une violation de WCAG. Si l'ordre visuel diffère de l'ordre HTML mais que le contenu reste compréhensible, ce n'est pas problématique. L'important est d'évaluer chaque situation avec flexibilité.

2. Traitement des images

Les images des cartes d'articles sont généralement décoratives. Puisque le titre de l'article suffit à communiquer le contenu, la nécessité de faire lire la description de l'image est faible.

Traiter l'image comme décoration nécessite simplement alt="".

<img src="thumbnail.jpg" alt="">

3. Libellés des liens détaillés

Les textes génériques comme « En savoir plus » doivent être évités pour les raisons suivantes:

Problèmes visuels

Sans contexte environnant, il est impossible de déterminer la destination du lien

Problèmes pour les lecteurs d'écran

Lorsque vous affichchez une liste avec la fonction de liste de liens, tous les éléments indiquent « Afficher les détails » et il n'est pas possible de les distinguer

Problèmes de reconnaissance vocale

Lorsqu'il y a plusieurs textes identiques, la sélection par numéro devient nécessaire et l'opération devient fastidieuse

Idéalement, le texte du lien devrait indiquer le but de manière autonome, par exemple « Afficher les détails de ○○ ». Cependant, cette section traite de la méthode de mise en œuvre en reproduisant le design « Afficher les détails » tel quel.

4. Zone cliquable de la carte

Pour améliorer l'expérience utilisateur, on souhaite souvent rendre la carte entière cliquable. Il existe plusieurs méthodes de mise en œuvre, mais chacune a des impacts différents sur l'accessibilité.

5. La carte doit-elle être un article ou une div ?

Le choix dépend de la nature du contenu.

<article>est approprié dans les cas suivants :

• Le contenu de la carte constitue un contenu indépendant et autonome

<div>fonctionne bien dans les cas suivants :

• Fonctionne simplement comme un groupe de liens
• La carte elle-même n'a pas d'indépendance sémantique

Pour les listes d'articles de blog ordinaires ou les galeries de produits, <article> est approprié. Cependant, lorsque vous utilisez plusieurs <article>, il est recommandé de considérer la navigation par repères des lecteurs d'écran et de permettre l'identification de chaque article avec aria-labelledby ou aria-label (WCAG 2.4.6, niveau AA).

Lors de l'utilisation de aria-labelledby, assurez-vous que l'ID soit une valeur unique.

Ordre visuel et structure HTML

Modèle 1 : Aligner l'ordre visuel avec l'ordre HTML

<article class="article-card" aria-labelledby="article-title">
  <img src="thumbnail.jpg" alt="">
  <h3 id="article-title"><a href="#" class="card-link">記事タイトル</a></h3>
  <p>記事の概要...</p>
  <a href="#" class="card-detail-link">
	  <span class="visually-hidden">記事タイトル:</span>詳細を見る
  </a>
</article>

L'ordre d'écriture HTML correspond complètement à l'ordre visuel, ce qui rend le code simple et intuitif.

* <article>Bien qu'il soit souhaitable que le premier élément soit un titre, ce n'est pas une exigence absolue. Ce modèle fonctionne parfaitement si vous privilégiez la cohérence avec l'ordre visuel.

Complément :

Les logiciels de reconnaissance vocale (Dragon, Voice Control, etc.) fonctionnent en se basant sur le texte affiché à l'écran. En utilisant visually-hidden (sr-only), le texte visuel est conservé et la manipulation par reconnaissance vocale devient possible. Voici des exemples d'implémentation avec des modèles appropriés et inappropriés pour les libellés de lien.

<!-- 以下は可視テキストがアクセシブルな名前に含まれているのでOK -->
<a href="#" id="link-text" class="card-detail-link" aria-labelledby="link-text article-title">
  詳細を見る
</a>
<a href="#" aria-label="詳細を見る：記事タイトル">
  詳細を見る
</a>
<!-- 以下は可視テキストがアクセシブルな名前に含まれていないのでNG -->
<a href="#" class="card-detail-link" aria-labelledby="article-title">
  詳細を見る
</a>
<a href="#" class="card-detail-link" aria-label="記事タイトル">
  詳細を見る
</a>

Modèle 2 : Ajustement de l'ordre visuel avec CSS order

<article class="article-card" aria-labelledby="article-title">
  <h3 id="article-title"><a href="#">記事タイトル</a></h3>
  <p>記事の概要...</p>
  <a href="#" class="card-detail-link">
	  <span class="visually-hidden">記事タイトル:</span>詳細を見る
  </a>
  <img src="thumbnail.jpg" alt="">
</article>

.article-card {
  display: flex;
  flex-direction: column;
}

.article-card img {
  order: -1;
}

Comme le premier élément de <article> est un titre, cette structure est sémantiquement plus appropriée.

Pour les images décoratives (avec alt=""), il n'y a pas d'impact sur l'ordre de lecture (l'image est ignorée).

Attention :

• Si l'image a une signification et que l'attribut alt est spécifié, cette structure n'est pas appropriée car l'ordre visuel et l'ordre de lecture diffèrent.
• L'ordre de tabulation du clavier suit l'ordre du HTML. Si la carte contient plusieurs éléments pouvant recevoir le focus, vérifiez que l'ordre de focus ne rompt pas le flux logique.

Lorsque vous souhaitez rendre toute la zone de la carte cliquable

Modèle 3 : Rendre toute la carte cliquable avec un pseudo-élément

Avec cette méthode, un pseudo-élément du lien du titre couvre la carte entière, et « Voir plus » est rendu comme <span>.

Même si « Voir plus » reste un <a> avec tabindex="-1" ou aria-hidden="true", il génère du bruit dans les listes de liens des lecteurs d'écran et en mode navigation par éléments. C'est pourquoi il est préférable de l'utiliser comme <span>.

<article class="article-card" aria-labelledby="article-title">
  <img src="thumbnail.jpg" alt="">
  <h3 id="article-title"><a href="#" class="card-link">記事タイトル</a></h3>
  <p>記事の概要...</p>
  <span class="card-detail-link">詳細を見る</span>
</article>

.article-card {
  position: relative;
}

.card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card-link:focus-visible {
  outline: none;
}

.card-link:focus-visible::after {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* カード内に複数のリンクがある場合の例 */
.article-card a:not(.card-link) {
  position: relative;
  z-index: 2;
}

Avantages :

• Conservation d'une structure sémantique
• Lecture naturelle par les lecteurs d'écran
• Possibilité de placer plusieurs liens dans la carte (catégories, étiquettes, liens auteur, etc.)

Inconvénients :

• Gestion de z-index requise (bien que cela ne pose pas de problème une fois configuré)

Modèle 4 : envelopper toute la carte dans un <a>

Avec cette méthode, la carte entière devient un seul lien, donc « Voir plus » devient naturellement <span>.

<article class="article-card" aria-labelledby="article-title">
  <a href="#" class="card-link">
    <img src="thumbnail.jpg" alt="">
    <h3 id="article-title">記事タイトル</h3>
    <p>記事の概要...</p>
    <span class="card-detail-link">詳細を見る</span>
  </a>
</article>

Avantages :

• Implémentation simple
• Ajustement facile du CSS

Inconvénients :

• Certains lecteurs d'écran peuvent lire tous les textes de manière concaténée (notamment VoiceOver qui les lit comme « titre de l'article résumé de l'article... voir les détails, lien »)
• Impossible de placer plusieurs liens dans une carte

Exemples pour chaque modèle

Conclusion

Il existe plusieurs approches pour implémenter un composant de type carte accessible. L'important à comprendre est qu'il n'existe pas « une seule bonne solution », et que la meilleure implémentation varie selon le contexte.

Lors de l'implémentation, il est important de tenir compte des points suivants.

1. Choisir une implémentation qui ne crée pas de difficultés pour les utilisateurs réels
2. Considérer la signification de l'image, l'objectif de la carte et la structure globale du site
3. Privilégier une implémentation pratique et facile à maintenir