Note sulle Tecniche CSS per le WCAG 1.0

Queste note di studio si basano sulla Nota W3C del 6 novembre 2000. La traduzione è mia. Per suggerimenti, commenti o altro scrivete a gabriele.romanato@gmail.com.

Nota preliminare

Questa è la traduzione in italiano del documento W3C che trovate su http://www.w3.org/TR/WCAG10-CSS-TECHS/. L'unica versione normativa è quella inglese. Tutti i diritti riservati al W3C. Gli errori nel presente documento sono da imputarsi al traduttore e non al W3C.

Questo documento si trova su Diodati.org.

Contenuti

1 Diminuire la manutenzione e aumentare la coerenza

Punti di controllo di questa sezione: 14.3 Creare una presentazione di stile che sia coerente nelle varie pagine. [Priorità 3] .

Nota 1

A proposito dell'usare un numero minimo di fogli di stile, sarebbe stato assai opportuno citare la regola @import, che ci permette di evitare di dover riscrivere regole identiche semplicemente importando tali regole in un altro foglio di stile.

Leggiamo infatti nelle specifiche CSS2 che:

La regola '@import' permette agli utenti di importare regole di stile da altri fogli di stile. Ogni regola @import deve precedere tutte gli insiemi di regole in un foglio di stile. La parola chiave '@import' deve essere seguita dall'URI del foglio di stile da includere. È permessa anche una stringa; verrà interpretata come se avesse intorno url(...).

Le righe seguenti sono equivalenti nel significato ed illustrano entrambe le sintassi di '@import' (una con "url()" ed una con una semplice stringa):

@import "mystyle.css";
@import url("mystyle.css");

Affinchè i programmi utente possano evitare di reperire risorse da tipi di media non supportati, gli autori possono specificare regole @import dipendenti dai media. Queste importazioni condizionali specificano i tipi di media, separati da virgola, dopo l'URI.

Le seguenti regole hanno lo stesso effetto del foglio di stile racchiuso in una regola @media per lo stesso media, ma in questo caso evitano al programma utente un download inutile.

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;

In assenza di tipi di media, l'importazione è incondizionale. Specificare 'all' per il medium ha lo stesso effetto.

(CSS2)

Per quanto riguarda i fogli di stile incorporati (ossia quelli contenuti all'interno dell'elemento style), a volte non è possibile evitarne l'inserimento a causa delle dimensioni del sito e dei tempi di realizzazione. È infatti molto più semplice creare regole di stile ad hoc per una pagina piuttosto che creare ogni volta un nuovo foglio di stile, posizionarlo all'interno della cartella stabilita e collegarlo alla pagina. Questo suggerimento è a mio avviso da leggersi come "usateli con moderazione".

Gli stili inline sono da evitare perchè rendono confusa la pagina, aumentano la complessità della cascata ed in fase di debugging possono creare dei conflitti inaspettati.

Sull'uso dell'attributo class leggiamo nelle specifiche CSS2:

Nota. I CSS danno così tanto potere all'attributo "class", che gli autori potrebbero strutturare un proprio "linguaggio del documento" basato su elementi con quasi nessuna presentazione associata (come DIV e SPAN nell'HTML) e assegnargli informazioni di stile attraverso l'attributo "class". Gli autori dovrebbero evitare questa pratica, poichè gli elementi strutturali del linguaggio del documento hanno spesso significati riconosciuti ed accettati, cosa che le classi definite dagli autori possono non avere.

(CSS2)

È opportuno tenere presente questa nota quando si creano delle classi.

2 Sovrascrittura utente degli stili

Punto di controllo di questa sezione: 11.2 Evitare caratteristiche deprecate delle tecnologie W3C. [Priorità 2] .

Per assicurare che gli utenti possano controllare gli stili, i CSS2 hanno cambiato la semantica dell'operatore "!important" definito nei CSS1. Nei CSS1, gli autori avevano sempre l'ultima parola sugli stili. Nei CSS2, se un foglio di stile utente contiene "!important", esso ha la precedenza su ogni altra regola applicabile nel foglio di stile dell'autore. Si tratta di una caratteristica importante per gli utenti che vogliono o devono evitare alcune combinazioni o contrasti di colore, o utenti che hanno bisogno di font grandi ecc. Per esempio, la seguente regola specifica una dimensione grande del font per un paragrafo di testo, regola che sovrasciverà un regola dell'autore di ugual peso:

