Evidenzia

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