Campus Design System

Appearance

1.4.2 Audio regeling niveau AA ​

Uitleg ​

Het criterium 1.4.2 Audio Control van WCAG 2.2 richt zich op het verstrekken van gebruikers de mogelijkheid om audio die automatisch wordt afgespeeld op een website te controleren. Dit betreft audio die gedurende meer dan 3 seconden automatisch wordt afgespeeld, zoals achtergrondmuziek, geluidsclips of andere audiobestanden.

Het doel van dit criterium is ervoor te zorgen dat gebruikers de controle hebben over ongewenste of storende audio. Het is belangrijk om gebruikers de mogelijkheid te geven om het geluid te pauzeren, stoppen of het volume aan te passen, zodat ze geen hinder ondervinden van automatische audio-afspeellijsten.

Waarom is dit belangrijk? ​

Mensen met auditieve beperkingen of cognitieve stoornissen kunnen moeite hebben met het verwerken van automatische audio, vooral als er geen mogelijkheid is om de audio te stoppen of te regelen. Daarnaast kan automatische audio storend zijn voor gebruikers die bijvoorbeeld andere audio-inhoud horen, zoals gesproken tekst of muziek op de achtergrond.

Dit criterium is essentieel voor de toegankelijkheid van websites en apps, omdat het gebruikers meer controle geeft over hun ervaring.

Wat betekent dit in de praktijk? ​

Dit criterium geldt alleen voor audio die automatisch wordt afgespeeld en langer dan 3 seconden duurt. Het geldt dus niet voor audio die als gevolg van gebruikersinteractie (bijvoorbeeld door op een knop te klikken) wordt afgespeeld.

Er moeten altijd opties zijn om:

  • De audio volledig te pauzeren of stoppen,
  • Het volume van de audio in te stellen,
  • Of de audio op stille modus te zetten.

Voorbeeld van het probleem ​

Stel je voor dat een website automatisch een achtergrondmuziek afspeelt zodra de gebruiker de pagina laadt. Als er geen mogelijkheid is om het geluid te stoppen of het volume te regelen, kan dit storend zijn voor de gebruiker, vooral als deze al andere audio-inhoud aan het beluisteren is of als het geluid geen toegevoegde waarde heeft.

Oplossing voor dit probleem ​

De oplossing is om een bedieningspaneel of knoppen te bieden waarmee de gebruiker de automatische audio kan regelen. Dit kan bijvoorbeeld een eenvoudige knop zijn waarmee de audio kan worden gepauzeerd of gestopt.

Voorbeeld van implementatie ​

Een veelvoorkomende oplossing is het toevoegen van een audio control die de gebruiker de mogelijkheid geeft om de audio te pauzeren of stoppen.

html
<audio controls>
  <source src="background-music.mp3" type="audio/mpeg" />
  Uw browser ondersteunt geen audio-element.
</audio>

In dit voorbeeld geeft het controls-attribuut de gebruiker de mogelijkheid om het geluid te pauzeren, het volume aan te passen, of de audio volledig te stoppen.

Een alternatief kan zijn om een mute-knop toe te voegen, bijvoorbeeld:

html
<audio id="audioPlayer" autoplay loop>
  <source src="background-music.mp3" type="audio/mpeg" />
  Uw browser ondersteunt geen audio-element.
</audio>

<button onclick="document.getElementById('audioPlayer').muted = !document.getElementById('audioPlayer').muted;">
  Mute
</button>

In dit voorbeeld schakelt de knop het geluid aan of uit, afhankelijk van de huidige status van de audio.

Alternatieve benaderingen ​

  • Volume-instellingen: Het toevoegen van een schuifregelaar waarmee gebruikers het volume kunnen aanpassen, kan nuttig zijn voor het bieden van meer controle over de audio-instellingen.
html
<input
  type="range"
  id="volume"
  name="volume"
  min="0"
  max="100"
  step="1"
  value="100"
  onchange="document.getElementById('audioPlayer').volume = this.value / 100;"
/>
  • Afspeellijstbeheersing: Als je meerdere audioclips of achtergrondgeluiden gebruikt, kun je een afspeellijstcontroller bieden waarmee de gebruiker specifieke audiotracks kan afspelen, pauzeren, en overslaan.

Belangrijke overwegingen ​

  • Automatisch afspelen vermijden: Zorg ervoor dat audio niet automatisch wordt afgespeeld zonder gebruikersinteractie. Dit kan niet alleen voor dit criterium maar ook voor de algehele gebruikservaring van je website storend zijn.
  • Alternatieve audio-opties: Als het geluid essentieel is voor de inhoud (bijvoorbeeld voor interactieve geluidseffecten), overweeg dan om ook een visuele weergave van de audio te bieden, zoals een indicator die aangeeft dat er audio wordt afgespeeld.

Belangrijkste punten ​

  • Zorg ervoor dat alle automatische audio die langer dan 3 seconden speelt de mogelijkheid biedt om gepauzeerd, gestopt of het volume aangepast te worden.
  • Voeg bedieningspanelen of knoppen toe waarmee gebruikers de audio kunnen regelen zonder hun ervaring te verstoren.
  • Vermijd dat audio automatisch afspeelt zonder controleerbare opties voor de gebruiker.

Tools en Hulpmiddelen ​

  • Axe Accessibility Checker: Gebruik deze tool om te testen of je website voldoet aan toegankelijkheidsnormen, inclusief audio-instellingen. Axe.
  • WAVE Web Accessibility Evaluation Tool: Een handige tool die snel controleert op problemen met automatische audio en andere multimedia-elementen op je website. WAVE.

Betekenis voor toegankelijkheid ​

Het bieden van controle over automatische audio is van cruciaal belang voor gebruikers die afhankelijk zijn van geluid, zoals mensen met een gehoorbeperking, of voor gebruikers die tegelijkertijd andere audio willen beluisteren. Dit draagt bij aan een meer toegankelijke en gebruiksvriendelijke ervaring op websites, vooral voor diegenen met specifieke behoeften of voorkeuren voor hun audiobeleving.

Referenties ​