WCAG 2.5.3: Etiqueta en el nombre

Qué significa esta regla

\n

WCAG 2.5.3 — Label in Name — se aplica a cualquier componente de la interfaz de usuario que tenga una etiqueta de texto visible. El criterio requiere que el nombre accesible de ese componente coincida exactamente con el texto de la etiqueta visible o, como mínimo, contenga el texto de la etiqueta visible como una subcadena. Esto evita una situación en la que una persona ve una etiqueta en pantalla pero su tecnología de asistencia o software de reconocimiento de voz reconoce un nombre completamente diferente en segundo plano.

\n

El nombre accesible es el nombre expuesto al árbol de accesibilidad y utilizado por lectores de pantalla, software de control por voz y otras tecnologías de asistencia. Puede provenir de diversas fuentes, incluyendo el contenido de texto visible del elemento, un atributo aria-label, una referencia aria-labelledby, un atributo title o un elemento <label> asociado. Cuando una persona desarrolladora sobrescribe el nombre accesible con algo que no incluye el texto de la etiqueta visible, se produce una discrepancia y el criterio falla.

\n

Los elementos afectados incluyen cualquier componente interactivo que muestre texto y también tenga un nombre accesible: botones, enlaces, campos de formulario con etiquetas visibles, elementos de menú, pestañas, casillas de verificación, botones de opción y widgets ARIA personalizados. Los elementos no interactivos como párrafos o encabezados no están cubiertos por este criterio.

\n

Qué se considera un cumplimiento: El nombre accesible contiene el texto de la etiqueta visible como una subcadena continua, ignorando espacios en blanco iniciales y finales. La coincidencia no distingue mayúsculas de minúsculas. Por ejemplo, si un botón muestra "Search Products", un nombre accesible "Search Products Now" cumple porque contiene "Search Products". Un nombre accesible "Find Products" falla porque no contiene el texto visible.

\n

Qué se considera un fallo: El nombre accesible es completamente diferente de la etiqueta visible, o el nombre accesible omite una parte significativa de la etiqueta visible. Un botón que visualmente muestra "Buy Now" pero tiene aria-label='Purchase item' falla este criterio. De manera similar, un enlace que muestra "Contact Us" pero está envuelto en un elemento con aria-label='Reach our team' también falla.

\n

Excepciones oficiales definidas en WCAG: El criterio no se aplica a componentes donde la etiqueta es puramente simbólica o pictográfica sin equivalente textual (por ejemplo, un botón solo con ícono sin texto visible). Tampoco se aplica cuando el texto forma parte de un elemento puramente decorativo que no tiene significado semántico. La notación matemática y los escenarios específicos de idioma en los que la representación textual no puede mapearse a una palabra hablada también están excluidos. Además, los componentes donde el nombre accesible se amplía intencionalmente con contexto adicional —siempre que el texto visible siga estando presente dentro del nombre accesible— son conformes.

\n\n

Por qué es importante

\n

Este criterio protege principalmente a las personas que dependen de software de reconocimiento de voz como Dragon NaturallySpeaking (ahora Dragon Professional), Windows Speech Recognition o Voice Control de Apple. Estas personas navegan y activan elementos de la interfaz pronunciando la etiqueta que ven en pantalla. Cuando el nombre accesible no coincide con la etiqueta visible, el software no puede encontrar el elemento de destino cuando la persona pronuncia su nombre, lo que en la práctica hace que el control sea inalcanzable sin ratón o teclado. Para personas con discapacidades motoras —incluyendo quienes tienen lesiones por esfuerzo repetitivo, distrofia muscular, parálisis cerebral o lesiones medulares— la entrada por voz suele ser su medio principal o único para manejar una computadora. Una discrepancia en un solo botón puede bloquear el acceso a todo un flujo de trabajo.

\n

Las personas usuarias de lectores de pantalla también se ven afectadas. Cuando un lector de pantalla anuncia un nombre accesible que difiere de lo que es visible en pantalla, se genera desorientación cognitiva. Una persona vidente que también usa un lector de pantalla —por ejemplo, alguien con baja visión que utiliza simultáneamente retroalimentación visual y auditiva— puede escuchar que se anuncia una cosa mientras lee algo diferente en pantalla, rompiendo su modelo mental de la interfaz.

\n

Las personas con discapacidades cognitivas se benefician de la consistencia entre lo que leen y lo que se pronuncia o anuncia. Cambios de nombre inesperados aumentan la carga cognitiva y pueden causar confusión o errores, especialmente en personas con problemas de memoria o que están aprendiendo a usar un sistema por primera vez.

\n

