In Chrome 130, è possibile attivare per impostazione predefinita l'elemento attivo tramite tastiera se non sono presenti bambini attivabili tramite 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 Il touchscreen non è 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 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 per l'accessibilità consigliano che tutte le funzionalità siano disponibili utilizzando una tastiera. In questo modo tutti possono navigare sul web nel modo migliore per loro.
di Gemini Advanced.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 premere il tasto Tab per 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>
Utilizzando un tabindex negativo come nel seguente HTML, lo scorrimento verrà saltata.
<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. 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 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 è stato 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 strumenti di scorrimento attivabili
Questa funzionalità consente di scorrere senza impostare il valore di tabindex e senza attivabili in modo che siano attivabili dalla 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 specifici. A causa di questa regola, l'impostazione predefinita potrebbe non comportarsi sempre il modo ottimale se tali bambini esistono. Se vuoi che sia l'elemento scorrevole 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.