Fallo común Fallos comunes WCAG 2.2
F59Fallo del criterio de conformidad 4.1.2 debido a usar scripts para convertir un div o un span en un control de interfaz de usuario en HTML sin proporcionar una función (role) al control
En resumen
Este fallo se produce cuando se construyen controles interactivos (casillas, botones, pestañas...) con elementos genéricos como div o span y scripts, sin indicarles una función mediante WAI-ARIA. Los lectores de pantalla no saben qué es el control ni cuál es su estado, así que la persona no puede identificarlo ni usarlo. Si no puede emplear el elemento HTML nativo, añada siempre el role adecuado.
Aplicabilidad
HTML
Descripción
Este fallo muestra cómo el uso de elementos HTML genéricos para crear controles
de interfaz de usuario puede hacer que dichos controles sean inaccesibles para las tecnologías
de asistencia. Las tecnologías de asistencia necesitan conocer la función y el estado actual
de un componente para poder transmitir esa información al usuario. Muchos
elementos HTML tienen funciones bien definidas, como los enlaces, los botones, los campos de texto,
etc. Los elementos genéricos como div y span no
tienen ninguna función predefinida. Cuando se usan estos elementos genéricos para crear
controles de interfaz de usuario en HTML, es posible que la tecnología de asistencia no disponga de la
información necesaria para describir el control e interactuar con él.
span y div, puede resultar desorientador para los
usuarios. Incluso si se tiene cuidado de proporcionar acceso por teclado a estos elementos,
a los usuarios les puede costar descubrir que hay controles interactivos
en el contenido o entender qué tipo de comportamiento esperar
de ellos. Por ejemplo, es posible que los usuarios no sepan qué pulsaciones de teclas admite
el script para activar el elemento. Además, estos elementos no
generan los mismos eventos del sistema operativo que los elementos interactivos, por lo que
es posible que la tecnología de asistencia no reciba ninguna notificación cuando el usuario los activa.Accessible Rich Internet Applications (WAI-ARIA) describe mecanismos para proporcionar la información necesaria sobre función y estado y crear así controles de interfaz de usuario totalmente accesibles.
Ejemplos
El siguiente ejemplo falla porque crea una casilla de verificación con un span y una imagen.
<p>
<span onclick="toggleCheckbox('chkbox')">
<img src="unchecked.gif" id="chkbox" alt=""> Include Signature
</span>
</p>
Este es el código del script que cambia el origen de la imagen cuando se hace clic con el ratón en el span.
var CHECKED = "check.gif";
var UNCHECKED = "unchecked.gif";
function toggleCheckbox(imgId) {
var theImg = document.getElementById(imgId);
if (theImg.src.lastIndexOf(CHECKED)!= -1) {
theImg.src = UNCHECKED;
// additional code to implement unchecked action
}
else {
theImg.src = CHECKED;
// additional code to implement checked action
}
}
Una casilla de verificación creada de esta manera no funcionará con las tecnologías de asistencia, ya que no hay ninguna información que la identifique como casilla de verificación. Además, este ejemplo tampoco se puede manejar con el teclado, por lo que fallaría la pauta 2.1.
Pruebas
Procedimiento
- Examinar el código fuente procesado en busca de elementos que tengan manejadores de eventos asignados en el marcado o mediante scripts (lo que indica que el elemento es un control de interfaz de usuario).
- Comprobar si la función del control ya está definida de forma nativa en el lenguaje de marcado.
- Comprobar si se ha usado otro método válido, como la asignación de un role de WAI-ARIA adecuado, para definir la función del control.
Resultados esperados
Si las comprobaciones n.º 2 Y n.º 3 son falsas, se da la condición de fallo.
Recursos
- Accessible Rich Internet Applications (WAI-ARIA)
- WAI-ARIA Authoring Practices Guide (guía de prácticas de autor de WAI-ARIA)
Cómo lo comprobamos en ADDAW
Este fallo es uno de los que buscamos en cada auditoría de accesibilidad de ADDAW: lo documentamos con capturas y el código afectado, indicamos el criterio que incumple y la técnica suficiente con la que se corrige. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica F59 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.