Molte persone utilizzano una tastiera o un software o hardware che ne imita la funzionalità, ad esempio un dispositivo di controllo, come mezzo di navigazione principale. Ciò potrebbe essere dovuto a preferenze personali, efficienza o hardware guasto.
Le persone con limitazioni fisiche temporanee, come una distorsione al polso o disabilità motorie come la sindrome del tunnel carpale, possono scegliere di utilizzare una tastiera per navigare. Gli utenti ipovedenti o non vedenti possono utilizzare una tastiera per la navigazione in combinazione con il software di ingrandimento o screen reader. Tuttavia, potrebbero utilizzare comandi di scorciatoie da tastiera diversi per navigare in una schermata rispetto a un utente vedente.
Anche alcune persone senza disabilità potrebbero scegliere di navigare utilizzando una tastiera.
Il supporto della tastiera per tutte queste disabilità e circostanze è fondamentale. Una gran parte dell'accessibilità della tastiera è incentrata sul focus. Il focus si riferisce all'elemento sullo schermo che riceve attivamente l'input dalla tastiera.
In questo modulo, ci concentriamo sulla struttura HTML e sullo stile CSS per tastiera ed elementi selezionabili. Il modulo JavaScript include ulteriori informazioni sulla gestione dello stato attivo e sulle sequenze di tasti per gli elementi interattivi.
Ordine di messa a fuoco
Gli elementi a cui un utente della tastiera può accedere sono chiamati elementi focalizzabili. L'ordine di messa a fuoco, chiamato anche ordine di tabulazione o di navigazione, è l'ordine in cui gli elementi ricevono lo stato attivo. L'ordine di messa a fuoco predefinito deve essere logico, intuitivo e corrispondere all'ordine visivo di una pagina.
Per la maggior parte delle lingue, l'ordine di messa a fuoco inizia dalla parte superiore della pagina e termina in quella inferiore, procedendo da sinistra a destra. Tuttavia, alcune lingue vengono lette da destra a sinistra, quindi la lingua principale della pagina potrebbe richiedere un ordine di messa a fuoco diverso.
Per impostazione predefinita, l'ordine di messa a fuoco include elementi HTML naturalmente focalizzabili, come link, caselle di controllo e input di testo. Gli elementi HTML naturalmente selezionabili includono il supporto dell'ordine di tabulazione integrato e la gestione di base degli eventi della tastiera.
Puoi aggiornare l'ordine di messa a fuoco per includere elementi che normalmente non ricevono la messa a fuoco, come elementi HTML non interattivi, componenti personalizzati o elementi con ARIA e ignorare la semantica naturale della messa a fuoco.
Tabindex
L'ordine di messa a fuoco inizia con gli elementi che hanno un attributo tabindex positivo (se presenti) e procede dal numero positivo più piccolo a quello più grande (ad esempio 1, 2, 3). Quindi, passa agli elementi con un valore tabindex pari a zero in base al loro ordine nel DOM. Gli elementi con un tabindex negativo vengono rimossi dall'ordine di messa a fuoco naturale.
Quando un tabindex
pari a zero (tabindex="0") viene applicato a elementi normalmente non selezionabili, questi vengono
aggiunti all'ordine di selezione naturale della pagina in base al modo in cui vengono visualizzati
nel DOM. Tuttavia, a differenza degli elementi HTML naturalmente selezionabili, devi
fornire un supporto aggiuntivo per la tastiera
affinché siano completamente accessibili.
Allo stesso modo, se hai un elemento normalmente selezionabile ma
inattivo, ad esempio un pulsante che non funziona finché non viene compilato un campo di immissione,
devi aggiungere un valore tabindex negativo (tabindex="-1") a questo elemento. L'aggiunta
di un tabindex negativo segnala a tecnologie assistive e tastiere che questo
pulsante deve essere rimosso dall'ordine di messa a fuoco naturale. Ma non preoccuparti: puoi
utilizzare JavaScript per riportare lo stato attivo sull'elemento quando necessario.
In questo esempio, è stato aggiunto un attributo tabindex agli elementi che non
ricevono naturalmente lo stato attivo. L'ordine degli elementi è stato manipolato utilizzando
tabindex per illustrare l'impatto che può avere sull'ordine di messa a fuoco. Questo è un
esempio di cosa non fare.
Ignora link
La maggior parte dei siti web oggi ha un lungo elenco di link di menu nell'intestazione principale della pagina, che rimane invariato da una pagina all'altra. Questa soluzione è ideale per la navigazione generale, ma può rendere difficile per gli utenti che utilizzano solo la tastiera accedere facilmente ai contenuti principali del sito web senza dover premere il tasto Tab più volte.
Un modo per saltare gruppi di link ridondanti o inutili è aggiungere un skip link. I link di salto sono link ancora che rimandano a una sezione diversa della stessa pagina, utilizzando l'ID di quella sezione, anziché inviare l'utente a un'altra pagina del sito web o a una risorsa esterna. I link di salto vengono in genere aggiunti come primo elemento selezionabile che un utente incontrerà quando arriva su un sito web e possono essere visibili o nascosti visivamente finché un utente non li seleziona con il tasto Tab, a seconda di quanto richiesto dal design.
Quando un utente preme il tasto Tab e un link di salto attivo è presente, il focus della tastiera viene spostato sul link di salto. L'utente può fare clic sul link di salto e passare oltre la sezione dell'intestazione e la navigazione principale. Se scelgono di non fare clic sul link per saltare e continuano a scorrere verso il basso nel DOM, verranno inviati all'elemento su cui è possibile spostare il focus successivo.
Come per tutti i link, è importante che il link di salto includa il contesto relativo allo scopo del link. L'aggiunta della frase "Vai ai contenuti principali" consente all'utente di sapere
dove lo porterà il link. Esistono molte opzioni di codice tra cui scegliere quando
fornisci un contesto aggiuntivo ai tuoi link, ad esempio
aria-labelledby,
aria-label o aggiungendolo
al contenuto di testo dell'elemento <a>, come mostrato nell'esempio.
Indicatore di messa a fuoco
Come hai appena appreso, l'ordine di messa a fuoco è un aspetto importante dell'accessibilità da tastiera. È anche importante decidere lo stile del focus. Perché anche se l'ordine di messa a fuoco è eccellente, come può un utente sapere dove si trova nella pagina senza lo stile appropriato?
Un indicatore di messa a fuoco visibile è fondamentale per informare gli utenti della loro posizione in ogni momento della pagina. Ciò è particolarmente importante per gli utenti vedenti che utilizzano solo la tastiera. Focus non oscurato (minimo) garantisce che l'indicatore di messa a fuoco non sia nascosto sotto altri componenti.
Stile predefinito del browser
Oggi, ogni browser web moderno ha uno stile visivo predefinito diverso che si applica agli elementi selezionabili del tuo sito web o della tua app, alcuni più visibili di altri. Quando un utente scorre la pagina con il tasto Tab, questo stile viene applicato quando l'elemento riceve lo stato attivo della tastiera.
Se consenti al browser di gestire lo stile del focus, è importante rivedere
il codice per verificare che il tema non sostituisca lo stile
predefinito del browser. Un override viene spesso scritto come "outline: 0" o "outline: none" nel
tuo foglio di stile. Questo piccolo frammento di codice può rimuovere lo stile dell'indicatore di messa a fuoco predefinito del browser, il che rende molto difficile per gli utenti navigare nel tuo sito web o nella tua app.
Non consigliato: nessun contorno
a:focus { outline: none; /* don't do this! */ }
Consigliato: contorno stilizzato
a:focus { outline: auto 5px Highlight; /* for non-webkit browsers */ outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */ }
Stili personalizzati
Naturalmente, puoi andare oltre lo stile del browser predefinito e creare un indicatore di messa a fuoco personalizzato che si abbini al tuo tema. Quando crei un indicatore di messa a fuoco personalizzato, hai molta libertà di esprimere la tua creatività.
La forma di un indicatore di messa a fuoco può assumere molte forme, ad esempio un contorno, un bordo, una sottolineatura, una casella, una modifica dello sfondo o un'altra modifica stilistica evidente che non si basa solo sul colore per indicare che la messa a fuoco della tastiera è attiva su quell'elemento.
Puoi modificare lo stile di un indicatore di selezione per assicurarti che sia visibile. Ad esempio, quando una pagina ha uno sfondo bianco, puoi impostare l'indicatore di messa a fuoco del pulsante su uno sfondo blu. Quando la pagina ha uno sfondo blu, puoi impostare lo stesso stile di messa a fuoco del pulsante su uno sfondo bianco.
Puoi modificare lo stile dell'elemento di messa a fuoco in base al tipo di elemento. Ad esempio, puoi utilizzare una sottolineatura punteggiata per i link del corpo, ma scegliere un bordo arrotondato per un elemento pulsante.
Non esiste una regola sul numero di stili dell'indicatore di messa a fuoco che puoi avere in una pagina, ma assicurati di mantenerlo a un numero ragionevole per evitare confusione non necessaria.