Stato attivo della tastiera

Molte persone utilizzano una tastiera o software o hardware che simulano la funzionalità di una tastiera, come un dispositivo con pulsanti, come mezzo di navigazione principale. Ciò può essere dovuto a preferenze personali, efficienza o hardware guasto.

Le persone con limitazioni fisiche temporanee, come distorsioni al polso o disabilità motorie raffinate come il tunnel carpale, possono scegliere di utilizzare una tastiera per navigare. Gli utenti ipovedenti o non vedenti possono utilizzare una tastiera per la navigazione combinata con il software di aumento o dello screen reader. Tuttavia, potrebbero utilizzare comandi di scorciatoia da tastiera diversi per navigare in una schermata rispetto a un utente vedente.

Alcune persone senza disabilità possono anche decidere di navigare utilizzando una tastiera.

Il supporto della tastiera per tutte queste disabilità e circostanze è fondamentale. gran parte dell'accessibilità della tastiera è incentrata sullo stato attivo. Lo stato attivo si riferisce all'elemento sullo schermo che riceve input dalla tastiera.

In questo modulo ci concentriamo sulla struttura HTML e sugli stili CSS per la tastiera e gli elementi accessibili. Il modulo JavaScript include maggiori informazioni sulla gestione dell'attenzione e sui tasti per gli elementi interattivi.

Imposta lo stato attivo sull'ordine

Gli elementi a cui un utente con tastiera può accedere sono chiamati elementi attivabili. L'ordine di attivazione, chiamato anche ordine di tabulazione o di navigazione, è l'ordine in cui gli elementi ricevono l'attivazione. L'ordine di attivazione predefinito deve essere logico, intuitivo e corrispondere all'ordine visualizzato di una pagina.

Per la maggior parte delle lingue, l'ordine di attivazione 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 in primo piano diverso.

Per impostazione predefinita, l'ordine di attivazione include elementi HTML attivabili naturalmente, come link, caselle di controllo e input di testo. Gli elementi HTML che possono essere selezionati in modo naturale includono il supporto dell'ordine delle schede integrato e la gestione di base degli eventi della tastiera.

Puoi aggiornare l'ordine di attivazione per includere eventuali elementi che normalmente non lo ricevono, ad esempio elementi HTML non interattivi, componenti personalizzati o elementi con ARIA, e sostituire la semantica di attivazione naturale.

Indice tabulazione

L'ordine di priorità inizia con gli elementi che hanno un attributo tabindex positivo (se presente) e si sposta dal numero positivo più piccolo al più grande (ad esempio 1, 2, 3). Poi passa agli elementi con un valore tabindex di zero in base al loro ordine nel DOM. Tutti gli elementi con tabindex negativo vengono rimossi dall'ordine di priorità naturale.

Quando a elementi normalmente non selezionabili viene applicato un valore tabindex di zero (tabindex="0"), questi vengono aggiunti all'ordine di attribuzione dell'attenzione naturale della pagina in base al modo in cui appaiono nel DOM. Tuttavia, a differenza degli elementi HTML attivabili in modo naturale, devi fornire un supporto aggiuntivo per la tastiera affinché siano completamente accessibili.

Allo stesso modo, se hai un elemento che normalmente è attivabile ma non è attivo, ad esempio un pulsante che non è operativo fino a quando non viene compilato un campo di immissione, devi aggiungere un tabindex negativo (tabindex="-1") a questo elemento. L'aggiunta di un tabindex negativo indica alle tecnologie per la disabilità e alle tastiere che questo pulsante deve essere rimosso dall'ordine di messa a fuoco naturale. Ma non preoccuparti: puoi utilizzare JavaScript per aggiungere nuovamente lo stato attivo all'elemento, se necessario.

In questo esempio, è stato aggiunto un attributo tabindex agli elementi che non recebemo in modo naturale l'attenzione. L'ordine degli elementi è stato modificato utilizzando tabindex per illustrare la potenza che possono avere sull'ordine di messa a fuoco. Questo è un esempio di cosa non si deve fare.

Ignora link

La maggior parte dei siti web oggi ha un lungo elenco di link di menu nell'intestazione principale della pagina, uniforme da una pagina all'altra. Questa opzione è ottima per la navigazione generale, ma può ostacolare gli utenti che utilizzano solo la tastiera a raggiungere facilmente i contenuti principali del sito web senza dover premere più volte il tasto Tab.

