Podcast su CSS - 018: focus
Nella pagina web, fai clic su un link che rimanda l'utente ai contenuti principali del sito web. In questi casi, vengono spesso chiamati skip link o anchor link. Quando il link è attivato da una tastiera mediante i tasti Tab ed Invio, il contenitore di contenuti principale è circondato da un anello di attivazione. Why is that?
Questo perché <main>
ha un valore dell'attributo tabindex="-1"
,
il che significa che può essere impostato in modo programmatico.
Quando viene scelto come target <main>
, perché il valore di #main-content
nella barra degli URL del browser corrisponde al id
, riceve lo stato attivo della pubblicità programmatica.
In queste situazioni si ha la tentazione di rimuovere gli stili, ma gestire l'attenzione in modo appropriato e con cura contribuisce a creare un'esperienza utente positiva e accessibile.
Inoltre, può essere un ottimo modo per aggiungere interesse alle interazioni.
Perché l'attenzione è importante?
In qualità di sviluppatore web, è tuo compito rendere un sito web accessibile e inclusivo per tutti. La creazione di stati di interesse accessibili con CSS fa parte di questa responsabilità.
Gli stili per la messa a fuoco aiutano gli utenti che utilizzano un dispositivo come una tastiera o un controllo di un sensore a navigare e interagire con un sito web. Se un elemento è impostato come attivo e non è presente un'indicazione visiva, l'utente potrebbe perdere traccia di ciò che è attivo. Questo può creare problemi di navigazione e causare comportamenti indesiderati, ad esempio se viene seguito il link sbagliato.
Modalità di messa in evidenza degli elementi
È possibile attivare automaticamente alcuni elementi; si tratta di elementi che accettano interazioni e input, ad esempio <a>
, <button>
, <input>
e <select>
.
In breve, tutti gli elementi, i pulsanti e i link del modulo.
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 di tabulazione, ovvero l'ordine in cui gli elementi sono attivi ogni volta che qualcuno preme il tasto Tab o viene spostato con una modifica dell'hash nell'URL o da un evento JavaScript.
Se tabindex
in un elemento HTML è impostato su 0
, può essere impostato come attivo tramite la chiave tab e verrà applicato l'indice globale di schede, che è definito dall'ordine di origine del documento.
Se imposti tabindex
su -1
, l'elemento in questione può ricevere lo stato attivo solo in modo programmatico, il che significa solo quando si verifica un evento JavaScript o una modifica dell'hash (corrispondente al valore id
dell'elemento nell'URL).
Se imposti un valore superiore a 0
per tabindex
, questo verrà rimosso dall'indice delle schede globale, definito in base all'ordine di origine del documento.
L'ordine di tabulazione verrà ora definito dal valore tabindex
,
quindi un elemento con tabindex="1"
verrà impostato prima di un elemento con tabindex="2"
.
Stile di punta
Il comportamento predefinito del browser quando un elemento viene impostato come attivo consiste nel presentare un anello di messa a fuoco. L'anello di messa a fuoco varia a seconda del browser e del sistema operativo.
Questo comportamento può essere modificato con CSS, utilizzando le pseudo-classi :focus
, :focus-within
e :focus-visible
che hai visto nella lezione delle pseudo-classi.
È importante impostare uno stile di messa a fuoco che abbia il contrasto con lo stile predefinito di un elemento.
Ad esempio, un approccio comune è utilizzare la proprietà outline
.
a:focus {
outline: 2px solid slateblue;
}
La proprietà outline
potrebbe apparire troppo vicina al testo di un link,
ma la proprietà outline-offset
può essere d'aiuto,
in quanto aggiunge ulteriori padding
visive senza influire sulle dimensioni geometriche riempite dall'elemento.
Un valore numerico positivo per outline-offset
spingerà il contorno verso l'esterno,
un valore negativo per spingerà il contorno verso l'interno.
Al momento, in alcuni browser,
se hai impostato un border-radius
per l'elemento e utilizzi outline
,
non corrisponderà perché il contorno avrà angoli nitidi.
Per questo motivo, si potrebbe avere la tentazione di utilizzare box-shadow
con un raggio di sfocatura ridotto perché box-shadow
si adatta alla forma, rispettando 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 ombre e ignora per lo più le immagini di sfondo per favorire le impostazioni preferite dall'utente.
In sintesi
La creazione di uno stato attivo in contrasto con lo stato predefinito di un elemento è estremamente importante. Gli stili predefiniti del browser lo fanno già per te, ma se desideri modificarlo, ricorda quanto segue:
- Evita di utilizzare
outline: none
su un elemento che può ricevere lo stato attivo della tastiera. - Evita di sostituire
outline
stili conbox-shadow
. perché non vengono visualizzati nella modalità ad alto contrasto di Windows. - Imposta un valore positivo per
tabindex
su un elemento HTML solo se assolutamente necessario. - Assicurati che lo stato di messa a fuoco sia molto chiaro rispetto allo stato predefinito.
Verifica la tua comprensione
Verifica la tua conoscenza della concentrazione
Quali dei seguenti sono elementi attivabili automaticamente?
<a>
<p>
<button>
<input>
<output>
<select>
Quale dei seguenti dispositivi di input può impostare lo stato attivo?