La accesibilidad web garantiza que todos los usuarios, incluidas las personas con discapacidad, puedan interactuar con una página web de manera efectiva. Uno de los errores más comunes es la emulación de enlaces utilizando elementos no interactivos como <span>, <div> o <img> en lugar de los elementos nativos <a> o <area>.
El fallo F42 ocurre cuando se usan manejadores de eventos de JavaScript para simular enlaces en elementos no semánticos. Esto afecta la navegación y accesibilidad del contenido, ya que:
- No se pueden enfocar con el teclado, afectando a usuarios con movilidad reducida.
- No son reconocidos como enlaces por los lectores de pantalla, dificultando la navegación a usuarios con discapacidad visual.
- No aparecen en listas de enlaces generadas por tecnologías de asistencia, causando una experiencia de usuario inconsistente.
Este error incumple los siguientes criterios de éxito de las WCAG 2.1:
- 1.3.1: Información y relaciones → No se preserva la estructura semántica.
- 2.1.1: Teclado → No permite interacción sin el ratón.
- 2.1.3: Teclado sin trampas → Puede impedir la navegación.
- 4.1.2: Nombre, función y valor → No se identifica correctamente como enlace.
Acerca de este fallo
El problema principal de emular enlaces con elementos no semánticos es que estos no tienen el comportamiento esperado de un enlace real, lo que genera barreras para usuarios con discapacidad. En muchos casos, se utilizan elementos <span>, <div> o <img> con eventos onclick para redirigir a los usuarios, pero estos elementos:
- No reciben foco automáticamente, impidiendo la navegación con teclado.
- No son anunciados como enlaces por los lectores de pantalla.
- No permiten abrir en una nueva pestaña con atajos como Ctrl + Click.
Escenarios comunes donde ocurre este fallo:
- Uso de
<span>cononclickpara redirigir a otra página. - Imágenes clickeables (
<img>) que no están dentro de un<a>. - Uso de
<div>como enlace sin proporcionarrole="link".
Ejemplos
Ejemplo incorrecto 1: Usando <span> en lugar de <a>
Este código usa un <span> con onclick, lo que impide su correcto uso con tecnologías de asistencia.
<span onclick="location.href='pagina.html'">Enlace falso</span>🔴 Problema:
- No es accesible mediante teclado.
- No es reconocido como un enlace por los lectores de pantalla.
- No se puede abrir en una nueva pestaña con atajos de teclado.
Solución correcta
Utilizar un enlace <a> en lugar de <span>.
<a href="pagina.html">Enlace accesible</a>✅ ¿Qué mejora?:
- Es accesible con teclado.
- Es reconocido por lectores de pantalla.
- Aparece en la lista de enlaces de tecnologías de asistencia.
Ejemplo incorrecto 2: Usando <img> con onclick
Este código hace que una imagen actúe como enlace, pero sin el comportamiento esperado.
<img src="boton.png" alt="Ir a página" onclick="location.href='pagina.html'">🔴 Problema:
- No recibe foco con el teclado.
- No se identifica como enlace.
- No permite abrir en una nueva pestaña.
Solución correcta
Usar un <a> envolviendo la imagen.
<a href="pagina.html">
<img src="boton.png" alt="Ir a página">
</a>✅ ¿Qué mejora?:
- Es accesible con teclado.
- Se anuncia como enlace correctamente.
- Permite abrir en una nueva pestaña con atajos de teclado.
Ejemplo incorrecto 3: Usando <div> como enlace
En este caso, un <div> es usado para emular un enlace mediante eventos de teclado y ratón.
<div id="enlace" tabindex="0" onclick="location.href='pagina.html';" onkeypress="if(event.keyCode==13) location.href='pagina.html';">
Ir a la página
</div>🔴 Problema:
- Aunque recibe foco con
tabindex="0", no se identifica como un enlace. - No aparece en la lista de enlaces generada por tecnologías de asistencia.
Solución correcta
Utilizar un <a> en lugar de <div>.
<a href="pagina.html">Ir a la página</a>✅ ¿Qué mejora?:
- Es completamente accesible y semánticamente correcto.
- Compatible con todas las tecnologías de asistencia.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Usar
<span>o<div>para emular enlaces. - Implementar eventos
onclicken imágenes sin<a>. - No proporcionar alternativas accesibles a enlaces emulados.
Cómo evitar estos errores:
- Siempre usar
<a>para crear enlaces. - Evitar
onclicken elementos no interactivos. - Probar con lectores de pantalla y navegación por teclado.
Preguntas frecuentes sobre el fallo común F42
¿Por qué no debo usar <span> o <div> como enlaces?
Porque no son elementos semánticos para enlaces y no se reconocen correctamente por las tecnologías de asistencia.
¿Qué problema tienen los enlaces simulados con onclick?
No son accesibles con teclado y no aparecen en listas de enlaces.
¿Es correcto usar role="link" en un <div>?
No es recomendable. Es mejor usar <a>.
¿Cómo saber si mi enlace es accesible?
Prueba si puedes navegar con el teclado y si es anunciado correctamente por un lector de pantalla.
¿Puedo usar JavaScript con enlaces <a>?
Sí, pero sin alterar su comportamiento accesible.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F42: Fallo de los Criterios de Conformidad 1.3.1, 2.1.1, 2.1.3 o 4.1.2 al emular enlaces
- Comprender el criterio de éxito 1.3.1 Información y relaciones
- Comprender el criterio de éxito 2.1.1: Teclado
- Comprender el criterio de éxito 4.1.2: Nombre, Rol, Valor
- Aplicaciones de Internet enriquecidas y accesibles (WAI-ARIA)
- F59: Fallo del criterio de éxito 4.1.2 debido al uso de un script para crear un control de interfaz de usuario en HTML llamado div o span sin proporcionar una función para el control
- G115: Uso de elementos semánticos para marcar la estructura
- Uso de elementos semánticos <a>: El elemento ancla
Pruebas y validación
Procedimiento
- Identificar elementos que actúan como enlaces pero no son
<a>o<area>. - Verificar si el rol del elemento es «link».
- Comprobar si el enlace puede activarse con el teclado.
Resultados esperados
- ❌ Si el elemento no tiene rol «link», falla los criterios 1.3.1 y 4.1.2.
- ❌ Si el enlace no es accesible con teclado, falla los criterios 2.1.1 y 2.1.3.
Evita emular enlaces con elementos no semánticos. Usa siempre <a> para garantizar accesibilidad y compatibilidad con tecnologías de asistencia.
💡 Si necesitas ayuda con la accesibilidad de tu web, contáctanos!