Un modo per saltare gruppi di link ridondanti o inutili è aggiungere un link di salto. I link di scorrimento sono link di ancoraggio che rimandano a una sezione diversa della stessa pagina utilizzando l'ID della sezione anziché indirizzare l'utente a un'altra pagina del sito web o a una risorsa esterna. I link di scorrimento vengono in genere aggiunti come primo elemento attivabile che un utente incontra quando arriva su un sito web e possono essere visibili o nascosti visivamente fino a quando un utente non li seleziona con i tasti Tab, a seconda delle esigenze del design.

Quando un utente preme il tasto Tab e il link Salta attivo è attivo, l'elemento attivo della tastiera viene impostato su Ignora link. L'utente può fare clic sul link di scambio e saltare la sezione dell'intestazione e la navigazione principale. Se sceglie di non fare clic sul link di scambio e continua a premere Tab verso il basso nel DOM, verrà indirizzato all'elemento in grado di acquisire il fuoco successivo.

Come per tutti i link, è importante che il link di soppressione includa il contesto relativo allo scopo del link. L'aggiunta della frase "Passa ai contenuti principali" consente all'utente di sapere dove lo reindirizzerà il link. Esistono molte opzioni di codice tra cui scegliere per fornire un contesto aggiuntivo ai link, ad esempio aria-labelledby, aria-label o aggiungerlo ai contenuti di testo dell'elemento <a>, come mostrato nell'esempio.

Indicatore di messa a fuoco

Come hai appena appreso, l'ordine di attivazione è un aspetto importante dell'accessibilità della tastiera. È importante anche decidere lo stile dell'elemento in primo piano. Perché, anche se l'ordine di priorità è eccellente, come potrebbe un utente sapere in che punto della pagina si trova senza uno stile appropriato?

Un indicatore di stato attivo visibile è fondamentale per informare gli utenti sulla loro posizione in qualsiasi momento all'interno della pagina. Ciò è particolarmente importante per chi usa solo la tastiera vedenti. Messa a fuoco non oscurata (minima) garantisce che l'indicatore del focus non sia nascosto sotto gli altri componenti.

Stile predefinito del browser

Oggi, ogni browser web moderno ha uno stile visivo predefinito diverso che viene applicato agli elementi attivabili sul tuo sito web o nella tua app, alcuni più visibili di altri. Quando un utente esegue le schede nella pagina, questo stile viene applicato quando l'elemento riceve lo stato attivo della tastiera.

Se consenti al browser di gestire lo stile di messa a fuoco, è importante esaminare 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 foglio di stile. Questo piccolo frammento di codice può rimuovere lo stile dell'indicatore di messa in primo piano predefinito del browser, il che rende molto difficile per gli utenti navigare nel tuo sito web o nella tua app.

Sconsigliato: nessun contorno

a:focus {
  outline: none; /* don't do this! */
}

Consigliato: contorni stilizzati

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 completi il tuo tema. Quando crei un indicatore di focus personalizzato, hai molta libertà di essere creativo.

La forma di un indicatore di messa a fuoco può assumere molte forme, come un contorno, un bordo, una sottolineatura, un riquadro, un cambiamento di sfondo o qualsiasi altro evidente cambiamento stilistico che non si basa sul solo colore per indicare che l'elemento attivo della tastiera è attivo su quell'elemento.

Puoi modificare lo stile di un indicatore di stato attivo per assicurarti che sia visibile. Ad esempio, quando una pagina ha uno sfondo bianco, puoi impostare l'indicatore di attivazione del pulsante su uno sfondo blu. Quando la pagina ha uno sfondo blu, puoi impostare lo stesso stile di impostazione dell'elemento attivo dei pulsanti su uno sfondo bianco.

Puoi modificare lo stile dell'elemento in primo piano in base al tipo di elemento. Ad esempio, puoi utilizzare un'evidenziazione in corsivo per i link nel corpo, ma scegliere un bordo arrotondato per un elemento del pulsante.

Non esiste una regola sul numero di stili di indicatori di stato attivo in una pagina, ma assicurati di mantenere un numero ragionevole per evitare confusione non necessaria.

Verifica le tue conoscenze

Verifica le tue conoscenze su ARIA e HTML.