Esempio.

 
P { font-size: 24pt ! important }

Il valore CSS2 'inherit' - disponibile per ogni proprietà - rende compatte le regole "!important" che governano quasi tutti i documenti. Per esempio, le seguenti regole di stile forzano tutti gli sfondi sul bianco ed i colori di primo piano sul 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  
}

I CSS2 comprendono anche queste caratteristiche per il controllo da parte dell'utente:

Per esempio, per disegnare una linea spessa nera attorno ad un elemento quando questo ha il focus, e una linea spessa rossa quando è attivo, si possono usare le seguenti regole:

Esempio.

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

Nota 2

In realtà queste caratteristiche, su cui si faceva molto affidamento ai tempi della stesura della Nota W3C, si sono rivelate fallimentari a lungo andare per la scarsa implementazione avuta. Infatti:

3 Unità di misura

Punti di controllo di questa sezione: 3.4 Si usino unità relative in luogo di quelle assolute nei valori degli attributi del linguaggio di marcatura ed in quelli delle proprietà dei fogli di stile. [Priorità 2] .

Tecniche:

Esempio.

Si usi em per le dimensioni dei font, come in:

H1 { font-size: 2em }

piuttosto che

H1 { font-size: 12pt }

Esempio.

Si usino unità di misura relative e percentuali.

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

Esempio.

Si usino unità di misura assolute sono quando le caratteristiche del media di output sono conosciute.

.businesscard { font-size: 8pt }

Nota 3

Qui occorre fare una precisazione a proposito delle unità di misura relative. Attualmente si hanno dei risultati quasi del tutto omogenei tra i vari browser solo per quanto riguarda il dimensionamento relativo dei font. Si raccomanda di non usare unità assolute per i font anche perchè Internet Explorer per Windows non ne permette il ridimensionamento o l'ingrandimento. Risultati quasi omogenei si ottengono anche con le parole chiave assolute ('xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large'), anche se versioni obsolete di alcuni browser possono presentare dei problemi dovuti ad un fattore di scalamento differente (vedi Internet Explorer 5 per Windows).

A tal proposito, presupponendo che 'medium' equivalga a 16px, si ottengono le seguenti approssimazioni:

Parola chiave Fattore di scalamento: 1.5 Fattore di scalamento: 1.2
xx-small 5px 9px
x-small 7px 11px
small 11px 13px
medium 16px 16px
large 24px 19px
x-large 36px 23px
xx-large 54px 28px

È da notare come Internet Explorer per Windows permetta il ridimensionamento dei font quando questi sono espressi con parole chiave.

Per quanto riguarda le unità di misura relative applicate al layout, il discorso si complica ulteriormente. In linea di massima, i browser onorano le dichiarazioni con valori positivi, anche se queste a volte possono causare problemi (tipico il caso di Internet Explorer 6 - e inferiori - per Windows ed i menu costruiti col 'padding' in percentuale). Per quanto riguarda i valori negativi come:

h1 {text-indent: -2em;}
span.note {margin-left: -15%;}

possono esservi dei problemi nel calcolo dell'esatta posizione dell'elemento. In generale, i browser devono fare una "congettura" sulla reale posizione dell'elemento, specie se a questi valori si assomma il posizionamento assoluto, relativo o flottante. I problemi maggiori si hanno in Internet Explorer 6 (e inferiori) per Windows, che spesso fa sparire l'elemento dalla finestra di visualizzazione o lo posiziona in modo abnorme.

Infine, c'è da considerare il fatto che gli autori alle prime armi in genere non hanno chiaro il meccanismo delle unità di misura relative, e questo li spinge ad usare dimensioni assolute per i layout. Questo comportamento, a mio avviso, non è da condannare. Semplicemente, si usi l'accortezza di far rientrare il layout nella canonica dimensione di 800x600 e ci si assicuri che anche con forti ingrandimenti del testo tale layout non crolli a livello strutturale.

