Campus Design System

Appearance

2.2.2 Pauze, Stop of Verleng niveau A ​

Uitleg ​

Het WCAG-criterium 2.2.2 Pauze, Stop of Verleng vereist dat websites functies aanbieden die gebruikers in staat stellen om acties te pauzeren, stoppen of verlengen die automatisch worden uitgevoerd en die binnen een bepaalde tijd moeten worden afgerond. Dit criterium is vooral belangrijk voor interacties die tijdsgebonden zijn, zoals geautomatiseerde animaties, slideshows of andere gebeurtenissen die automatisch plaatsvinden zonder tussenkomst van de gebruiker.

Wanneer een automatisch gegenereerde actie, zoals een schuifbalk of animatie, van invloed is op de interactie of toegang tot inhoud, moeten gebruikers de mogelijkheid hebben om deze acties te pauzeren, te stoppen of de snelheid ervan aan te passen. Dit garandeert dat mensen met een beperking, zoals een motorische beperking of vertraagde reactiesnelheid, niet worden gedwongen om snel te reageren.

Wat betekent dit in de praktijk? ​

  • Pauze-optie voor geautomatiseerde activiteiten: Als een geautomatiseerde activiteit plaatsvindt, zoals een afbeelding die automatisch verandert, een video die zichzelf afspeelt of een tekst die zich verplaatst, moet de gebruiker de mogelijkheid hebben om deze activiteit te pauzeren.

  • Stoppen of beëindigen van geautomatiseerde acties: Gebruikers moeten de mogelijkheid hebben om een geautomatiseerde actie volledig te stoppen, zoals het stoppen van een automatisch afspelende video of het beëindigen van een onnodige animatie.

  • Snelheid aanpassen: In sommige gevallen moeten gebruikers in staat zijn om de snelheid van geautomatiseerde processen aan te passen, bijvoorbeeld bij een presentatie die te snel door de dia's gaat.

Waarom is dit belangrijk? ​

Dit criterium is belangrijk voor gebruikers die motorische of cognitieve beperkingen hebben en moeite kunnen hebben met het volgen van snel veranderende inhoud. Het stelt hen in staat om hun interactie met de website aan te passen op een manier die hen helpt de inhoud te begrijpen zonder onder druk te staan om snel te reageren.

Voorbeeld van het probleem ​

Stel je voor dat een website automatisch een reeks afbeeldingen toont in een carrousel, zonder pauze- of stopoptie. De afbeeldingen bewegen snel en de gebruiker heeft geen controle over de snelheid van de carrousel. Dit zou problematisch kunnen zijn voor mensen die moeite hebben met het volgen van snel bewegende beelden, zoals mensen met een cognitieve beperking of mensen met een beperkte reactietijd.

Oplossing voor dit probleem ​

Een oplossing zou zijn om een duidelijke pauze-, stop- of vertragingoptie toe te voegen, waarmee gebruikers volledige controle krijgen over de geautomatiseerde actie. Dit kan bijvoorbeeld een stopknop zijn voor de carrousel of de mogelijkheid om de snelheid van de overgangen aan te passen.

Goed voorbeeld:

html
<!-- Automatische slideshow met pauze- en stopknoppen -->
<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="img1.jpg" style="width:100%" />
  </div>
  <div class="mySlides fade">
    <img src="img2.jpg" style="width:100%" />
  </div>
  <div class="mySlides fade">
    <img src="img3.jpg" style="width:100%" />
  </div>

  <!-- Pauze en stop knoppen -->
  <button id="pause" onclick="pauseSlideshow()">Pauze</button>
  <button id="stop" onclick="stopSlideshow()">Stop</button>
</div>

