W3C

Tecniche CSS per le Linee Guida dell'Accessibilità dei Contenuti Web

W3C Nota 6 Novembre 2000

Questo documento è una traduzione delle Tecniche CSS per le Linee Guida dell'Accessibilità dei Contenuti Web.
Questo documento potrebbe contenere errori di traduzione.
La versione normativa, in lingua inglese, si trova a:

http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20001106/
Questa versione italiana tradotta è:
http://accessibility.comune.prato.it/tradotte/TR/WCAG10-CSS-TECHS/
Traduttori:
Gruppo di lavoro U.O. Rete Civica del Comune di Prato (in particolare Del Sapio Valentina, Denti Linda, Ferri Simone, Franchi Andrea, Giorgetti Claudia, Munastra Nadia, Nelli Enrico, Postiferi Vanessa, Tomassetti Costanza)
Questa versione:
http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20001106/
(plain text, PostScript, PDF, archivio tar gzippato dei file HTML, archivio zip dei file HTML)
Ultima versione
http://www.w3.org/TR/WCAG10-CSS-TECHS/
Versione precedente:
http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20000920/
Editori:
Wendy Chisholm, W3C;
Gregg Vanderheiden, Trace R & D Center, University of Wisconsin -- Madison;
Ian Jacobs, W3C

Estratto:

Questo documento descrive le tecniche per creare fogli di stile (CSS) accessibili. I fogli di stile sono definiti dalle Raccomandazioni W3C "CSS Livello 1" [CSS1] e "CSS Livello 2" [CSS2].
Questo documento intende aiutare gli autori di contenuti Web che desiderano dichiararsi conformi alle "Linee Guida per l'Accessibilità dei Contenuti del Web 1.0" ([WCAG10]). Anche se le tecniche di questo documento dovrebbero aiutare gli autori di CSS a rendersi conformi alle "Linee Guida per l'Accessibilità dei Contenuti del Web 1.0", non sono nè una garanzia di conformità nè l'unico modo in cui un autore può produrre contenuti conformi.

Il presente documento fa parte di una serie di documenti di tecniche per la creazione di contenuti accessibili per il Web. Per informazioni sugli altri documenti della serie, fare riferimento alle "Linee Guida sull'Accessibilità dei Contenuti del Web 1.0 -Tecniche" [WCAG10-TECHS].

Nota: Questo documento contiene alcuni esempi che illustrano soluzioni accessibili con i CSS ma anche esempi deprecati che illustrano cosa gli sviluppatori di contenuti non possono fare. Gli esempi deprecati sono evidenziati e i lettori dovrebbero approcciarsi ad essi con attenzione sono pensati solo a scopo illustrativo.

Stato del documento

Questa versione è stata pubblicata per correggere alcuni errori di link della precedente versione.

La versione di questo documento del 6 Novembre 2000 è una Nota nella serie di Note prodotte e approvate dal Web Content Accessibility Guidelines Working Group (WCAG WG). Questa Nota non è stata rivista e approvata dai membri del W3C. La serie di documenti sostituisce il singolo documento del 5 maggio 1999 W3C Note Techniques for Web Content Accessibility Guidelines 1.0.

Gli argomenti del documento precedente sono stati separati in documenti dedicati a specifiche tecnologie che possono evolversi indipendentemente gli uni dagli altri. Questi documenti, dedicati a specifiche tecnologie, permettono all'autore di focalizzarsi su una particolare tecnologia.

Mentre le "Linee Guida per l'accessibilità dei contenuti web" [WCAG10] sono un documento stabile, questa serie di documenti è in continua evoluzione a seconda dei cambiamenti delle tecnologie e delle scoperte da parte degli sviluppatori di tecniche sempre più efficaci per la progettazione dei contenuti web accessibili.

