Nel gennaio del 2004 viene approvata una legge che tutela il diritto di ogni persona ad accedere a tutte le fonti di informazione, compresi i gli strumenti informatici, quali i siti web. In questo articolo che non vuole essere una fonte esaustiva su questo vasto argomento, vedremo i requisiti che direttamente o indirettamente coinvolgono l’uso dei CSS.
Tutela del diritto di accedere alle fonti di informazione
Nel gennaio del 2004, il Parlamento Italiano approva la Legge 04/2004 con la quale la Repubblica “riconosce e tutela il diritto di ogni persona ad accedere a tutte le fonti di informazione e ai relativi servizi, ivi compresi quelli che si articolano attraverso gli strumenti informatici e telematici”. L’8 luglio 2005 il Ministro per l’Innovazione e le Tecnologie decreta i “Requisiti tecnici e i diversi livelli per l’accessibilità agli strumenti informatici” attraverso i quali la Legge 04/2004 deve essere attuata.
L’Allegato A del Decreto Ministeriale si occupa di definire i requisiti tecnici di accessibilità delle applicazioni basate su tecnologie internet.
I requisiti che direttamente o indirettamente coinvolgono i CSS ed eventuali indicazioni su come rispettare tali requisiti sono l’argomento di questo articolo.
È opportuno ricordare che questo articolo non può considerarsi una fonte esaustiva per quanto riguarda un argomento vasto e complesso quale l’accessibilità dei siti web, né una guida alla Legge 04/2004 e al suo Decreto Attuativo.Tutte le informazioni e le indicazioni contenute in quest’appendice non garantiscono in alcun modo il rispetto della normativa vigente ma rappresentano una semplice raccolta di suggerimenti e osservazioni basate sull’esperienza e sulle opinioni di chi scrive.
Requisito n. 1
Enunciato
Realizzare le pagine e gli oggetti al loro interno utilizzando tecnologie definite da grammatiche formali pubblicate nelle versioni più recenti disponibili quando sono supportate dai programmi utente. Utilizzare elementi e attributi in modo conforme alle specifiche, rispettandone l’aspetto semantico. […] evitare di utilizzare, all’interno del linguaggio a marcatori con il quale la pagina è realizzata, elementi e attributi per definirne le caratteristiche di presentazione della pagina (per esempio, caratteristiche dei caratteri del testo, colori del testo stesso e dello sfondo ecc.), ricorrendo invece ai Fogli di Stile CSS (Calcagni Style Sheets) per ottenere lo stesso effetto grafico […].
La prima parte dell’enunciato indica che nel realizzare una pagina web occorre utilizzare i vari elementi (X)HTML rispettandone il significato semantico: per realizzare i titoli occorre utilizzare i tag <h1>…</h6> anziché il tag <font>, per definire paragrafi occorre utilizzare il tag <p> anziché tag <br> in successione, le tabelle devono essere utilizzate per tabulare dei dati e non per definire il layout di un documento.
La seconda parte dell’enunciato completa la prima indicando chiaramente che per formattare opportunamente un elemento è necessario ricorrere ai CSS anziché a marcatori (come il tag <font>) e attributi (come bgcolor) il cui unico scopo è quello di definire l’aspetto della pagina.
Requisito n. 4
Enunciato
Garantire che tutti gli elementi informativi e tutte le funzionalità siano disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina.
Il requisito indica di non affidare ai CSS in generale e al colore in particolare un’informazione utile alla corretta fruizione della pagina.
Per esempio, tramite una regola del tipo a {text-decoration:none} è possibile rimuovere la sottolineatura tipica dei collegamenti ipertestuali i quali saranno così distinguibili dal testo normale solo mediante un differente colore. Appare evidente che una simile scelta implica la violazione del Requisito n. 4 e che dunque dovrebbe essere evitata nei siti per i quali è richiesto il rispetto della Legge 04/2004.
Nei casi in cui la funzionalità di un link sia difficilmente equivocabile (per esempio in un tipico menu di navigazione) si può pensare di rimuovere la sottolineatura senza rischiare di mettere in difficoltà gli utenti.
Requisito n. 6
Enunciato
Garantire che siano sempre distinguibili il contenuto informativo (foreground) e lo sfondo (background), ricorrendo a un sufficiente contrasto (nel caso del testo) o a differenti livelli sonori (in caso di parlato con sottofondo musicale); evitare di presentare testi in forma di immagini; ove non sia possibile, ricorrere agli stessi criteri di distinguibili indicati in precedenza.
Il requisito riguarda sia le scelte cromatiche per i contenuti della pagina web, le quali sono del tutto indipendenti dall’uso dei CSS e che pertanto non saranno trattate in questa sede, sia le modalità con cui tali scelte sono applicate tramite i CSS.
Si supponga di aver scelto di assegnare allo sfondo del testo su un colore grigio chiaro (per esempio #EEEEE) attraverso la regola CSS seguente.
body { background-color: #EEEEEE; }
Nell’esempio sopra riportato è indicato solamente il colore di sfondo, dando per scontato che il colore del testo sia il nero. Costituisce tuttavia un errore dare per scontato che il testo sia automaticamente di colore nero. Si consideri la figura che segue, ottenuta utilizzando la regola body {background: #EEEEEE;} su Internet Explorer impostando però l’aspetto del desktop con la combinazione di colori nero a contrasto elevato (utile, per esempio a chi avesse problemi più o meno gravi di ipofisine).
Come si nota dalla precedente immagine, i risultato ottenuto è una pagina praticamente illeggibile: testo bianco su sfondo grigio chiaro. Ciò è accaduto poiché si è dato per scontato che i colori predefiniti del browser per testo e sfondo fossero rispettivamente nero e bianco e si è deciso di sovrascrivere solamente il colore dello sfondo, senza considerare che le impostazioni del sistema operativo possono condizionare il comportamento del browser. Impostando per esempio Windows XP con la combinazione colori nero a contrasto elevato il testo sarà rappresentato come bianco su nero, dunque una regola che definisse solamente il colore dello sfondo ignorando pure quello del testo potrebbe portare a risultati del tutto inaspettati e illeggibili. Quando si imposta un colore di sfondo è dunque buona pratica accertarsi che pure il colore del testo sia impostato di conseguenza (e viceversa).
Requisito n. 9
Enunciato
per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti dalla DTD adottata per descrivere i contenuti e identificare le intestazioni di righe e colonne.
Questo requisito in pratica richiede l’utilizzo di tutti gli attributi e di tutti marcatori che contribuiscono alla creazione di una tabella ben strutturata, come per esempio <th> e <caption>. Sebbene il rispetto di questo requisito sia un problema che non coinvolge i CSS ma riguarda esclusivamente il codice (X)HTML adottato, l’utilizzo di elementi come <th> e <caption> permette di sfruttare al massimo i CSS, per esempio formattando le celle delle intestazioni di colonna (<th>) in modo differente dalle celle di dati (<td>).
Requisito n. 11
Enunciato
Usare i fogli di stile per controllare la presentazione dei contenuti e organizzare le pagine in modo che possano essere lette anche quando i fogli di stile siano disabilitati o non supportati.
Un errore piuttosto comune che può essere commesso nell’uso esteso dei CSS consiste nel realizzare i fogli di stile senza tuttavia aver realmente separato i contenuti dalla loro formattazione. Molte pagine realizzate con i CSS fanno un uso improprio dell’elemento DIV trascurando del tutto la struttura della pagina (titoli, paragrafi, liste ecc.). È invece importante accertarsi che, anche senza i CSS, la pagina sia intuitiva e facilmente fruibile. Per esempio, adottano un codice XHTML realizzato pensando innanzitutto ai contenuti e alla loro rappresentazione attraverso elementi che rispettassero quanto più possibile la semantica dei contenuti stessi; solo successivamente al codice XTML si possono associare i CSS per ottenere la formattazione desiderata.
Requisito n. 12
Enunciato
La presentazione e i contenuti testuali di una pagina devono potersi adattare alle dimensioni della finestra del browser utilizzata dall’utente senza sovrapposizione degli oggetti presenti o perdita di informazioni tali da rendere incomprensibile il contenuto, anche in caso di ridimensionamento, ingrandimento o riduzione dell’area di visualizzazione o dei caratteri rispetto ai valori predefiniti di tali parametri.
In modo non del tutto esplicito, questo requisito sembra richiedere l’uso di layout liquidi anziché a larghezza fissa. Delle numerose tecniche di impaginazione è dunque preferibile utilizzare solo quelle che consentono di realizzare layout liquidi, quando il sito da creare è vincolato al rispetto della Legge 04/2004.
Il requisito pare inoltre suggerire l’utilizzo di caratteri ridimensionabili, per cui è bene evitare l’uso dei pixel per dimensionare il testo preferendo a tale unità di misura gli em oppure le unità percentuali, poiché Internet Explorer non supporta il ridimensionamento dei caratteri quando questi hanno una dimensione assegnata tramite l’unità px.
Requisito n. 19
Enunciato
[…] prevedere meccanismi che consentano di evitare la lettura ripetitiva di sequenze di collegamenti comuni a più pagine.
Per utenti che navigano mediante screen-reader, browser testuali o dispositivi mobili può risultare molto utile la possibilità di saltare i menu di navigazione e accedere direttamente ai contenuti.
Tale possibilità è realizzabile mediante link di navigazione interni alla pagina stessa. Se da un lato tali collegamenti interni alla pagina sono molto utili a chi utilizzasse particolari programmi di navigazione, nella normale fruizione tramite un browser “classico” gli stessi collegamenti potrebbero risultare inutili (e quindi dannosi), fuorvianti o semplicemente fuori luogo dal punto di vista grafico.Tuttavia tramite i CSS è possibile introdurre tali link all’interno del codice XHTML e nasconderli per i browser più comuni.
Oltre i requisiti
Oltre ai requisiti indicati nel Decreto attuativo della Legge 04/2004, i CSS sono coinvolti in altre questioni riguardanti l’accessibilità, come per esempio quelle che saranno brevemente qui di seguito accennate.
Nascondere i contenuti
Tramite i CSS è possibile eliminare contenuti dalla pagina (per esempio i link di navigazione interna di cui si parlava nel precedente paragrafo) attraverso varie tecniche. La tecnica più semplice prevede l’utilizzo della dichiarazione display:none che elimina del tutto i contenuti dalla pagina ma che per questo stesso motivo potrebbe comportare problemi a chi navigasse mediante uno screen-reader: eliminati completamente dalla pagina, i contenuti (per esempio gli utili link per la navigazione interna) non sarebbero disponibili neppure per gli utenti ai quali tali contenuti sono dedicati.
Per nascondere i contenuti di una pagina, senza tuttavia eliminarli, si può ricorrere a soluzioni che portino i contenuti “fuori” dalla finestra del browser, come per esempio le dichiarazioni position:
absolute; top:-10000em
Ordinamento dei contenuti
Quando si naviga un sito web tramite un browser “non convenzionale” (screen-reader, browser testuale ecc.) l’ordine in cui i contenuti sono inseriti è importante.
Menu di navigazione a comparsa
Tramite Javascript è possibile realizzare in modo più o meno semplice menu di navigazione a più livelli, con i sottomenu che appaiono e scompaiono al passaggio del mouse. Molti di questi senza Javascript o senza CSS diventano del tutto inutilizzabili.
Immagini introdotte tramite i CSS
I CSS possano essere utilizzati con successo per inserire immagini all’interno di una pagina, per esempio per sostituire del testo con una immagine (per esempio la sostituzione di un titolo con un logo). Delle diverse tecniche possibili, solo alcune non presentano problemi di accessibilità nel momento in cui l’immagine non fosse disponibile. È dunque importante scegliere con attenzione quali tecniche di sostituzione di testo con immagini adottare quando fosse necessario realizzare un sito web accessibile.
Contenuti generati
I contenuti generati e le possibilità di aggiungere contenuti che questi offrono non siano ben supportate da tutti i browser, per cui è importante evitare di affidare ai CSS la generazione di contenuti necessari alla corretta fruizione della pagina, al fine di evitare problemi agli utenti che utilizzino dei browser non in grado di supportare tali funzionalità.
CSS specifici per migliorare l’accessibilità di una pagina
Sebbene sia importante adottare soluzioni che rendano in ogni caso i contenuti il più possibile accessibili, i CSS permettono di definire stili alternativi i quali possono prevedere particolari accortezze per quegli utenti che possono avere difficoltà nella normale fruizione della pagina. Per esempio è possibile prevedere fogli di stile particolari che aumentano il contrasto dei contenuti o che prevedono contenuti con caratteri grandi organizzati in due colonne anziché con caratteri piccoli organizzati in tre colonne. È evidente che tali soluzioni non possono certo soddisfare le necessità di tutti gli utenti né possono giustificare la mancanza di qualsiasi accortezza per quanto riguarda i problemi relativi all’accessibilità dei siti web, tuttavia tali soluzioni possono costituire una gradita alternativa per chi avesse esigenze non pienamente soddisfatte dalla versione “ufficiale” del sito web.
Autore: Gianluca Troiani – Tratto da: CSS Guida completa – Apogeo
