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

Les composants de type carte, souvent utilisés dans les listes d'articles, paraissent simples. Pourtant, dès qu'on prend en compte l'accessibilité, ils soulèvent des défis de conception plus subtils qu'il n'y paraît.

Prenons une carte typique, de haut en bas :

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

puis examinons le modèle d'implémentation pour une mise en page empilée verticalement.

Principaux points à considérer lors de la conception

1. Ordre visuel et structure HTML

Les lecteurs d'écran annoncent en principe le contenu dans l'ordre de rédaction du HTML. Le critère de réussite 1.3.2 du WCAG 2.0 (Ordre significatif, niveau A) pose comme principe fondamental de faire correspondre l'ordre visuel à l'ordre du HTML.

Modifier l'ordre à l'aide de CSS ne constitue pas en soi une violation du WCAG. Tant que le contenu reste compréhensible, un ordre visuel différent de l'ordre du HTML ne pose pas de problème. Il est donc important d'évaluer chaque situation avec souplesse.

2. Traitement des images

Les images des cartes d'articles sont le plus souvent décoratives. Le titre de l'article transmet déjà suffisamment l'information, il est donc rarement nécessaire de lire une description de l'image.

Pour une image décorative, alt="" suffit.

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

3. Libellés des liens de détail

Les libellés génériques comme « Voir le détail » doivent être évités, pour les raisons suivantes.

Problèmes visuels

Sans contexte environnant, il est impossible de savoir où mène le lien.

Problèmes avec les lecteurs d'écran

Lorsqu'ils sont affichés dans la liste des liens, tous portent l'intitulé « Voir les détails » et ne peuvent pas être distingués les uns des autres.

Problèmes avec la reconnaissance vocale

Lorsque plusieurs textes identiques existent, la sélection par numéro devient nécessaire, ce qui complique l'utilisation.

Idéalement, le texte de chaque lien devrait indiquer seul sa destination, par exemple « Voir les détails de [nom] ». Toutefois, cet article traite de la manière de mettre en œuvre la conception « Voir les détails » telle quelle.

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, chacune ayant des effets différents sur l'accessibilité.

5. Faut-il utiliser article ou div pour les cartes ?

Le choix dépend de la nature du contenu.

<article>Convient lorsque :

• le contenu de la carte constitue un contenu autonome

<div>Acceptable lorsque :

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

Pour les cartes courantes, comme les listes d'articles de blog ou de produits, <article> est approprié. Toutefois, lorsque plusieurs <article> sont utilisées, il est recommandé de tenir compte de la navigation par repères des lecteurs d'écran et d'identifier chaque article à l'aide de aria-labelledby ou de aria-label (WCAG 2.4.6, niveau AA).

Lors de l'utilisation de aria-labelledby, veillez à ce que les identifiants soient uniques.

Ordre visuel et structure HTML

Modèle 1 : aligner l'ordre visuel sur 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 de déclaration HTML correspond parfaitement à l'ordre visuel, ce qui le rend simple et intuitif.

Note : <article>Il est recommandé que le premier élément soit un titre, mais ce n'est pas une exigence absolue. Si la priorité est de correspondre à l'ordre visuel, ce modèle reste acceptable.

Remarque :

Les logiciels de reconnaissance vocale (Dragon, Voice Control, etc.) fonctionnent à partir du texte affiché à l'écran. Le recours à visually-hidden (sr-only) permet de conserver le texte visuel et de rendre possible la commande vocale. Vous trouverez également ci-dessous des exemples d'implémentation de libellés de liens, avec des cas conformes et non conformes.

<!-- 以下は可視テキストがアクセシブルな名前に含まれているので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;
}

<article>Le premier élément étant un titre, cette structure est sémantiquement plus appropriée.

Pour une image décorative (alt=""), l'ordre de lecture n'est pas affecté, car l'image est ignorée.

Attention :

• Lorsqu'une image porte une signification et possède un attribut alt, cette structure n'est pas adaptée, car l'ordre visuel et l'ordre de lecture divergent.
• L'ordre de tabulation au clavier suit l'ordre du HTML. Si la carte contient plusieurs éléments focalisables, vérifiez que l'ordre de focus respecte le fil logique du contenu.

Lorsque l'ensemble de la carte doit être cliquable

Modèle 3 : rendre toute la carte cliquable via un pseudo-élément

Dans cette méthode, le pseudo-élément du lien du titre couvre toute la carte, et « Voir les détails » est <span>conservé uniquement comme élément décoratif visuel.

Même si l'on laisse « Voir les détails » <a>tel quel et qu'on ajoute tabindex="-1" ou aria-hidden="true", cela crée du bruit dans la liste des liens des lecteurs d'écran et dans leur mode de navigation par éléments. Je pense donc qu'il est préférable de <span>le rendre purement décoratif.

<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 :

• La structure sémantique est préservée
• Les lecteurs d'écran la lisent naturellement
• Plusieurs liens peuvent être placés dans la carte (catégorie, étiquettes, lien vers l'auteur, etc.)

Inconvénients :

• Gestion de z-index nécessaire (mais il suffit de la configurer une fois pour que cela ne pose plus de problème)

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

Avec cette méthode, la carte entière devient un seul lien, donc « Voir les détails » devient naturellement <span>un texte de lien peu explicite.

<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
• Ajustements CSS faciles

Inconvénients :

• Selon le lecteur d'écran, l'ensemble du texte peut être lu d'un seul tenant (notamment avec VoiceOver, qui annonce « Titre de l'article Résumé de l'article... Voir les détails, lien »).
• Impossible de placer plusieurs liens dans la carte

Exemples de chaque modèle

Conclusion

Il existe plusieurs approches pour implémenter une carte accessible. L'essentiel est qu'il n'existe pas de modèle d'implémentation « unique et parfait » : la solution optimale dépend du contexte.

Lors de l'implémentation, il est important de garder à l'esprit les points suivants.

1. Choisir une implémentation qui ne pose pas de difficultés aux utilisateurs réels
2. Tenir compte du sens de l'image, de la fonction de la carte et de la structure globale du site
3. Privilégier une implémentation pratique et facile à maintenir