Vai ai contenuti

LAU



Home > realizzare > accessibilità: fogli di stile > Un modo accessibile per nascondere contenuti HTML


Un modo accessibile per nascondere contenuti HTML

Tecniche sull'utilizzo dei CSS per nascondere contenuti agli utenti normodotati in modo tale che rimangano comunque accessibili agli screen reader.

Articolo originale: An Accessible Method of Hiding HTML Content di Paul Bohman

Traduzione a cura di: Mario Picarelli | 7 settembre 2005


1. Riassunto

Ci sono alcuni rari casi in cui le esigenze di accessibilità degli utenti di screen reader entrano in conflitto con le esigenze degli utenti normodotati. Queste incompatibilità hanno luogo quando gli sviluppatori Web inseriscono campi di form nelle griglie di una tabella, quando usano a mò di intestazione immagini invece che testo, e in altri casi.
L'aggiunta di testo extra può essere di aiuto per gli utenti di screen reader ma può peggiorare la resa grafica, nonché ridurre la comprensibilità. Una soluzione è l'utilizzo di CSS per nascondere contenuti agli utenti normodotati in modo tale che rimangano comunque accessibili agli screen reader.
Esaminiamo nel dettaglio questa tecnica e le sue implicazioni.

torna su

2. Introduzione

La maggior parte delle tecniche usate per rendere i contenuti accessibili agli screen reader rimangono nascoste all'utente normodotato. Il testo alternativo (alt), i tag per i titoli delle tabelle, il summary delle tabelle e le etichette (label) dei campi di form sono esempi di tecniche indispensabili per chi usa screen reader ma che hanno ripercussioni scarse o nulle sulla resa visiva dei contenuti.
Talvolta, tuttavia, i Web designers si trovano in situazioni in cui l'aggiunta di marcatura accessibile ha un impatto rilevante sul layout. Certe volte, ciò può interferire con l'usabilità dei contenuti per gli utenti normodotati. Certe altre volte, la realizzazione di un layout attraente rischia di venire compromessa dall'inclusione di contenuti testuali in forma semanticamente corretta.

torna su

3. Testo nascosto agli utenti normodotati

Fortunatamente, c'è modo di appianare le divergenze tra desideri ed esigenze dell'utente normodotato e desideri ed esigenze dell'utente di screen reader. Questo documento prende in esame alcuni casi in cui risulta vantaggioso sottrarre i contenuti alla vista dei normodotati, e propone una soluzione che consente di nascondere l'HTML senza nulla togliere all'accessibilità o all'integrità semantica, e che funziona a prescindere dal browser o dalla piattaforma usati.
La tecnica qui proposta consiste essenzialmente nel collocare oltre l'area visibile del browser il contenuto e di ridurne altezza e larghezza a 1 pixel. È proprio l'uso combinato dello spostamento e della riduzione delle dimensioni a garantire l'efficacia di questa tecnica su un gran numero di browser e piattaforme.

Codice di esempio 1

Il seguente codice va inserito nel foglio di stile:

.nascosto
	{
	position:absolute;
 	left:0px;
 	top:-500px;
 	width:1px;
 	height:1px;
 	overflow:hidden;
}

La classe CSS va quindi richiamata nel tag dell'elemento reso invisibile come mostrato di seguito:

<div class="nascosto">
Questo testo è nascosto.</div> 

I normodotati non vedranno il contenuto nascosto, collocato al di fuori del loro campo visivo, oltre il limite superiore della finestra del browser. Gli utenti di screen reader avranno invece accesso al contenuto come se non fosse affatto nascosto. Gli screen reader lo leggeranno normalmente, ignorando del tutto lo stile adottato.
Alcuni browser interpretano correttamente la prima parte della tecnica, che consiste nel piazzare l'elemento oltre il campo visibile; per i browser che non la interpretano correttamente, ne va adottata anche un'altra, che consiste nel rendere l'elemento tanto piccolo da non essere visto. Per appianare le differenze tra browser vanno adottati entrambi i metodi. Il valore di 500 pixel è un numero scelto a caso. Andrà bene qualsiasi distanza sufficiente a collocare l'elemento al di fuori della visuale dell'utente. È preferibile collocarlo oltre il limite superiore del campo piuttosto che oltre il limite destro o sinistro perchè queste ultime due alternative creano problemi in alcuni browser. L'altezza e la larghezza dell'elemento sono settate a 1 pixel, e non a 0 pixel, perchè alcuni screen reader non leggono contenuti con altezza o larghezza nulle. Settando l'overflow a hidden vengono aggirati i bugs degli altri browser. Usati insieme, questi metodi funzionano su un gran numero di browser, piattaforme, screen reader.

