Evidenzia

Podcast CSS - 018: Obiettivo

Nella tua pagina web, fai clic su un link che indirizza l'utente ai contenuti principali del sito web. Questi sono spesso indicati come link di scorrimento o link di ancoraggio. Quando il link viene attivato da una tastiera, utilizzando i tasti Tab e Invio, il contenitore dei contenuti principali è circondato da un anello di attivazione. Perché?

Questo perché <main> ha un valore dell'attributo tabindex="-1", il che significa che può essere messo a fuoco in modo programmatico. Quando <main> è scelto come target, perché #main-content nella barra degli URL del browser corrisponde a id, riceve l'attenzione programmatica. In queste situazioni è facile rimuovere gli stili di messa a fuoco, ma gestirla in modo appropriato e attento contribuisce a creare un'esperienza utente buona e accessibile. Inoltre, è un ottimo posto per aggiungere interesse alle interazioni.

Perché l'attenzione è importante?

In qualità di sviluppatore web, il tuo compito è rendere un sito web accessibile e inclusivo per tutti. La creazione di stati di attivazione accessibili con CSS fa parte di questa responsabilità.

Gli stili di impostazione dello stato attivo aiutano gli utenti che utilizzano un dispositivo, ad esempio una tastiera o un controllo di sensori, per navigare e interagire con un sito web. Se un elemento riceve lo stato attivo e non è presente alcuna indicazione visiva, un utente potrebbe perdere il controllo di ciò che è attivo. Ciò può creare problemi di navigazione e comportare comportamenti indesiderati se, ad esempio, viene seguito il link sbagliato.

Come gli elementi acquisiscono lo stato attivo

Alcuni elementi sono automaticamente acquisibili; si tratta di elementi che accettano interazioni e input, come <a>, <button>, <input> e <select>. In breve, tutti gli elementi, i pulsanti e i link dei moduli. In genere, puoi navigare tra gli elementi attivabili di un sito web utilizzando il tasto Tab per andare avanti nella pagina e Maiusc + Tab per tornare indietro.

Esiste anche un attributo HTML denominato tabindex che consente di modificare l'indice di tabulazione, ovvero l'ordine in cui gli elementi vengono selezionati, ogni volta che un utente preme il tasto Tab o lo stato attivo viene spostato con una modifica dell'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 rispetterà l'indice di tabulazione globale, che è definito dall'ordine della sorgente del documento.

Se imposti tabindex su -1, l'elemento può ricevere lo stato attivo solo tramite programmazione, ovvero solo quando si verifica un evento JavaScript o una modifica dell'hash (corrispondente a id dell'elemento nell'URL). Se imposti tabindex su un valore superiore a 0, viene rimosso dall'indice delle schede globale, definito dall'ordine delle origini del documento. L'ordine di tabulazione verrà ora definito dal valore di tabindex, quindi un elemento con tabindex="1" riceverà lo stato attivo 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 le pseudoclassi :focus, :focus-within e :focus-visible che hai appreso nella lezione sulle pseudoclassi. È importante impostare uno stile di messa a fuoco che abbia un contrasto con lo 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 apparire troppo vicina al testo di un link, ma la proprietà outline-offset può aiutarti in questo senso, poiché aggiunge un'altra padding visiva senza influire sulle dimensioni geometriche dell'elemento. Un valore numerico positivo per outline-offset spingerà il contorno verso l'esterno, mentre un valore negativo lo spingerà verso l'interno.

Al momento, in alcuni browser, se hai impostato border-radius sull'elemento e utilizzi outline, non corrisponderà: il contorno avrà angoli acuti. Per questo motivo, è molto allettante utilizzare un 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 accade 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

È fondamentale creare uno stato attivo in contrasto con lo stato predefinito di un elemento. Gli stili del browser predefiniti eseguono già questa operazione, ma se vuoi modificare questo comportamento, tieni presente quanto segue:

• Evita di utilizzare outline: none su un elemento che può ricevere lo stato attivo della tastiera.
• Evita di sostituire gli stili outline con box-shadow. perché non appaiono nella modalità ad alto contrasto di Windows.
• Imposta un valore positivo per tabindex in un elemento HTML solo se è assolutamente necessario.
• Assicurati che lo stato di messa a fuoco sia molto chiaro rispetto allo stato predefinito.

Verificare di aver compreso

Verifica la tua conoscenza dell'attenzione