Questo documento riassume le caratteristiche della Raccomandazione per i fogli di stile a cascata (CSS - Cascading Style Sheets), livello 2 ([CSS2]) che riguardano direttamente l'accessibilità di documenti sul Web. Alcune delle caratteristiche di accessibilità descritte in questo documento erano disponibili anche nei
CSS1 ([CSS1]). Questo documento è stato creato affinché altri documenti possano fare riferimento in modo coerente alle caratteristiche di accessibilità dei CSS.
Questo documento è una Nota del W3C messa a disposizione del pubblico da parte dal W3C. Questa NOTA è stata approvata dal Gruppo di Lavoro per la formazione e la divulgazione (EOWG - Education and Outreach Working Group) all'interno dell'Iniziativa per l'accessibilità del Web (WAI - Web Accessibility Initiative), dal Gruppo di lavoro su protocolli e formati (PFWG - Protocols and Formats Working Group), e dal Gruppo di lavoro sui fogli di stile e sulle proprietà di formattazione (Cascading Style Sheets and Formatting Properties Working Group).
La pubblicazione di una Nota del W3C non implica la sottoscrizione da parte dei membri del W3C. Un elenco di rapporti tecnici e pubblicazioni correnti del W3C, incluse bozze di lavoro e note, è disponibile all'indirizzo http://www.w3.org/TR.
Il principale vantaggio dell'uso dei CSS ai fini dell'accessibilità è la possibilità di separare la struttura dei documenti dalla loro presentazione. I fogli di stile sono stati progettati per consentire un controllo preciso - al di là del codice HTML - di caratteristiche quali la spaziatura dei caratteri, l'allineamento del testo, la posizione di oggetti nella pagina, la produzione di audio e voce, le caratteristiche dei font, ecc. Separando lo stile dal codice, gli autori possono rendere più semplice e pulito l'HTML nei loro documenti, rendendoli così anche più accessibili.
I CSS consentono un controllo preciso della spaziatura, dell'allineamento e del posizionamento. Gli autori possono quindi evitare un "uso improprio dei tag" - ossia la pratica di usare in modo improprio, a fini stilistici, un elemento strutturale. Per esempio, sebbene la funzione originale degli elementi HTML BLOCKQUOTE e TABLE sia quella di indicare citazioni e dati in tabelle, essi sono spesso usati per creare effetti visivi come il rientro del testo e l'allineamento. Quando i browser specializzati - come ad esempio quelli per la lettura a voce dei contenuti - incontrano elementi che sono usati in questi modi impropri, i risultati possono essere incomprensibili all'utente.
Oltre a prevenire l'uso improprio degli elementi, i fogli di stile possono aiutare a ridurre l'uso improprio delle immagini. Per esempio, gli autori a volte usano delle immagini invisibili di 1 pixel per posizionare i contenuti. Questo non solo contribuisce ad appesantire i documenti, rendendoli più lenti da scaricare, ma può anche confondere i software che cercano testo alternativo (l'attributo "alt") per queste immagini. Le proprietà CSS di posizionamento rendono superfluo l'uso delle immagini invisibili per controllare il posizionamento.
I CSS forniscono un controllo preciso delle dimensioni dei font, del colore e dello stile. Alcuni autori usano immagini per rappresentare del testo in un font particolare, quando non sono sicuri che questo sia disponibile sul computer dell'utente finale. Il testo in immagini, però, non è accessibile ai software specializzati come quelli per la lettura del testo, e non può nemmeno essere catalogato dai motori di ricerca. Per rimediare a questa situazione, i potenti WebFont nei CSS consentono un controllo molto più ampio delle informazioni sui font presenti sui computer degli utenti finali. Con i WebFont, gli autori possono fare ricorso a meccanismi alternativi sul computer dell'utente nel caso i font preferiti dall'autore non siano disponibili. I font possono essere sostituiti con maggiore accuratezza, sintetizzati dai software appositi, e persino scaricati dal Web, tutto secondo quanto specificato dall'autore.
I CSS consentono agli utenti di far prevalere le loro preferenze sugli stili impostati dall'autore della pagina Web. Questo è molto importante per gli utenti che non possono visualizzare una pagina con i font e i colori scelti dall'autore. I CSS consentono agli utenti di visualizzare i documenti nei loro font e colori preferiti, da specificare in un foglio di stile utente.
I CSS forniscono supporto per la generazione automatica di numeri, indicatori e altri tipi di contenuti che possono aiutare gli utenti a orientarsi in un documento. Liste, tabelle o documenti di particolare lunghezza sono più facili da navigare quando vengono forniti in modo accessibile dei numeri o altri indicatori di contesto.
I CSS supportano i fogli di stile audio, che indicano come un documento va reso a voce. I fogli di stile audio ("aural style sheets" o "ACSS" in forma abbreviata) consentono agli autori e agli utenti di specificare il volume della voce in cui sarà letto il contenuto, i suoni di sfondo, le proprietà spaziali del suono, e una serie di altre proprietà che possono aggiungere effetti speciali alla lettura a voce computerizzata, in modo analogo a quanto si ottiene a livello visivo con gli stili dei font.
I CSS forniscono un controllo più preciso sulla visualizzazione di contenuti alternativi rispetto al solo HTML. I selettori CSS2 danno accesso a valori di attributi, spesso usati per fornire contenuti alternativi. Nei CSS2, i valori degli attributi possono essere resi in un documento insieme con il contenuto primario di un elemento.
Al momento della pubblicazione di questa NOTA, i browser più diffusi non implementano i CSS in modo consistente. Tuttavia, l'ultima generazione di browser da vari produttori mostra un livello solido di implementazione della maggior parte dei CSS1 e di buona parte dei CSS2, e le implementazioni continuano a migliorare.
Ovviamente, i benefici delle caratteristiche descritte in questo documento non possono verificarsi senza un'implementazione corretta dei CSS1 e dei CSS2. Parte della progettazione in CSS di un documento accessibile implica la necessità di assicurarsi che il documento rimanga accessibile quando i fogli di stile sono disattivati o non sono supportati.
Finché la maggior parte dei browser non supporterà i CSS in modo consistente, gli sviluppatori di contenuti per il web possono comunque creare documenti accessibili tramite una combinazione di caratteristiche CSS supportate e alcune caratteristiche di presentazione dell'HTML. I documenti che usano le caratteristiche di presentazione dell'HTML invece che dei CSS devono trasformarsi in maniera armoniosa e adattarsi a modi diversi di visualizzazione. Per esempio, le tabelle usate per l'impaginazione (layout) devono avere un senso anche quando rese in modalità seriale.
Il seguente è un elenco di caratteristiche dei CSS2 che riguardano l'accessibilità (con le corrispondenti sezioni delle specifiche CSS2, ove indicato). Le sezioni che seguono l'elenco spiegano in maniera più dettagliata come queste caratteristiche influenzino l'accessibilità.
Nota. I nomi di proprietà sono indicati da singole virgolette, come da convenzione nelle specifiche per CSS1 e CSS2.
- Spaziatura, allineamento e posizionamento
- 'text-indent' (16.1); 'text-align' (16.2); 'word-spacing'
e 'letter-spacing' (16.4);
'font-stretch', (15.2.3);
'margin', 'margin-top', 'margin-right', 'margin-bottom',
and 'margin-left' (8.3); 'float' (9.5.1), 'position' (9.3.1);
'top', 'right', 'bottom', e 'left' (9.3.2);
'empty-cells' (17.6.1)
- Prevalenza degli stili definiti dall'utente
- !important (6.4.1); il valore 'inherit' (6.2.1);
font di sistema (15.2.5);
colori di sistema (18.2); tipi di lista (12.6.2);
contorni ("outline") dinamici ('outline', 'outline-width', 'outline-style',
e 'outline-color') (18.4)
- Contenuti generati
- pseudo-elementi :before/:after (5.12.3, 12.1);
'content' (12.2); 'cue', 'cue-before', e 'cue-after' (19.5)
- Fogli di stile audio
-
'volume' (19.2); 'speak' (19.3); 'pause', 'pause-before', e
'pause-after' (19.4);
'cue', 'cue-before', 'cue-after' (19.5);
'play-during' (19.6);
'azimuth', 'elevation' (19.7);
'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress',
and 'richness' (19.8); 'speak-punctuation' e 'speak-numeral' (19.9)
- Accesso a contenuti alternativi
- selettori di attributi (5.8); la funzione attr() (12.2)
- WebFonts
- Si veda il Capitolo 15 delle specifiche CSS2.
I CSS2 consentono agli autori di controllare la posizione visiva dei contenuti della pagina tramite il rientro del testo, i margini, i float, e il posizionamento assoluto e relativo. Usando le proprietà CSS per gli effetti visivi, gli autori possono scrivere codice HTML più semplice ed eliminare immagini e spazi ( ) usati per il posizionamento.
Le seguenti proprietà offrono controllo sulla spaziatura, l'allineamento e il posizionamento:
- 'text-indent', 'text-align', 'word-spacing', 'font-stretch'. Ognuna di queste proprietà consente agli utenti di controllare la spaziatura senza dover usare spazi aggiuntivi. Per esempio invece di scrivere "H E L L O" (che viene normalmente riconosciuta dagli utenti come la parola "hello", ma che gli utenti di software per il riconoscimento vocale sentirebbero scandita a voce in lettere individuali), gli autori possono creare lo stesso effetto visivo con la proprietà
'word-spacing' applicata all'elemento "HELLO".
- 'margin', 'margin-top', 'margin-right', 'margin-bottom',
'margin-left'. Con queste proprietà, gli autori possono creare spazi sui quattro lati del contenuto di un elemento, invece di aggiungere spazi tipografici ( ),
che non sono considerati codice standard, per creare spazio intorno a un elemento.
- 'float', 'position', 'top', 'right', 'bottom',
'left'. Con queste proprietà, l'utente può controllare la posizione visiva di quasi tutti gli elementi in modo indipendente dalla posizione in cui l'elemento appare nel documento. Agli autori si raccomanda di creare sempre documenti la cui struttura abbia una sua razionalità anche senza i fogli di stile (cioé, i documenti vanno scritti con un loro ordine "logico"), e di applicare poi i fogli di stile per ottenere gli effetti visivi.
Le proprietà di posizionamento possono essere usate per creare note a margine (che possono essere numerate in modo automatico), barre laterali, effetti di incorniciamento, semplici intestazioni e pié di pagina, e altro ancora.
- La proprietà 'empty-cells' consente di lasciare vuote le celle di tabelle e dar loro comunque dei bordi corretti sullo schermo o nella versione da stampare su carta. Una cella di dati da lasciare vuota non deve essere riempita con spazi tipografici solo per ottenere un effetto visivo.
Per assicurare che gli utenti possano controllare gli stili, i CSS2 cambiano la semantica dell'operatore "!important" definito nei CSS1. Nei CSS1, agli autori spettava sempre l'ultima parola sugli stili. Nei CSS2, se il foglio di stile personalizzato di un utente contiene "!important", ha la precedenza su qualsiasi altra regola applicabile definita nel foglio di stile dell'autore. Questa è una caratteristica importante per gli utenti che necessitano di includere o evitare particolari combinazioni o contrasti di colore, oppure utenti che necessitano di font più grandi, ecc. Per esempio, la seguente regola specifica una dimensione font grande per il testo in paragrafi e ha precedenza sulla regola di peso equivalente impostata dall'autore:
P { font-size: 24pt ! important }
Nei CSS2, il valore 'inherit' (eredita) - disponibile per ogni proprietà - produce regole di stile "!important" compatte che governano la maggior parte o la totalit` di un documento. Per esempio, le seguenti regole di stile costringono a impostare il colore di tutti gli sfondi in bianco e il colore di primo piano in nero:
/*
Imposta il colore del testo a nero
e il colore di sfondo a bianco
nel corpo (body) del documento.
*/
BODY {
color: black ! important ;
background: white ! important
}
/*
Fa in modo che i valori di 'color' e 'background'
siano ereditati da tutti gli altri elementi,
rafforzando la dichiarazione con !important. Nota che questo può
venire soprasseduto da altri stili utente più specifici.
*/
* {
color: inherit ! important ;
background: inherit ! important
}
I CSS2 includono anche altre caratteristiche che consentono il controllo a livello utente:
- I colori di sistema (per 'color', 'background-color',
'border-color', e 'outline-color') e i font di sistema (per 'font') significano che gli utenti possono applicare ai documenti Web le loro preferenze di sistema per i colori e i font.
- I contorni (o "outline") dinamici (la proprietà 'outline') consentono agli utenti (per es.,
con difficoltà di visione) di creare intorno ai contenuti dei contorni o profili che, senza alterare l'impaginazione, forniscono un modo per evidenziare delle informazioni specifiche.
Per esempio, per disegnare una spessa riga nera intorno a un elemento quando ha il focus, e una spessa riga rossa quando è attivo, si possono usare le regole seguenti:
:focus { outline: thick solid black }
:active { outline: thick solid red }
I CSS2 includono diversi meccanismi che consentono di generare contenuti dai fogli di stile:
- gli pseudo-elementi :before e :after e la proprietà 'content'.
Quando sono usati insieme, consentono agli autori di inserire degli indicatori (per es. contatori e testo ripetuto come "Fine Esempio" negli esempi qui sotto) prima o dopo i contenuti di un elemento.
- le proprietà 'cue', 'cue-before', e 'cue-after'. Queste proprietà consentono agli utenti di riprodurre un suono prima o dopo i contenuti di un elemento.
- Stili per liste, siano essi numeri, glifi, o immagini (solitamente associati all'elemento LI in HTML). I CSS2 aggiungono agli stili definiti nei CSS1 anche stili internazionali per le liste. Si vedano le proprietà 'list-style-type' e 'content'.
I contenuti generati possono servire da indicatori per aiutare gli utenti a navigare e orientarsi in un documento quando non possono avere accesso a indicatori visivi quali barre di scorrimento proporzionali, frame con indici dei contenuti, ecc.
Per esempio, il seguente foglio di stile utente fa in modo che le parole "Fine Esempio" siano generate dopo ogni esempio indicato come tale con una classe speciale all'interno del documento:
DIV.example:after {
content: Fine Esempio
}
Gli utenti possono anche, per esempio, numerare dei paragrafi in modo da individuare la loro posizione attuale durante la lettura del documento:
P:before {
content: counter(paragraph) ". " ;
counter-increment: paragraph
}
Le proprietà audio dei CSS2 forniscono informazioni agli utenti non-vedenti e agli utenti di browser vocali nello stesso modo in cui i font forniscono informazioni visive. L'esempio seguente mostra come varie qualità del suono (inclusa 'voice-family', che è praticamente come un font audio) possono comunicare all'utente che il testo in riproduzione è un'intestazione:
H1 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("ping.au")
}
Le seguenti proprietà sono parte dei fogli di stile audio nei CSS2.
- 'volume' controlla il volume del testo letto a voce
- 'speak' controlla se il contenuto sarà letto a voce e, in quel caso, se verrà scandito in singole lettere o reso come parole.
- 'pause', 'pause-before', e 'pause-after' controllano le pause prima e dopo la lettura a voce dei contenuti. Ciò consente agli utenti di separare il contenuto per una migliore comprensione.
- 'cue', 'cue-before', e 'cue-after' specificano un suono da riprodurre prima e dopo il contenuto, che può essere utile per orientarsi nel documento (come un'icona visiva).
- 'play-during' controlla i suoni di sfondo mentre un elemento viene reso (più o meno come un'immagine di sfondo).
- 'azimuth' e 'elevation' forniscono dimensioni al suono, per consentire agli utenti di distinguere tra voci, per esempio.
- 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress',
e 'richness' controllano la qualità dei contenuti pronunciati a voce. Variando queste proprietà per diversi elementi, gli utenti possono definire il modo preciso in cui i contenuti verranno presentati in modalità audio.
- 'speak-punctuation' e 'speak-numeral' controllano come i numeri e la punteggiatura vengono pronunciati a voce, e hanno effetto sulla qualità dell'esperienza di navigazione audio.
Inoltre, la proprietà 'speak-header' descrive come le intestazioni di una tabella debbano essere lette prima delle celle della tabella.
I CSS2 consentono agli utenti di accedere a delle rappresentazioni alternative dei contenuti che sono specificate in valori di attributi quando i seguenti elementi sono usati insieme:
- selettori di attributi
- la funzione attr() e la proprietà 'content'
- gli pseudo-elementi :before e :after
Nel seguente esempio, il valore dell'attributo "alt" per l'elemento IMG viene reso dopo l'immagine (a livello visivo, audio, ecc.):
IMG:after { content: attr(alt) }
Notare che il valore dell'attributo viene mostrato anche se l'immagine può non esserlo (per es. se l'utente ha disattivato le immagini nelle preferenze del browser).
I "tipi di media" in CSS2 (da usare con le regole @media) consentono agli autori e agli utenti di preparare fogli di stile che facciano in modo che i documenti siano resi in modo più appropriato su specifici dispositivi finali. Questi fogli di stile possono adattare i contenuti alla presentazione su dispositivi braille, sintetizzatori vocali, o dispositivi tty. L'uso delle regole "@media" può anche ridurre i tempi di scaricamento consentendo agli user agent di ignorare regole a loro inapplicabili.
Informazioni sulla Web Accessibility Initiative
L'Iniziativa per l'Accessibilità del Web (WAI - Web Accessibility Initiative) del W3C promuove l'accessibilità del Web tramite cinque attività complementari finalizzate a questi scopi:
- Assicurare che la tecnologia del Web supporti l'accessibilità
- Sviluppare linee guida per l'accessibilità
- Sviluppare strumenti per facilitare la valutazione e la revisione di siti Web
- Coordinare la formazione e la divulgazione
- Condurre ricerche e progetti
L'International Program Office del WAI consente partnerariati tra aziende del settore, organizzazioni per i disabili, enti di ricerca sull'accessibilità e governi interessati a creare un Web accessibile. Gli sponsor del WAI includono la National Science Foundation e l'Istituto Nazionale per la Ricerca sulla Disabilità e sulla Riabilitazione (National Institute on Disability and Rehabilitation Research) del Dipartimento dell'Istruzione degli Stati Uniti (US Department of Education); il programma DG XIII Telematica per l'Integrazione dei Disabili e degli Anziani (TIDE - Telematics for Disabled and Elderly Programme) della Commissione Europea; il programma Telematics Applications Programme for Disabled and Elderly del governo e dell'industria del Canada; IBM, Lotus Development Corporation, e NCR.
Ulteriori informazioni sul WAI sono disponibili all'indirizzo http://www.w3.org/WAI/.
Le linee guida per l'accessibilità Web sono essenziali per lo sviluppo di siti Web e di applicazioni relative al Web. WAI lavora in cooperazione con molte organizzazioni per introdurre tre gruppi di linee guida:
- Web Content Accessibility Guidelines 1.0 ([WAI-WEBCONTENT])
per siti Web accessibili.
- User Agent Accessibility Guidelines
([WAI-USERAGENT])
per rendere accessibili gli user agent (browser, multimedia player,
e tecnologie relative).
- Authoring Tool Accessibility Guidelines
([WAI-AUTOOLS]) per rendere accessibili gli strumenti di creazione di siti (strumenti per la modifica del testo, per la gestione del sito, per la trasformazione e la creazione di pagine web).
Informazioni sul World Wide Web Consortium (W3C)
Il W3C è stato creato per realizzare in pieno il potenziale del Web tramite lo sviluppo di protocolli comuni che ne favoriscano l'evoluzione e ne assicurino l'interoperabilità. E' un consorzio internazionale di settore, gestito in collaborazione dal Laboratorio di Informatica del MIT (LCS - Laboratory for Computer Science) negli USA, dall'Istituto Nazionale per la Ricerca in Informatica e Automazione (INRIA) in Francia e dalla Keio University in Giappone. I servizi forniti dal Consorzio includono: una banca dati di informazioni sul World Wide Web per sviluppatori e utenti; implementazioni di codici di riferimento per incorporare e favorire gli standard; e varie applicazioni prototipo e di esempio per dimostrare l'uso delle nuove tecnologie. Ad oggi, più di 320 organizzazioni sono Membri ufficiali del Consorzio. Per maggiori informazioni sul World Wide Web Consortium, consultare il sito http://www.w3.org/.
Un elenco delle vigenti Raccomandazioni del W3C e di altri documenti tecnici è disponibile all'indirizzo http://www.w3.org/TR.
- [CSS2]
-
"Cascading Style Sheets, level 2", B. Bos, H. W. Lie, C. Lilley, and
I. Jacobs, 17 May 1998.
- [CSS1]
-
"Cascading Style Sheets, level 1", H. W. Lie and B. Bos, 17
December 1996. Revised 11 January 1999.
- [HTML40]
-
"HTML 4.0 Recommendation", D. Raggett, A. Le Hors, and I.
Jacobs, eds., 18 December 1997, revised 24 April 1998.
- [XML10]
-
"Extensible Markup Language (XML) 1.0.", T. Bray, J. Paoli, C.M.
Sperberg-McQueen, eds., 10 February 1998.
- [WAI-AUTOOLS]
-
Latest version of
"Authoring Tool Accessibility Guidelines", J. Treviranus,
J. Richards, I. Jacobs, C. McCathieNevile, eds.
- [WAI-WEBCONTENT]
-
"Web Content Accessibility Guidelines 1.0", W. Chisholm,
G. Vanderheiden, and I. Jacobs, eds., 5 May 1999
- [WAI-USERAGENT]
-
Latest version of "User Agent Accessibility Guidelines", J. Gunderson
and I. Jacobs, eds.