Fallo Común F96 de WCAG 2.1: El nombre accesible no contiene el texto de la etiqueta visible

Jano Llorca Lis

La accesibilidad web es fundamental para garantizar que todos los usuarios, incluidos aquellos que utilizan tecnologías de asistencia, puedan interactuar sin barreras. Uno de los problemas más comunes es cuando el nombre accesible de un control interactivo no coincide con el texto visible de la etiqueta, lo que impide que los usuarios de entrada por voz activen correctamente los elementos.

Este error incumple el Criterio de Conformidad 2.5.3 (Etiqueta en Nombre) de WCAG 2.1, afectando principalmente a usuarios que utilizan comandos de voz para navegar por la web.

En este artículo, exploraremos el Fallo F96, su impacto en la accesibilidad y las soluciones adecuadas para evitarlo.

Acerca de este fallo

El Fallo F96 ocurre cuando el nombre accesible de un elemento interactivo (botón, enlace, campo de formulario, etc.) no contiene el texto de la etiqueta visible. Este error afecta a tecnologías que dependen de nombres accesibles, como software de reconocimiento de voz, ya que los usuarios no pueden activar el control pronunciando su etiqueta visible.

El Criterio 2.5.3 (Etiqueta en Nombre) establece que el nombre accesible de un control debe contener el texto de su etiqueta visible. Esto garantiza que los usuarios que dependen de comandos de voz puedan interactuar correctamente con los elementos.

Escenarios en los que ocurre este fallo:

Cuando un botón tiene un nombre accesible diferente al texto visible mediante aria-label.
Cuando el nombre accesible de un enlace contiene texto adicional que rompe la coincidencia exacta con la etiqueta visible.
Cuando el valor del botón (value) difiere del texto proporcionado mediante aria-labelledby.

Ejemplos

Ejemplo incorrecto 1: Botón con un `aria-label` diferente al texto visible

<button id=»buscar» aria-label=»Buscar en el sitio»>Buscar</button>

🔴 Problema: El botón muestra la palabra «Buscar», pero el nombre accesible es «Buscar en el sitio». Los usuarios que usen comandos de voz como «Click Buscar» pueden no poder activar el botón.

Solución correcta:

✅ ¿Qué mejora?: Ahora el nombre accesible coincide exactamente con la etiqueta visible, asegurando que los comandos de voz funcionen correctamente.

Ejemplo incorrecto 2: Enlace con texto adicional oculto

<a href=»#»><span class=»visually-hidden»>Descargar</span> Manual de usuario</a>

🔴 Problema: El usuario ve el texto «Manual de usuario», pero el lector de pantalla detecta el enlace como «Descargar Manual de usuario», rompiendo la coincidencia exacta con la etiqueta visible.

✅ Solución correcta:

<a href=»#»>Descargar Manual de usuario</a>

✅ ¿Qué mejora?: El nombre accesible coincide con la etiqueta visible, permitiendo que los usuarios de comandos de voz activen correctamente el enlace.

Ejemplo correcto: Solución ideal

<label for=»busqueda»>Buscar</label>
<input type=»text» id=»busqueda» aria-labelledby=»busqueda»>
<button id=»boton-buscar» aria-labelledby=»boton-buscar»>Buscar</button>

✅ ¿Qué mejora?:

El nombre accesible de cada elemento coincide con su etiqueta visible.
Se usa aria-labelledby correctamente para asegurar coherencia entre la etiqueta visible y el nombre accesible.
Funciona para usuarios de lectores de pantalla y comandos de voz.

Errores comunes y cómo evitarlos

Errores frecuentes

Usar aria-label con un texto diferente a la etiqueta visible.
Agregar contenido oculto que modifica el nombre accesible de un control.
No verificar cómo los lectores de pantalla interpretan los nombres accesibles.

Cómo evitar estos errores

Asegurar que el nombre accesible contenga exactamente la etiqueta visible.
Usar aria-labelledby en lugar de aria-label cuando se requiera más contexto.
Realizar pruebas con comandos de voz para verificar el funcionamiento.

Preguntas frecuentes sobre el fallo F96

¿Por qué es importante que el nombre accesible coincida con la etiqueta visible?

Porque los usuarios de entrada por voz necesitan pronunciar exactamente la etiqueta visible para activar controles interactivos. Si hay diferencias, no podrán interactuar correctamente.

¿Qué sucede si agrego información adicional en aria-label?

Si el texto del aria-label no coincide con la etiqueta visible, los usuarios de lectores de pantalla y comandos de voz pueden experimentar dificultades para activar el control.

¿Cuál es la mejor manera de corregir este problema?

Asegurar que el nombre accesible contenga la etiqueta visible exacta. Se recomienda el uso de aria-labelledby en lugar de aria-label si es necesario agregar contexto adicional.

¿Cómo puedo comprobar si mi sitio tiene este problema?

Puedes utilizar herramientas como axe DevTools, WAVE o VoiceOver para verificar los nombres accesibles y asegurarte de que coincidan con las etiquetas visibles.

¿Es válido usar aria-hidden para ocultar texto adicional?

No. aria-hidden impide que el texto sea leído por tecnologías de asistencia, pero no resuelve el problema de accesibilidad con comandos de voz.

¿Qué otros criterios de WCAG están relacionados con este fallo?

F111: Control con una etiqueta visible pero sin un nombre accesible.
G131: Proporcionar etiquetas descriptivas.
ARIA9: Uso de aria-labelledby para combinar varios textos en un solo nombre accesible.

Recursos relacionados

Pruebas y validación

Procedimiento

Inspeccionar los controles (botones, enlaces, formularios).
Comprobar el nombre accesible usando herramientas como axe DevTools o NVDA.
Verificar que el nombre accesible contiene el texto de la etiqueta visible.
Probar comandos de voz («Click Buscar», «Descargar Manual de usuario»).

Resultados esperados

✅ Si el nombre accesible coincide con la etiqueta visible, el contenido cumple con WCAG.
❌ Si el nombre accesible no contiene la etiqueta visible exacta, el contenido falla WCAG y debe corregirse.

El Fallo F96 afecta directamente a los usuarios que dependen de comandos de voz y lectores de pantalla. Asegurar que el nombre accesible de los controles contenga la etiqueta visible es clave para mejorar la accesibilidad web y cumplir con WCAG 2.1.

🚀 ¿Quieres mejorar la accesibilidad de tu sitio web? Asegúrate de que tus etiquetas visibles sean coincidentes con los nombres accesibles y prueba tu sitio con herramientas como VoiceOver o NVDA.

🔎 Si necesitas ayuda para optimizar la accesibilidad web, contáctanos y hagamos la web más inclusiva para todos. 💙♿

¿Tienes dudas? Solicita una consultoría inicial gratuita

Evaluamos tu sitio web para identificar barreras que dificultan el acceso a personas con discapacidad. Te entregamos un informe con errores detectados y soluciones para que tu web sea usable por todos.