Smart design
Quell’insana tentazione di impostare “a { outline:none; }”

Molto spesso i dettagli grafici fanno la differenza, ma nello stesso numero di casi la mania ossessiva di andare a personalizzare tutti i particolari di un'interfacci grafica può portare a gravi errori progettuali. E' il caso della mancata impostazione della proprietà CSS outline. La cosiddetta outline è una sorta di bordo che viene a crearsi esternamente intorno all'elemento selezionato. Il problema è che nella maggior parte dei casi questa proprietà viene eliminata senza porre la minima attenzione sul perchè esista. Ma perchè è necessario impostare l'outline? La risposta è presto detta: quando viene specificata (e ricordatevi di farlo sempre) fornisce un feedback visivo al link che in quel momento è attivo mediante la navigazione da tastiera con il tasto TAB o un suo equivalente. Su quel link è cioè attivo il focus. Rimuovere l'outline significa quindi andare contro uno dei principi di accessibilità che ci impone di avere un indicatore visibile a schermo qualora l'utente utilizzi la tastiera per interagire con l'interfaccia. (vedi: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-visible). Non esiste quindi nessun motivo reale per resettare l'outline ma se proprio non abbiamo altra scelta ricordiamoci che esistono diversi metodi alternativi per preservare la sua funzione ovvero:

In qualsiasi caso ricordiamoci sempre di specificare un alto contrasto tra testo e sfondo per garantire un'adeguata leggibilità anche da parte di utenti con problemi visivi.


Articolo a cura di Davide Berardino