La lista dei cambiamenti apportati alla serie di documenti, così come la lista dei problemi risolti e da risolvere, sono disponibili. I lettori sono pregati di commentare i documenti e proporre soluzioni ai problemi. Siete pregati di inviare commenti dettagliati su questo documento all'indirizzo w3c-wai-gl@w3.org; sono disponibili gli archivi pubblici.

La versione inglese di queste specifiche è l'unica versione normativa. Potrebbero essere disponibili traduzioni di questo documento.

La lista degli errori conosciuti in questo documento è disponibile alla pagina "Errata in Web Content Accessibility Guidelines. Segnalate eventuali errori di questo documento a wai-wcag-editor@w3.org.

L'Iniziativa per l'accessibilità del web (WAI) del World Wide Web Consortium (W3C) rende disponibili una varietà di risorse sull'accessibilità del Web. Le linee guide dell'accessibilità WAI sono prodotte come parte dell' attività tecnica del WAI. Gli scopi del Gruppo di Lavoro dell'accessibilità per i contenuti web sono descitti alla pagina http://www.w3.org/WAI/GL/new-charter-2000.html

Una lista delle correnti raccomandazioni e altri documenti tecnici è disponibile alla pagina http://www.w3.org/TR/

Indice


1 Diminuzione di manutenzione e aumento di consistenza

Punti di controllo nella sezione: 14.3 Creare uno stile di presentazione che sia compatibile tra più pagine. [Priorità 3] .

2 Ridefinizione degli stili da parte degli utenti

Punti di controllo nella sezione: 11.2 Evitare l'utilizzo di tecnologie deprecate dal W3C. [Priorità 2] .

Per assicurare che l'utente possa controllare gli stili, i CSS2 cambiano la semantica dell'operatore "!important" definito nei CSS1. In CSS1, gli autori avevano l'ultima parola sulla visualizzazione degli stili. Nei CSS2, se lo stile utente contiene "!important", prende precedenza su qualunque regola del foglio di stile dell'autore. Questa è un' importante caratteristica per gli utenti che richiedono o devono evitare certe combinazioni o contrasti di colore e/o fonts grandi, etc... Per esempio, la seguente regola specifica la dimensione del font per il testo del paragrafo e calpesterebbe le regole del foglio di stile dell'autore di ugual peso:

Esempio.

 
P { font-size: 24pt ! important }

Nei CSS2 il valore 'inherit' - disponibile per ogni proprietà - le regole degli stili "!important" hanno maggiore priorità. Per esempio, le seguenti regole di stile forzano tutti i colori di sfondo a bianco e tutti i colori di primo piano a nero:

Esempio.

  
/*   Sets the text color to black   
and the background color to   
white for the document body.  */

BODY {     
  color: black ! important ;      
  background: white ! important;  
}

 /*   Causes the values of 'color' and 'background'  
to be inherited by all other elements,   
strengthened by !important. Note that this   
may be overridden by other, more specific,   
user styles.  */

* {   
  color: inherit ! important ;   
  background: inherit ! important;  
}

CSS2 include anche queste caratteristiche di controllo da parte dell'utente:

Per esempio, per disegnare una sottile linea nera attorno ad un elemento quando ha il focus, e una rossa quando è attivo, possono essere utilizzate le seguenti regole:

Esempio.

  
:focus  { outline: thick solid black }  
:active { outline: thick solid red }

3 Unità di misura

Punti di controllo in questa sezione: 3.4 Usare unità di misura relative al posto delle unità di misura assolute sia negli attributi HTML, sia nei valori delle proprietà dei CSS. [Priorità 2].

Tecniche:

Esempio.

Usare em per definire le misure dei font:

   H1 { font-size: 2em }

piuttosto che:

   H1 { font-size: 12pt }

Fine esempio.

Esempio

Usare le unità di lunghezza relativa in percentuali.

   BODY { margin-left: 15%; margin-right: 10%}

Fine esempio.

Esempio.

Usare le unità di lunghezza assolute soltanto quando le caratteristiche fisiche di output sono conosciute, come le immagini bitmap.

   .businesscard { font-size: 8pt }

