La accesibilidad digital permite que todas las personas, independientemente de sus capacidades, interactúen eficazmente con sitios y aplicaciones web. WCAG 2.1 establece criterios claros para ayudar a evitar errores comunes, como el fallo F59, que ocurre cuando se usan elementos HTML genéricos (como <div> o <span>) para crear controles interactivos sin asignarles roles accesibles adecuados.
Este error impacta principalmente en usuarios que dependen de tecnologías asistivas, como lectores de pantalla, ya que estos dispositivos no pueden identificar correctamente el propósito y la función de dichos elementos.
Según un estudio de WebAIM, el 98% de los sitios web evaluados tienen al menos un problema con roles incorrectamente definidos o ausentes.
Acerca de este fallo
El fallo F59 sucede cuando se crean controles interactivos usando elementos genéricos (<div> o <span>) con scripts para emular funcionalidades interactivas, pero sin proporcionar roles accesibles mediante atributos adecuados (como los proporcionados por WAI-ARIA). Esto incumple el Criterio de Éxito 4.1.2: Nombre, Rol y Valor.
Escenarios comunes del fallo:
- Botones creados con elementos
<div>o<span>. - Casillas de verificación simuladas con imágenes o elementos genéricos.
Ejemplos
Ejemplo incorrecto 1: Checkbox con span e imagen
<p>
<span onclick="toggleCheckbox('chkbox')">
<img src="unchecked.gif" id="chkbox" alt=""> Incluir Firma
</span>
</p>JavaScript:
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;
} else {
theImg.src = CHECKED;
}
}🔴 Problema: Carece de rol accesible y no es controlable desde teclado, lo que dificulta su uso con lectores de pantalla.
Solución correcta: Uso de checkbox estándar HTML
<label>
<input type="checkbox" id="firma" name="firma">
Incluir Firma
</label>✅ ¿Qué mejora?: Usa elementos semánticos que son accesibles por teclado y claramente identificados por lectores de pantalla.
Ejemplo incorrecto 1: Botón con <div>
<div onclick="submitForm()">Enviar Formulario</div>🔴 Problema: El lector de pantalla desconoce que este div es interactivo.
Solución correcta: Botón semántico o rol ARIA explícito
<button onclick="submitForm()">Enviar Formulario</button>o
<div role="button" tabindex="0" onclick="submitForm()" onkeypress="submitForm()">
Enviar Formulario
</div>✅ ¿Qué mejora?: Proporciona claramente información sobre la función del elemento.
Ejemplo correcto: Uso correcto de elementos HTML semánticos:
<button type="button" onclick="enviar()">Enviar formulario</button>✅ ¿Qué mejora?: Claridad semántica, accesible mediante teclado y compatible plenamente con tecnologías asistivas.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Utilizar elementos
<div>o<span>como controles interactivos sin asignar roles. - Omitir soporte para navegación por teclado.
Cómo evitar estos errores:
- Usa elementos semánticos HTML siempre que sea posible.
- Si necesitas usar elementos genéricos, define explícitamente roles ARIA adecuados.
- Asegúrate de añadir soporte completo para interacción mediante teclado.
Preguntas frecuentes sobre el fallo F59
¿Por qué no usar simplemente divs o spans para controles?
No proporcionan información sobre su función a tecnologías asistivas.
¿Qué es un rol accesible?
Información explícita que describe la función del elemento para tecnologías asistivas.
¿Qué roles ARIA puedo usar?
Algunos roles comunes son: button, checkbox, link, entre otros.
¿Es suficiente con añadir eventos JavaScript?
No, también debes especificar roles accesibles.
¿Esto afecta el SEO?
Indirectamente sí, una mejor accesibilidad mejora la calidad general del sitio.
¿Puedo verificar este fallo automáticamente?
Sí, mediante herramientas automáticas que validan roles ARIA.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F59: Incumplimiento del Criterio de Conformidad 4.1.2 debido al uso de una secuencia de comandos para convertir div o span en un control de interfaz de usuario en HTML sin proporcionar una función para el control
- Comprender el criterio de éxito 4.1.2: Nombre, Rol, Valor
- Aplicaciones de Internet enriquecidas accesibles (WAI-ARIA)
- Guía de prácticas de creación de contenido WAI-ARIA
- ARIA4: Uso de un rol WAI-ARIA para exponer el rol de un componente de interfaz de usuario
- F42: Fallo de los criterios de éxito 1.3.1, 2.1.1, 2.1.3 o 4.1.2 al emular enlaces
Pruebas y validación
Procedimiento:
- Inspecciona elementos con eventos interactivos.
- Verifica si poseen roles semánticos nativos o definidos con WAI-ARIA.
Resultados esperados:
- ✅ Elementos interactivos con roles claramente definidos.
- ❌ Elementos interactivos sin roles adecuados deben corregirse.
Asignar roles explícitos o usar elementos semánticos es fundamental para una web accesible. Si necesitas ayuda para implementar estas técnicas correctamente en tu sitio web, ¡contáctanos y mejora la accesibilidad para todos! 🚀