Técnica Scripts de cliente WCAG 2.2

SCR26Insertar el contenido nuevo justo después del control que lo abre

Nombre oficial en el W3C: Insertar contenido dinámico en el Document Object Model inmediatamente después del elemento que lo activa

En pocas palabras

Cuando un botón o un enlace muestra contenido nuevo con JavaScript, como un submenú o un panel, ese contenido debe ir en el código justo detrás del control. Así, al pulsar Tab o al seguir leyendo con el lector de pantalla, lo siguiente que se encuentra es justo lo que acaba de aparecer.

Por qué es importante

Quien navega con teclado avanza con la tecla Tab siguiendo el orden del código HTML. El lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) también lee en ese orden.

Si el script añade el submenú al final de la página, la persona pulsa «Servicios» y no encuentra nada a continuación. Tendría que recorrer toda la página para llegar a las opciones nuevas. En pantalla parece bien colocado, pero en el código está lejos.

Cómo se hace

Use un <button> o un enlace como control que abre el contenido. Los dos reciben el foco y responden al teclado.
Lance el script desde el evento click. Este evento funciona con el ratón y también con el teclado.
Inserte el contenido nuevo en el DOM (la estructura de la página que el navegador crea a partir del HTML) justo después del control. Por ejemplo, con control.after(panel).
Deje el foco en el control. La siguiente pulsación de Tab llevará al primer elemento del contenido nuevo.
Si necesita otra posición en pantalla, muévalo con CSS. No cambie su lugar en el código.
Si el contenido llega más tarde desde el servidor, avise también al lector de pantalla, por ejemplo con una región aria-live.

Cómo comprobarlo

Abra cada menú o panel desplegable con el teclado: llegue al control con Tab y pulse Intro.
Pulse Tab una vez más. El foco debe ir al primer elemento del contenido que acaba de aparecer.
Abra las herramientas del navegador (F12), pestaña «Elementos». Compruebe que el contenido nuevo está justo después del control.
Con un lector de pantalla, siga leyendo después del control. Debe oír el contenido nuevo a continuación.

Ejemplo

Un botón «Servicios» crea su submenú y lo coloca justo detrás de él en el código.

<button type="button" id="servicios" aria-expanded="false">Servicios</button>
<script>
var boton = document.getElementById('servicios');
boton.addEventListener('click', function () {
  var menu = document.createElement('ul');
  menu.innerHTML = '<li><a href="/padron">Padrón</a></li>' +
                   '<li><a href="/tasas">Tasas y pagos</a></li>';
  boton.after(menu); // justo detrás del botón
  boton.setAttribute('aria-expanded', 'true');
}, { once: true });
</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 SCR26 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 y scripts

Descripción

El objetivo de esta técnica es colocar los elementos de interfaz de usuario insertados en el Document Object Model (DOM) de tal forma que el orden de tabulación y el orden de lectura del lector de pantalla queden correctamente establecidos por el comportamiento predeterminado del agente de usuario. Esta técnica puede usarse para cualquier elemento de interfaz de usuario que se oculte y se muestre, como menús y cuadros de diálogo.

El orden de lectura en un lector de pantalla se basa en el orden de los elementos HTML en el Document Object Model, al igual que el orden de tabulación predeterminado. Esta técnica inserta el contenido nuevo en el DOM inmediatamente después del elemento que se ha activado para desencadenar el script. El elemento desencadenante debe ser un enlace o un botón, y el script debe llamarse desde su evento onclick. Estos elementos pueden recibir el foco de forma nativa, y su evento onclick es independiente del dispositivo. El foco permanece en el elemento activado, y el contenido nuevo, insertado a continuación, pasa a ser lo siguiente tanto en el orden de tabulación como en el orden de lectura del lector de pantalla.

Tenga en cuenta que esta técnica funciona para actualizaciones sincrónicas. Para las actualizaciones asíncronas (a veces llamadas AJAX), se necesita una técnica adicional que informe a la tecnología de asistencia de que se ha insertado el contenido asíncrono.

Ejemplos

Este ejemplo crea un menú cuando se hace clic en un enlace y lo inserta después del enlace. El evento onclick del enlace se usa para llamar al script ShowHide, pasándole como parámetro un id para el nuevo menú.

<button aria-expanded="false" type="button" onclick="ShowHide('foo',this)">
  Toggle
</button>

El script ShowHide crea un div que contiene el nuevo menú e inserta un enlace dentro de él. La última línea es el núcleo del script. Localiza el elemento padre del elemento que desencadenó el script y le añade como nuevo hijo el div que ha creado. Esto hace que el nuevo div quede en el DOM después del menú. Cuando el usuario pulsa la tecla de tabulación, el foco pasará al primer elemento del menú que pueda recibirlo: el enlace que hemos creado.

function ShowHide(id,src){
  var el = document.getElementById(id);
  if (!el){
    el = document.createElement("div");
    el.id = id;
    var link = document.createElement("a");
    link.href = "/laptops";
    link.appendChild(document.createTextNode("Laptops"));
    el.appendChild(link);
    src.parentElement.appendChild(el);
    src.setAttribute("aria-controls", id);
    src.setAttribute("aria-expanded", "true");
   }
   else if (el && src.getAttribute("aria-expanded") === "false"){
     el.style.display = 'block';
     src.setAttribute("aria-expanded", "true");
   }
   else{
     el.style.display = 'none';
     src.setAttribute("aria-expanded", "false");    
   }   
}

Se usa CSS para dar al div y al enlace el aspecto de un menú.

Pruebas

Procedimiento

Localizar todas las zonas de la página que abren cuadros de diálogo que no sean ventanas emergentes.
Comprobar que los cuadros de diálogo se activan desde el evento click de un botón o de un enlace.
Con una herramienta que permita inspeccionar el DOM generado por el script, comprobar que el cuadro de diálogo es el siguiente elemento en el DOM.

Resultados esperados

Las comprobaciones n.º 2 y n.º 3 son verdaderas.

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.

Solicitar una auditoría

Basado en la técnica SCR26 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.