Addaw, ir a inicio Donar

Técnica Scripts de cliente WCAG 2.2

SCR14Dejar que la persona active o desactive los avisos que no son urgentes

Nombre oficial en el W3C: Usar scripts para hacer opcionales las alertas no esenciales

En pocas palabras

Algunas páginas actualizan datos cada pocos segundos y el lector de pantalla los anuncia todos. Esta técnica añade botones para activar o desactivar esos avisos. Con JavaScript se cambia el valor de aria-live de la zona que se actualiza.

Por qué es importante

Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) interrumpe lo que está leyendo para anunciar cada cambio de una región viva.

Si una cotización, un marcador deportivo o un chat se actualiza sin parar, la persona no puede leer el resto de la página. También molesta a personas con problemas de atención. Los avisos no urgentes deben poder aplazarse o desactivarse.

Cómo se hace

  1. Marque la zona que se actualiza como región viva con aria-live. Una región viva es una zona cuyos cambios lee el lector de pantalla sin mover el foco.
  2. Añada un control visible, por ejemplo un botón «Desactivar avisos», cerca de esa zona.
  3. Al pulsarlo, cambie aria-live a off. Al reactivarlo, vuelva a polite o assertive.
  4. Indique el estado del botón con aria-pressed o cambiando su texto.
  5. Recuerde la preferencia (por ejemplo, con una cookie) para las siguientes visitas.
  6. No permita desactivar los avisos de emergencia, como una alerta de seguridad.

Cómo comprobarlo

  1. Cargue la página y localice las zonas que se actualizan solas.
  2. Compruebe que hay un control para activar y desactivar sus avisos y que funciona con el teclado.
  3. Con un lector de pantalla, desactive los avisos y confirme que dejan de leerse.
  4. Actívelos de nuevo y confirme que vuelven a anunciarse.

Ejemplo

Botón que activa o desactiva los anuncios de una cotización.

<div id="cotizacion" aria-live="polite">IBEX 35: 11.250</div>
<button id="avisos" aria-pressed="true">Avisos de cambios</button>
<script>
  const zona = document.getElementById("cotizacion");
  const boton = document.getElementById("avisos");
  boton.addEventListener("click", () => {
    const activos = boton.getAttribute("aria-pressed") === "true";
    boton.setAttribute("aria-pressed", String(!activos));
    zona.setAttribute("aria-live", activos ? "off" : "polite");
  });
</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 SCR14 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

Tecnologías de scripts que usan alertas de script para comunicaciones que no son de emergencia.

Descripción

El objetivo de esta técnica es permitir activar y desactivar los anuncios que hacen los lectores de pantalla de los cambios en un componente de alerta de cotización bursátil. De forma predeterminada, cuando cambia la cotización, los lectores de pantalla anuncian el cambio. Esto puede resultar molesto para algunos usuarios, así que hay botones que les permiten activar o desactivar los anuncios.

Esta técnica usa la propiedad aria-live para convertir el componente de cotización en una región activa (live region) y la propiedad aria-atomic para indicar a los lectores de pantalla que anuncien todo el contenido del componente, en lugar de solo lo que se ha actualizado, cuando la cotización se actualiza. A efectos de esta demostración, la cotización se actualiza cada 10 segundos. Si los anuncios están activados, la propiedad aria-live se establece en assertive; si los anuncios están desactivados, la propiedad aria-live se establece en off. Los dos botones que controlan los anuncios usan la propiedad aria-pressed, actualizada a true o a false, para informar a quienes usan lectores de pantalla de qué botón está pulsado y, por tanto, de si su lector de pantalla anunciará o no las actualizaciones de la cotización. En una situación real, el autor debería plantearse guardar una cookie (o equivalente) para almacenar la preferencia del usuario, de modo que se conserve en sucesivas visitas a la página.

Ejemplos

Actualizar la configuración del lector de pantalla para las alertas de actualización de cotizaciones

El script siguiente actualizará un valor bursátil dentro de un componente aria-live cada 10 segundos. Si el usuario pulsa el botón "Turn Announcements Off" (desactivar anuncios), su lector de pantalla dejará de hacer anuncios cuando cambie el valor bursátil; si pulsa el botón "Turn Announcements On" (activar anuncios), los anuncios se reanudarán.

El JavaScript

<script>
document.addEventListener("DOMContentLoaded", function (e) {
  const stockBox = document.querySelector("#stock-box");
  const stockMovement = document.querySelector("#stock-movement");
  const onBtn = document.querySelector("#live-on");
  const offBtn = document.querySelector("#live-off"); 
  const stocks = new Array("stock went down", "stock stayed the same", "stock went up");
  let loopCount = 0;	
  onBtn.addEventListener("click", modifyLive, false);
  offBtn.addEventListener("click", modifyLive, false);
  function modifyLive(e){
    let elm = e.currentTarget;
    let liveState = elm.getAttribute("id");
    if (liveState === "live-off"){
      stockBox.setAttribute("aria-live", "off");
      onBtn.setAttribute("aria-pressed", "false");
      offBtn.setAttribute("aria-pressed", "true");
    }
    else{
      stockBox.setAttribute("aria-live", "assertive");
      onBtn.setAttribute("aria-pressed", "true");
      offBtn.setAttribute("aria-pressed", "false");      
    }
  }
  setInterval(() => {
    if(loopCount >2){
      loopCount = 0;
    }
    stockMovement.innerHTML = stocks[loopCount];
      loopCount++;
    }, 10000)
  });
</script>

El HTML

<body>
  <h1>Turbo Encabulator Stock Information</h1>	
  <div id="stock-box" aria-atomic="true" aria-live="assertive">
    <span>Turbo Encabulator Stock Price: </span>
    <span id="stock-movement">stock went up</span>
  </div>
  <p>Use the buttons to toggle screen reader announcements of stock changes:</p>
  <div>
    <button aria-pressed="true" id="live-on" type="button">
     Turn Announcements On</button>
    <button aria-pressed="false" id="live-off" type="button">
     Turn Announcements Off</button>
  </div>
</body>

Ejemplo funcional de este código: Demostración de activación y desactivación de alertas ARIA.

Pruebas

Procedimiento

Para una página web que admite interrupciones que no son de emergencia:

  1. Cargar la página web y verificar que no se muestra ninguna alerta que no sea de emergencia.
  2. Verificar que existe un mecanismo para activar y desactivar las interrupciones que no son de emergencia.

Resultados esperados

  • Para una página web que admite interrupciones que no son de emergencia, las comprobaciones n.º 1 y n.º 2 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 SCR14 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.