L'Osservatorio sulla Comunicazione ospita questa traduzione in italiano della versione ufficiale del documento An Accessible Method of Hiding HTML Content" di Paul Bohman presente sul sito di WebAIM. I possibili errori dovuti alla traduzione, sono di esclusiva responsabilità del traduttore Pasquale Popolizio e non sono in alcun modo imputabili all'autore. Per qualsiasi commento riguardo tale traduzione rivolgersi a Pasquale Popolizio. Per qualsiasi commento riguardo al documento originale rivolgersi all'autore .

---

Un Metodo Accessibile
per Nascondere il Contenuto HTML

Autore: Paul Bohman
Data: Maggio 2004 (la precedente versione di questo documento: Febbraio 2004)
Questo documento è stato presentato alla W4A conference a WWW2004, 18 Maggio 2004, New York, New York, USA .

Nota: Ogni commento su questo documento è ben accettato dall'autore (vedi le informazioni per contatare l'autore).

Riassunto

Nonostante sia abbastanza raro, ci sono delle circostanze in cui le necessità di accessibilità degli utenti di screen reader sembrano essere agli antipodi con le necessità degli utenti visivi. Questo tipo di conflitto si verifica quando gli autori Web pongono un elemento di form all'interno di una tabella di dati, quando vogliono utilizzare immagini come titoli al posto del testo, ed in altre situazioni. Aggiungere del testo aiuta gli utenti di screen reader, ma possono rendere più complicato il

Il diritto d'autore è detenuto dall'autore.

Questo documento è stato presentato alla Conferenza W4A al WWW2004, il 28 maggio 2004 a New York, Stati Uniti.

 

 

visivo, riducendo così la comprensione. Una soluzione consiste nell'utilizzare i CSS per nascondere il testo dagli utenti vedenti in un modo che rimane accessibile agli screen reader. Di seguito i dettagli di questa tecnica, insieme alle ragioni tecniche che la sottintendono.

Introduzione

La maggior parte delle tecniche per rendere il contenuto Web accessibile agli screen reader sono invisibili agli utenti vedenti. Testo alternativo (alt) tag nelle intestazioni (header) delle tabelle, riassunti di tabelle, e tag di form <label> sono tutti esempi di tecniche che fanno una grossa differenza per gli utenti di screen reader, ma che hanno poco o nessun impatto sull'apparenza visiva del contenuto Web.

A volte gli autori Web si trovano in situazioni nelle quali l'aggiunta di markup accessibile non ha impatto sul layout visivo. In alcuni casi, l'impatto visivo può diminuire l'usabilità del contenuto per gli utenti vedenti. In altri casi, gli autori vogliono semplicemente fornire un layout più piacevole il quale potrebbe essere compromesso includendo tutto il testo in un formato semanticamente corretto.

Nascondere il Testo agli Utenti Vedenti

Fontunatamente, esistono dei modi per risolvere i conflitti fra le necessità e desideri degli utenti vedenti e quelli che utilizzano screen reader. Questo documento esamina alcune circostanze nelle quali può essere vantaggioso nascondere il testo agli utenti vedenti, e propone una soluzione che permette all'HTML di essere nascosto senza compromettere l'accessibilità o l'integrità semantica del documento, e che funzione con tutti i browser e sistemi operativi.

Il cuore della tecnica proposta in questo documento è quello di nascondere il contenuto sopra l'area visibile del browser ed anche di restringere il contenuto ad un'altezza e larghezza di 1 pixel. La combinazione di muovere il contenuto e di restringerlo è ciò che permette a questa tecnica di lavorare con un'ampia varietà di browser e sistemi operativi.

Codice esempio n.1

Il codice seguente dovrebbe essere inserito nel foglio di stile:

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

La classe CSS dovrebbe essere poi applicata all'interno del tag dell'elemento che si vuole nascondere:

<div class="hidden">This text is hidden.</div>

