Sin nombre o sin rol
Todo control al que pueda llegar quien navega con teclado tiene que anunciarle dos cosas a un lector de pantalla: qué es (su rol — botón, enlace, checkbox) y para qué sirve (su nombre — "Buscar", "Cerrar", "Aceptar condiciones"). Un control al que le falta cualquiera de las dos se anuncia como un hueco sin etiquetar, y el usuario no tiene forma de saber qué pasaría si lo activa.
Esta revisión encuentra elementos tabulables sin nombre accesible, sin rol, o sin ninguno de los dos.
Qué comprueba la herramienta
Todo elemento al que se pueda llegar con la tecla Tab debe tener:
- un nombre accesible, y
- un rol.
La herramienta lee ambos del árbol de accesibilidad del propio navegador — la misma descripción de la página que recibe un lector de pantalla. Eso significa que el resultado refleja lo que realmente oiría una persona usando tecnología asistiva, no lo que afirma el marcado.
Por qué importa que se lea del navegador
El árbol de accesibilidad es lo que el navegador ha resuelto después de:
- procesar el HTML y aplicar los estilos,
- ejecutar los scripts de la página,
- resolver los atributos ARIA,
- y fusionar el contenido de los componentes web y de los marcos embebidos.
De ahí se derivan tres consecuencias, y son la razón por la que esta revisión es fiable:
El nombre es el nombre final. El nombre accesible de un control puede venir de una etiqueta, de un aria-label, de un texto referenciado en otra parte de la página, del texto alternativo de una imagen o de su propio contenido visible — con reglas de precedencia entre todas esas fuentes. El navegador resuelve todo eso y devuelve un único valor final. No hay que suponer nada: el nombre reportado es el nombre que se anuncia.
El rol es el rol resuelto. Puede ser implícito, derivado del propio tipo de elemento (un <button> es un botón), o explícito, definido con un atributo ARIA (role="dialog", role="tab"). En cualquier caso, lo que ve la herramienta es el rol que van a usar las tecnologías asistivas.
Los componentes web y los marcos embebidos se incluyen. El contenido dentro de shadow DOM y dentro de iframes ya viene integrado en una única estructura aplanada, exactamente como se lo encontraría un lector de pantalla. No hay que unir nada por separado, y no se pierde nada de esos contextos.
Cuándo reporta un problema
Un elemento tabulable se anuncia:
- sin rol
- sin nombre accesible
- sin ninguno de los dos
Qué dice el reporte
Título: The element 'affected element name' is announced without an accessible name
(o bien: without a role, o bien: without an accessible name or role)
Checkpoint WCAG: 4.1.2 - Name, Role, Value
Cómo verificarlo a mano
- Activa un lector de pantalla.
- Recorre la página con Tab.
- Escucha cada parada. Deberías oír tanto qué es el control como qué hace — "Buscar, botón", no solo "botón" ni una pausa sin nombre.
Referencia WCAG
Criterio de conformidad 4.1.2 Nombre, rol, valor (Nivel A)