Usando i CSS: per nascondere un contenuto necessario per gli utenti di screen reader
  |  |
Stampa  |
Inviare  |
Quota         |
Attenzione: La versione originale di questo documento è CSS in azione: Contenuto invisibile solo per gli utenti che utilizzano screen reader . La traduzione francese è stata fatta da Ideose come parte di un accordo tra WebAIM e Ideose .
Nota: Vedere la pagina dei documenti in materia di accessibilità web per un elenco di tutti i documenti tradotti. Altre risorse sull'accessibilità web sono elencati anche nel portale digitale accessibile .
Riassunto
Introduzione
A volte ci sono casi in cui il contenuto dovrebbe essere reso disponibile agli utenti di screen reader, ma nascosto da persone vedenti. Nella maggior parte dei casi, se il contenuto (in particolare il contenuto che fornisce funzionalità o interattività) è abbastanza grande per gli utenti di lettura dello schermo, probabilmente dovrebbe essere disponibile per tutti gli utenti. Qualora le informazioni o le istruzioni sono fornite solo agli utenti di screen reader sono più un riflesso della cattiva progettazione e di scarsa accessibilità. Tuttavia, ci sono alcuni casi in cui le informazioni sono visivamente evidente ma non può essere per gli utenti di lettori di schermo. In questi casi è opportuno codificare una dichiarazione di queste informazioni in modo da essere letto da un lettore di schermo, ma invisibile agli utenti vedenti.
Tecniche per nascondere il testo
Ci sono diversi meccanismi per nascondere il contenuto. È importante che l'attuazione tecnica dà il risultato desiderato ed è accessibile.
visibility: hidden; e / o display:none;
Questi stili nascondere il testo a tutti gli utenti. Il testo viene rimosso dal flusso visivo della pagina e viene ignorato dagli screen reader. Non usare questo CSS se si desidera che il contenuto che deve essere letto da uno screen reader. Ma usare se si desidera che il contenuto non viene letto dagli screen reader.
width:0px;height:0px
Come sopra, poiché un elemento senza altezza o larghezza viene rimosso dal flusso della pagina, molti screen reader ignorerà questo contenuto.
Attributi HTML width e height con un valore pari a zero potrebbe quindi dare lo stesso risultato. Questo non è un approccio corretto per nascondere il contenuto visivo, ma permette al contenuto di essere letto da uno screen reader.
text-indent: -1000px;
Questo approccio sposta il contenuto di 1000 pixel a sinistra - al di fuori dello schermo in modo visibile. Gli screen reader leggono il testo sempre con questo stile. Tuttavia, se un link o un elemento di forma ha questo stile, che può provocare una indicazione di messa a fuoco (linee tratteggiate o le "formiche in marcia" intorno a un link per la messa a fuoco) che si estendono dal dove l'elemento deve essere posizionato nella pagina dove si trova, infatti, in realtà si trova (a sinistra). Non è molto carina. Come tale, è una scelta corretta se la voce non contiene elementi di navigazione.
Posizionamento dei contenuti fuori dallo schermo in assoluto
Usare CSS per spostare il contenuto nascosto in una posizione fuori dallo schermo di solito dal vivo è considerato come il più utile e accessibile per nascondere visivamente i contenuti.
Contenuto di posizionamento fuori dallo schermo
Gli stili seguenti sono raccomandati per visivamente nascondere i contenuti che devono essere lette da uno screen reader.
{Position: absolute;
a sinistra:-10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;}
. La classe CSS Nascosto deve essere indicato nel codice della voce che deve essere nascosto come segue:
<div class="hidden">Ce texte et caché.</div> Gli utenti vedenti non vedrà affatto il contenuto nascosto. Esso viene effettivamente visualizzato fuori della loro portata - ben nascosta alla sinistra della finestra visibile del browser. Gli utenti di screen reader hanno accesso a contenuti come se non fosse nascosto. Gli screen reader leggono il contenuto normalmente, ignorando completamente gli stili utilizzati in questa tecnica.
Analizzare il codice in dettaglio.
position:absolute; indica al browser di eliminare l'elemento dal flusso della pagina e cominciare a posizionarlo. left:-10000px; . sposta il contenuto di 10.000 pixel a sinistra top:auto; indica al browser di posizionare verticalmente il contenuto nella stessa posizione dove era originariamente.
Il fallimento di top potrebbe provocare che stile left viene ignorato in alcuni casi e in alcuni browser.
In breve, questo pezzo di codice muove i 10000 pixel a sinistra.
width:1px; height:1px; overflow:hidden; indica al browser di 1px 1px per dimensione l'elemento visivo e nascondere tutto ciò che non rientra in queste dimensioni.
Ci sono alcuni casi in cui la posizione (a sinistra) non può funzionare mentre tutti gli altri stili sono attivati.
In questo caso, l'elemento rimane nella sua posizione iniziale e prendere una dimensione di 1 pixel.
Osservazione
Una versione precedente di questo articolo tramite raccomandata left:0px; top:-500px .
Sebbene questo posizionamento opera per memorizzare i contenuti sopra la parte superiore, abbiamo trovato che se l'elemento contiene un collegamento nascosto o forma, quando assume lo stato attivo, il browser cerca di andare l'elemento - in modo da scorrere la pagina verso l'alto.
Questo può essere fonte di confusione per gli utenti vedenti utilizzando la tastiera.
Posizionando direttamente sulla sinistra, il browser non scorrerà la pagina. Si noti che, poiché i collegamenti e gli elementi modulo forniscono caratteristiche interattivi, dovrebbero raramente essere nascosto da persone vedenti.
Gli utenti vedenti non saranno in grado di vedere quale elemento è attivo dal momento che è fuori dallo schermo.
Parametri e indicatori
Importante!
Generalmente, un'istruzione sulle informazioni dovrebbero essere nascoste agli utenti vedenti e disponibili per gli utenti di screen reader solo se l'informazione è visivamente evidente, ma inconoscibile per gli utenti di screen reader.
Questa tecnica può essere usata per fornire parametri e indicatori per gli utenti di screen reader. Essa dovrebbe essere attuata con discrezione e solo quando necessario. La pagina WebAIM mostra un buon uso di questa tecnica in tre punti.
In primo luogo, il campo di ricerca nella parte superiore della pagina ha un titolo (tag label) immediatamente prima di lui. E 'visivamente chiaro che il campo è un campo di ricerca, ma un lettore di schermo ha bisogno di una label per dare queste informazioni. Per fare questo, abbiamo fornito un titolo tramite un tag label, ma visivamente nascosto.
In secondo luogo, la navigazione nella parte superiore della pagina è un elemento comune in siti web. Maggior parte degli utenti Internet capire come funziona e può identificare visivamente. Ma perché un lettore di schermo accede a questa lista di link in modo lineare, può non essere ovvio per gli utenti di screen reader che questo è il breadcrumb fino a quel hanno svolto un ruolo. Quindi dire loro. Per fare questo, un testo nascosto "Tu sei qui:" è stata aggiunta appena prima il pangrattato.
Infine, abbiamo identificato l'inizio della pubblicità nella parte inferiore di ogni pagina con il testo nascosto. Come con il pangrattato, è visivamente evidente che si tratta di una pubblicità, ma non per un utente di screen reader in quanto non iniziare a leggere il contenuto.
Potete vedere tutto il testo nascosto disabilitando gli stili di pagina WebAIM. Ricordate, tutti i contenuti visivamente nascosto con i CSS sarà visibile se gli stili sono disattivati.
Altre implementazioni
Per un utente visivo, un celle intestazione può svolgere la duplice funzione di organizzare il contenuto della tabella e anche fornire etichette (etichetta) per formare elementi in questa tabella, come si vede nello screenshot qui sotto di una forma in una tabella di dati.
La riga di intestazione e la colonna della tabella sono di poco valore in termini di comprensione della struttura della tabella, ma le intestazioni non sono i campi del modulo. Quando gli utenti di screen reader per catalogare un campo di modulo a un altro campo, non si sentono le intestazioni della tabella. In realtà, essi non si sente alcuna etichetta. I lettori di schermo richiedono etichette per i campi modulo testo. Ma aggiungere etichette di testo ad ogni campo del modulo sarebbe sicuramente ridondante, inutile e, probabilmente, sarebbe fonte di confusione per gli utenti vedenti. In questo caso, le etichette possono essere fornite nel codice adiacenti ai loro corrispondenti campi modulo ma nascoste utilizzando la sopra CSS e attuato come segue ...
<label for= »amembers "class= »hidden »> Numero di membri in squadra A </ label>
...
Un altro esempio di apparente incompatibilità tra le esigenze degli utenti di screen reader e gli utenti vedenti si verifica quando molti sviluppatori di creare campi modulo che sembrano appartenere alla stessa etichetta. Un esempio comune di questo si ha quando due o più campi di testo vengono utilizzati per i numeri di telefono.
Maggior parte degli utenti vedenti in Nord America comprende anche le zone di testo di input corrispondono a diverse parti di un numero di telefono. Gli utenti di screen reader, tuttavia, potrebbe essere necessario inserire il numero di telefono completo nella prima casella. Si sarà certamente un po 'sorpresi quando scoprono che il campo è limitato a solo tre cifre o che vi sono altri campi che non sono denominati che lo seguono.
La soluzione più ovvia a questo problema sarebbe quello di unire tutte le caselle di immissione di testo in uno, e quindi fornire l'etichetta appropriata. Tuttavia, la tecnica CSS può anche essere applicata a questa situazione per aggiungere etichette nascoste in ciascuna casella di testo separato.
<p> Numero di telefono:
(
<label for= »area "class= »hidden »> Codice Area </ label>
<input name= »area "id= »area" type= »text "size= »3" maxlength= »3"/>
)
...
Conclusione
Quando le tecniche qui presentate sono utilizzate CSS per nascondere il contenuto, gli utenti vedenti non sapranno mai che il contenuto è presente (a meno che non disattivare gli stili). Gli utenti di screen reader, d'altra parte, non si renderà conto che questo contenuto è invisibile agli utenti vedenti. Entrambi i tipi di utenti saranno in grado di utilizzare il contenuto intuitivo senza alcuna modifica il codice è necessario. Questo può fornire importanti informazioni contestuali, altrimenti impossibili da cogliere per gli utenti di screen reader a causa della loro natura visiva. Quando viene usato con giudizio, questa tecnica può risolvere alcuni problemi tra i requisiti di accessibilità e le esigenze del layout visivo delle pagine web. Questo non è l'unico modo tecnico o solo per risolvere questo problema, ma è una delle soluzioni che gli sviluppatori Web possono utilizzare quando necessario.
Legami commerciali
WebAIM è un'iniziativa di:
Copyright 1999-2009 WebAIM
