Podcast CSS - 018: Focus .
Sulla tua pagina web, fai clic su un link che porta l'utente ai contenuti principali del sito web. Spesso ci si riferisce a questi link come skip link o anchor link. Quando il link viene attivato da una tastiera, utilizzando i tasti Tab e Invio, il contenitore dei contenuti principale è circondato da un anello di stato. Perché?
Questo perché <main>
ha un valore per l'attributo tabindex="-1"
,
il che significa che può essere incentrato
sulla programmazione.
Quando viene scelto come target <main>
, perché #main-content
nella barra dell'URL del browser corrisponde a id
, pertanto riceve lo stato attivo della pubblicità programmatica.
In queste situazioni si potrebbe avere la tentazione di rimuovere
ma gestire l'attenzione in modo appropriato e con cura aiuta a creare
un'esperienza utente accessibile.
Inoltre, è un ottimo posto per aggiungere interesse alle interazioni.
Perché la concentrazione è importante?
In qualità di sviluppatore web, il tuo compito è rendere un sito web accessibile e inclusivo per tutti. La creazione di stati attivi accessibili con CSS fa parte di questa responsabilità.
Gli stili di impostazione dello stato attivo aiutano le persone che usano un dispositivo, ad esempio una tastiera o un controllo dell'interruttore per navigare e interagire con un sito web. Se un elemento è attivo e non viene visualizzata alcuna indicazione visiva, un utente potrebbe perdere di vista ciò che è a fuoco. Ciò può creare problemi di navigazione e causare comportamenti indesiderati se, significa che viene seguito il link sbagliato.
Come vengono concentrati gli elementi
Determinati elementi possono essere attivati automaticamente.
si tratta di elementi che accettano interazione e input, ad esempio <a>
,
<button>
, <input>
e <select>
.
In breve, tutti gli elementi del modulo, i pulsanti e i link.
In genere, puoi spostarti tra gli elementi attivabili di un sito web utilizzando il tasto Tab per spostarti avanti nella pagina e Maiusc + Tab per tornare indietro.
Esiste anche un attributo HTML chiamato tabindex
che ti consente di modificare l'indice del tasto Tab, ovvero
ordine in cui vengono selezionati gli elementi: ogni volta che un utente preme il tasto Tab,
o lo stato attivo viene spostato con una modifica di hash nell'URL o da un evento JavaScript.
Se tabindex
in un elemento HTML è impostato su 0
,
può ricevere lo stato attivo tramite il tasto Tab e rispettare l'indice di tabulazione globale,
che viene definito dall'ordine delle origini dei documenti.
Se imposti tabindex
su -1
, può ricevere lo stato attivo solo in modo programmatico,
ovvero solo quando si verifica un evento JavaScript
o una modifica hash (corrispondente al id
dell'elemento nell'URL).
Se imposti tabindex
su un valore superiore a 0
,
verrà rimossa dall'indice globale delle schede,
definito dall'ordine di origine del documento.
L'ordine delle schede verrà ora definito dal valore tabindex
,
quindi un elemento con tabindex="1"
verrà attivato prima di un elemento con tabindex="2"
, ad esempio.
Definizione dello stile in primo piano
Il comportamento predefinito del browser quando un elemento riceve lo stato attivo è presentare un anello di impostazione dello stato attivo. L'anello di messa a fuoco varia in base al browser e ai sistemi operativi.
Questo comportamento può essere modificato con CSS,
utilizzando :focus
, :focus-within
e :focus-visible
pseudo-classi che hai imparato nel
lezione sugli pseudo-classi.
È importante impostare uno stile di impostazione dello stato attivo che abbia il contrasto rispetto allo stile predefinito di un elemento.
Ad esempio, un approccio comune consiste nell'utilizzare la proprietà outline
.
a:focus {
outline: 2px solid slateblue;
}
La proprietà outline
potrebbe essere troppo vicina al testo di un link
ma la proprietà outline-offset
può aiutarti,
poiché aggiunge ulteriori padding
visivi senza influire sulle dimensioni geometriche riempite dall'elemento.
Un numero positivo per outline-offset
spingerà la struttura verso l'esterno,
un valore negativo attirerà il contorno verso l'interno.
Al momento, in alcuni browser
se hai impostato border-radius
sull'elemento e usi outline
,
non corrisponderà: il contorno presenterà angoli nitidi.
Per questo motivo,
potresti avere la tentazione di utilizzare un box-shadow
con un piccolo raggio di sfocatura perché box-shadow
clip alla forma,
in onore di border-radius
,
ma questo stile non verrà visualizzato nella modalità ad alto contrasto di Windows.
Questo perché la modalità ad alto contrasto di Windows non applica le ombre,
e ignora principalmente le immagini di sfondo per favorire le impostazioni preferite dall'utente.
In sintesi
La creazione di uno stato attivo che sia in contrasto con lo stato predefinito di un elemento è estremamente importante. Gli stili del browser predefiniti lo fanno già, ma se vuoi modificare questo comportamento, ricorda quanto segue:
- Evita di utilizzare
outline: none
su un elemento che può ricevere lo stato attivo della tastiera. - Evita di sostituire gli stili
outline
conbox-shadow
. perché non appaiono nella modalità ad alto contrasto di Windows. - Imposta un valore positivo per
tabindex
su un elemento HTML soltanto se assolutamente necessario. - Assicurati che lo stato dello stato attivo sia molto chiaro rispetto a quello predefinito.
Verifica le tue conoscenze
Verifica le tue conoscenze su come concentrarti
Quali dei seguenti sono elementi attivabili automaticamente?
<a>
<p>
<button>
<input>
<output>
<select>
Quale dei seguenti dispositivi di input può impostare lo stato attivo?