A partire da Chrome 130, le barre di scorrimento sono attivabili da tastiera per impostazione predefinita se non hanno elementi secondari attivabili da tastiera.
Sfondo
Gli strumenti di scorrimento sono ovunque. Puoi trovarne uno nella sezione "Termini e condizioni" casella di controllo, in cui devi scorrere fino in fondo per fare clic sul pulsante Invia. Oppure potresti trovare una barra dei menu verticale piena di icone tra cui scegliere.
In questi casi, molti utenti web usano i movimenti verso l'alto e verso il basso del mouse o Touchpad per scorrere l'elemento. Tuttavia, un dispositivo di puntamento, un trackpad o un touchscreen non è il modo ottimale per tutti gli utenti di navigare in una pagina. Alcune persone preferiscono navigare in una pagina HTML accedendo a ogni elemento attivabile utilizzando solo la tastiera. I motivi possono essere diversi. Da persone che hanno scosse o altri problemi che complicano l'uso del mouse, coloro che hanno difficoltà a individuare visivamente il cursore del mouse, mentre altri utenti che utilizzano una sensore o il controllo vocale.
Le best practice sull'accessibilità consigliano di rendere disponibili tutte le funzionalità tramite una tastiera. In questo modo tutti possono navigare sul web nel modo migliore per loro.
2.1.1 Tastiera: tutte funzionalità dei contenuti sia azionabile tramite interfaccia della tastiera senza richiedere tempistiche specifiche per le singole sequenze di tasti, ad eccezione dei casi in cui funzione sottostante richiede un input che dipende dal percorso movimento e non solo gli endpoint. (Livello A)
Prima di questo cambiamento per impostare lo stato attivo sugli strumenti di scorrimento
Prima di questa modifica, era possibile impostare lo stato attivo su un elemento scorrevole soltanto se il parametro tabindex sia impostata esplicitamente su 0 o superiore. Ad esempio, utilizza i seguenti CSS e HTML. Quindi, prova a passare dal primo pulsante all'elemento di scorrimento.
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>
Se utilizzi un valore tabindex negativo come nel seguente codice HTML, lo scorrimento verrà saltato.
<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>
Se non imposti un valore tabindex, potrebbe essere difficile per l'utente utilizzarlo la navigazione sequenziale con lo stato attivo per accedere allo scorrimento. Ciò può essere molto frustrante per gli utenti che non hanno accesso a un mouse.
<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>
Tieni presente che uno scorrimento che contiene elementi secondari attivabili, come nell'HTML riportato di seguito, è già accessibile, in quanto i tasti freccia consentono di scorrere quando i bambini su cui concentrarti. In questo caso non viene modificato alcun comportamento.
<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>
Da Chrome 130 con barre di scorrimento attivabili
Questa funzionalità consente alle barre di scorrimento senza valore tabindex impostato e senza elementi secondari attivabili di essere attivabili con la tastiera. Ciò consente agli utenti che non possono o scegli di non usare il mouse per impostare lo stato attivo sui contenuti usando il tasto Tab e la freccia della tastiera chiave.
<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>
Tieni presente che questo comportamento si verifica solo se lo scorrimento non ha elementi secondari attivabili. Ad esempio, se lo scorrimento contiene già un pulsante, lo stato attivo della scheda ignora la barra di scorrimento e imposta lo stato attivo direttamente sul pulsante. In questo caso, lo scorrimento è già possibile accedere ai contenuti utilizzando i tasti freccia, una volta che il pulsante concentrato. A causa di questa regola, il valore predefinito potrebbe non comportarsi sempre nel modo più ottimale se esistono elementi secondari di questo tipo. Se vuoi che sia l'elemento di scorrimento attivabile dalla tastiera in questa situazione, è consigliabile impostare un pari a 0 o superiore.
<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>
Questa funzionalità consente in tutti i casi di accedere alla tastiera per impostazione predefinita. che consentirà agli utenti web di avere un'esperienza più fluida durante la navigazione tramite schede una pagina.