4 Contenuto generato

Punti di controllo di questa sezione:

Tecniche:

I CSS2 comprendono diversi meccanismi che consentono di generare il contenuto con i fogli di stile:

Il contenuto generato può dare dei marcatori per aiutare gli utenti a navigare un documento e a non perdere l'orientamento quando non hanno accesso a suggerimenti visuali come barre di scorrimento orizzontali proporzionali, frame con tavole dei contenuti, ecc.

Per esempio, il seguente foglio di stile utente genererà le parole "End Example" dopo ogni esempio marcato con un valore di classe speciale nel documento:

Esempio.

 
DIV.example:after {     
content: End Example  
}

Gli utenti potrebbero anche numerare, ad esempio, i paragrafi per poter localizzare la loro posizione di lettura attuale in un documento:

Esempio.

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

Nota 4

Come detto in precedenza, poichè questa caratteristica CSS non viene supportata da Internet Explorer, ha nella realtà un uso assai limitato.

C'è di più: all'epoca della stesura delle specifiche HTML 4 si confidò talmente nelle potenzialità del contenuto generato che si decise di deprecare l'attributo start delle liste ordinate (ol). Tale attributo permette di far partire la numerazione da un determinato punto, per esempio 3. Si pensò di sostituirlo con:

ol {list-style: none; counter-reset: item;}
li:before {
counter-increment: item;
content: counter(item) ". ";
}

Usando questo codice in un documento HTML, posso far continuare la numerazione della lista anche se questa è stata interrotta con la chiusura e poi la riapertura di un nuovo elemento ol. Tuttavia far affidamento sul contenuto generato in questo caso è sbagliato, poichè:

In questo caso la fiducia eccessiva nell'implementazione non è stata ben riposta. A mio avviso, in casi come questo si dovrebbe fare affidamento più sulla struttura HTML che non su quella presentazionale (CSS).

Nota su Opera

Opera Voice supporta le seguenti proprietà:

5 Font

Punti di controllo di questa sezione: 11.2 Evitare le caratteristiche deprecate delle tecnologie W3C. [Priorità 2] .

Tecniche:

Esempio.

Specificare sempre un font generico di ripiego:

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

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>

Nota 5

Brevissime considerazioni:

6 Effetti dello stile del testo

Punti di controllo di questa sezione: 7.2 Finchè i programmi utente consentono agli utenti di controllare il lampeggiamento, si eviti di far lampeggiare il contenuto (ossia cambiare la presentazione ad una velocità regolare, come accendendo o spegnendo). [Priorità 2] .

Le seguenti proprietà CSS2 possono essere usate per dare uno stile al testo:

Nota 6

Alcune considerazioni:

7 Testo invece di immagini

Punti di controllo di questa sezione: 3.3 Si usino i fogli di stile per controllare il layout e la presentazione. [Priorità 2] .

Chi sviluppa contenuti per il Web dovrebbe usare i fogli di stile per il testo invece che rappresentare il testo con immagini. Usare il testo invece di immagini vuol dire che l'informazione sarà disponibile ad un numero maggiore di utenti (con sintetizzatori vocali, display braille, display grafici ecc.). Usare i fogli di stile consente anche agli utenti di sovrascrivere gli stili dell'autore e cambiare le dimensioni dei font o i colori con maggiore facilità.

Se si reputa necessario usare un bitmap per creare un effetto testuale (font speciale, transformazione, ombre, ecc.), il bitmap deve essere accessibile (si vedano le sezioni sugli equivalenti testuali e pagine alternative).

Esempio.

In questo esempio l'immagine inserita mostra la scritta "Example" in grandi caratteri rossi e il suo contenuto è catturato dall'attributo "alt"

<P>This is an 
<IMG src="BigRedExample.gif" alt="example"> 
of what we mean.
</P>

Nota 7

Questa tecnica entra in crisi quando il contenuto testuale è considerevole. In questo caso useremo una tecnica di sostituzione del testo con immagini tramite i CSS. Esempio:

<p>
Lorem ipsum dolor sit amet
et ibam forte via sacra
sicut meus est mos.
</p>