Un escenario concreto del mundo real: Considere una página de pago de comercio electrónico con un botón que visualmente muestra el texto "Place Order". Una persona desarrolladora añade aria-label='Submit purchase form' para proporcionar lo que considera un nombre más descriptivo. Una clienta que usa Dragon NaturallySpeaking dice "Click Place Order": Dragon escanea el árbol de accesibilidad, no encuentra ningún elemento llamado "Place Order" y no puede activar el botón. La clienta no puede completar su compra sin cambiar al control por ratón, cosa que puede que no pueda hacer. Abandona la transacción. Esto no es un caso límite hipotético; es un patrón de fallo común que se encuentra en auditorías automatizadas de sitios web de comercio minorista y banca.

\n

Según la Organización Mundial de la Salud, más de mil millones de personas en todo el mundo viven con algún tipo de discapacidad. El informe WebAIM Million 2023 encontró que las discrepancias de etiquetas WCAG 2.5.3 aparecían en una proporción significativa de las páginas auditadas, a menudo introducidas por ARIA bien intencionado pero mal aplicado. Más allá de la accesibilidad, el etiquetado coherente mejora el SEO porque los rastreadores de motores de búsqueda que indexan el texto de enlaces y botones para la clasificación de relevancia reciben señales más significativas cuando los nombres accesibles se alinean con el texto visible.

\n\n

Reglas relacionadas de Axe-core

\n

\n
• label-content-name-mismatch: Esta es la regla automatizada principal asociada con WCAG 2.5.3. La regla verifica elementos interactivos —como botones, enlaces y roles ARIA como role='button', role='link', role='menuitem' y role='tab'— que tienen tanto una etiqueta de texto visible como un nombre accesible. Señala cualquier elemento cuyo nombre accesible no contenga el texto visible como una subcadena (sin distinguir mayúsculas de minúsculas). La regla se dirige específicamente a elementos donde el nombre accesible se sobrescribe mediante aria-label o aria-labelledby de una manera que diverge del texto en pantalla. Axe informa estas situaciones como infracciones con nivel de impacto "serious" porque bloquean directamente a las personas usuarias de entrada por voz para activar controles.
\n
• Limitaciones de la detección automatizada: Herramientas automatizadas como axe-core pueden detectar de forma fiable discrepancias cuando el texto visible se representa como nodos de texto plano dentro del elemento y el nombre accesible proviene de un atributo estático aria-label o aria-labelledby. Sin embargo, se requiere prueba manual cuando: (1) el texto visible se representa mediante pseudoelementos CSS ::before o ::after, ya que estos pueden o no incluirse en el árbol de accesibilidad según la versión del navegador y de la TA; (2) la etiqueta se inserta dinámicamente mediante JavaScript después de la carga de la página; (3) el texto visible incluye íconos o texto basado en imágenes donde el componente textual debe inferirse; (4) el nombre accesible calculado del elemento implica cadenas complejas de aria-labelledby que concatenan múltiples elementos. En estos casos, una persona evaluadora humana que use un lector de pantalla debe verificar qué se anuncia realmente frente a lo que es visible.
\n

\n\n

Cómo hacer las pruebas

\n

\n
1. Análisis automatizado con axe DevTools o Lighthouse: Instale la extensión de navegador axe DevTools (Chrome o Firefox) o ejecute una auditoría de accesibilidad de Lighthouse en Chrome DevTools. Inicie el análisis en la página completamente renderizada; asegúrese de que el contenido dinámico, los modales y los menús expandidos estén abiertos si contienen elementos interactivos. En el panel de resultados de axe, filtre por el ID de regla label-content-name-mismatch. Cada elemento señalado mostrará su nombre accesible calculado junto al texto visible, haciendo que la discrepancia sea inmediatamente evidente. Tome nota del selector del elemento e inspeccione el DOM para identificar el origen de la sobrescritura del nombre accesible. Lighthouse mostrará los mismos fallos en la categoría "Accessibility" con una referencia a WCAG 2.5.3.
\n
2. Inspección manual con las DevTools del navegador: Abra el panel de Accesibilidad del navegador (Chrome DevTools → Elements → pestaña Accessibility, o Firefox DevTools → pestaña Accessibility). Seleccione cada elemento interactivo que tenga texto visible. Revise la sección "Computed Properties" para el campo Name del elemento. Compare este valor con la etiqueta visible. Si el nombre calculado no contiene el texto de la etiqueta visible como una subcadena, el elemento falla el criterio 2.5.3.
\n
3. Pruebas con lector de pantalla usando NVDA + Firefox: Abra Firefox con NVDA en ejecución. Navegue a cada elemento interactivo usando la tecla Tab. Escuche lo que NVDA anuncia como nombre del elemento. Tome nota de cualquier discrepancia entre el nombre anunciado y el texto mostrado en pantalla. Use la Lista de elementos de NVDA (Insert+F7) para explorar todos los enlaces y botones y comparar en bloque los nombres anunciados con las etiquetas visuales.
\n
4. Pruebas con lector de pantalla usando JAWS + Chrome: Abra Chrome con JAWS en ejecución. Recorra todos los controles interactivos con la tecla Tab. JAWS anunciará el nombre accesible seguido del rol. Cuando el nombre anunciado no incluya el texto visible, registre el elemento. Además, use el "Browse Mode" de JAWS y el visor virtual para ver el nombre accesible calculado de cada control.
\n
5. Pruebas con lector de pantalla usando VoiceOver + Safari (macOS/iOS): Active VoiceOver (Command+F5 en macOS). Use Tab o VO+Flecha derecha para navegar por los elementos interactivos. VoiceOver anuncia el nombre accesible de cada control. En iOS, deslice el dedo hacia la derecha para desplazarse por los elementos y escuche si hay discrepancias entre nombre y etiqueta.
\n
6. Prueba de reconocimiento de voz con Voice Control (macOS/iOS) o Dragon: Active Voice Control en macOS (System Settings → Accessibility → Voice Control). Diga "Show names" para mostrar etiquetas de todos los elementos interactivos. Verifique que las etiquetas que muestra Voice Control coincidan con el texto visible en pantalla. Intente activar controles pronunciando el texto de la etiqueta visible: cualquier control que no responda a su nombre visible constituye un fallo de 2.5.3. Repita con Dragon NaturallySpeaking en Windows si está disponible, usando el comando "Click [label]".
\n