Fine esempio.

4 Contenuto generato dai CSS

Punti di controllo in questa sezione:

Tecniche:

I CSS2 includono parecchi meccanismi che permettono al contenuto di essere generato dai CSS stessi:

I contenuti generati possono servire come identificatori per aiutare gli utenti nella navigazione di un documento e ad orientarsi quando non possono accedere attraverso gli indizi visivi di accesso quali gli scrollbars proporzionali, frames con tabelle di indici o contenuto, etc.

Per esempio, il seguente foglio di stile utente genererà le parole "Fine Esempio" alla fine di ogni esempio marcato con la seguente classe:

Esempio.

 
DIV.example:after {     
  content: Fine Esempio  
}

Gli utenti potrebbero anche utilizzare, per esempio, numeri di paragrafo per localizzare la posizione di lettura nel documento:

Esempio.

 
P:before {     
  content: counter(paragraph) ". " ;
    counter-increment: paragraph  
}

5 Font

Punti di controllo: 11.2 Evitare di utilizzare tutto ciò che è deprecato dal W3C. [Priorità 2] .

Tecniche:

Esempio.

Come ultima alternativa di font specificare sempre una famiglia di font:

   BODY { font-family: "Gill Sans", sans-serif }

Fine esempio.

Esempio.

<STYLE type="text/css">
   P.important { font-weight: bold }
   P.less-important { font-weight: lighter; font-size: smaller }
   H2.subsection { font-family: Helvetica, sans-serif }
</STYLE>

Fine esempio.

6 Effetti per lo stile del testo

Punto di controllo: 7.2 Fino a che gli user agent non permetteranno agli utenti di controllare il lampeggiamento, evitare di utilizzare il lampeggiamento dei testi (i.e. cambiare la presentazione ad intervalli regolari del tipo 'spento' e 'accesso'). [Priorità 2].

Per lo stile del testo possono essere usate le seguenti proprietà dei CSS:

7 Testo al posto di immagini

Punti di controllo: 3.3 Utilizzare fogli di stile per controllare il layout e la presentazione. [Priorità 2].

Gli sviluppatori dovrebbero utilizzare fogli di stile per dare lo stile al testo piuttosto che inserire il testo in delle immagini. Usare testo invece che immagini significa che l'informazione sarà disponibile per un gran numero di utenti (con sintetizzatori vocali, display braille, display grafici, etc.). Usare fogli di stile permetterà agli utenti di effettuare l'override degli stili definiti dall'autore e di cambiare colori o misura di font più facilmente.

Se è necessario utilizzare bitmap per dare effetto al testo (font speciali, trasformazioni, ombre, etc.) il bitmap deve essere accessibile (vedere la sezione su testi equivalenti e pagine alternative).

Esempio.

In questo esempio, l'immagine inserita mostra il i caratteri ingranditi e rossi "Esempio", e è catturato dal valore dell'attributo "alt".

<P>Questo è un 
   <IMG src="BigRedExample.gif" alt="esempio"> 
   di cosa intendiamo.
</P>

Fine esempio.

8 Formattazione e posizionamento del testo

Punti di controllo: 3.3 Usare fogli di stile per controllare il layout e la rappresentazione. [Priorità 2] .

Le seguenti proprietà CSS2 possono essere utilizzate per controllare la formattazione e la posizione del testo:

Il seguente esempio mostra come usare i fogli di stile per generare un effetto di drop-cap.

Esempio.

<HEAD>
<TITLE>Drop caps</TITLE>
<STYLE type="text/css">
      .dropcap { font-size : 120%; font-family : Helvetica } 
</STYLE>
</HEAD>
<BODY>
<P><SPAN class="dropcap">O</SPAN>nce upon a time...
</BODY>

Nota. Al momento della stesura di questo documento, lo pseudo-elemento ':first-letter' che permette agli sviluppatori di riferirsi alla prima lettera di un pezzo di testo, non è ampiamente supportato.

