Los botones deben tener texto distinguible

ID de la regla: button-name
Conjunto de reglas: axe-core 4.13
Impacto en el usuario: Crítico
Directrices: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549, RGAA

Cree sitios web más accesibles con axe DevTools Pro

Encuentre y solucione más problemas con Intelligent Guided Tests™ respondiendo una serie de preguntas simples sobre el contenido de su página. Prueba gratuita. No se necesita tarjeta de crédito.

Compliance Data & Impact

User Impact

Disabilities Affected

  • Persona ciega
  • Sordociegos

Standard(s)

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

Criterios de Éxito WCAG [WCAG 2.1 (A)]

  • 4.1.2: Name, Role, Value

Criterios de Éxito WCAG [WCAG 2.0 (A)]

  • 4.1.2: Name, Role, Value

Criterios de Éxito WCAG [WCAG 2.2 (A)]

  • 4.1.2: Name, Role, Value

Directrices de la Sección 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)

Directrices para probadores de confianza

  • 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 Pautas

  • 9.4.1.2: Name, Role, Value

RGAA

  • 11.9.1: Each button's label is relevant.

Cómo solucionar el problema

Soluciones de marcado correctas

La button-name regla tiene cinco patrones de marcado que pasan los criterios de prueba: 

<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. Asegúrese de que cada button elemento y los elementos con role="button" tengan una de las siguientes características:

    • Texto interno que es distinguible para los usuarios de lectores de pantalla.
    • Atributo aria-label no vacío.
    • aria-labelledby señalando un elemento con texto que es distinguible para los usuarios de lectores de pantalla.
    • role="presentation" o role="none" (ARIA 1.1) y no está en orden de tabulación (tabindex="-1").

Soluciones para marcado incorrecto

La button-name regla tiene seis patrones de marcado que no cumplen los criterios de prueba: 

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

Por qué es importante

Los usuarios de lectores de pantalla no pueden discernir el propósito de los elementos con role="link", role="button" o role="menuitem" que no tienen un nombre accesible.

Descripción de la regla

Los botones deben tener un texto distinguible que describa claramente el destino, el propósito, la función o la acción para los usuarios de lectores de pantalla.

La input-button-name regla separa la funcionalidad de la button-name regla para garantizar que los botones de entrada tengan texto distinguible; el aviso relevante para los nombres de los botones de entrada era incorrecto para los elementos del botón.

El algoritmo (en términos simples)

Comprueba todos los botones para asegurarse de que tengan un nombre distinguible y accesible.

Recursos

Páginas de cursos de Deque University (se requiere suscripción)

Contribuir a axe-core en GitHub

Consulte la lista completa de reglas de axe 4.13 .

¿Le ha sido útil esta información?

Ya has dado tu opinión, gracias..

Su respuesta fue la siguiente:

¿Le ha sido útil esta información?
Fecha y hora en que se enviaron los comentarios: