Testo nascosto e screen reader nel 2013

omino in incognitoNascondere del testo sul monitor in accessibilità è una tecnica spesso usata soprattutto per migliorare l’esperienza di navigazione di un utente che utilizza uno screen reader: così facendo, è possibile aggiungere alla pagina informazioni che se visualizzate potrebbero apparire superflue o nocive per il design, ma che invece sono fondamentali per chi utilizza uno screen reader. Per esempio, per migliorare e completare la struttura dei titoli che delineano i contenuti delle pagine, o per gli skip link e tante altre situazioni, come etichettare elementi dei form o fornire istruzioni speciali dove l’interazione potrebbe confondere un utente che utilizza tecnologie assistive.

Per anni, allo scopo di ottenere questo risultato è stata utilizzata una tecnica ben documentata in CSS in Action: Invisible Content Just for Screen Reader Users su WebAIM, che prevede di nascondere il testo posizionandolo in modo assoluto fuori dallo schermo (e sue variazioni).

Però, a oggi questa tecnica presenta molti inconvenienti: il layout si può deformare se l’elemento così nascosto riceve il focus da tastiera (tipicamente, quando un utente naviga utilizzando il tasto Tab), il rientro negativo del testo non funziona quando la direzione di lettura è da destra a sinistra, Apple VoiceOver non legge gli elementi XHTML se questi hanno un’altezza pari a 0, Safari con VoiceOver su SnowLeopard legge i titoli nascosti come semplice testo.

Per risolvere questi malfunzionamenti, è stata elaborata una nuova tecnica basata sulla proprietà clip di CSS 2.1. clip consente di consente di specificare le dimensioni di un elemento posizionato in modo assoluto utilizzando i valori in alto, a destra, in basso, e a sinistra creando un box per il contenuto. Impostando tutti i valori a 0 pixel, il contenuto diventa invisibile.

In teoria sembrerebbe semplice, ma come al solito le incompatibilità fra browser ci mettono lo zampino:

  • Bisogna prevedere una sintassi diversa per IE6 e IE7, vedi linea con il commento.
  • Bisogna correggere un bug in WebKit e Opera che provoca l’overflow del contenuto “ritagliato”; sistemato con overflow: hidden.
  • Bisogna impostare l’altezza di 1 pixel per garantire che VoiceOver legga il contenuto.
  • Come ulteriore precauzione, gli attributi padding e border sono impostati a 0, al fine di evitare eventuali problemi relativi ai bordi del box di ritaglio.

Alla fine della fiera, il codice del CSS diventa così (al posto di hidden ovviamente utilizzate il nome della classe che avete creato nel vostro CSS):

.hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...