Focus non oscurato (avanzato)

Cosa richiede

Il criterio 2.4.11 tollera un’occlusione parziale, purché una parte dell’elemento con focus resti visibile. Il criterio 2.4.12 elimina questa tolleranza: l’elemento con focus deve essere interamente visibile. Spostandosi con Tab su un pulsante, il pulsante intero deve trovarsi nel viewport senza che nulla lo sovrapponga — nessuna intestazione fissa che ritaglia il bordo superiore, nessun widget di chat che ritaglia l’angolo inferiore destro.

Si tratta di un requisito AAA, di natura aspirazionale per la maggior parte dei team, ma rappresenta l’obiettivo corretto per i design system impiegati in ambito governativo, sanitario e educativo, dove l’affidabilità della navigazione da tastiera non è negoziabile.

Come soddisfarlo

• Impostare scroll-padding-top e scroll-padding-bottom sul contenitore scorrevole con generosità — leggermente più dell’altezza combinata di tutti gli elementi fissi in cima o in fondo.
• Nascondere automaticamente i widget di chat quando un elemento attivabile si avvicina alla loro posizione, oppure spostarli al ricevimento dell’evento di focus.
• Per i footer fissi, valutare alternative non fisse, oppure comprimerli durante lo scorrimento in modo che coprano solo contenuto di intestazione e mai i controlli.
• Eseguire un audit di ogni pagina che presenti sia un’intestazione fissa sia un footer fisso. La «banda sicura» al centro si restringe rapidamente, specialmente su viewport ridotti.
• Testare con zoom del browser al 200% e al 400% (in base al criterio 1.4.10 Reflow) — gli elementi fissi che funzionavano al 100% possono ora occupare l’intera schermata.

Errori comuni

• Intestazione fissa che copre i 4 px superiori di ogni anello di focus — conforme a 2.4.11, non conforme a 2.4.12.
• Target di skip link che atterrano in cima al <main> con l’anello di focus parzialmente ritagliato dall’intestazione fissa.
• Pulsanti «Aiuto» fluttuanti in basso a destra che sovrappongono 1 px di un angolo dei pulsanti con focus in quella zona.
• Banner promozionali inseriti da tag di marketing non contemplati nei token di scroll-padding del design system.
• Barre di navigazione inferiori su dispositivi mobili in cui il Tab sull’ultimo campo di un modulo mostra il campo con l’anello di focus leggermente ritagliato sul bordo inferiore.

Perché è importante

Per gli utenti con bassa acuità visiva che dipendono dall’indicatore di focus per tracciare la propria posizione, anche un ritaglio parziale può rendere l’indicatore praticamente invisibile — un contorno di 2 px con il pixel superiore ritagliato appare come una linea di 1 px, facilmente confusa con un bordo. Il criterio avanzato tratta l’indicatore di focus come un elemento dell’interfaccia di prima classe che merita il proprio bounding box completo sullo schermo. L’impegno a rispettare il criterio 2.4.12 obbliga i team a razionalizzare il budget degli elementi fissi, migliorando spesso il layout per tutti gli utenti.