Les boutons doivent avoir un texte distinguable

ID de règle: button-name
Ensemble de règles: axe-core 4.13
Impact sur l’utilisateur: Critique
Lignes directrices: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549, RGAA

Éliminez davantage de bugs d'accessibilité avec axe DevTools Pro

Recherchez et corrigez davantage de problèmes avec les tests guidés intelligents™ en répondant à une série de questions simples sur le contenu de votre page. Essai gratuit. Aucune carte de crédit nécessaire.

Compliance Data & Impact

User Impact

Disabilities Affected

  • Aveugle
  • Surdicécité

Standard(s)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • Section 508
  • Trusted Tester
  • EN 301 549
  • RGAA

Critères de réussite WCAG [WCAG 2.1 (A)]

  • 4.1.2: Name, Role, Value

Critères de réussite WCAG [WCAG 2.0 (A)]

  • 4.1.2: Name, Role, Value

Critères de réussite WCAG [WCAG 2.2 (A)]

  • 4.1.2: Name, Role, Value

Directives de la section 508

  • 1194.22: Web based intranet and Internet Information & Applications
  • 1194.22 (a): A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)

Directives pour les testeurs de confiance

  • 6.A: The purpose of each link or button can be determined from any combination of the link/button text, accessible name, accessible description, and/or programmatically determined link/button context.

EN 301 549 Directives

  • 9.4.1.2: Name, Role, Value

RGAA

  • 11.9.1: Each button's label is relevant.

Comment résoudre le problème

Solutions de codage HTML correctes

La button-name règle comporte cinq modèles de balisage qui répondent aux critères de test : 

<button id="text">Name</button>

<button id="al" aria-label="Name"></button>

<button id="alb" aria-labelledby="labeldiv"></button>
<div id="labeldiv">Button label</div>

<button id="combo" aria-label="Aria Name">Name</button>

<button id="buttonTitle" title="Title"></button>

  1. Assurez-vous que chaque button élément et les éléments avec role="button" possèdent l'une des caractéristiques suivantes :

    • Texte intérieur discernable par les utilisateurs de lecteurs d'écran.
    • Attribut aria-label non vide.
    • aria-labelledby pointant vers un élément avec du texte qui est discernable par les utilisateurs de lecteurs d'écran.
    • role="presentation" ou ARIA role="none" (ARIA 1.1) et n'est pas dans l'ordre des tabulations (tabindex="-1").

Solutions de codage HTML incorrectes

La button-name règle comporte six modèles de balisage qui ne répondent pas aux critères de test : 

<button id="empty"></button>

<button id="val" value="Button Name"></button>

<button id="alempty" aria-label=""></button>

<button id="albmissing" aria-labelledby="nonexistent"></button>

<button id="albempty" aria-labelledby="emptydiv"></button>
<div id="emptydiv"></div>

<button id="buttonvalue" value="foo" tabindex="-1"></button>

Pourquoi c'est important

Les utilisateurs de lecteurs d'écran ne sont pas en mesure de discerner le but des éléments avec role="link", role="button" ou role="menuitem" qui n'ont pas de nom accessible.

Description de la règle

Les boutons doivent comporter un texte distinguable qui décrit clairement la destination, le but, la fonction ou l'action pour les utilisateurs de lecteurs d'écran.

La input-button-name règle sépare la fonctionnalité de la button-name règle pour garantir que les boutons de saisie ont un texte discernable ; les conseils relatifs aux noms des boutons de saisie étaient incorrects pour les éléments de bouton.

L'algorithme (en termes simples)

Vérifie tous les boutons pour s'assurer qu'ils ont un nom distinguable et accessible.

Ressources

Pages de cours de l'Université Deque (abonnement requis)

Contribuer à axe-core sur GitHub

Reportez-vous à la liste complète des règles d'axe 4.13 .

Ces informations vous ont-elles été utiles ?

Vous avez déjà donné votre avis, merci..

Votre réponse a été la suivante :

Ces informations vous ont-elles été utiles ?
Date/heure de soumission des commentaires :