\n\n

Cómo corregirlo

\n\n

Botón con aria-label que sobrescribe — Incorrecto

\n

<!-- FAIL: aria-label reemplaza por completo el texto visible \"Search\"\n     por \"Execute query\", rompiendo la entrada por voz -->\n<button aria-label='Execute query'>\n  Search\n</button>

\n\n

Botón con aria-label que sobrescribe — Correcto

\n

<!-- PASS: Elimine por completo el aria-label que no coincide.\n     El texto visible del botón \"Search\" se convierte automáticamente en su nombre accesible.\n     Las personas que usan la voz pueden decir \"Click Search\" para activarlo. -->\n<button>\n  Search\n</button>\n\n<!-- PASS (alternativa): Si se necesita contexto adicional,\n     asegúrese de que el nombre accesible CONTENGA el texto visible. -->\n<button aria-label='Search products'>\n  Search\n</button>

\n\n

Enlace con aria-labelledby apuntando a texto no relacionado — Incorrecto

\n

<!-- FAIL: aria-labelledby hace referencia a un encabezado \"Our Services\"\n     pero el enlace visualmente muestra \"Learn more\",\n     por lo que el nombre accesible es \"Our Services\" en lugar de \"Learn more\" -->\n<h2 id='services-heading'>Our Services</h2>\n<p>\n  <a href='/services' aria-labelledby='services-heading'>Learn more</a>\n</p>

\n\n

Enlace con aria-labelledby apuntando a texto no relacionado — Correcto

\n

<!-- PASS: Use aria-labelledby para concatenar el propio texto del enlace con el encabezado.\n     El nombre accesible se convierte en \"Learn more Our Services\",\n     que contiene la etiqueta visible \"Learn more\". -->\n<h2 id='services-heading'>Our Services</h2>\n<p>\n  <a href='/services' id='learn-link' aria-labelledby='learn-link services-heading'>\n    Learn more\n  </a>\n</p>\n\n<!-- PASS (alternativa): Haga que el texto visible del enlace sea autoexplicativo\n     para que no se necesite sobrescritura. -->\n<a href='/services'>Learn more about our services</a>

\n\n

Botón de ícono donde aria-label entra en conflicto con el texto visible — Incorrecto

\n

<!-- FAIL: El botón muestra un ícono de carrito Y el texto \"Cart\".\n     El aria-label 'View shopping basket' no contiene \"Cart\",\n     por lo que las personas que dicen \"Click Cart\" no obtienen respuesta. -->\n<button aria-label='View shopping basket'>\n  <svg aria-hidden='true'><!-- cart icon --></svg>\n  Cart\n</button>

\n\n

Botón de ícono donde aria-label entra en conflicto con el texto visible — Correcto

\n

<!-- PASS: El aria-label contiene el texto visible \"Cart\" como subcadena.\n     Las personas pueden decir \"Click Cart\" o \"Click View Cart\" y ambas funcionan. -->\n<button aria-label='View Cart'>\n  <svg aria-hidden='true'><!-- cart icon --></svg>\n  Cart\n</button>\n\n<!-- PASS (preferido): Elimine aria-label y oculte el ícono del árbol.\n     El contenido de texto del botón \"Cart\" se convierte directamente en el nombre accesible. -->\n<button>\n  <svg aria-hidden='true' focusable='false'><!-- cart icon --></svg>\n  Cart\n</button>

\n\n

Campo de formulario con etiqueta visible pero aria-label que no coincide — Incorrecto

\n\n

(Content truncated due to token limit — please retry this article.)