Progettare stati di focus che le persone notano davvero

L'anello che tutti rimuovono

Se ti è mai capitato di premere Tab su un sito e perdere il punto in cui ti trovavi, hai incontrato il bug di accessibilità più comune del web. Qualcuno ha rimosso il contorno di focus perché era brutto, e niente lo ha sostituito.

È una scelta comprensibile. I contorni predefiniti del browser raramente si adattano al design. Ma per chi naviga con la tastiera, l'indicatore di focus è il cursore. Senza di esso, la pagina diventa di fatto cieca.

Visibile, non invadente

La distinzione importante è tra uno stato di focus visibile e uno che distrae. L'obiettivo è un anello impossibile da non vedere quando lo cerchi, e quasi invisibile quando non ti serve.

In UI Vintage ogni elemento interattivo usa la stessa ricetta: un anello di tre pixel nel colore primario con opacità parziale, disegnato all'esterno dell'elemento così da non spostare mai il layout.

Il contrasto conta ancora

Sembra semplice, ma un anello è utile solo se si distingue sia dall'elemento sia dalla pagina dietro. Un anello arancione su un pulsante arancione sparisce. La soluzione è un piccolo spazio tra l'elemento e l'anello, di solito nel colore di sfondo della pagina, così l'anello ha sempre qualcosa con cui contrastare.

Provalo nel modo più noioso

Non esistono scorciatoie. Scollega il mouse, o semplicemente smetti di toccarlo, e percorri una pagina con Tab, Maiusc+Tab, Invio e i tasti freccia. Se in qualsiasi momento non capisci dove ti trovi, non lo capirà nemmeno chi legge.

Il punto non è aggiungere decorazioni. È fare in modo che la pagina risponda in ogni momento a una domanda: dove mi trovo? Un buono stato di focus risponde con discrezione, e di solito il design ne guadagna.