Stato attivo della tastiera

Molte persone utilizzano una tastiera o un altro software/hardware che imita il funzionalità di una tastiera, ad esempio un sensore, come mezzo principale per la navigazione. Persone con limitazioni fisiche temporanee, come slogatura al polso o disabilità motorie fini, come il tunnel carpale, così come alcune persone senza disabilità, può scegliere di utilizzare una tastiera per navigare in una pagina a causa di delle preferenze, dell'efficienza o dei guasti dell'hardware.

Gli utenti ciechi o ipovedenti possono utilizzare una tastiera per la navigazione in combinazione con il software di ingrandimento o screen reader. Tuttavia, potrebbero utilizzare per navigare in una schermata rispetto ai comandi di un utente vedente.

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

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

Imposta lo stato attivo sull'ordine

Gli elementi che possono essere raggiunti da un utente con tastiera sono detti elementi attivabili elementi. Ordine di messa a fuoco, chiamato anche scheda o ordine di navigazione, è l'ordine in cui gli elementi ricevono il focus. L'ordine di impostazione dello stato attivo predefinito deve essere logico, intuitivo e corrispondere all'immagine l'ordine di una pagina.

Per la maggior parte delle lingue, l'ordine di selezione inizia nella parte superiore della pagina e termina in basso, spostandosi da sinistra a destra. Tuttavia, poiché alcune lingue vengono lette da destra a sinistra, la lingua principale della pagina potrebbe richiedere un ordine diverso.

Per impostazione predefinita, l'ordine di messa a fuoco include elementi HTML attivabili in modo naturale, come link, caselle di controllo e input di testo. Gli elementi HTML attivabili in modo naturale includono supporto integrato per gli ordini delle schede e gestione di base degli eventi della tastiera.

Puoi aggiornare l'ordine di impostazione dello stato attivo per includere eventuali elementi che non normalmente mettere in evidenza elementi HTML non interattivi, componenti personalizzati o con il valore ARIA che sostituisce i valori la semantica del focus naturale.

Indice tabulazione

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

Quando un tabindex pari a zero (tabindex="0") agli elementi normalmente non attivabili, aggiunte all'ordine di priorità naturale della pagina in base al modo in cui vengono visualizzate nel DOM. Tuttavia, a differenza degli elementi HTML attivabili in modo naturale, devi fornire supporto aggiuntivo per la tastiera per renderli completamente accessibili.

Analogamente, se è presente un elemento che normalmente è attivabile, ma che non attivo, ad esempio un pulsante non operativo finché non viene compilato un campo di immissione Devi aggiungere un tabindex negativo (tabindex="-1") a questo elemento. Aggiunta in corso... un tabindex negativo segnala alle tecnologie per la disabilità e alle tastiere che tale deve essere rimosso dall'ordine di messa a fuoco naturale. Ma non preoccuparti: puoi usare JavaScript per aggiungere di nuovo lo stato attivo all'elemento quando necessario.

In questo esempio, un attributo tabindex è stato aggiunto agli elementi che non in modo naturale. L'ordine degli elementi è stato modificato utilizzando tabindex per illustrare la potenza che può avere sull'ordine di messa a fuoco. Si tratta di un un esempio di cosa non fare.

di Gemini Advanced.

Ignora link

La maggior parte dei siti web oggi ha un lungo elenco di link di menu nell'intestazione principale della pagina coerenti da una pagina all'altra. È ottimo per la navigazione generale, ma può aiutarti è difficile per gli utenti con solo tastiera raggiungere facilmente la pagina principale senza dover toccare più volte il tasto Tab.

Un modo per individuare gruppi di link ridondanti o inutili consiste nell'aggiungere un ignora link. Gli skip link sono di ancoraggio che rimandano a una sezione diversa della stessa pagina, utilizzando il l'ID, anziché indirizzare l'utente a un'altra pagina del sito web o a un risorsa. Gli skip link vengono in genere aggiunti come primo elemento attivabile da un utente che incontreranno quando arriveranno su un sito web e possono essere visibili o visivamente nascoste fino a quando un utente non vi accede, a seconda di ciò che richiede il design.