Gli utenti vedenti non vedranno il contenuto nascosto. Esso sarà fuori del loro ambito visuale, nascosto sopra il margine superiore della finestra del browser. Gli utenti di screen reader potranno accedere al contenuto normalmente, ignorando completamente gli stili utilizzati in questa tecnica.

Alcuni browser rispondono bene per la prima parte di questa tecnica, che consiste nel posizionare l'elemento sopra la visuale del browser. Altri browser non rispondono a questa tecnica, cosicchè, viene utilizzata anche la seconda tecnica, che consiste nel portare la dimensione dell'elemento ad una dimensione troppo piccola per essere visto. Entrambi i metodi sono necessari per gestire le varie implementazioni dei browser. La distanza di 500 pixel sopa la visuale del browser rappresenta un numero casuale. Ogni distanza funzionerà, fino a quando porterà il contenuto fuori della vista degli utenti vedenti. Posizionare il contenuto sopra è preferibile rispetto a posizionarlo a sinistra o a destra, in quanto entrambe queste direzioni possono comportare viste irregolari in alcuni browser. L'altezza e la larghezza dell'elemento vengono fissate ad 1 pixel, invece di 0 pixel, perché alcuni screen reader si rifiutano di leggere contenuto che non possiede larghezza o altezza. Il fissare il flusso a "hidden" porta con sé alcune cattive implementazioni da parte di alcuni browser. Utilizzati insieme, questi metodi lavorano bene con una gran varietà di browser, sistemi operativi e screen reader.

Immagini utilizzate come Titoli

Gli autori Web hanno sempre cercato di rendere il contenuto Web il più piacevole possibile. Il linguaggio di markup dell'HTML produce un contenuto non proprio eccitante da vedere senza l'aggiunta di immagini e altri elementi multimediali. Una tecnica favorita degli autori Web consiste nell'utilizzare le immagini al posto dei titoli del documento. Questa tecnica permette agli autori di avere più controllo sull'immagine dei titoli piuttosto del semplice testo. Sfortunatamente, in questo modo si producono documenti che non forniscono una buona struttura semantica a livello di markup. Gli screen reader non possono riconoscere questi elementi come titoli senza un markup adeguato (per esempio <h1>, <h2>, etc.). Circondando un'immagine con i tag di titolazione non risolve il problema. In un senso semantico, i titoli dovrebbero essere fatti di testo.

Varie tecniche sono state presentate per permettere agli autori di utilizzare le immagini come titoli all'interno di documenti semanticamente corretti. La prima, e più conosciuta tecnica è quella della sostituzione dell'immagine di Todd Fahrner [1]. Subito dopo la sua presentazione, gli esperti di accessibilità notarono che la tecnica faceva diventare il contenuto non disponibile per gli screen reader [2]. Poco dopo, altri presentarono tecniche alternative, come quella dell'off-to-left di Bob Easton [3], quella del text-indent di Mike Rundle [4], quella della trasformazione dell'immagine di Tom Gilder [5], e altre. Tutte queste techiche riescono a nascondere il contenuto HTML, alcune di loro hanno successo nel rendere il contenuto accessibile agli screen reader, e alcune di loro funzionano con i maggiori browser e sistemi operativi. Comunque, nessuna di loro funzionano in tutte e tre le aree, sebbene alcune siano migliori di altre.

Codice di esempio n.2

Il seguente codice dovrebbe essere inserito nel foglio di stile:

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

La classe CSS dovrebbe essere poi applicata all'interno del tag dell'elemento che si vuole nascondere:

<h1><img src="h1" alt="" height="30" width="60">
This heading text is hidden.
</h1>

I collegamenti per “saltare la navigazione” (“skip navigation”)

Gli autori spesso si rifiutano di proseguire davanti all'idea di fornire un collegamento testuale sulle loro pagine per gli utenti di screen reader per permetterli di saltare i collegamenti di navigazione ripetitivi, così come richiesto dalla Sezione 508 del Reabilitation Act negli Stati Uniti [6], e come raccomandato dalle Linee Guida per l'Accessibilità del Contenuto Web 1.0 o WCAG 1.0 (Web Content Accessibility Guidelines 1.0) [7]. L'aggiunta di un collegamento di "salto di navigazione" si intromette del design originale e spesso forza l'autore a modificare il layout.

