Focusseerbare scrollers op het toetsenbord

Vanaf Chrome 130 zijn scrollers standaard toetsenbordfocusbaar als ze geen toetsenbordfocusbare kinderen hebben.

Achtergrond

Scrollers zijn overal. Mogelijk vindt u er een in het vak 'Algemene voorwaarden', waar u helemaal naar beneden moet scrollen om op de knop Verzenden te klikken. Of u kunt een verticale menubalk tegenkomen vol pictogrammen waaruit u kunt kiezen.

In dergelijke gevallen gebruiken veel internetgebruikers de opwaartse bewegingen van hun muis of touchpad om door het element te scrollen. Een aanwijsapparaat, trackpad of touchscreen is echter niet voor iedere gebruiker de optimale manier om door een pagina te navigeren. Sommige mensen geven er de voorkeur aan om over een HTML-pagina te navigeren en toegang te krijgen tot elk focusbaar element met alleen hun toetsenbord. Dit kan verschillende redenen hebben. Van mensen die last hebben van trillingen of andere problemen die het moeilijk maken een muis te bedienen, van mensen die moeite hebben met het visueel lokaliseren van de muiscursor, en van anderen die een enkele schakelaar of stembediening gebruiken.

Best practices op het gebied van toegankelijkheid bevelen aan dat alle functies beschikbaar moeten zijn via een toetsenbord. Zo kan iedereen internet gebruiken op de manier die voor hem of haar het beste werkt.

2.1.1 Toetsenbord: Alle functionaliteit van de inhoud kan worden bediend via een toetsenbordinterface zonder dat specifieke timings voor individuele toetsaanslagen nodig zijn, behalve wanneer de onderliggende functie invoer vereist die afhangt van het pad van de beweging van de gebruiker en niet alleen van de eindpunten. (Niveau A)

Vóór deze wijziging in focus in scrollers

Vóór deze wijziging kon een scrollerelement alleen op tabbladen zijn gericht als de tabindex expliciet op 0 of hoger was ingesteld. Gebruik bijvoorbeeld de volgende CSS en HTML. Probeer vervolgens van de eerste knop naar het scrollerelement te gaan.

div.scroll, button {
  border: 1px solid lightgray;
  margin-top: 1em;
  border-radius: 0.5em;
}

div.scroll {
  overflow: auto;
  width: 20em;
  height: 5em;
  display: block;
}
div.long {
  width: 10em;
  height: 10em;
}

<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a tab focusable scroller...</p>
<div class="long"></div>
<p>You need to scroll down to see this line.</p>
</div>
<button>End</button>
De scroller is focusseerbaar dankzij een positieve tabindex.

Als u een negatieve tabindex gebruikt, zoals in de volgende HTML, wordt de scroller overgeslagen.

<button>Start</button>
<div class="scroll" tabindex="-1">
<p>This is not a tab focusable scroller...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
De scroller wordt overgeslagen vanwege een negatieve tabindex.

Als u geen tabindexwaarde instelt, kan het voor de gebruiker moeilijk zijn om sequentiële focusnavigatie te gebruiken om toegang te krijgen tot de scroller. Dit kan erg frustrerend zijn voor gebruikers die geen toegang hebben tot een muis.

<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
De scroller heeft geen tabindex.

Merk op dat een scroller die focusbare kinderen bevat, zoals in de volgende HTML, al toegankelijk is, omdat de pijltjestoetsen scrollen mogelijk maken wanneer de focusbare kinderen gefocust zijn. Er wordt in dit geval geen gedrag veranderd.

<button>Start</button>
<div class="scroll">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
De scroller is focusseerbaar omdat deze focusseerbare kinderen bevat.

Vanaf Chrome 130 met focusseerbare scrollers

Met deze functie kunnen scrollers zonder ingestelde tabindexwaarden en zonder focusbare kinderen via het toetsenbord focusseerbaar zijn. Hierdoor kunnen gebruikers die geen muis kunnen of willen gebruiken, de inhoud scherpstellen met behulp van de tab- en pijltoetsen van een toetsenbord.

<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>but you can scroll through its content!</p>
</div>
<button>End</button>
De scroller heeft geen tabindex of focusbare kinderen, maar kan nog steeds worden gefocust.

Merk op dat dit gedrag alleen optreedt als de scroller geen focusseerbare kinderen heeft. Als de scroller bijvoorbeeld al een knop bevat, slaat de tabbladfocus de scroller over en wordt de focus direct op de knop gelegd. In dit geval is de inhoud van de scroller al toegankelijk met behulp van de pijltoetsen, zodra de knop is scherpgesteld. Als gevolg van deze regel gedraagt ​​de standaard zich mogelijk niet altijd op de meest optimale manier als dergelijke kinderen bestaan. Als u in deze situatie wilt dat het scrollerelement zelf via het toetsenbord kan worden gefocust, wordt aanbevolen een tabindexwaarde van 0 of hoger in te stellen.

<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
De scroller heeft een tabindex van 0.

Met deze functie zijn scrollers in alle gevallen standaard via het toetsenbord toegankelijk, waardoor internetgebruikers een soepelere ervaring hebben bij het navigeren met tabbladen over een pagina.