Vogliamo sostituire il testo con un immagine che mostri, poniamo, una scritta gotica antica, ossia con un font molto raro. Creiamo quindi la nostra immagine con un programma come Photoshop con il font scelto. A questo punto ritocchiamo la marcatura:

<p>
<span class="hidden">Lorem ipsum dolor sit amet
et ibam forte via sacra
sicut meus est mos.</span>
</p>

Aggiungiamo quindi il CSS:

p {
width: 500px;
height: 500px;
background-image: url("images/scritta-gotica.gif"); 
background-repeat: no-repeat; 
background-position: 0 0;
}

.hidden {position: absolute; top: -1000em;}

La classe hidden può essere usata per nascondere anche altri elementi della pagina. Il beneficio di questa tecnica è che il contenuto rimane accessibile per i lettori di schermo e i browser testuali. Se disabilitiamo i CSS, vedremo il contenuto dell'elemento span all'interno del paragrafo, quindi perfettamente leggibile. Se avessimo invece usato 'display: none' il contenuto sarebbe rimasto inaccessibile per i lettori di schermo, in quanto tale dichiarazione viene interpretata come 'speak: none', ossia il testo non viene pronunciato. Inoltre con questa tecnica non violiamo le politiche di alcuni motori di ricerca (come Google) che sconsigliano l'uso di 'display: none' per nascondere gli elementi (viene interpretato come un tentativo di dirottare i robot su un determinato obiettivo).

Esistono anche altre tecniche di sostituzione del testo con immagini, ma questa è una delle più semplici ed efficaci.

8 Formattazione del testo e posizionamento

Punti di controllo di questa sezione: 3.3 Si usino i fogli di stile per controllare il layout e la presentazione. [Priority 2] .

Le seguenti proprietà CSS2 possono essere usate per controllare la formattazione e il posizionamento del testo:

Il seguente esempio mostra l'uso dei fogli di stile per creare l'effetto di un capolettera.

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 CSS ':first-letter', che permette di far riferimento alla prima lettera di uno spezzone di testo, non è ampiamente supportato.

Nota 8

Alcune osservazioni seguendo l'ordine di esposizione:

9 Colori

9.1 Contrasto di colore

Punti di controllo di questa sezione:

Tecniche:

Esempio.

Si usino i numeri e non i nomi per i colori:

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

Esempio deprecato.

H1 {color: red}

Si usino queste proprietà CSS per specificare i colori:

Ci si assicuri un buon contrasto tra colori di sfondo e di primo piano. Se si specifica un colore di primo piano, si specifichi sempre anche un colore di sfondo (e viceversa).

Nota 9.1 Bisognerebbe, a mio avviso, parlare anche di eccessivo contrasto. Per esempio il contrasto testo nero su sfondo bianco è ritenuto ottimale. In realtà se lo sfondo occupa la maggioranza dello spazio sulla pagina, ne conseguirà un effetto di accecamento fastidioso.

9.2 Assicurarsi che le informazioni non siano solo nel colore

Punti di controllo di questa sezione:

Assicurarsi che l'informazione non venga veicolata solo col colore. Per esempio, quando si chiede un input agli utenti, non scrivere "Selezionate una voce tra quelle in verde". Invece, assicuratevi che l'informazione sia disponibile attraverso altri effetti di stile (per esempio un effetto dei font) e attraverso il contesto (per esempio link testuali).

Per esempio, in questo documento gli esempi hanno uno stile di default (con i fogli di stile) come segue:

Test rapido! Per vedere se il vostro documento funziona anche senza colori, esaminatelo con un monitor monocromatico o con i colori del browser disattivati. Provate anche ad impostare uno schema di colori del browser col solo nero, o con tonalità di grigio e vedete se la vostra pagina si mantiene.

Test rapido! Per vedere se il contrasto di colore è sufficiente per le persone con deficit nella percezione del colore o con monitor a bassa risoluzione, stampate le pagine con una stampante in bianco e nero (con colori e sfondi in scala di grigio). Provate anche a fare due o tre stampe di una copia per vederne la degradazione. Questo vi farà capire dove avete bisogno di aggiungere ulteriori suggerimenti visivi (per esempio, i link sono di solito sottolineati), o se tali suggerimenti sono troppo piccoli o indistinti per mantenersi bene.