<script>
  let slideIndex = 0;
  let slideshowInterval;

  function showSlides() {
    let slides = document.getElementsByClassName('mySlides');
    for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = 'none';
    }
    slideIndex++;
    if (slideIndex > slides.length) {
      slideIndex = 1;
    }
    slides[slideIndex - 1].style.display = 'block';
    slideshowInterval = setTimeout(showSlides, 3000); // Verander de afbeelding om de 3 seconden
  }

  function pauseSlideshow() {
    clearTimeout(slideshowInterval); // Pauzeer de slideshow
  }

  function stopSlideshow() {
    clearTimeout(slideshowInterval); // Stop de slideshow volledig
    let slides = document.getElementsByClassName('mySlides');
    for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = 'none'; // Verberg alle dia's
    }
  }

  showSlides(); // Start de slideshow
</script>

In dit voorbeeld wordt een automatische slideshow weergegeven. Gebruikers hebben de mogelijkheid om de slideshow te pauzeren of volledig te stoppen via knoppen die de functionaliteit bedienen.

Slecht voorbeeld:

html
<!-- Slideshow zonder pauze- of stopoptie -->
<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="img1.jpg" style="width:100%" />
  </div>
  <div class="mySlides fade">
    <img src="img2.jpg" style="width:100%" />
  </div>
  <div class="mySlides fade">
    <img src="img3.jpg" style="width:100%" />
  </div>
</div>

<script>
  let slideIndex = 0;

  function showSlides() {
    let slides = document.getElementsByClassName('mySlides');
    for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = 'none';
    }
    slideIndex++;
    if (slideIndex > slides.length) {
      slideIndex = 1;
    }
    slides[slideIndex - 1].style.display = 'block';
    setTimeout(showSlides, 3000); // Verander de afbeelding om de 3 seconden
  }

  showSlides(); // Start de slideshow
</script>

In dit slechte voorbeeld is er geen mogelijkheid voor de gebruiker om de geautomatiseerde slideshow te pauzeren of te stoppen. De gebruiker wordt gedwongen om de inhoud te volgen zonder controle over de snelheid van de wijzigingen.

Belangrijke overwegingen ​

  • Zorg voor toegankelijkheid voor gebruikers die moeite hebben met snel bewegende inhoud: Personen met cognitieve beperkingen of vertraagde reactiesnelheid moeten de optie hebben om geautomatiseerde inhoud te pauzeren, stoppen of de snelheid aan te passen.

  • Zorg ervoor dat knoppen voor pauzeren, stoppen of aanpassen duidelijk zichtbaar zijn: Deze knoppen moeten op een logische plaats in de interface worden gepositioneerd en gemakkelijk te begrijpen zijn voor de gebruiker.

  • Niet te veel afleidende automatische acties: Beperk het aantal automatische acties die plaatsvinden, vooral als ze de gebruiker afleiden van belangrijke inhoud. Zorg ervoor dat ze altijd onder controle van de gebruiker staan.

Alternatieve benaderingen ​

  • Gebruik van aangepaste snelheidsinstellingen: Voor gebruikers die sneller willen navigeren, kan het nuttig zijn om hen de mogelijkheid te bieden om de snelheid van de geautomatiseerde inhoud zelf in te stellen.

  • Gebruik van duidelijke visuele aanwijzingen: Zorg ervoor dat knoppen voor pauzeren, stoppen of aanpassen goed zichtbaar zijn en duidelijk aangeven wat ze doen. Bijvoorbeeld een stopknop met een duidelijke tekst "Stop" en een pauzeknop met een duidelijke tekst "Pauze".

Belangrijkste punten ​

  • Gebruikers moeten de mogelijkheid hebben om automatische activiteiten te pauzeren, te stoppen of de snelheid aan te passen, zodat ze niet onder tijdsdruk of afleiding staan.
  • Het aanbieden van deze opties zorgt ervoor dat gebruikers met verschillende beperkingen kunnen deelnemen aan interactieve elementen zonder onder onredelijke tijdsdruk te staan.

Tools en Hulpmiddelen ​

  • aXe Accessibility Tool: Controleer of je website knoppen of opties heeft voor pauzeren, stoppen of het verlengen van geautomatiseerde acties. aXe Tool.
  • WAVE (Web Accessibility Evaluation Tool): Test je website op automatische acties en controleer of gebruikers de mogelijkheid hebben om ze te onderbreken of aan te passen. WAVE Tool.

Referenties ​