Alcune autori nascondono il testo all'interno del testo alt dell'immagine, o utilizzano altri metodi che nascondono completamente il collegamento agli utenti vedenti. La più grande controindicazione nel rendere questo collegamento invisibile è che questo rende il collegamento non disponibile agli utenti vedenti che potrebbero trovare il collegamento utile, come le persone con disabilità motorie che non possono utilizzare un mouse. Alcuni utenti con disabilità motorie si stancano facilmente, e vorrebbero piuttosto utilizzare un collegamento per "saltare la navigazione" rispetto a proseguire a colpi di tabulatore per tutti gli elementi del menù ed altro contenuto che precede il contenuto principale della pagina.

Un modo per conciliare i desideri degli autori con quelli degli utenti di screen reader e con quelli degli utenti con disabilità motorie consiste nell'utilizzare una tecnica che nasconde il collegamento di "salto di navigazione" fin quando l'utilizzatore non lo trovi con il tabulatore; a quel punto il collegamento diventa visibile agli utenti vedenti. Questo premette di prendere i vantaggi della funzionalità del collegamento sia agli utenti ciechi che a quelli vedenti.

Allo scopo di raggiungere questo obiettivo, il collegamento è nascosto nel suo stato di default - utilizzando la tecnica descritta in questo documento - ma diventa visibile quando riceve il focus dalla tastiera. In altre parole vengono creati due stile. Uno per il tag <a> ed uno per lo psuedo elemento a:focus. Lo stile per lo pseudo elemento a:focus sarà attivo solo quando l'utente arriverà col tabulatore al collegamento, e il collegamento ritornerà al suo stile di default (cioè scomparirà di nuovo) quando l'utente continuerà ancora con il tabulatore allontanandosi dal collegamento.

Codice di esempio n.3

Il seguente codice dovrebbe essere inserito nel foglio di stile:

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

La classe CSS dovrebbe essere poi applicata all'interno del tag dell'elemento:

<div id="skip"><a href="#content">Skip to Main Content</a></div>

L'unica controindicazione a questa idea, a livello concettuale, è che l'improvvisa apparizione di un collegamento precedentemente invisibile sarà un evento inatteso, e questo potrebbe confondere l'utente vedente con tastiera. Questo non sarà un problema per gli utenti di screen reader, perché essi non possono vedere lo schermo e l'apparizione improvvisa del collegamento. Dalla loro prospettiva, il collegamento era sempre là, perché, infatti, era là. Era solo non visibile agli occhi. Gli utenti con il mouse non vedranno mai il collegamento, cosicché questo non è un loro problema.

Form all'interno di tabelle di dati

Per un utente vedente, le celle di intestazione di una tabella possono avere la duplice funzione di organizzare il contenuto della tabella e di fornire anche etichette per gli elementi all'interno di quella tabella, come si può vedere in questa immagine in basso di una form inserita all'interno di una tabella di dati

Figura 1. Tabella di dati usata per fornire "etichette" agli elementi della form

Per un utente di screen reader, le intestazioni (header) di riga e colonna sono a volte utili per capire il layout della tabella, ma le intestazioni non funzionano da etichette della form. Quando gli utenti di screen reader navigano con il tabulatore da un elemento all'altro, essi non sentiranno le intestazioni della tabella. Infatti, essi non sentiranno proprio alcuna etichetta. Gli screen reader hanno bisogno di etichette di testo. Queste etichette dovrebbero essere inserite nel tag <label> così come raccomandato dalle WCAG 1.0. Etichettature e raggrupamenti aggiuntivi possono essere realizzati utilizzando i tag <fieldset> and <legend>.