Per ulteriori informazioni sui colori e i contrasti, si veda [LIGHTHOUSE].

10 Fornire suggerimenti contestuali nelle liste HTML

Punti di controllo di questa sezione:

Gli sviluppatori di contenuti per il Web sono incoraggiati ad usare UL per le liste non ordinate e OL per quelle ordinate (ossia una marcatura corretta) combinati ai CSS per fornire suggerimenti contestuali.

Il seguente foglio di stile CSS2 mostra come fornire una numerazione progressiva per le liste annidate create con gli elementi UL o OL. Le voci sono numerate 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>

Fino a quando i CSS2 non saranno ampiamente supportati dai programmi utente o i programmi utente permetteranno agli utenti di controllare la resa delle liste con altri mezzi. gli autori dovrebbero fornire suggerimenti contestuali nelle liste annidate. Il seguente meccanismo CSS1 mostra come nascondere la fine di una lista quando i fogli di stile sono attivati, e a rivelarla quando sono disattivati, quando i fogli di stile utente sovrascrivono il meccanismo di nascondimento o quando i fogli di stile non sono supportati.

Esempio.

<STYLE type="text/css">
.endoflist { display: none }
</STYLE>
<UL>
<LI>Paper:
<UL>
<LI>Envelopes
<LI>Notepaper
<LI>Letterhead
<LI>Poster paper 
<span class="endoflist">
(End of Paper)</span>
</UL>
<LI>Pens:
<UL>
<LI>Blue writing pens
<LI>whiteboard pens 
<span class="endoflist">
(End of Pens)</span>
</UL>
<LI>Fasteners:
<UL>
<LI>paper clips
<LI>staples
<LI>Big lengths of rope. 
<span class="endoflist">
(End of Fasteners)</span>
</UL> 
<span class="endoflist">
(End of Office Supplies)</span>
</UL>

Nota: Questo esempio non aiuta nel caso di voci di lista che contengono elementi. Con uno sforzo ulteriore, l'autore potrebbe inserire una simile marcatura alla fine di ogni voce di lista.

11 Layout, posizionamento, livelli e allineamento

Punti di controllo di questa sezione:

Il layout, il posizionamento, i livelli e l'allineamento dovrebbero essere fatti tramite fogli di stile (per esempio usando i flottanti CSS e il posizionamento assoluto):

11.1 Se dovete usare immagini spaziatrici

Si forniscano equivalenti testuali per tutte le immagini, comprese le immagini invisibili o trasparenti.

Se gli sviluppatori di contenuti web non possono usare i fogli di stile e devono esserci immagini invisibili o trasparenti (per esempio con IMG) per rappresentare immagini sulla pagine, si deve specificare alt="" per esse.

Esempio deprecato.

Gli autori non non dovrebbero usare spazi per il valore di "alt" per impedire alle parole di comparire quando l'immagine non viene caricata:

my poem requires a big space
<IMG src="10pttab.gif" alt="&nbsp;&nbsp;&nbsp;">
here

Nel prossimo esempio si usa un'immagine per costringere una figura ad apparire in una determinata posizione:

   
<IMG src="spacer.gif" alt="spacer">
<IMG src="colorfulwheel.gif" alt="The wheel of fortune">

Nota 11

Solo alcune brevi considerazioni sui punti esaminati:

12 Regole e bordi

Punti di controllo di questa sezione: 6.1 Si organizzino i documenti in modo da poter essere letti senza fogli di stile. Per esempio, quando un documento HTML viene reso senza un foglio di stile associato, deve essere ancora possibile leggere il documento. [Priorità 1] .

Regole e bordi possono veicolare il concetto di "separazione" per gli utenti con vista normale, ma questo significato non deve essere trasferito al di fuori del contesto visivo.

Si usino queste proprietà CSS per specificare gli stili dei bordi:

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

Esempio.

In questo esempio, l'elemento H1 element ha un bordo superiore rosso spesso 2px, separato dal contenuto di 1em:

