Concentrazione

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 con box-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