torna su

4. Elementi grafici usati come intestazioni

I Web designers cercano sempre di rendere i contenuti Web il più possibile attraenti. Il linguaggio di marcatura dell'HTML genera un contenuto di scarsa attrattiva se privo del contributo della grafica o di altri media. L'uso di elementi grafici come intestazioni è una tecnica molto diffusa che garantisce un controllo sull'aspetto estetico maggiore di quello consentito dal solo testo. Sfortunatamente, in questo modo vengono prodotti documenti sprovvisti, a livello di marcatura, di una buona struttura semantica. In mancanza di un'adeguata marcatura (es. <h1>,<h2> ecc.) gli screen reader non riconoscono come intestazioni questi elementi. Circoscriverli con tag di intestazione non risolve il problema. Dal punto di vista semantico, le intestazioni dovrebbero essere testuali.
Sono state ideate molte tecniche per consentire un siffatto uso della grafica senza nulla togliere alla correttezza semantica del documento. La prima e la più nota è la Todd Fahrner's image replacement technique. Appena introdotta, gli esperti di accessibilità si accorsero che rendeva il contenuto inaccessibile agli screen reader. Poco dopo, sono state escogitate tecniche alternative come la "Bob Easton's off-to-left-technique", il Mike Rundle's text-indent method, la Tom Gilder's image transformation technique, e altre. Tutte riescono a nascondere il contenuto, alcune a renderlo accessibile agli screen reader, altre funzionano su tutti i principali browser e sistemi operativi. Tuttavia, nessuna riesce in tutte e tre le cose, sebbene alcune siano preferibili ad altre.

Codice di esempio 2

Nel foglio di stile va inserito il seguente codice:

.nascosto 
	{ 
	position:absolute; 
	left:0px; 
	top:-500px; 
	width:1px; 
	height:1px; 
	overflow:hidden; 
	} 
 
h1 
	{ 
	height:30px; 
	width:60px; 
	background-image:url(h1.jpg); 
	} 

La classe CSS va quindi richiamata nel tag dell'elemento reso invisibile come mostrato di seguito:

<h1><span class="nascosto">
Questo titolo è nascosto.
</span></h1>

torna su

5. Il link "Skip navigation"

I Web designers si mostrano spesso riluttanti all'idea di dotare le loro pagine di un link che consenta agli screen reader di saltare i menu già letti, come richiesto dalla Sezione 508 del Rehabilitation Act negli Stati Uniti e come raccomandato dalle Web Content Accessibility Guidelines (WCAG), versione 1.0.
Aggiungere un link "Skip navigation" altera le impostazioni iniziali e costringe il più delle volte a modificare il layout.
Alcuni Web designers hanno pensato di nascondere il testo nell'alternative text dell'immagine o di usare altri metodi per renderlo invisibile all'utente normodotato. Il più grosso inconveniente è che, così facendo, lo si sottrae anche a quei normodotati ai quali potrebbe tornare utile, così come a quegli utenti con problemi motori impossibilitati ad utilizzare il mouse. Questi ultimi preferirebbero ricorrere al link "Skip navigation" piuttosto che spostarsi con il tab sulle varie voci e su tutto ciò che precede il contenuto vero e proprio della pagina. Un modo per conciliare i desideri dei Web designers con quelli degli utenti di screen reader e degli utenti con problemi motori è usare una tecnica in grado di nascondere il link "salta il menu" finchè l'utente non vi si posizioni sopra con il tab, momento in cui il link si renderà visibile al normodotato. Ciò consentirebbe sia al non vedente che al normodotato di godere dei vantaggi del link. Per ottenere ciò, il link viene nascosto - usando la tecnica descritta in questo documento - ma torna ad essere visibile quando vi si posiziona da tastiera. In altri termini, vengono creati due stili. Uno per il tag <a> e l'altro per lo pseudo-elemento a:active. Lo stile dello pseudo-elemento a:active si attiva solo quando l'utente si posiziona con il tab sul link, che tornerà al suo stato di default (cioè scomparirà nuovamente) non appena l'utente si sia spostato da esso.

Codice di esempio 3

Nel foglio di stile va inserito il codice seguente:

#salta a, #salta a:hover, #salta a:visited  
 { 
 position:absolute; 
 left:0px; 
 top:-500px; 
 width:1px; 
 height:1px; 
 overflow:hidden;
 } 
  
 #salta a:active 
 { 
 position:static; 
 width:auto; 
 height:auto; 
 } 

