Técnica Scripts de cliente WCAG 2.2
SCR29Añadir acciones accesibles por teclado a elementos HTML estáticos
En resumen
Cuando se convierte un div o un span en un control interactivo mediante JavaScript, las personas que navegan con teclado no pueden llegar a él ni activarlo. Esta técnica explica cómo hacerlo enfocable con tabindex y cómo añadir un manejador de teclado junto al de clic. Es útil solo en entornos donde se puede confiar en los scripts y debe acompañarse de la información de función, nombre y estado que exige el criterio 4.1.2.
Aplicabilidad
HTML, scripts
Descripción
El objetivo de esta técnica es mostrar cómo proporcionar acceso por teclado a un control de interfaz de usuario implementado mediante acciones asociadas a elementos HTML estáticos como div o span. Esta técnica garantiza que el elemento pueda recibir el foco estableciendo el atributo tabindex, y garantiza que la acción pueda activarse desde el teclado proporcionando un manejador onkeyup u onkeypress además del manejador onclick.
Cuando el atributo tabindex tiene el valor 0, el elemento puede recibir el foco mediante el teclado y se incluye en el orden de tabulación del documento. Cuando el atributo tabindex tiene el valor -1, no se puede llegar al elemento con la tecla de tabulación, pero se le puede asignar el foco por programación con element.focus().
Dado que los elementos HTML estáticos no tienen acciones asociadas, no es posible proporcionar una implementación alternativa o una explicación en entornos en los que los scripts no estén disponibles. Esta técnica solo debe usarse en entornos en los que se pueda confiar en los scripts del lado del cliente.
Estos controles de interfaz de usuario deben seguir cumpliendo el criterio de conformidad 4.1.2 Nombre, función y valor. Aplicar esta técnica sin proporcionar también la información de función, nombre y estado del control de interfaz de usuario dará lugar al fallo F59, Fallo 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.
Ejemplos
Añadir una acción JavaScript a un elemento div
Al elemento div de la página se le asigna un atributo id único y un atributo tabindex con el valor 0. Un script utiliza el modelo de objetos del documento (DOM) para localizar el elemento div por su id y añadirle el manejador onclick y el manejador onkeyup. El manejador onkeyup invocará la acción cuando se pulse la tecla Intro. Tenga en cuenta que el elemento div debe estar cargado en el DOM antes de poder localizarlo y modificarlo. Esto suele conseguirse llamando al script desde el evento onload del elemento body. El script que añade los manejadores de eventos solo se ejecutará si el agente de usuario admite JavaScript y lo tiene activado.
<script>
// this is the function to perform the action. This simple example toggles a message.
function doSomething(event) {
var msg=document.getElementById("message");
msg.style.display = msg.style.display=="none" ? "" : "none";
//return false from the function to make certain
// that the href of the link does not get invoked
return false;
}
// this is the function to perform the action when the Enter key has been pressed.
function doSomethingOnEnter(event) {
var key = 0;
// Determine the key pressed, depending on whether window.event
// or the event object is in use
if (window.event) {
key = window.event.keyCode;
}
else if (event) {
key = event.keyCode;
}
// Was the Enter or Space key pressed?
if (key == 13 || key == 32) {
return doSomething(event);
}
// The event has not been handled, so return true
return true;
}
// This setUpActions() function must be called to set the onclick and onkeyup
// event handlers onto the existing div element.
// This function must be called after the div element with id="active"
// has been loaded into the DOM.
// In this example the setUpActions() function is called from the onload event
// for the body element.
function setUpActions() {
// get the div object
var active=document.getElementById("active");
// assign the onclick handler to the object.
active.onclick=doSomething;
// assign the onkeyup handler to the object.
active.onkeyup=doSomethingOnEnter;
}
</script>
<body onload="setUpActions();">
<p>Here is the link to modify with a javascript action:</p>
<div>
<span id="active" role="button" tabindex="0">Do Something</span>
</div>
<div aria-live="polite">
<div id="message">Hello, world!</div>
</div>
</body>Ejemplo funcional de este código: Creating Divs with Actions using JavaScript (crear elementos div con acciones mediante JavaScript).
Pruebas
Procedimiento
En un agente de usuario compatible con scripts:
- Hacer clic en el control con el ratón.
- Comprobar que la acción del script se ejecuta correctamente.
- Comprobar que es posible navegar hasta el control y darle el foco mediante el teclado.
- Situar el foco del teclado en el control.
- Comprobar que al pulsar Intro o Espacio se invoca la acción del script.
Resultados esperados
- Todas las comprobaciones son verdaderas.
Recursos
- HTML - Scripting (especificación HTML: scripts)
- HTML - Focus (especificación HTML: foco)
- ARIA Global States And Properties (estados y propiedades globales de ARIA)
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. 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 SCR29 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.
