Questa è la traduzione dell'articolo Don't Lose Your :focus di Patrick H. Lauke pubblicato originariamente su 24 Ways il 9 Dicembre 2009.
Per molti web designer parlare di accessibilità significa parlare di utenti non vedenti che usano screen reader e delle difficoltà che bisogna affrontare per rendere un sito accessibile a questa particolare fascia di visitatori. Certamente, però, l'accessibilità copre un vasto campo di situazioni che vanno bel al di là dell'esempio estremo degli utilizzatori di screen reader. E se è vero che rendere accessibile un sito complesso può essere spesso problematico, ci sono anche molte piccole cose che non richiedono molto impegno per essere implementate, sono facili da testare e possono fare la differenza per certe categorie di utenti.
In questo breve articolo parleremo di navigazione tramite tastiera e mostreremo come un uso scriteriato dei CSS possa rendere il nostro sito completamente inusabile.
Navigazione tramite tastiera
Gli utenti che per qualunque ragione non possono usare il mouse utilizzeranno la tastiera (o un'interfaccia che richiama una tastiera) per navigare nel contesto di una pagina web. Di default, useranno i tasti TAB e SHIFT + TAB per spostarsi da un elemento della pagina in grado di ricevere il focus (link, campi di form e aree di testo) al successivo.
Ma a me non piacciono le linee tratteggiate...
Per mostrare all'utente il punto in cui si trova all'interno di una pagina, i browser inseriscono una cornice a linea a puntini (outline) intorno all'elemento che in quel momento ha il focus. Il "problema" di questa cornice è che alcuni browser (Internet Explorer e Firefox) la mostrano anche quando un utente clicca su un elemento che può ricevere il focus con il mouse. In modo particolare su siti che fanno un uso estensivo dell'image replacement sui link con la tecnica detta "off-left", ciò può creare delle cornici molto estese, che dall'elemento rimpiazzato arrivano fino al bordo sinistro della finestra del browser.
C'è un modo molto semplice per prevenire tutto ciò: basta aggiungere overflow:hidden per far sì che la cornice si limiti all'area cliccabile dell'elemento.
Ma per molti designer anche questo non basta. Come soluzione definitiva molti eliminano del tutto le cornici nei loro fogli di stile. Per esempio, il popolare foglio di stile di reset creato da Eric Meyer (che per altri versi si dimostra una soluzione eccellente per livellare i comportamenti di default dei vari browser), sopprime anch'esso le cornici del focus:
html, body, div, span, applet, object, iframe ... {
...
outline: 0;
...
}
/* remember to define focus styles! */
:focus {
outline: 0;
}Certo, nella sua spiegazione (e anche nello stesso CSS di reset) Eric ricorda ai designer di definire gli stili per lo stato :focus, ma a giudicare dal numero di siti che sembrano ignorare questo suggerimento, il messaggio non sembra essere stato molto ascoltato.
E tuttavia, va bene così! Non ci saranno più fastidiose linee a puntini a rovinare il nostro design. Ma cosa ne è a questo punto di quanti usano la navigazione da tastiera? Sebbene tecnicamente essi siano ancora in grado di usare il tasto TAB da un elemento al successivo, ora non hanno più un segnale per capire in quale punto della pagina si trovano (un'eccezione è rappresentata da Opera: su questo browser l'outline ciene mostrato a prescindere dalle regole definite nel foglio di stile). Se poi sono utenti di Safari, non avranno nemmeno un'indicazione del target del link sulla barra di stato del browser, come accade quando si passa con il mouse su un link.
Come eliminare l'outline solo per chi usa il mouse
C'è un modo per consentire agli utenti che navigano con la tastiera di mantenere l'outline nascondendola a quelli che usano il mouse?
Dopo aver sperimentato vari approcci (si veda l'articolo Better CSS outline suppression per ulteriori dettagli), la soluzione più elegante sembra essere anche la più semplice: non rimuovere outline sullo stato :focus, rimuoverlo invece sullo stato :active: dopo tutto :active è una pseudo-classe dinamica che ha a che fare esplicitamente con gli stili che dovrebbero essere applicati quando un elemento che può ricevere il focus viene clicacto o attivato in altri modi:
a:active { outline: none; }C'è un solo piccolo problema con questo metodo: se l'utente attiva un link e poi usa il pusante Indietro del browser, allora l'outline diventa visibile. Inoltre, le vecchie versioni di Internet Explorer fanno un po' di confusione tra :focus, :hover e :active, per cui la tecnica non funziona su IE6 e versioni precedenti. Personalmente, penso si possa fare tranquillamente anche se di essi.
C'è da fare un'aggiunta però. Facendo ulteriori test appare che l'outline continua a comparire nel periodo di tempo che intercorre tra l'attivazione di un link e il caricamento del target del link stesso. Ecco allora una soluzione meno elegante della prima che sopprime l'outline anche sull'hover:
a:hover, a:active { outline: none; }