La classe CSS va quindi richiamata nel tag dell'elemento reso invisibile come mostrato di seguito:

<div id="salta"><a href="#contenuto">
Vai al contenuto principale</a></div>

L'unico inconveniente, a livello concettuale, è che la comparsa imprevista di un elemento precedentemente non visibile potrebbe spiazzare l'utente normodotato che usa la tastiera. Il problema non sussiste invece per gli utenti di screen reader che, non potendo vedere lo schermo, non si renderanno conto della comparsa improvvisa. Per loro, il link è sempre stato lì e, in un certo senso, è vero. Soltanto, è stato sottratto alla vista. Coloro che usano il mouse non vedranno mai il link, quindi anche per loro non c'è problema.

torna su

6. Form dentro tabelle

Per l'utente normodotato, le celle di intestazione delle tabelle svolgono la duplice funzione di organizzare il contenuto e di fare da etichetta ai campi dei form, come mostrato nella videata sottostante raffigurante un form inserito in una tabella.

Figura 1. Tabella usata per applicare "etichette" agli elementi del form.
Team A Team B
Number of Members
Color of Uniform
Years in the League 1
2
3
4
1
2
3
4
Comments

Per l'utente di screen reader, i titoli di righe e colonne sono funzionali alla comprensione del layout della tabella, ma non agiscono come etichette dei form. Quando gli utenti di screen reader scorrono con il tab i vari elementi, non gli verranno letti i titoli. Non verranno a conoscenza delle etichette. Agli screen reader occorrono etichette testuali. Teoricamente, come raccomandato dal WCAG 1.0, queste etichette andrebbero incluse nel tag <label>. Ulteriori etichettature e raggruppamenti si possono realizzare mediante i tag <fieldset> e <legend>.
Ma, così facendo, i normodotati non percepiranno alcun vantaggio nel leggere le etichette. Dal loro punto di vista, sono ridondanti rispetto alle diciture della tabella, le quali già di per sé costituiscono etichette adeguate per gli elementi del form. Qui di seguito è mostrato come apparirebbe all'utente normodotato la stessa tabella con l'aggiunta di etichette testuali standard: il tag <label>, il tag <fieldset>, e il tag <legend>.

Figura 2. Form con etichette nella tabella
Team A Team B
Number of Members
Color of Uniform Color of Team A's uniform Color of Team B's uniform
Years in the League
Years that Team A
has been in the league
1
2
3
4
Years that Team B
has been in the league
1
2
3
4
Comments

Sebbene questa versione della tabella possa soddisfare gli utenti di screen reader, la maggior parte dei normodotati considererebbe il testo aggiunto un sovrappiù. Per il normodotato la tabella risulta - letteralmente - sovraccarica e difficilmente comprensibile a colpo d'occhio. Questo è un caso in cui l'aggiunta di codice di marcatura volto a favorire gli utenti di screen reader compromette l'accessibilità o, quanto meno, la facilità di comprensione dei contenuti da parte degli utenti normodotati.

Codice di esempio 4

Nel foglio di stile va inserito il seguente codice:

.nascosto 
	{
	position:absolute; 
	left:0px;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden;
	} 

La classe CSS va quindi richiamata nel tag dell'elemento reso invisibile come mostrato di seguito:


<label for="amembers" class="hidden">
Number of members in team A
</label>

torna su

7. Più elementi di form che "condividono" la stessa etichetta

Altro caso di incompatibilità apparente tra esigenze di utenti di screen reader e esigenze di utenti normodotati si ha quando gli sviluppatori creano più elementi di form cui pare opportuno assegnare una stessa etichetta. Ad esempio, quando vengono usati due o più elementi input per un numero telefonico.

Figura 3. Etichette di form applicate a pių di un elemento del form

La maggioranza degli utenti nord-americani normodotati capisce che ciascuno dei campi di input della videata soprastante corrisponde ad una porzione di un numero telefonico standard. Gli utenti di screen reader cercheranno di inserire l'intero numero nella prima casella. Non appena si accorgeranno che l'area li limita a soli 3 caratteri, potrebbero confondersi. Alcuni utenti ne verranno a capo dopo qualche tentativo, ma questi tentativi richiedono tempo e non sono indispensabili. Il modo più ovvio per aggirare il problema è raggruppare le diverse micro-sezioni di input in un unico campo, e applicare poi le etichette opportune. Questa è quasi sempre la soluzione migliore. Ciononostante, la tecnica CSS può tornare utile anche in questo caso.