9 Colori

9.1 Contrasto dei colori

Punti di controllo in questa sezione:

Tecniche:

Esempio.

Usa numeri, non nomi, per definire i colori:

   H1 {color: #808000}
   H1 {color: rgb(50%,50%,0%)}

Fine esempio.

Esempio deprecato.

 H1 {color: red}

Fine esempio.

Usa queste proprietà dei CSS per specificare i colori:

Assicurarsi che il colore del testo e dello sfondo contrastino abbastanza. Se è specificato un colore per il testo, è meglio specificare sempre un colore per lo sfondo (e viceversa).

9.2 Assicurarsi che tutte le informazioni veicolate dal colore siano disponibili anche senza

Punti di controllo in questa sezione:

Accertarsi che le informazioni non siano trasmesse solamente col colore. Per esempio, quando viene chiesto un inserimento agli utenti, non scrivere "Selezionare un articolo fra quelli elencati in verde". Assicurarsi, invece, che le informazioni siano disponibili attraverso altri effetti di stile (fra cui un qualsiasi effetto del font) o tramite il contesto (inserimento di link comprensibili).

Per esempio, in questo documento, gli esempi sono richiamati di default (tramite i fogli di stile) come segue:

Test veloce. Per esaminare se il vostro documento funziona anche senza colori, esaminalo con un monitor monocromatico o con un browser con i colori non attivi. Oppure, prova ad impostare una combinazione di colori in un browser che usi soltanto nero, bianco, ed i quattro grigi browser-safe e controlla come vengono mostrate le pagine.

Test veloce. Per esaminare se il contrasto di colore è sufficiente per essere letto dalle persone con problemi legati al colore o da quelli con i video a bassa risoluzione, stampa le pagine su una stampante con i soli colori nero e bianco (con il background ed i colori che compaiono nella sola gradazione di grigio). Provare anche prendendo la stampa e copiandola per tre o quattro volte per vedere come la pagina via via si degrada. Questo mostrerà dove c'è bisogno di aggiungere degli effetti ridondanti (per esempio: i collegamenti ipertestuali sono di solito sottolineati sulle pagine web), o se le indicazioni sono troppo piccole.

Per maggiori informazioni sui colori e sui contrasti, controlla questo: [LIGHTHOUSE] .

10 Fornire gli indizi contestuali nelle liste HTML

Punti di controllo in questa sezione:

Per gli sviluppatori è consigliato usare l'UL per le liste dove non esiste un preciso ordinamento (liste non ordinate) e OL per le liste in cui occorre inserire un ordine di successione (liste ordinate con l'uso di marcatori appropriati), combinate con CSS per fornire gli indizi contestuali.

Il seguente foglio di stile illustra come fornire i numeri per le liste annidate, generate con gli elementi OL o e UL. Gli articoli sono numerati come "1", "1.1", "1.1.1", ecc.

Esempio

	<STYLE type="text/css">
		UL, OL { counter-reset: item }
		LI { display: block }
		LI:before { content: counters(item, "."); counter-increment: item }
	</STYLE>
	

Fine esempio

Fino a quando i CSS2 non saranno largamente supportati dai browser o i browser permetteranno agli utenti di controllare la visualizzazione delle liste attraverso altri metodi, gli autori dovrebbero preoccuparsi di fornire anche informazioni contestuali nelle liste nidificate. Il seguente meccanismo con il CSS1 mostra come nascondere la fine di una lista quando i fogli di stile sono attivi, e rivelarlo quando i fogli di stile non sono attivati, quando i fogli di stile dell'utente sovrascrivono il meccanismo per nascondere, o quando i fogli di stile non sono supportati .

