CSS  »  Articoli  »  Accessibilità e CSS 

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.

Figura 1 - Un esempio di cornice che si estende fino al bordo sinistro 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.

Figura 2 - Cornice ridotta con overflow:hidden

Altri articoli

Altre guide

Altre newsletter