A partire da Chrome 124, per impostazione predefinita è possibile attivare gli strumenti di scorrimento tramite tastiera se non sono presenti elementi secondari attivabili tramite tastiera.
Contesto
Gli scorritori sono ovunque. La puoi trovare nella casella "Termini e condizioni", dove devi scorrere fino in fondo per fare clic sul pulsante Invia. In alternativa, potresti trovare una barra dei menu verticale piena 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 sono il modo ottimale per navigare in una pagina. Alcune persone preferiscono navigare nella pagina HTML accedendo a ogni elemento attivabile usando soltanto la tastiera. I motivi possono essere diversi. Chi ha tremori o altri problemi che rendono difficile l'utilizzo di un mouse, chi ha difficoltà a localizzare visivamente il cursore del mouse e altri che utilizzano un singolo sensore o controllo vocale.
Le best practice per l'accessibilità consigliano che tutte le funzioni siano disponibili usando una tastiera. In questo modo, tutti possono usare il web nel modo più adatto alle loro esigenze.
2.1.1 Tastiera: tutte le funzionalità dei contenuti sono azionabili tramite un'interfaccia a tastiera senza richiedere tempi specifici per le singole sequenze di tasti, tranne nei casi in cui la funzione sottostante richiede un input che dipende dal percorso dell'utente e non solo dagli endpoint. (Livello A)
Prima di questa modifica per impostare lo stato attivo sulle barre di scorrimento
Prima di questa modifica, un elemento di scorrimento può essere impostato con lo stato attivo sul tasto Tab solo se il valore Tabindex è impostato esplicitamente su 0 o su un valore superiore. Ad esempio, utilizza i seguenti CSS e HTML. Dopodiché, prova a utilizzare il tasto Tab 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 tabindex negativo come nel codice HTML seguente, lo scorrimento verrà ignorato.
<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 utilizzare la navigazione con stato attivo sequenziale per accedere allo scorrimento. Questo 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 un attivatore che contiene elementi secondari attivabili, come nel seguente codice HTML, è già accessibile, poiché i tasti freccia consentono lo scorrimento 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 124 con funzionalità di scorrimento attivabili
Questa funzionalità consente agli utenti di scorrimento senza valore Tabindex impostato e senza elementi secondari attivabili di essere attivabili tramite tastiera. Ciò consente agli utenti che non possono o scelgono di non usare il mouse per impostare lo stato attivo sui contenuti usando i tasti Freccia e Tab 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 lo scorrimento non ha elementi secondari attivabili. Ad esempio, se la barra di scorrimento contiene già un pulsante, lo stato attivo della scheda saltarà la barra di scorrimento e lo stato attivo verrà impostato direttamente sul pulsante. In questo caso, i contenuti dello scorrimento sono già accessibili utilizzando i tasti freccia, una volta attivato il pulsante. A causa di questa regola, il comportamento predefinito potrebbe non comportarsi sempre nel modo ottimale se esistono questi elementi secondari. Se in questa situazione vuoi che l'elemento di scorrimento stesso sia attivabile tramite tastiera, ti consigliamo di impostare un valore tabindex 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 di accedere alla tastiera per impostazione predefinita in tutti i casi, il che aiuterà gli utenti web a usufruire di un'esperienza più fluida durante la navigazione con le schede all'interno di una pagina.