In questo particolare esempio, comunque, l'utente vedente non riceverà alcun beneficio aggiuntivo dalle etichette di testo visive. Per loro, queste etichette di testo sarebbero ridondanti con le intestazioni di tabella, poiché in un senso visivo, queste intestazioni forniscono già etichette adeguate per gli elementi della form. Ecco come la stessa tabella sarebbe vista dagli utenti vedenti se fossero aggiunte le etichette di testo standard, con i tag <label>, <fieldset>, and <legend>:

Figura 2. form con etichette all'interno dii una tabella di dati.

Nonostante gli utenti di screen reader saranno felici con questa versione della tabella, la maggior parte degli utenti vedenti troveranno il testo aggiuntivo una distrazione. Per gli utenti vedenti, la tabella è diventata solo più affollata di parole e più difficile da capire. Questa è una situazione nella quale l'aggiunta di markup a beneficio degli utenti di screen reader interferisce con l'accessibilità, o almeno la facilità di utilizzo del contenuto da parte degli utenti vedenti.

Codice di esempio n. 4

Il seguente codice dovrebbe essere inserito nel foglio di stile:

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

La classe CSS dovrebbe essere poi applicata all'interno del tag dell'elemento nascosto:

…

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

…

Elementi Multipli di form che “Condividono” una etichetta singola

Un altro esempio di apparente incompatibilità fra le necessità degli utenti di screen reader e quelli vedenti si verifica quando gli autori creano elementi multipli di form che sembrano appartenere alla stessa etichetta. Un esempio comune si verifica quando vengono utilizzati due o più elementi di input per i numeri di telefono.

Figura 3. Etichette di form che si applicano a più di un elemento

Nell'immagine precedente, la maggioranza degli utenti vedenti in Nord America capiranno che le aree di input di testo corrispondono alle differenti sezioni dei numeri di telefono standard. Gli utenti di screen reader possono provare ad inserire il numero di telefono intero nel primo box. Quando scoprono che il box permette l'immissione di soli 3 caratteri, questo li farà confondere. Alcuni utenti saranno in grado di comprendere l'intero contesto dopo averlo sperimentato, ma questo tipo di sperimentazione prende del tempo e non è necessario.

L'approccio più ovvio a questo problema consiste nel combinare i singoli box di input in un unico box di input, e poi fornire l'etichetta appropriata. Questa può essere la migliore soluzione in molte circostanze. Ciononostante, la tecnica CSS può essere applicata anche a questa situazione.

Codice di esempio n. 5

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

La classe CSS dovrebbe essere poi applicata all'interno del tag dell'elemento nascosto:

<form method="post" action="">
<p>Phone number: 
(
<label for="area" class="hidden">Area code</label>
<input name="area" type="text" size="3" maxlength="3" id="area" />
)
<label for="first" class="hidden">first 3 digits</label>
<input name="first" type="text" size="3" maxlength="3" id="first" />
 -
<label for="last" class="hidden">last 4 digits</label>
<input name="last" type="text" size="4" maxlength="4" id="last" />
 
<label for="ext" class="hidden">extension</label>
<input name="ext" type="text" size="5" maxlength="5" id="ext" />
</p>
<p><input type="submit" name="Submit" value="Submit" /></p>
</form>

Fornire segnali contestuali agli utenti di screen reader

La stessa tecnica CSS può essere utilizzata per fornire segnali contestuali specialmente agli utenti di screen reader, piuttosto che a quelli vedenti. A condizione che non si abusi di uesta tecnica, gli utenti di screen reader possono trarre vantaggio dei messaggi di testo che spiegano loro il contesto del contenuto Web. Per esempio, i siti con sistemi complessi di menu sono spesso disegnati con interfacce grafiche che organizzano le gerarchie del menu in spazi visivi. "Tabulazioni" visive sono molto usate per questi scopi. Molto spesso, il sistema di menù è disegnato così che esso indichi la posizione dell'utente all'interno della gerarchia del menù. La maggior parte di questa informazione viene persa dagli utenti di screen reader poiché essa viene rappresentata solo visivamente. Può essere opportuno fornire frasi nascoste che permettono agli utenti di screen reader di orientarsi all'interno di tali strutture. Le frasi che possono esser utili ed appropriate da inserire all'interno del contenuto possono essere:

