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 elementi di scorrimento sono ovunque. Potresti trovarne uno in una casella "Termini e condizioni", dove devi scorrere fino in fondo per fare clic sul pulsante Invia. In alternativa, potresti visualizzare una barra dei menu verticale con una serie di icone tra cui scegliere.
In questi casi, molti utenti web utilizzano i movimenti verso l'alto e verso il basso del mouse o del touchpad per scorrere l'elemento. Tuttavia, un dispositivo di puntamento, un trackpad o un touchscreen non rappresentano il modo ottimale per tutti gli utenti per 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 tremori o altri problemi che rendono difficile l'utilizzo di un mouse, a chi ha difficoltà a individuare visivamente il cursore del mouse e ad altri che utilizzano un singolo interruttore o il controllo vocale.
Le best practice per l'accessibilità consigliano che tutte le funzionalità siano disponibili usando una tastiera. In questo modo, chiunque può utilizzare il web nel modo più adatto alle sue esigenze.
2.1.1 Tastiera: tutte le funzionalità dei contenuti sono utilizzabili tramite una interfaccia tastiera senza richiedere tempistiche specifiche per le singole battute, tranne nel caso in cui la funzione di base richieda un input che dipende dal percorso del movimento dell'utente e non solo dai punti di termine. (Livello A)
Prima di questa modifica allo stato attivo negli scorrevoli
Prima di questa modifica, un elemento di scorrimento poteva essere attivato dalla tabulazione solo se il tabindex era impostato esplicitamente su 0 o superiore. Ad esempio, utilizza il seguente codice 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, può essere difficile per l'utente utilizzare la navigazione sequenziale dell'attenzione per accedere allo scorrevole. 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 una barra di scorrimento contenente elementi secondari attivabili, come nel codice HTML riportato di seguito, è già accessibile, poiché i tasti freccia consentono di scorrere quando gli elementi secondari attivabili sono attivi. 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. In questo modo, gli utenti che non possono o scelgono di non utilizzare un mouse possono attivare i contenuti utilizzando i tasti Tab e Freccia della tastiera.
<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 la barra di scorrimento non ha elementi secondari attivabili. Ad esempio, se la barra di scorrimento contiene già un pulsante, l'elemento attivo del tasto Tab ignorerà la barra di scorrimento e imposterà lo stato attivo direttamente sul pulsante. In questo caso, è già possibile accedere ai contenuti dello scorrevole utilizzando i tasti freccia, una volta che il pulsante è attivo. A causa di questa regola, il comportamento predefinito potrebbe non funzionare sempre nel modo più ottimale se esistono questi elementi secondari. Se vuoi che l'elemento di scorrimento stesso sia attivabile da tastiera in questa situazione, ti consigliamo di impostare un valore tabindex di 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 di accedere agli elementi scorrevoli tramite tastiera per impostazione predefinita in tutti i casi, in modo che gli utenti web possano navigare più facilmente tra le schede di una pagina.