Quando un utente preme il tasto Tab ed è presente un link skip attivo, quest'ultimo invia sposta lo stato attivo della tastiera sul link "Salta". L'utente può fare clic sul link "Salta link" e passare oltre la sezione dell'intestazione e la navigazione principale. Se scelgono di non fare clic sul ignora il link e passa alla scheda del DOM, verranno inviati al successivo elemento attivabile.

Come tutti i link, è importante che lo skip link includa il contesto lo scopo del link. Aggiungi la frase "Passa ai contenuti principali" fa sapere all'utente a cui indirizza il link. Ci sono molte opzioni di codice tra cui scegliere quando fornendo un contesto aggiuntivo per i link, ad esempio aria-labelledby aria-label o la sua aggiunta ai contenuti testuali dell'elemento <a>, come mostrato nell'esempio.

di Gemini Advanced.

Indicatore dello stato attivo

Come hai appena imparato, l'ordine di messa a fuoco è un aspetto importante della tastiera accessibilità. È importante anche decidere in che modo viene definito lo stile. Poiché anche se l'ordine di priorità è eccellente, come può un utente sapere dove si trova alla pagina senza lo stile appropriato?

Un indicatore di messa a fuoco visibile è uno strumento essenziale per informare gli utenti sulla loro posizione in qualsiasi momento del . È particolarmente importante per gli utenti vedenti che utilizzano solo la tastiera.

Stile predefinito del browser

Oggi, ogni browser web moderno ha un diverso stile visivo predefinito che si applica agli elementi attivabili del sito web o dell'app, alcuni più facilmente visibili di altri. Quando un utente esegue le schede nella pagina, questo stile viene applicato come riceve lo stato attivo della tastiera.

Se consenti al browser di gestire lo stile dello stato attivo, è importante controllare il tuo codice per confermare che il tema non sostituisce quello predefinito del browser stili. Una sostituzione viene spesso scritta come "outline: 0" o "outline: none" in nel foglio di stile. Questo piccolo frammento di codice può rimuovere lo stato attivo predefinito del browser che rende molto difficile per gli utenti navigare sito web o 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 del browser predefinito e creare un indicatore di messa a fuoco che completa il tema. Durante la creazione di un obiettivo personalizzato puoi avere molta libertà di creatività.

La forma di un indicatore di messa a fuoco può assumere molte forme, come contorni, bordi, sottolineatura, riquadro, modifica dello sfondo o altre modifiche stilistiche evidenti che non si basa sul solo colore per indicare che lo stato attivo della tastiera è attivo per quell'elemento.

Puoi modificare lo stile di un indicatore di impostazione dello stato attivo per assicurarti che non venga perduto nella sfondo. Ad esempio, quando una pagina ha uno sfondo bianco, puoi impostare il campo indicatore di messa a fuoco del pulsante su uno sfondo blu. Quando la pagina presenta un sfondo, puoi impostare lo stesso stile di impostazione dell'elemento attivo del pulsante su uno sfondo bianco.

Puoi modificare lo stile dell'elemento attivo in base al tipo. Ad esempio: puoi utilizzare una sottolineatura tratteggiata per i link del corpo, ma scegliere un bordo arrotondato per un elemento pulsante.

di Gemini Advanced.

Non esiste una regola sul numero di stili dell'indicatore di stato attivo su un pagina, ma assicurati di mantenerlo su un numero ragionevole per evitare confusione.

Conclusione

Affinché un sito web o un'app siano considerati accessibili, tutto ciò che può essere accessibile con un mouse deve essere accessibile anche con una tastiera. Questo modulo sull'aspetto visivo dell'accessibilità della tastiera, in particolare l'attenzione indicatori dell'ordine e del focus.

Verifica le tue conoscenze

Verifica le tue conoscenze di ARIA e HTML