• Inizio del menù principale
• Fine del menù principale
• Inizio [e fine] del sottomenù Prodotti e Servizi
• Tu sei qui [seguito dal testo dell'attuale elemento del menù all'interno della gerarchia]
• Pubblicità [da posizionare prima di un banner pubblicitario, per esempio]

Attenzione: tutte queste frasi dovrebbero essere brevi e utilizzate solo in caso di necessità. Molti siti non hanno bisogno di utilizzare questo tipo di aiuto contestuale. Più semplice e chiaro è il design, meno bisogno esiste di utilizzare questa tecnica. Gli autori non dovrebbero bombardare gli utenti di screen reader con testo che fornisce loro poco o nessun beneficio. Questa tecnica può fornire importanti segnali contestuali che altrimenti sarebbero solo visivi, ma poiché gli utenti di screen reader devono ascoltare qualsiasi testo nella pagina, questi segnali dovrebbero essere pochi.

Codice di esempio n. 6

Il seguente codice dovrebbe essere inserito nel foglio di stile:

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

La classe CSS dovrebbe essere poi applicata al tag <label>:

<div class="hidden">Begin main menu.</div> 
… 
<div class="hidden">End main menu.</div> 

Conclusione

Quando la tecnica CSS qui presentata viene utilizzata per nascondere contenuto HTML, gli utenti vedenti non sapranno mai che il contenuto è là. Gli utenti di screen reader, d'altro canto, non sapranno mai che questo contenuto è invisibile agli utenti vedenti. Entrambi i tipi di utenti potranno utilizzare il contenuto in modo intuitivo, senza dover aggiustare poco e nulla nel markup. Così può fornire segnali contestuali importanti che sono altrimenti impossibili da conoscere per gli utenti di screen reader a causa della natura visiva di questi segnali. Quando usata in maniera giudiziosa, questa tecnica può diminuire la tensione fra la domanda di accessibilità e la domanda di design visuale. Non è la sola tecnica o metodo che può risolvere questo problema, ma è una di quelle che gli autori Web possono aggiungere al loro elenco di possibili soluzioni quando ce né bisogno.

Riferimenti

1. Bowman, Doug (2003). L'uso dell'immagine di sfondo per sostituire il testo. Recuperata il 29 aprile 2004 da http://www.stopdesign.com/also/articles/replace_text/.
2. Clark, J. (2003). Commenti sul metodo di Fahrner sulla sostituzione dell'immagine. Recuperata il 29 aprile 2004 da http://www.alistapart.com/articles/fir/.
3. Easton, B. (2003, September). Visibilità e screen reader. Recuperata il 29 aprile 2004 da http://css-discuss.incutio.com/?page=ScreenreaderVisibility.
4. Rundle, M. (2003, August 5). Sostituzione accessibile dell'immagine. Recuperata il 29 aprile 2004 da http://phark.typepad.com/phark/2003/08/accessible_imag.html.
5. Gilder, T. (2003). tecnica di trasformazione dell'immagine di Gilder. Recuperata il 29 aprile 2004 da http://blog.tom.me.uk/2003/08/07/.
6. U.S. Access Board (2001). Riassunto degli Standard della Sezione 508. Recuperata il 29 aprile 2004 da http://www.section508.gov/index.cfm?FuseAction=Content&ID=11#web.
7. W3C (1999). Linee Guida per l'Accessibilità del Contenuto Wen 1.0. Recuperata il 29 aprile 2004 da http://www.w3.org/TR/WCAG10/.

---

Parole chiavi, keywords: nascondere il contenuto, css, la tecnica XXXXXX, FIR, etichette nascoste di form

La home page dell'Osservatorio sulla Comunicazione