Técnica Scripts de cliente WCAG 2.2
SCR29Hacer que los div o span con acciones funcionen con teclado
Nombre oficial en el W3C: Añadir acciones accesibles por teclado a elementos HTML estáticos
En pocas palabras
Si un div o un span hace algo al pulsarlo, también debe funcionar con teclado. Para ello necesita tabindex="0" para recibir el foco y un script que responda a Intro y a Espacio. Además debe indicar qué es, por ejemplo con role="button". Siempre que se pueda, es mejor usar directamente un botón.
Por qué es importante
Un div o un span no reciben el foco ni responden al teclado por sí solos. Si solo tienen un evento de clic, quien no usa ratón no puede activarlos.
Esto afecta a personas ciegas, con temblores o con movilidad reducida. Por ejemplo, una pestaña «Horarios» hecha con un span sería imposible de abrir sin ratón.
Cómo se hace
- Primero, valore usar un
<button>o un enlace. Ya traen el foco, el teclado y la función correctos sin código extra. - Si necesita un elemento genérico, añada
tabindex="0". Así entra en el orden de tabulación. Contabindex="-1"solo recibe el foco desde un script. - Añada
role="button"(o la función que corresponda) y un nombre claro. Sin ellos, el lector de pantalla no sabe que es un control. - Además del evento
click, escuchekeydownokeyup. Lance la misma acción con Intro y con Espacio. - Asegúrese de que el foco se ve, por ejemplo con un contorno en
:focus-visible. - Esta solución depende de JavaScript. Úsela solo si la página ya lo necesita para funcionar.
Cómo comprobarlo
- Haga clic con el ratón en el control y compruebe que la acción funciona.
- Recorra la página con Tab. El control debe recibir el foco y el foco debe verse.
- Con el foco en el control, pulse Intro y luego Espacio. Las dos teclas deben lanzar la acción.
- Con un lector de pantalla, compruebe que se anuncia su función (por ejemplo, «botón») y su nombre.
Ejemplo
Un div que muestra la dirección de una sede y responde al ratón, a Intro y a Espacio.
<div id="ver-mapa" class="accion" tabindex="0" role="button">Ver dirección de la sede</div>
<p id="mapa" hidden>Calle Mayor, 1. Planta baja.</p>
<script>
var control = document.getElementById('ver-mapa');
function mostrarMapa() { document.getElementById('mapa').hidden = false; }
control.addEventListener('click', mostrarMapa);
control.addEventListener('keydown', function (e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault(); // evita que Espacio desplace la página
mostrarMapa();
}
});
</script>Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica SCR29 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica SCR29 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.