Stati di focus accessibili: progettazione di focus visibili da tastiera

Perché gli stati focalizzati sono importanti

Le persone che utilizzano una tastiera, cambiano dispositivo o ingrandiscono lo schermo si spostano attraverso una pagina un elemento alla volta. L'indicatore di messa a fuoco è l'unico modo in cui sanno dove si trovano. La rimozione della struttura del browser senza una sostituzione è uno degli errori di accessibilità più comuni.

Cosa richiede WCAG 2.2

Criterio di successo 2.4.7 Focus Visible (livello AA) richiede che qualsiasi interfaccia gestibile da tastiera disponga di una modalità in cui l'indicatore di focus sia visibile. WCAG 2.2 ha aggiunto 2.4.13 Focus Appearance (livello AAA), che descrive un indicatore forte: grande almeno quanto l'area di un perimetro spesso 2 CSS pixel del componente, con un rapporto di contrasto di almeno 3:1 tra gli stati focalizzato e non focalizzato.

:focus-visibile

MDN spiega che :focus-visible si applica quando un elemento ha il focus e il browser decide, utilizzando l'euristica, che il focus dovrebbe essere mostrato, tipicamente per l'uso della tastiera. Ciò ti consente di mostrare anelli di messa a fuoco forti per gli utenti di tastiera senza mostrarli ogni volta che qualcuno fa clic su un pulsante con il mouse. Usalo invece di rimuovere i contorni.

Progettare l'anello

Guida pratica:

• Utilizza un contorno o un anello con un offset in modo che non si confonda con l'elemento.
• Controlla il contrasto rispetto a ogni sfondo su cui può apparire l'elemento; un anello bicolore aiuta.
• Mantienilo coerente tra i componenti, definito come un token nel tuo sistema di progettazione.
• Non fare mai affidamento solo su un leggero cambiamento di colore.
• Assicurati che l'elemento focalizzato non sia nascosto dietro intestazioni permanenti.

Concentrazione e movimento

Un anello di messa a fuoco può apparire con una transizione molto breve, ma dovrebbe sembrare istantaneo. Evita le animazioni che ritardano l'anello o spostano l'elemento e, per i componenti personalizzati disegnati su tela, assicurati che ci sia ancora un vero elemento attivabile nella pagina in modo che gli utenti della tastiera possano raggiungerlo.