Bij focus

Alleen al de verplaatsing naar een element, bijvoorbeeld door op Tab te drukken, mag nooit een grote verandering veroorzaken, zoals het laden van een nieuwe pagina, het verzenden van een formulier of het openen van een pop-up.

Dit is een : automatisering kan aan de hand van geminificeerde JavaScript of JavaScript uit frameworks niet betrouwbaar vaststellen of een focus-handler de context wijzigt. Daarom geeft Silktide op elke pagina de prompt weer en bevestigt iemand dit door met Tab door de pagina te navigeren.

Waarom dit belangrijk is

Toetsenbordgebruikers verplaatsen de focus door een pagina om deze te verkennen, net zoals muisgebruikers de aanwijzer verplaatsen. Een element bereiken is niet hetzelfde als ervoor kiezen het te gebruiken. Als alleen al het navigeren met Tab naar een zoekveld de pagina opnieuw laadt, of het bereiken van een knop een dialoogvenster opent, worden toetsenbord- en -gebruikers ergens naartoe verplaatst waar ze niet naartoe wilden. Vaak raken ze daarbij hun positie en hun werk kwijt. Mensen met motorische beperkingen die langzaam navigeren, element voor element, lopen voortdurend tegen deze valkuilen aan.

Dit is succescriterium 3.2.1 van (Bij focus), een vereiste op — onderdeel van het meest basale conformiteitsniveau.

Wat je moet controleren

Navigeer met Tab door elk focusbaar bedieningselement op de pagina.
Bevestig dat alleen de focus nooit leidt tot navigatie, het verzenden van een formulier of het openen van een dialoogvenster of nieuw venster.
Focus-handlers die alleen een veld markeren, een hint tonen of op de achtergrond gegevens voorbereiden, zijn toegestaan.

Als de focus nooit de context wijzigt, .

Hoe je dit oplost

Verplaats de actie uit de focus-handler. Navigatie, het verzenden van formulieren en dialoogvensters moeten worden geactiveerd door een expliciete actie, zoals click, Enter of een wijziging die de bezoeker bevestigt.
Gebruik focus-handlers alleen voor niet-verstorende effecten.

// Probleem: het bereiken van het veld navigeert onmiddellijk
searchBox.addEventListener('focus', () => {
  window.location.href = '/search';
});

// Oplossing: navigeer alleen wanneer de gebruiker ervoor kiest
searchBox.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    window.location.href = '/search';
  }
});

Hoe Silktide dit test

Silktide kan contextwijzigingen die door focus worden geactiveerd niet betrouwbaar detecteren door de broncode van listeners te inspecteren — frameworks en minificatie maken dat kwetsbaar — dus deze controle geeft één beoordelingsprompt per pagina weer met een beschrijving van wat je door met Tab te navigeren moet controleren.