Fallo común Fallos comunes WCAG 2.2
F42Fallo de los criterios de conformidad 1.3.1, 2.1.1, 2.1.3 o 4.1.2 al emular enlaces
En resumen
Este fallo se produce cuando se convierte un span, un div o una imagen en un «enlace» a base de manejadores de eventos JavaScript (onclick) en lugar de usar los elementos a o area. El resultado no recibe el foco del teclado, no aparece en la lista de enlaces del lector de pantalla y no se identifica como enlace. Afecta a quien navega con teclado o con tecnología de asistencia; use siempre elementos de enlace nativos.
Ejemplo práctico
Es habitual en fichas de producto, tarjetas de noticias y migas de pan: un texto con aspecto de enlace que en realidad es un span o un div con un manejador onclick que cambia de página.
Así no: Enlace simulado con un span y onclick
El texto parece un enlace y funciona con el ratón, pero no recibe el foco con Tab, no se activa con Intro y el lector de pantalla lo lee como texto normal, sin la función «enlace» y sin aparecer en la lista de enlaces. Para notarlo, recorra la demo con Tab o con la lista de enlaces del lector (NVDA+F7).
<style>
.enlace { color: #744E9A; text-decoration: underline; cursor: pointer; }
section { margin-top: 16px; padding: 8px; }
section:target { background: #f3eef8; }
</style>
<h2>Zapatillas de montaña Trail 300</h2>
<p>59,90 € · <span class="enlace" onclick="location.hash = 'envios'">Consultar plazos de envío</span></p>
<section id="envios">
<h3>Plazos de envío</h3>
<p>Península: 24-48 horas. Baleares y Canarias: 3-5 días laborables.</p>
</section>

La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Enlace nativo con a y href
Se sustituye el span por un elemento a con href. El navegador le da la función de enlace, lo incluye en el orden de tabulación, lo activa con Intro y lo muestra en la lista de enlaces del lector de pantalla, sin necesidad de script.
<style>
.enlace { color: #744E9A; text-decoration: underline; }
section { margin-top: 16px; padding: 8px; }
section:target { background: #f3eef8; }
</style>
<h2>Zapatillas de montaña Trail 300</h2>
<p>59,90 € · <a class="enlace" href="#envios">Consultar plazos de envío</a></p>
<section id="envios">
<h3>Plazos de envío</h3>
<p>Península: 24-48 horas. Baleares y Canarias: 3-5 días laborables.</p>
</section>
Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Tarjetas de producto o de noticia completas con
onclicken eldivcontenedor y ningún enlace real dentro. - Usar
<a onclick="...">sin atributohref: sin él, el elemento no es enlace, no recibe el foco con Tab y se lee como texto. - Filas de tabla (
tr) que abren el detalle de un registro solo con clic, habitual en listados de intranets y ERP. - Añadir
role="link"ytabindex="0"a undivpero olvidar que se active con la tecla Intro.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
HTML
Descripción
Este fallo se produce cuando se asocian manejadores de eventos JavaScript a elementos para emular enlaces. Un enlace creado de esta manera no puede alcanzarse con el tabulador desde el teclado y no recibe el foco del teclado como el resto de controles o enlaces. Si se usan eventos de script para emular enlaces, los agentes de usuario, incluida la tecnología de asistencia, pueden no ser capaces de identificar los enlaces del contenido como enlaces. Pueden reconocerse como controles interactivos, pero aun así no reconocerse como enlaces. Estos elementos no aparecen en la lista de enlaces que generan los agentes de usuario o la tecnología de asistencia.
role de ARIA para identificar un elemento anónimo como control de enlace ante las tecnologías de asistencia. Sin embargo, la práctica recomendada para ARIA aconseja usar elementos nativos siempre que sea posible, por lo que no se recomienda usar el atributo role para identificar elementos anónimos como enlaces.Los elementos a y area
están pensados para marcar enlaces.
Ejemplos
Añadir un script a un elemento span
Se añade un manejador de eventos mediante script a un elemento span para
que funcione como un enlace al hacer clic con el ratón. La tecnología
de asistencia no reconoce este elemento como un enlace.
<span onclick="location.href='newpage.html'">Fake link</span>
Añadir un script a un elemento img
Se añade un manejador de eventos mediante script a un elemento img para
que funcione como un enlace al hacer clic con el ratón. La tecnología
de asistencia no reconoce este elemento como un enlace.
<img src="go.gif" alt="go to the new page" onclick="location.href='newpage.html'">
Añadir un script a un elemento img, con compatibilidad
con el teclado
Se añade un manejador de eventos mediante script a un elemento img para
que funcione como un enlace. En este ejemplo, la función de enlace
puede activarse con el ratón o con la tecla Intro si el agente de usuario
incluye el elemento en la cadena de tabulación. No obstante, el elemento
no se reconocerá como un enlace.
function doNav(url){
window.location.href = url;
}
function doKeyPress(url){
//if the enter key was pressed
if (window.event.type == "keypress" && window.event.keyCode == 13){
doNav(url);
}
}
El marcado de la imagen es:
<p>
<img src="bargain.jpg"
tabindex="0"
alt="View Bargains"
onclick="doNav('viewbargains.html');"
onkeypress="doKeyPress('viewbargains.html');">
</p>
Añadir un script a un elemento div
Este ejemplo usa un script para hacer que un elemento div se comporte
como un enlace. Aunque el autor ha proporcionado acceso completo por
teclado y ha separado los manejadores de eventos del marcado para permitir
reutilizar el contenido, la tecnología de asistencia no reconocerá
el elemento div como un enlace.
window.onload = init;
function init(){
var objAnchor = document.getElementById('linklike');
objAnchor.onclick = function(event){return changeLocation(event,
'surveyresults.html');};
objAnchor.onkeypress = function(event){return changeLocation(event,
'surveyresults.html');};
}
function changeLocation(objEvent, strLocation){
var iKeyCode;
if (objEvent && objEvent.type == 'keypress'){
if (objEvent.keyCode){
iKeyCode = objEvent.keyCode;
}
else if (objEvent.which){
iKeyCode = objEvent.which;
}
if (iKeyCode != 13 && iKeyCode != 32){
return true;
}
}
window.location.href = strLocation;
}
El marcado del elemento div es:
<div id="linklike">View the results of the survey.</div>
Pruebas
Procedimiento
Para todos los elementos presentados como enlaces que usen manejadores de eventos JavaScript para que el elemento emule un enlace:
- Comprobar si la función (role) del elemento determinada por software es "link".
- Comprobar si el enlace emulado puede activarse con el teclado.
Resultados esperados
- Si la comprobación n.º 1 es falsa, se da esta condición de fallo y el contenido falla los criterios de conformidad 1.3.1 Información y relaciones y 4.1.2 Nombre, función y valor. Si la comprobación n.º 2 es falsa, se da esta condición de fallo y el contenido falla los criterios de conformidad 2.1.1 Teclado y 2.1.3 Teclado (sin excepciones).
Recursos
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 F42 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.