Campus Design System

Appearance

2.1.4 Sneltoetsen met Karakters niveau A ​

Uitleg ​

Het WCAG-criterium 2.1.4 Sneltoetsen met Karakters richt zich op het aanbieden van toegang tot sneltoetsen (keyboard shortcuts) die zijn gebaseerd op toetsencombinaties van individuele karakters (zoals letters en cijfers). Dit criterium stelt dat, indien sneltoetsen gebaseerd zijn op enkel karaktertoetsen (zoals Alt + C voor "contact"), de gebruiker een manier moet hebben om deze sneltoetsen uit te schakelen, aan te passen of de sneltoetsen te deactiveren om ongewenste acties te voorkomen.

Het doel van dit criterium is om te voorkomen dat sneltoetsen die gebaseerd zijn op karakters conflicteren met systeem- of browser-sneltoetsen, die vaak hetzelfde toetscombinaties gebruiken. Hierdoor kan het voorkomen dat gebruikers onbedoelde acties uitvoeren.

Wat betekent dit in de praktijk? ​

  • Conflict voorkomen: Indien de website gebruik maakt van sneltoetsen die gebaseerd zijn op karakters, moeten gebruikers de mogelijkheid hebben om deze sneltoetsen uit te schakelen of aan te passen, om conflicten met andere sneltoetsen (bijvoorbeeld van de browser of besturingssysteem) te voorkomen.

  • Instellingen voor sneltoetsen: Wanneer sneltoetsen die op karakters zijn gebaseerd beschikbaar zijn, moet de website een optie bieden voor gebruikers om deze sneltoetsen in te stellen of aan te passen. Dit kan via een configuratiescherm of een instelling in het toegankelijkheidsmenu.

  • Mogelijkheid tot uitschakelen: Gebruikers moeten de mogelijkheid hebben om sneltoetsen volledig uit te schakelen, vooral wanneer deze onbedoeld worden geactiveerd of wanneer ze conflicteren met andere functies.

Waarom is dit belangrijk? ​

Dit criterium is van cruciaal belang omdat sommige gebruikers sneltoetsen onbedoeld kunnen activeren, vooral wanneer ze niet goed in staat zijn om te onderscheiden welke sneltoetsen van de website komen en welke van het systeem of de browser. Het biedt flexibiliteit en voorkomt verwarring voor gebruikers die sneltoetsen niet willen gebruiken of die afhankelijk zijn van andere sneltoetsen voor hun eigen werkstroom.

Daarnaast kan het voor sommige gebruikers, bijvoorbeeld mensen met motorische beperkingen, moeilijk zijn om sneltoetsen die op specifieke karakters zijn gebaseerd goed te gebruiken. Door ze aanpasbaar of uitschakelbaar te maken, wordt de toegankelijkheid voor een bredere gebruikersgroep verbeterd.

Voorbeeld van het probleem ​

Stel je voor dat een website een sneltoets heeft die gebruik maakt van de "C"-toets (bijvoorbeeld Alt + C) om een actie uit te voeren. Als de gebruiker een andere toepassing gebruikt die dezelfde sneltoets gebruikt voor een andere functie (bijvoorbeeld een tekstverwerker of een browser), kan dit leiden tot een conflict waarbij de gebruiker onbedoeld de verkeerde actie uitvoert.

Oplossing voor dit probleem ​

Wanneer een website sneltoetsen heeft die gebaseerd zijn op karaktertoetsen, moet de website een manier bieden om deze sneltoetsen uit te schakelen, aan te passen of te deactiveren. Dit kan door gebruikers de mogelijkheid te geven om sneltoetsen in te stellen in de toegankelijkheidsinstellingen of via een gebruikersinterface.

Goed voorbeeld:

html
<!-- Sneltoetsen kunnen worden aangepast of uitgeschakeld via een instelling -->
<button onclick="doAction()">Klik hier</button>