<HEAD>
<TITLE>Redline with style sheets</TITLE>
<STYLE type="text/css">
H1 { padding-top: 1em; border-top: 2px red }
</STYLE>
</HEAD>
<BODY>
<H1>
Chapter 8 - Auditory and Tactile Displays</H1>
</BODY>

Se una regola (per esempio l'elemento HR) viene usata per indicare la struttura, ci si assicuri di indicare la struttura anche in un modo non visuale. (per esempio usando marcatura strutturale).

Esempio.

In questo esempio, l'elemento DIV viene usato per creare una barra di navigazione, la quale include un separatore orizzontale.

<DIV class="navigation-bar">
<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>

Nota 12

Alcune osservazioni in ordine di apparizione nel testo. Si noti come ancora una volta il documento debba essere aggiornato ai recenti sviluppi.

13 Usare il posizionamento dei fogli di stile e la marcatura per una trasformazione elegante

Punti di controllo di questa sezione:

Usando le proprietà CSS2 per il posizionamento, il contenuto viene visualizzato in ogni posizione nell'area di visualizzazione dell'utente. L'ordine in cui appaiono le voci su uno schermo può essere differente da quello nel documento sorgente. L'esempio che segue dimostra alcuni principi:

  1. il testo appare visivamente nel browser in un ordine diverso da quello nella marcatura.
  2. il posizionamento CSS può essere usato per creare effetti tabulari. Si sarebbe potuto usare un elemento TABLE per avere lo stesso effetto.

Si noti che viene usata una classe per ogni oggetto posizionato. L'uso di "id" può essere sostituito da "class" in questi esempi. Viene usato "class" perchè 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>

Quando si applicano i fogli di stile, il testo appare su due colonne. Gli elementi con classe "menu1" (Products) e "menu2" (Locations) appaiono come intestazioni colonnari. "Telephones, Computers, and Portable MP3 Players" sono elencati sotto Products e "Wisconsin" e "Idaho" sono elencati sotto Locations come mostrato in questo screenshot:

Esempio di codice con i fogli di stile applicati

Quando i fogli di stile non sono applicati, tutto il testo appare su una riga come "Products Locations Telephones Computers Portable MP3 Players Wisconsin Idaho". Le parole appaiono come scritte nel sorgente. Quindi, quello che appare come intestazione di colonna con i fogli di stile applicati appaiono ora prima poichè definiti prima nel sorgente. Il seguente screenshot illustra questo:

Esempio di codice senza i fogli di stile

Il seguente esempio mostra che si può ottenere la stessa presentazione visiva in un browser che supporta i fogli di stile e nel contempo usare una presentazione logica quando i fogli di stile non sono applicati. Si aggiunge marcatura strutturale (liste di definizione) al contenuto. Si noti che i margini sono impostati a zero, in quanto nei browser HTML le liste di definizione vengono visualizzate con un margine impostato sull'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>

Quando i fogli di stile vengono applicati, appare tutto come in precedenza, Tuttavia, ora senza fogli di stile il testo appare in una lista di definizione invece che in una stringa di parole. Quello che appare in intestazioni colonnari con i fogli di stile, appare ora come termini di definizioni senza di essi, come mostrato nel seguente screenshot.

Esempio di codice senza fogli di stile ma trasformato elegantemente

Nota. Provate da voi questi esempi: file di test per fogli di stile che si trasformano elegantemente.

14 Creare il movimento con i fogli di stile e gli script

Punti di controllo di questa sezione: 7.3 Fino a quando i programmi utente non permetteranno agli utenti di bloccare il contenuto, si eviti il movimento nelle pagine. [Priorità 2]

15 Fogli di stile acustici

Punti di controllo di questa sezione: 11.3 Fornire informazioni in modo che gli utenti ricevano il contenuto in base alle loro preferenze (per esempio lingua, tipo di contenuto, ecc.) [Priorità 3] .

Le proprietà acustiche CSS2 forniscono informazioni agli utenti non vedenti e agli utenti di browser vocali così come i font forniscono informazioni visuali. L'esempio che segue mostra come varie qualità sonore (tra cui 'voice-family', simile ad un font audio) possono far sapere ad un utente che il contenuto pronunciato è un'intestazione:

Esempio.

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

Le seguenti proprietà fanno parte dei fogli di stile acustici CSS2.

Inoltre, la proprietà 'speak-header' descrive come le intestazioni di tabella vengono lette prima di un cella di dati.

Le implementazioni dei fogli di stile acustici si sono rivelate così irrilevanti da inficiarne quasi completamente la reale efficacia.

16 Accesso a rappresentazioni alternative del contenuto

Punti di controllo di questa sezione: 11.3 Fornire informazioni in modo che gli utenti ricevano il contenuto in base alle loro preferenze (per esempio lingua, tipo di contenuto, ecc.) [Priorità 3] .

I CSS2 permettono agli utenti di accedere a rappresentazioni alternative del contenuto specificato nei valori di attributo quando si usano le seguenti caratteristiche in contemporanea:

Nell'esempio che segue, il valore dell'attributo "alt" per l'elemento IMG viene reso dopo l'immagine (visivamente, acusticamente, ecc.):

Esempio.

IMG:after { 
content: attr(alt) 
}

Si noti che il valore dell'attributo viene visualizzato anche se l'immagine non è presente (per esempio l'utente ha disabilitato le immagini).

Nota 16Internet Explorer 6 (ed inferiori) per Windows non supporta nessuna delle caratteristiche precedentemente indicate. Inoltre, l'esempio riportato viene supportato solo da Opera 8+.

17 Tipi di media

Punti di controllo di questa sezione: 11.3 Fornire informazioni in modo che gli utenti ricevano il contenuto in base alle loro preferenze (per esempio lingua, tipo di contenuto, ecc.) [Priorità 3].

I "tipi di media" CSS2 (usati con le regole @media) permettono ad autori e utenti di scrivere fogli di stile che saranno resi in modo appropriato su determinati dispositivi di destinazione. Questi fogli di stile possono fornire contenuto per la presentazione su dispositivi braille, sintetizzatori vocali o dispositivi TTY. Usare le regole "@media" riduce anche i tempi di download permettendo ai programmi utente di ignorare regole inapplicabili.

18 Riferimenti

Per l'ultima versione di ogni specifica W3C si consulti l'elenco dei Resoconti Tecnici W3C su http://www.w3.org/TR.

[CSS1]
"CSS, level 1 Recommendation", B. Bos, H. Wium Lie, curatori, 17 dicembre 1996, rivista l'11 gennaio 1999. Questa Raccomandazione CSS1 è http://www.w3.org/TR/1999/REC-CSS1-19990111. L'ultima versione dei CSS1 si trova su http://www.w3.org/TR/REC-CSS1.
[CSS2]
"CSS, level 2 Recommendation", B. Bos, H. Wium Lie, C. Lilley, e I. Jacobs, curatori, 12 maggio 1998. Questa Raccomandazione CSS2 è http://www.w3.org/TR/1998/REC-CSS2-19980512/. L'versione dei CSS2 si trova su http://www.w3.org/TR/REC-CSS2.
Versione italiana ufficiale su http://www.diodati.org/w3c/css2/cover.html.
[WCAG10]
"Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, e I. Jacobs, curatori, 5 maggio 1999. Questa Raccomamdazione WCAG 1.0 è 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, curatori. Questo documento spiega come implementare i punti di controllo definiti nelle "Web Content Accessibility Guidelines 1.0". L'ultima bozza si trova su http://www.w3.org/TR/WCAG10-TECHS/.

19 Risorse

Nota: Il W3C non garantisce la stabilità di nessuna delle seguenti risorse al di fuori del suo controllo. Questi riferimenti vengono inclusi per convenienza. I riferimenti ai prodotti non sono un approvazione di tali prodotti.

19.1 Altre linee guida

[UWSAG]
"The Unified Web Site Accessibility Guidelines", G. Vanderheiden, W. Chisholm, curatori. Le Unified Web Site Guidelines furono compilate dal Trace R & D Center presso l'Università del Wisconsin col finanziamento del National Institute on Disability and Rehabilitation Research (NIDRR),  Dipartimento U.S. per l'Educazione.

19.2 Risorse sull'accessibilità

[LIGHTHOUSE]
Lighthouse fornisce informazioni sui contrasti e i colori accessibili.