Stato attivo della tastiera

Molte persone utilizzano come mezzo principale di navigazione una tastiera o un altro software/hardware che imita la funzionalità di una tastiera, ad esempio un sensore. Le persone con limitazioni fisiche temporanee, come distorsioni al polso o disabilità motorie fini come il tunnel carpale, e alcune persone senza disabilità possono scegliere di utilizzare una tastiera per navigare in una pagina a causa delle preferenze personali, dell'efficienza o della rottura dell'hardware.

Gli utenti ipovedenti o ciechi possono utilizzare una tastiera per la navigazione combinata con il software per l'ingrandimento o lo screen reader. Tuttavia, per spostarsi tra le schermate potrebbero essere utilizzate scorciatoie da tastiera diverse rispetto a quelle di un utente vedente.

Il supporto da tastiera per tutte queste disabilità e circostanze è fondamentale. Gran parte dell'accessibilità della tastiera è incentrata sull'obiettivo. Lo stato attivo si riferisce a quale elemento dello schermo riceve attualmente input dalla tastiera.

In questo modulo ci concentriamo sulla struttura HTML e sugli stili CSS per gli elementi da tastiera e attivabili. Il modulo JavaScript include ulteriori informazioni sulla gestione dello stato attivo e sulle sequenze di tasti per gli elementi interattivi.

Ordine di priorità

Gli elementi su cui l'utente della tastiera può accedere sono chiamati elementi attivabili. L'ordine di impostazione dello stato attivo, chiamato anche tabulazione o ordine di navigazione, è l'ordine in cui gli elementi ricevono lo stato attivo. L'ordine di visualizzazione 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 nella parte superiore della pagina e termina in basso, spostandosi da sinistra a destra. Tuttavia, alcune lingue vengono lette da destra a sinistra, pertanto la lingua principale della pagina potrebbe richiedere un ordine diverso per gli argomenti.

Per impostazione predefinita, l'ordine di impostazione dello stato attivo include elementi HTML attivabili in modo naturale, come link, caselle di controllo e input di testo. Gli elementi HTML attivabili in modo naturale includono il supporto integrato per l'ordine delle schede e la gestione di base degli eventi della tastiera.

Puoi aggiornare l'ordine di impostazione dello stato attivo per includere tutti gli elementi che normalmente non lo sono, ad esempio elementi HTML non interattivi, componenti personalizzati o elementi con ARIA che sostituisce la semantica dell'elemento attivo naturale.

Indice scheda

L'ordine di messa a fuoco 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). Procede quindi attraverso gli elementi con un tabindex pari a zero in base al loro ordine nel DOM. Tutti gli elementi con un tabindex negativo vengono rimossi dall'ordine di messa a fuoco naturale.

Quando viene applicato un tabindex pari a zero (tabindex="0") a elementi normalmente non attivabili, questi vengono aggiunti all'ordine di messa a fuoco 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 per la tastiera aggiuntivo affinché siano completamente accessibili.

Allo stesso modo, se hai un elemento che normalmente è attivabile ma che 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 il pulsante deve essere rimosso dall'ordine di visualizzazione naturale. Ma non preoccuparti: puoi usare JavaScript per aggiungere di nuovo l'elemento attivo all'elemento quando necessario.

In questo esempio, un attributo tabindex è stato aggiunto agli elementi che non vengono messi in evidenza in modo naturale. L'ordine degli elementi è stato manipolato utilizzando tabindex per illustrare il potere che può avere sull'ordine di messa a fuoco. Ecco un esempio di cosa non fare.

Ignora link

La maggior parte dei siti web oggi dispone di un lungo elenco di link di menu nell'intestazione principale della pagina che corrisponde da una pagina all'altra. Si tratta di una funzionalità ottima per la navigazione generale, ma può rendere difficile per gli utenti che usano solo la tastiera accedere facilmente ai contenuti principali del sito web senza dover scorrere più volte.