<script>
  // Sneltoetsen worden alleen geactiveerd als ze niet in conflict zijn met andere sneltoetsen
  document.addEventListener('keydown', function (event) {
    if (event.altKey && event.key === 'C') {
      // Voer de actie uit bij druk op Alt + C
      console.log('Sneltoets C geactiveerd');
    }
  });

  // Instellingen voor sneltoetsen kunnen worden aangepast of uitgeschakeld via een toegankelijkheidsmenu
  function toggleShortcuts(enable) {
    if (!enable) {
      document.removeEventListener('keydown', handleShortcut);
    }
  }

  function handleShortcut(event) {
    if (event.altKey && event.key === 'C') {
      // Voer de actie uit bij Alt + C
      console.log('Sneltoets C geactiveerd');
    }
  }
</script>

In dit voorbeeld wordt de sneltoets voor Alt + C alleen geactiveerd als de gebruiker dat wenst. Gebruikers kunnen sneltoetsen uitschakelen via een toegankelijkheidsmenu, waarmee de sneltoetsfunctionaliteit uitgeschakeld wordt als het hen niet uitkomt.

Slecht voorbeeld:

html
<!-- Sneltoetsen die niet kunnen worden aangepast of uitgeschakeld -->
<button onclick="doAction()">Klik hier</button>

<script>
  // Sneltoetsen kunnen niet worden aangepast of uitgeschakeld
  document.addEventListener('keydown', function (event) {
    if (event.altKey && event.key === 'C') {
      // Actie wordt altijd uitgevoerd, zonder mogelijkheid om de sneltoets uit te schakelen
      console.log('Sneltoets C geactiveerd');
    }
  });
</script>

In dit slechte voorbeeld kunnen gebruikers de sneltoets voor Alt + C niet aanpassen of uitschakelen, wat kan leiden tot conflicten met andere sneltoetsen.

Belangrijke overwegingen ​

  • Gebruik geen conflicterende sneltoetsen: Als sneltoetsen worden gebruikt, zorg er dan voor dat ze geen conflicten veroorzaken met bestaande sneltoetsen in de browser of besturingssysteem.
  • Instellingen voor sneltoetsen: Bied de gebruiker de mogelijkheid om sneltoetsen in te stellen, aan te passen of volledig uit te schakelen via toegankelijkheidsinstellingen.
  • Duidelijke documentatie: Zorg ervoor dat gebruikers begrijpen welke sneltoetsen beschikbaar zijn en hoe ze kunnen worden beheerd, bijvoorbeeld via een toegankelijkheidsmenu.

Alternatieve benaderingen ​

  • Configuratie-instellingen: Bied gebruikers de mogelijkheid om sneltoetsen naar hun voorkeur aan te passen of in te schakelen via een instellingenmenu op de website.
  • Gebruik van ARIA-roles: Maak gebruik van ARIA-roles en -attributen zoals aria-keyshortcuts om sneltoetsen aan te geven zonder de noodzaak van extra gebruikersinteracties.

Belangrijkste punten ​

  • Wanneer sneltoetsen op basis van karakters worden gebruikt, moeten deze sneltoetsen kunnen worden aangepast, uitgeschakeld of gedeactiveerd om conflicten te voorkomen.
  • Gebruikers moeten kunnen kiezen of ze sneltoetsen willen gebruiken of uitschakelen, afhankelijk van hun persoonlijke voorkeuren en behoeften.
  • Sneltoetsen moeten worden beheerd op een manier die verwarring of conflicten met systeem- of browser-sneltoetsen voorkomt.

Tools en Hulpmiddelen ​

  • aXe Accessibility Tool: Deze tool helpt bij het testen van sneltoetsen en controleert of er conflicten zijn met andere sneltoetsen. aXe Tool.
  • WAVE (Web Accessibility Evaluation Tool): Deze tool controleert op toegankelijkheidsproblemen zoals sneltoetsconflicten en biedt gedetailleerde feedback. WAVE Tool.

Betekenis voor toegankelijkheid ​

Het vermijden van sneltoetsconflicten en het bieden van een manier om sneltoetsen uit te schakelen, zorgt ervoor dat alle gebruikers, ongeacht hun voorkeuren of beperkingen, volledige controle over de interactie met de website behouden. Dit is vooral belangrijk voor gebruikers die afhankelijk zijn van aangepaste sneltoetsen of gebruikers van schermlezers en alternatieve invoerapparaten.

Referenties ​