SCR14Usar scripts para hacer opcionales las alertas no esenciales

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

<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>

<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>

Pruebas