# Vingt boutons « voir plus » identiques, un cauchemar pour la synthèse vocale

> Un même aria-label répété sur toute une liste de résultats produit une annonce sonore parfaitement inutile. Ce que révèle ce piège fréquent et comment le corriger sans réécrire l'interface.

- Auteur : Clément Hadrot
- Publié le : 2026-05-27
- Mis à jour le : 2026-05-27
- Catégorie : Accessibilité
- URL : https://wpmoderne.dev.wordpress-developpement.fr/accessibilite/boutons-voir-plus-aria-label-identique/

## L’essentiel

- Un aria-label générique répété n'apporte aucune information différenciante à l'oreille
- Le lecteur d'écran annonce vingt fois le même texte sans distinction possible
- Injecter le nom de l'élément concerné dans le libellé résout le problème sans changement visuel

« Voir plus, bouton. Voir plus, bouton. Voir plus, bouton. » NVDA répète cette annonce vingt fois de suite lorsqu'un utilisateur navigue par la touche B (raccourci de saut entre boutons) sur une page de résultats de recherche construite avec une grille de cartes produits. Visuellement, chaque bouton « Voir plus » est bien positionné sous sa carte respective, dans un contexte clair pour un utilisateur voyant. À l'oreille, sans ce contexte visuel, les vingt boutons deviennent rigoureusement indiscernables les uns des autres.

Ce cas est un antipatron d'accessibilité extrêmement répandu, qui naît d'une intention initialement louable : un développeur, conscient qu'un simple texte « Voir plus » manque de clarté hors contexte, ajoute un `aria-label="Voir plus"` identique sur chaque bouton pour « améliorer » l'accessibilité — sans réaliser que le problème initial (le manque de contexte) reste entier, puisque le libellé ajouté ne varie pas d'un élément à l'autre.

## Ce qu'on observe dans le code

Le motif fautif ressemble généralement à ceci, généré par une boucle d'affichage de produits sans aucune variable injectée dans le libellé :

```
<?php foreach ( $produits as $produit ) : ?>
    <div class="carte-produit">
        <h3><?php echo esc_html( $produit->titre ); ?></h3>
        <button aria-label="Voir plus">Voir plus</button>
    </div>
<?php endforeach; ?>
```

L'attribut `aria-label` ici ne fait strictement rien de plus que le texte visible du bouton : il répète la même chaîne statique, sans jamais intégrer le titre du produit affiché juste au-dessus. Le résultat pour la navigation par lecteur d'écran est identique, voire pire, à l'absence totale d'attribut, puisqu'il donne l'illusion d'un effort d'accessibilité déjà fourni, ce qui décourage une correction ultérieure.

## Pourquoi c'est un problème concret

Un utilisateur de lecteur d'écran qui explore une liste de résultats compte massivement sur les raccourcis de navigation rapide (par élément interactif, par titre, par région) pour se repérer sans devoir tout écouter linéairement. Ces raccourcis présentent, pour chaque catégorie d'élément, une liste condensée — exactement l'endroit où l'absence de distinction entre les libellés devient la plus handicapante : la liste des boutons de la page se résume, dans ce cas, à vingt occurrences strictement identiques, rendant tout choix éclairé impossible sans revenir à une lecture séquentielle complète de la page.

> L'essentiel à retenir : Un aria-label générique répété n'apporte aucune information différenciante à l'oreille ; Le lecteur d'écran annonce vingt fois le même texte sans distinction possible ; Injecter le nom de l'élément concerné dans le libellé résout le problème sans changement visuel

## Le correctif, sans changement visuel

La correction ne nécessite aucune modification de l'apparence de la page : elle consiste uniquement à injecter dans l'attribut `aria-label` une information qui différencie chaque bouton, typiquement le titre de l'élément associé :

```
<?php foreach ( $produits as $produit ) : ?>
    <div class="carte-produit">
        <h3><?php echo esc_html( $produit->titre ); ?></h3>
        <button aria-label="<?php echo esc_attr( sprintf( 'Voir plus sur %s', $produit->titre ) ); ?>">
            Voir plus
        </button>
    </div>
<?php endforeach; ?>
```

Chaque bouton annonce désormais un libellé unique — « Voir plus sur Étagère murale en chêne », « Voir plus sur Lampe à poser en laiton » — sans que le texte visible du bouton, lui, ne change d'un caractère. Le visiteur voyant continue de voir un bouton concis, le visiteur de lecteur d'écran obtient l'information de contexte qui lui manquait.

## D'autres variantes du même antipatron

- Des liens « Lire la suite » répétés en fin d'articles de blog, tous partageant le même `aria-label` statique.
- Des icônes de suppression dans un panier, toutes labellisées « Supprimer » sans référence à l'article concerné.
- Des boutons d'ouverture de modale dans une galerie d'images, tous annoncés « Agrandir » sans numéro ni légende associée.

Le principe correctif reste identique dans chaque cas : injecter une donnée réellement disponible dans le contexte d'affichage (titre, nom, numéro, légende) dans le libellé accessible, plutôt que de se contenter d'un texte générique dupliqué sans discernement.

## Quoi faire en pratique

Avant d'ajouter un `aria-label` à un élément répété dans une boucle d'affichage, il convient de se poser une question simple : ce libellé sera-t-il strictement identique sur chaque itération de la boucle ? Si la réponse est oui, l'attribut n'apporte aucune valeur et mérite d'être soit supprimé, soit complété par une variable réellement différenciante issue des données affichées.

## En résumé

Un `aria-label` répété à l'identique sur une liste d'éléments similaires ne corrige rien : il masque le problème derrière une apparence de bonne pratique. La vraie correction consiste toujours à injecter, dans le libellé, une information qui varie réellement d'un élément à l'autre.