Un modo per saltare gruppi di link ridondanti o inutili è l'aggiunta di un link Salta. Gli skip link sono link di ancoraggio che rimandano a un'altra sezione della stessa pagina, utilizzando l'ID di tale sezione, invece di indirizzare l'utente a un'altra pagina del sito web o a una risorsa esterna. Gli skip link vengono in genere aggiunti come primo elemento attivabile che un utente incontra quando arriva su un sito web e possono essere visibili o nascosti fino a quando l'utente non fa clic su di esso, a seconda degli elementi richiesti dal design.

Quando un utente preme il tasto Tab e è presente uno skip link attivo, l'elemento attivo della tastiera viene impostato sullo skip link. L'utente può fare clic sullo skip link e saltare la sezione dell'intestazione e la navigazione principale. Se scelgono di non fare clic sul link Salta e continuano a scorrere nel DOM, verranno indirizzati all'elemento attivabile successivo.

Come per tutti i link, è importante che lo skip link includa il contesto relativo allo scopo del link. L'aggiunta dell'espressione "Vai ai contenuti principali" consente all'utente di sapere dove viene indirizzato il link. Esistono molte opzioni di codice tra cui scegliere quando fornisci contesto aggiuntivo ai tuoi link, ad esempio aria-labelledby, aria-label o la aggiungi ai contenuti testuali dell'elemento <a>, come mostrato nell'esempio.

Indicatore di messa a fuoco

Come hai visto, l'ordine di messa a fuoco è un aspetto importante dell'accessibilità della tastiera. È anche importante decidere lo stile dell'elemento attivo. Perché anche se l'ordine di attenzione è eccellente, come può un utente sapere in che punto della pagina si trova senza lo stile appropriato?

Un indicatore di attenzione visibile è uno strumento fondamentale per informare un utente in qualsiasi momento sulla pagina in cui si trova. È particolarmente importante per gli utenti non vedenti che utilizzano solo la tastiera.

Stili predefiniti del browser

Oggi, ogni browser web moderno ha uno stile visivo predefinito diverso che si applica agli elementi attivabili sul tuo sito web o nella tua app, alcuni più facilmente visibili di altri. Se l'utente scorre la pagina, questo stile viene applicato quando l'elemento è impostato sullo stato attivo della tastiera.

Se consenti al browser di gestire lo stile di impostazione dello stato attivo, è importante rivedere il codice per verificare che il tema non sostituisca lo stile predefinito del browser. Una sostituzione viene spesso scritta come "outline: 0" o "outline: none" nel foglio di stile. Questa piccola porzione di codice può rimuovere lo stile dell'indicatore di focus predefinito del browser, rendendo molto difficile per gli utenti navigare nel tuo sito web o nella tua app.

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

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 predefinito del browser e creare un indicatore di stato personalizzato che si integri con il tuo tema. Quando crei un indicatore di focus personalizzato, hai molta libertà di esprimere la tua creatività.

La forma di un indicatore di stato attivo può assumere molte forme, ad esempio un contorno, un bordo, una sottolineatura, un riquadro, una modifica dello sfondo o altri evidenti modifiche stilistiche che non si basano solo sul colore per indicare che l'elemento attivo della tastiera è attivo sull'elemento.

Puoi modificare lo stile di un indicatore di messa a fuoco per assicurarti che non vada perso in background. Ad esempio, quando una pagina ha uno sfondo bianco, puoi impostare l'indicatore di stato attivo del pulsante su uno sfondo blu. Se 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 attivo in base al tipo di elemento. Ad esempio, puoi utilizzare una sottolineatura tratteggiata per i link del corpo del corpo, ma scegliere un bordo arrotondato per un elemento pulsante.

Non esiste una regola sul numero di stili degli indicatori di interesse che hai in una pagina, ma assicurati di limitarlo a un numero ragionevole per evitare inutili confusione.

Conclusione

Affinché un sito web o un'app siano considerati accessibili, è necessario utilizzare anche una tastiera per accedere a tutto ciò che può essere accessibile con un mouse. Questo modulo è incentrato sull'aspetto visivo dell'accessibilità da tastiera, in particolare l'ordine e gli indicatori di interesse.

Verifica la tua comprensione

Verifica le tue conoscenze di ARIA e HTML