Codice di esempio 5

Nel foglio di stile va inserito il seguente codice:

.nascosto
{
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

La classe CSS va quindi richiamata nel tag dell'elemento reso invisibile come mostrato di seguito:



 form method="post" action=""> 
 <p>Numero di telefono: 
( <label for="area" class="hidden">prefisso</label>
<input name="area" type="text" size="3"
maxlength="3" id="area" /> ) <label for="first"
class="hidden">prime 3 cifre</label>
<input name="first" type="text" size="3"
maxlength="3" id="first" /> - <label for="last"
class="hidden">ultime 4 cifre </label>
<input name="last" type="text" size="4"
maxlength="4" id="last" />  
<label for="ext" class="hidden">estensione</label>
<input name="ext" type="text" size="5"
maxlength="5"id="ext" /> </p>
<p><input type="submit" name="Submit"
value="Submit" /></p> </form>

torna su

8. Fornire indicazioni contestuali riservate agli utenti di screen reader

La stessa tecnica CSS può essere usata per fornire agli utenti di screen reader indicazioni contestuali superflue per gli utenti normodotati. Sebbene questa tecnica non sia molto usata, gli utenti di screen reader potrebbero aver bisogno di una chiarificazione testuale del contesto dei contenuti Web. I siti con menu complessi, ad esempio, sono spesso strutturati con interfacce grafiche che organizzano il menu gerarchicamente a blocchi. "Tabs" visuali vengono spesso usati a questo scopo. Spesso, il menu è congegnato in modo da segnalare la posizione dell'utente all'interno della gerarchia. Buona parte di questa informazione, dato che viene convogliata visivamente, non è disponibile per gli utenti di screen reader. Per favorirne l'orientamento, può giovare il ricorso a frasi nascoste. Alcune di queste frasi possono essere:

  • Inizio menu principale
  • Fine menu principale
  • Inizio [e Fine] del sottomenu di Prodotti e Servizi
  • Ti trovi qui [seguito dalla voce corrente del menu all'interno della gerarchia]
  • Annunci [da piazzare dopo un banner pubblicitario, per esempio]

Attenzione: queste frasi devono essere concise e vanno usate con parsimonia. Molti siti non hanno bisogno di ricorrere a questi aiuti contestuali. Più la grafica è semplice e pulita e meno sarà necessario farne uso. Si dovrebbe evitare di sovraccaricare gli utenti di screen reader con testi superflui. Pur se con questa tecnica si possono fornire indicazioni utili circa un contesto destinato principalmente ad una comprensione visiva, tuttavia, dato che gli utenti di screen reader devono capire dove č collocato il testo, queste indicazioni vanno ridotte al minimo.

Codice di esempio 6

Il seguente codice va inserito nel foglio di stile:

.nascosto 
	{ 
	position:absolute;
	left:0px;
	top:-500px;
	width:1px; 
	height:1px; 
	overflow:hidden; 
	} 

La classe CSS va quindi richiamata nel tag reso invisibile come mostrato di seguito:

<div class="nascosto">
Inizio menu principale.</div>

<div class="hidden">
Fine menu principale.</div>

torna su

9. Conclusione

Usando questa tecnica CSS per nascondere il contenuto di form HTML, il normodotato non ne verrà mai a conoscenza. L'utente di screen reader, da parte sua, non capirà mai che quel contenuto è stato sottratto alla vista del normodotato. Entrambe le tipologie di utenti saranno in grado di fruire intuitivamente del contenuto, senza che sia stato necessario spendere, in tutte e due i casi, troppa o troppo poca informazione nella marcatura. In questo modo vengono fornite indicazioni indispensabili che, per via della loro natura visiva, è impossibile comunicare in altro modo agli utenti di screen reader. Se usata con criterio, questa tecnica può risolvere alcuni conflitti tra esigenze di accessibilità ed esigenze estetiche. Non è l'unica tecnica o l'unica maniera per risolvere il problema, ma gli sviluppatori Web possono annoverarla tra le soluzioni a portata di mano in caso di necessità.

torna su

10. Riferimenti

  1. Bowman, Doug (2003). Using background-image to replace text.
  2. Clark, J. (2003). Facts and opinion about Faherner image replacement.
  3. Easton, B. (Settembre 2003). Screenreader visibility.
  4. Rundle, M. (5 Agosto 2003). Accessible image replacement.
  5. U.S. Access Board (2001). Summary of Section 508 Standards.
  6. W3C (1999). Web Content Accessibility Guidelines 1.0.

torna su

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]