Questo sarà il secondo post di una piccola serie che stiamo scrivendo sull'accessibilità dei moduli. Se ti sei perso il primo post, dai un'occhiata Forme accessibili con pseudo classi. In questo post esamineremo :focus-visible e come utilizzarlo nei tuoi siti web!

Punto di contatto focalizzato

Prima di andare avanti :focus-visible, rivediamo come :focus funziona nel tuo CSS. Il focus è l'indicatore visivo con cui si interagisce con un elemento tramite tastiera, mouse, trackpad o tecnologia assistiva. Alcuni elementi sono naturalmente interattivi, come collegamenti, pulsanti ed elementi del modulo. Vogliamo assicurarci che i nostri utenti sappiano dove si trovano e quali interazioni stanno effettuando.

Ricorda di non farlo nel tuo CSS!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Quando rimuovi il focus, lo rimuovi per TUTTI! Vogliamo assicurarci di preservare il focus.

Se per qualsiasi motivo è necessario rimuovere il focus, assicurati che sia presente anche il fallback :focus stili per i tuoi utenti. Questo fallback può corrispondere ai colori del tuo marchio, ma assicurati che anche questi colori siano accessibili. Se al marketing, al design o al branding non piacciono gli stili degli anelli di messa a fuoco predefiniti, allora è il momento di iniziare a conversare e collaborare con loro sul modo migliore per aggiungerli nuovamente.

Che cosa è l' focus-visible?

La pseudoclasse :focus-visible, è proprio come il nostro valore predefinito :focus pseudoclasse. Fornisce all'utente un indicatore che qualcosa si sta concentrando sulla pagina. Il modo in cui scrivi :focus-visible è tagliato e asciugato:

:focus-visible {
  /* ... */
}

Quando si usa :focus-visible con un elemento specifico, la sintassi è simile a questa:

.your-element:focus-visible {
  /*...*/
}

La cosa grandiosa di usare :focus-visible è che puoi far risaltare il tuo elemento, brillante e audace! Non è necessario preoccuparsi che venga visualizzato se l'elemento viene cliccato/toccato. Se scegli di non implementare la classe, il valore predefinito sarà l'anello di focus dell'agente utente che per alcuni non è desiderabile.

Retroscena di focus-visible

Prima che avessimo il :focus-visible, verrà applicato lo stile dell'agente utente :focus alla maggior parte degli elementi della pagina; pulsanti, collegamenti, ecc. Applicherebbe un contorno o un "anello di messa a fuoco" all'elemento focalizzabile. Questo è stato considerato brutto, alla maggior parte non piaceva l'anello di messa a fuoco predefinito fornito dal browser. Dato che l'anello di messa a fuoco era sgradevole da guardare, la maggior parte degli autori lo ha rimosso... senza alcuna soluzione. Ricorda, quando rimuovi :focus, diminuisce l'usabilità e rende l'esperienza inaccessibile agli utenti di tastiera.

Nello stato attuale del Web, il browser non indica più in modo visibile il focus sui vari elementi quando sono attivi. Il browser utilizza invece diverse euristiche per determinare quando aiuterebbe l'utente, fornendo in cambio un anello di messa a fuoco. Secondo Khan Academy, un'euristica è, “una tecnica che guida un algoritmo per trovare buone scelte.”

Ciò significa che il browser può rilevare se l'utente sta interagendo o meno con l'esperienza da una tastiera, un mouse o un trackpad e, in base a quel tipo di input, aggiunge o rimuove l'anello di messa a fuoco. L'esempio in questo post evidenzia l'interazione di input.

Nei primi giorni di :focus-visible stavamo usando a polifill per gestire l'anello di messa a fuoco creato da Alice Boxhall e Brian Kardell, anche Mozilla ha creato la propria pseudo classe, :moz-focusring, prima della specifica ufficiale. Se vuoi saperne di più sui primi giorni dell'anello di messa a fuoco, dai un'occhiata A11a Cast con Rob Dodson.

Focalizzare l'importanza

Ci sono molti motivi per cui la concentrazione è importante nella tua applicazione. Innanzitutto, come ho affermato sopra, noi come ambasciatori del web dobbiamo assicurarci di fornire l'esperienza migliore e accessibile possibile. Non vogliamo che nessuno dei nostri utenti indovini dove si trova mentre naviga nell'esperienza.

Un esempio che mi viene sempre in mente è il Sito dei Due Fratelli Ciechi. Se vai sul sito web e fai clic/tocca (funziona sui dispositivi mobili), l'occhio chiuso nell'angolo in basso a sinistra, vedrai l'occhio aperto e inizierà una simulazione. Ad entrambi i fratelli, Bradford e Bryan Manning, fu diagnosticata in giovane età la malattia di Stargardt. La malattia di Stargardt è una forma di degenerazione maculare dell'occhio. Con il passare del tempo entrambi i fratelli diventeranno completamente ciechi. Visita il sito e fai clic sull'occhio per vedere come vedono.

Se fossi nei loro panni e dovessi navigare attraverso una pagina, vorresti assicurarti di sapere esattamente dove ti trovavi durante l'intera esperienza. Un anello di messa a fuoco ti dà quel potere.

Dimo

La demo qui sotto mostra come :focus-visible funziona quando aggiunto al tuo CSS. La prima parte del video mostra l'esperienza di navigazione con il mouse, la seconda mostra la navigazione utilizzando solo la tastiera. Ho registrato anche me stesso per dimostrare che sono passato dall'uso del mouse alla tastiera.

Il browser prevede cosa fare con l'anello di messa a fuoco in base al mio input (tastiera/mouse) e quindi aggiunge un anello di messa a fuoco a tali elementi. In questo caso, quando navigo in questo esempio con la tastiera, tutto viene messo a fuoco. Quando si utilizza il mouse, solo l'input viene messo a fuoco e i pulsanti no. Se rimuovi :focus-visible, il browser applicherà l'anello di messa a fuoco predefinito.

Si applica il codice seguente :focus-visible agli elementi focalizzabili.

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Se vuoi specificare il label o il pulsante per ricevere :focus-visible basta anteporre la lezione con input or button rispettivamente.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Assistenza

Se il browser non supporta :focus-visible puoi tornare indietro per gestire l'interazione. Il codice seguente proviene da Parco giochi MDN. Puoi usare il @supporta a regola o “query sulle funzionalità” per verificare il supporto. Una cosa da tenere a mente è che la regola dovrebbe essere posizionata nella parte superiore del codice o annidata all'interno di un altro gruppo di regole.

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

Ulteriori preoccupazioni sull'accessibilità

Problemi di accessibilità da tenere a mente quando costruisci la tua esperienza:

• Assicurati che i colori che scegli per il tuo indicatore di messa a fuoco, se non del tutto, siano ancora accessibili in base alle informazioni documentate nel WCAG 2.2 Contrasto non testuale (Livello AA)
• Il sovraccarico cognitivo può causare angoscia all'utente. Assicurati di mantenere coerenti gli stili dei vari elementi interattivi

Supporto Browser

Link

• Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
• PlatoData.Network Generativo verticale Ai. Potenzia te stesso. Accedi qui.
• PlatoAiStream. Intelligenza Web3. Conoscenza amplificata. Accedi qui.
• PlatoneESG. Carbonio, Tecnologia pulita, Energia, Ambiente, Solare, Gestione dei rifiuti. Accedi qui.
• Platone Salute. Intelligence sulle biotecnologie e sulle sperimentazioni cliniche. Accedi qui.
• Fonte: https://css-tricks.com/managing-user-focus-with-focus-visible/