G170Poner al principio de la página un control para apagar el sonido

Por qué es importante

Un lector de pantalla (programa que lee en voz alta la pantalla) habla a la vez que la música o el vídeo de la página. La persona ciega no oye bien ninguno de los dos y le cuesta encontrar el botón para pararlo.

El sonido inesperado también molesta y desconcentra a personas con dificultades de atención o de aprendizaje. Si el control está al principio, se llega a él en pocos segundos.

Cómo se hace

1. Si un sonido empieza solo y dura más de 3 segundos, añada un botón para pararlo, silenciarlo o bajar su volumen.
2. Colóquelo al principio de la página, en pantalla y en el orden del código. Así es de lo primero a lo que se llega con Tab.
3. Use un botón real (<button>) que funcione con el teclado.
4. Póngale un texto claro: «Detener el sonido» o «Pausar el vídeo».
5. Mejor aún: no reproduzca sonido de forma automática (técnica G171).

Cómo comprobarlo

1. Abra la página y escuche si suena algo de forma automática.
2. Si suena más de 3 segundos, busque un control para apagarlo cerca del principio de la página.
3. Pulse Tab desde el principio y compruebe que se llega a él enseguida.
4. Actívelo con Intro o con la barra espaciadora y compruebe que el sonido se para.

Ejemplo

Botón situado al principio de la página que pausa el vídeo de portada:

<body>
  <button type="button" id="parar-sonido">Detener el sonido</button>
  ...
  <video id="portada" src="presentacion.mp4" autoplay></video>
  <script>
    document.getElementById('parar-sonido').addEventListener('click', () => {
      document.getElementById('portada').pause();
    });
  </script>
</body>