Esempio

	  <STYLE type="text/css">
		  .endoflist { display: none }
	  </STYLE>
	  <UL>
		 <LI>Carta:
			<UL>
			   <LI>Buste
			   <LI>Blocco note
			   <LI>Carta da lettere
			   <LI>Carta per manifesto 
			   <span class="endoflist">(Fine della carta)</span>
			</UL>
		 <LI>Penne:
			<UL>
			   <LI>Penne blue
			   <LI>whiteboard pens (Gessetti o penna per lavagna)
			   <span class="endoflist">(Fine delle penne)</span>
			</UL>
		 <LI>Fasteners:
			<UL>
			   <LI>Fermagli per la carta
			   <LI>(Puntine per la spillatrice)
			   <LI>Big lengths of rope. 
			   <span class="endoflist">(End of Fasteners)</span>
			</UL> 
		 <span class="endoflist">(Fine delle forniture per l'ufficio)</span>
	  </UL>
	

Fine esempio

Nota: Questo esempio non aiuta il caso di spostamento a capo di articoli della lista. Con uno sforzo in più, l'autore potrebbe mettere un marcatore simile alla fine di ogni elemento della lista.

11 Layout, positioning, layering, and alignment

Punti di controllo in questa sezione:

Layout, posizionamento, livelli, e allineamento dovrebbero essere fatti con i fogli di stile (favorendo l'utilizzo di float e posizionamento assoluto con CSS):

11.1 Se si usa un'immagine come spaziatore

Fornire testi equivalenti per ogni immagine, incluse immagini invisibili o trasparenti.

Se gli sviluppatori di contenuto non possono utilizzare fogli di stile e devono usare immagini trasparenti e invisibili (per esempio con IMG) per la disposizione di immagini sulla pagina, dovrebbero specificare l'alt="".

Esempio deprecato.

Gli autori non dovrebbero usare spazi per il valore dell'attributo "alt" al solo scopo di impedire che le parole risultino attaccate nel caso in cui l'immagine non venga caricata:

  il mio tema richiede un grosso spazio <IMG src="10pttab.gif" alt="&nbsp;&nbsp;&nbsp;"> qui

Nel prossimo esempio, un'immagine è utilizzata per forzare il posizionamento di un'altra immagine:

   <IMG src="spacer.gif" alt="spacer">
   <IMG src="colorfulwheel.gif" alt="La ruota della fortuna">

Fine Esempio

12 Rules and borders

Punti di controllo in questa sezione: 6.1 Organizzare i documenti in modo che possano essere letti senza i fogli di stile. Per esempio, quando un documento HTML viene reso senza i fogli di stile associati, deve essere sempre possibile leggere il documento. [Priorità 1] .

Gli elementi e i bordi possono dare il concetto "della separazione" in un contesto visivo, ma questo concetto non è valido in altri contesti..

Usa queste proprietà del CSS per specificare gli stili del bordo:

Gli autori dovrebbero usare i fogli di stile per creare regole e bordi.

Esempio.

In questo esempio, l'elemento H1 avrà un bordo superiore di spessore uguale a 2px, di colore rosso e sarà separato dal resto del contenuto di 1em:

   <HEAD>
   <TITLE>Linea rossa con i fogli di stile</TITLE>
   <STYLE type="text/css">
        H1 { padding-top: 1em; border-top: 2px red }
   </STYLE>
   </HEAD>
   <BODY>
   <H1>Capitolo 8 - Dispositivi uditivi e tattili</H1>
   </BODY>

Fine Esempio

Se un elemento (per esempio, l'elemento HR) vieno usato per indicare la struttura, sarebbe buona norma accertarsi che la struttura venga definita anche nella modalità non visuale (per esempio, usando marcatori strutturali, o di struttura).

Esempio.

In questo esempio, l'elemento DIV è usato per creare una barra di navigazione, che includerebbe un separatore orizzontale.

   <DIV class="barra-navigazione">
      <HR>
      <A rel="Next" href="next.html">[Next page]</A>
      <A rel="Previous" href="previous.html">[Prevous page]</A>
      <A rel="First" href="first.html">[First page]</A>
   </DIV>

Fine Esempio

13 Usare i fogli di stile al posto dei tag di posizionamento per trasformare in modo elegante le pagine

Punto di controllo in questa sezione:

Usando le proprietà di posizionamento di CSS2, il contenuto può essere visualilzzato in qualunque posizione. L'ordine in cui gli oggetti appaiono sullo schermo potrebbe essere differente dall'ordine in cui sono trovati nel codice del documernto. Il seguente esempio dimostra alcuni principi

  1. Il testo appare visualmente nel browser in un ordine diverso rispetto a quello che c'è nel codice delle pagine
  2. Il posizionamento con CSS può essere usato per creare effetti tabulari. Un elemento TABLE potrebbe essere usato per creare gli stessi effetti

Nota che una classe è definita per ogni oggetto che deve essere posizionato. L'uso di "id" potrebbe essere sostituito per "class" in questi esempi. "Class" è stato usato perchè nell'esempio, gli oggetti sono replicati e quindi non unici.

Esempio deprecato.

<head><style type="text/css">
  .menu1 { position: absolute; top: 3em; left: 0em; 
           margin: 0px; font-family: sans-serif; 
           font-size: 120%; color: red; background-color: white }  
  .menu2 { position: absolute; top: 3em; left: 10em; 
           margin: 0px; font-family: sans-serif; 
           font-size: 120%; color: red; background-color: white }
  .item1 { position: absolute; top: 7em; left: 0em; margin: 0px }
  .item2 { position: absolute; top: 8em; left: 0em; margin: 0px }
  .item3 { position: absolute; top: 9em; left: 0em; margin: 0px }
  .item4 { position: absolute; top: 7em; left: 14em; margin: 0px }
  .item5 { position: absolute; top: 8em; left: 14em; margin: 0px }
  #box { position: absolute; top: 5em; left: 5em } 
</style></head>
<body>
<div class="box">
  <span class="menu1">Products</span> 
  <span class="menu2">Locations</span> 
  <span class="item1">Telephones</span> 
  <span class="item2">Computers</span> 
  <span class="item3">Portable MP3 Players</span> 
  <span class="item5">Wisconsin</span> 
  <span class="item4">Idaho</span>
</div>
</body>

Fine esempio.

Quando i fogli di stile sono applicati, il testo appare in due colonne. Gli elementi delle classi "menu1" (Products) e "menu2" (Location) appaiono come intestazioni di colonne. "Telephones, Computers, e Portable MP3 Players" sono elencati sotto Products e "Wisconsin" e "Idaho" sono elencati sotto Locations come dimostrato in questo screen shot:

Come viene a video l'esempio di codice con i fogli di stile applicati

Quando i fogli di stile non sono applicati, tutto il testo appare in una linea di parole, "Products Locations Telephones Computers Portable MP3 Players Wisconsin Idaho". Appaiono nell'ordine in cui sono scritti nel codice. Di conseguenza, le due parole che con i fogli di stile applicati apparirebbero come intestazioni delle colonne, senza i fogli di stile appaiono semplicemente come le prime due parole, visto che nel codice sono state scritte per prime:

Come viene a video l'esempio di codice con i fogli di stile applicati

Il seguente esempio mostra che si può ottenere la stessa visualizzazione in un browser che supporta i fogli di stile, dando allo stesso tempo una presentazione più significativa quando i fogli di stile non sono applicati. Al contenuto sono stati applicati marcatori strutturali (liste di definizione). Nota che i margini sono stati settati a 0, dato che nei browser HTML le liste sono visualizzate con un margine settato nell'elemento DD.

Esempio.

<head><style type="text/css">
  .menu1 { position: absolute; top: 3em; left: 0em; 
           margin: 0px; font-family: sans-serif; 
           font-size: 120%; color: red; background-color: white }  
  .menu2 { position: absolute; top: 3em; left: 10em; 
           margin: 0px; font-family: sans-serif; 
           font-size: 120%; color: red; background-color: white }
  .item1 { position: absolute; top: 7em; left: 0em; margin: 0px }
  .item2 { position: absolute; top: 8em; left: 0em; margin: 0px }
  .item3 { position: absolute; top: 9em; left: 0em; margin: 0px }
  .item4 { position: absolute; top: 7em; left: 14em; margin: 0px }
  .item5 { position: absolute; top: 8em; left: 14em; margin: 0px }
  #box { position: absolute; top: 5em; left: 5em } 
</style></head>
<body>
<div class="box">
<dl>
  <dt class="menu1">Products</dt>
    <dd class="item1">Telephones</dd>
    <dd class="item2">Computers</dd>
    <dd class="item3">Portable MP3 Players</dd>
  <dt class="menu2">Locations</dt>
   <dd class="item4">Idaho</span>
   <dd class="item5">Wisconsin</span>
  </dt>
</dl>
</div>
</body>

Fine esempio.

Quando sono applicati i fogli di stile, tutto viene visualizzato come in precedenza. Comunque, adesso, quando i fogli di stile non sono applicabili (nel senso non interpretabili dal browser o disabilitati dall'utente ... ndt), il testo appare in una lista di definizione invece che in una riga continua di parole una dietro l'altra.
Ciò che viene visualizzato come colonna di intestazione quando i fogli di stile sono applicati, appare come definizione di termini quando i fogli di stile non sono applicabili (nel senso non interpretabili dal browser o disabilitati dall'utente ... ndt), come dimostrato nella schermata che segue.

Example code as it appears when style sheets not applied but transform gracefully

Nota. Sperimenta la differenza tra questi esempi: test file con fogli di stile che garantiscono una trasformazione elegante

14 Creare movimento con fogli di stile e scripts

Punti di controllo di questa sezione: 7.3 Fino a quando gli user agents non permetteranno agli utenti di bloccare il movimento del contenuto, evitare di inserire oggetti che movimentano la pagina. [Priorità 2]

15 Fogli di stile uditivi

Punti di controllo di questa sezione: 11.3 Inserisci nelle tue pagine le informazioni necessarie perchè l'utente possa ricevere i documenti in base alle sue preferenze (ad esempio linguaggio, tipo di contenuto ... ecc.) [Priorità 3].

Le proprietà uditive dei CSS2 forniscono informazioni agli utenti non vedenti e agli utenti di browser vocali nello stesso modo in cui le fonti forniscono informazioni visive. L'esempio che segue mostra come diverse qualità di suono (incluso 'voice-family', che è qualcosa come una fonte uditiva) possono far capire all'utente che il contenuto ascoltato è un titolo.

Esempio.

 
H1 {     
  voice-family: paul;     
  stress: 20;     
  richness: 90;     
  cue-before: url("ping.au")     
}

Le seguenti proprietà sono relative ai fogli di stile uditivi definiti nelle specifiche CSS2.

Ancora, la proprietà 'speak-header' specifica quante volte le informazioni di intestazione devono essere ripetute durante la lettura del contenuto di una tabella (es: solo all'inizio della colonna/riga oppure per ogni cella).

16 Accesso a rappresentazioni alternative del contenuto

Punti di controllo per questa sezione: 11.3 Fornire le informazione necessarie perché gli utenti possano ricevere i documenti secondo le loro preferenze (es: language, content type, etc.) [Priority 3] .

I CSS2 permettono agli utenti un accesso alternativo alla rappresentazione del contenuto, che è specificato nei seguenti valori degli attributi quando sono usati assieme:

Nell'esempio seguente, il valore dell'attributo alt per l'elemento IMG è reso dopo l'immagine (visivamente, con il suono, ecc.):

Esempio:

 IMG:after {
    content: attr(alt)
 }

Notare che il valore dell'attributo è visualizzato anche se l'immagine non c'è (per esempio, se l'operatore ha disabilitato le immagini nell’interfaccia-utente).

17 Tipi di Media

Punti di controllo in questa sezione: 11.3 Fornire agli utenti le informazioni necessarie affinchè siano adattabili secondo le loro preferenze (per esempio, la lingua, il tipo di contenuto, ecc..) [Priorità 3] .

Il CSS media-types (usato con l'istruzione @media) permette agli autori di progettare dei fogli di stile che forniscano i documenti nel modo più appropriato per determinati dispositivi. Questi CSS possono adattare il contenuto per la presentazione sui dispositivi braille, su sintetizzatori di voce, o dispositivi "solo testo". Usando l'istruzione "@media" si possono inoltre ridurre i tempi di scarico, permettendo ai browser di ignorare le istruzioni che non possono applicare.


18 Riferimenti

Per l'ultima versione di ogni specifica del W3C, prego consulatate la lista di W3C Technical Reports all'indirizzo: http://www.w3.org/TR.

[CSS1]
"CSS, level 1 Recommendation", B. Bos, H. Wium Lie, eds., 17 December 1996, revised 11 January 1999. This CSS1 Recommendation is http://www.w3.org/TR/1999/REC-CSS1-19990111. The latest version of CSS1 is available at http://www.w3.org/TR/REC-CSS1.
[CSS2]
"CSS, level 2 Recommendation", B. Bos, H. Wium Lie, C. Lilley, and I. Jacobs, eds., 12 May 1998. This CSS2 Recommendation is http://www.w3.org/TR/1998/REC-CSS2-19980512/. L'ultima versione dei CSS2 è disponibile all'indirizzo http://www.w3.org/TR/REC-CSS2.
[WCAG10]
"Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, and I. Jacobs, eds., 5 May 1999. This WCAG 1.0 Recommendation is http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/.
[WCAG10-TECHS]
"Techniques for Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, I. Jacobs, eds. Questo documento spiega come implementare i punti di controllo definito nelle "Web Content Accessibility Guidelines 1.0". L'ultimo abbozzo delle tecniche è disponibile all'indirizzo http://www.w3.org/TR/WCAG10-TECHS/.

19 Risorse

Nota: il W3C non garantisce la stabilità di ciascuno dei seguenti riferimenti al di fuori del suo controllo. Questi riferimenti sono inclusi per convenienza. Il riferimento ad un prodotto non significa l'approvazione del prodotto stesso.

19.1 Altre linee guida

[UWSAG]
"The Unified Web Site Accessibility Guidelines", G. Vanderheiden, W. Chisholm, eds. The Unified Web Site Guidelines è stato compilato da Trace R & D Center all'Università del Wisconsin con stanziamento di fondi da il National Institute on Disability and Rehabilitation (NIDRR), U.S. Department of Education.

19.2 Risorse di accessibilità

[LIGHTHOUSE]
The Lighthouse offre informazioni riguardo colori e contrasti accessibili

20 Ringraziamenti

Web Content Guidelines Working Group Co-Chairs:
Jason White, University of Melbourne
Gregg Vanderheiden, Trace Research and Development
W3C Team contact:
Wendy Chisholm
Vogliamo ringraziare le seguenti persone che hanno contribuito con il loro tempo e con le loro osservazioni a formare queste linee guida:
Harvey Bingham, Kevin Carey, Chetz Colwell, Neal Ewers, Geoff Freed, Al Gilman, Larry Goldberg, Jon Gunderson, Eric Hansen, Phill Jenkins, Leonard Kasday, George Kerscher, Marja-Riitta Koivunen, Josh Krieger, Chuck Letourneau, Scott Luebking, William Loughborough, Murray Maloney, Charles McCathieNevile, MegaZone (Livingston Enterprises), Masafumi Nakane, Mark Novak, Charles Oppermann, Mike Paciello, David Pawson, Michael Pieper, Greg Rosmaita, Liam Quinn, Dave Raggett, T.V. Raman, Robert Savellis, Jutta Treviranus, Steve Tyler, and Jaap van Lelieveld

Icona di livello tripla A, W3C-WAI Web Content Accessibility Guidelines 1.0