Semplicemente

Una breve introduzione all'uso dei fogli di stile con l'accessibilità in mente.

You can find an English version of this article on Xhtml.com website.

Qualsiasi utente dovrebbe essere in grado di fruire dei contenuti e servizi offerti da un sito web. Questo è un principio basilare e universalmente riconosciuto, ma a volte dimentichiamo che utenti differenti hanno bisogni differenti.

Le persone con disabilità visive possono necessitare di tecnologie assistive per navigare il web; altri utenti hanno disabilità motorie che rendono difficile, o impossibile, l’utilizzo di sistemi di puntamento standard come un mouse; ognuno di noi nell’arco della vita può sperimentare una disabilità temporanea (come per esempio un braccio rotto) e così via.

Spesso i differenti livelli di abilità delle persone diventano vere e proprie barriere. Per ovviare a ciò, esistono alcune linee guida per l'accessibilità che un web designer può seguire durante lo sviluppo di un sito. Lo scopo di queste tecniche è quello di rendere le informazioni e i servizi disponibili a chiunque senza discriminazioni. Questo, in breve, è il significato della parola accessibilità applicata al web.

Separare il contenuto strutturato dalla presentazione

L'accessibilità del web è un campo ricco di aspetti diversi, ma il miglior punto di partenza, se si desidera rendere un sito maggiormente accessibile, è la separazione del contenuto strutturato dalla presentazione. Questa separazione è il principio che sta alla base degli standard del web e dell'accessibilità.

Il contenuto strutturato

Il contenuto strutturato è informazione organizzata in costrutti predefiniti. Un esempio classico è un libro, nel quale il contenuto è logicamente organizzato in capitoli e ordinato in titoli, sottotitoli, paragrafi e così via. La presentazione, invece, è il modo con il quale il contenuto appare nel libro. Questo può includere scelte tipografiche di base come il tipo e le dimensioni del carattere, fino a complessi layout visuali.

Nel caso delle pagine web il contenuto è strutturato utilizzando linguaggi di marcatura come (X)HTML. Attraverso un set predefinito di marcatori, (X)HTML fornisce struttura al contenuto grezzo indentificando intestazioni, paragrafi, tabelle, liste e altri costrutti comuni nei documenti. Nell'esempio seguente, il contenuto all'interno del marcatore h1 rappresenta un'intestazione di primo livello e il contenuto all'interno del marcatore p rappresenta un paragrafo.

1. <h1>Questa è un'intestazione</h1>
2. <p>Questo è un paragrafo.</p>

I browser web, i motori di ricerca e le tecnologie assistive interpretano questi marcatori predefiniti e processano il contenuto di conseguenza.

La presentazione

Prima della diffusione nei browser del supporto al linguaggio CSS (Cascading Style Sheets, Fogli di Stile a Cascata) alcuni marcatori erano normalmente utilizzati per applicare la formattazione al contenuto. L'ormai obsoleto marcatore font, per esempio, era utilizzato per modificare il tipo, le dimensioni e il colore dei caratteri. Il marcatore blockquote, la cui funzione corretta è quella di rappresentare un blocco di testo citato, era erroneamente utilizzato per aumentare il margine.

Il problema insito nell'utilizzo di marcatori presentazionali per la formattazione è che essi sono incorporati nel contenuto. Questo significa che la rappresentazione visuale del documento può essere processata in un solo modo: quello determinato dal designer. Inevitabilmente ciò limita l'accessibilità per molti utenti e dispositivi.

L'avvento del linguaggio CSS ha radicalmente cambiato il modo con il quale il contenuto è formattato. Le regole di formattazione non necessitano più di essere incorporate nel contenuto, ma possono essere create in file separati i quali rendono più semplice per il designer applicare nuova formattazione, e consentono ai dispositivi di processare il contenuto senza il "rumore" della formattazione.

Scrivere un foglio di stile e semplice. Ecco, per esempio, una regola che modifica le dimensioni dei caratteri nei paragrafi:

1. p { font-size: small; }

Le regole CSS seguono il seguente modello:

1. selettore { proprietà: valore; }

Il "selettore" specifica a quali marcatori saranno applicate le proprietà di formattazione. Nel nostro esempio il selettore p indica che le proprietà saranno applicate a tutti i paragrafi presenti nel documento.

La "proprietà" è una voce scelta da una lista predefinita di caratteristiche di formattazione come il colore, il carattere, il bordo ecc. Nell'esempio font-size è utilizzata per modificare le dimensioni dei caratteri.

Il "valore" è un numero, una stringa, una percentuale, un URI (Uniform Resource Identifier) o una parola chiave predefinita utilizzati per modificare la proprietà. Nell'esempio font-size è impostata al valore small (una delle parole chiave assolute utilizzate per dimensionare i caratteri).

In una regola la proprietà e il valore formano una "dichiarazione". Una regola può contenere molte dichiarazioni, ognuna delle quali deve essere seguita da un punto e virgola. Per esempio:

1. selettore { proprietà: valore; proprietà: valore; }

La parte della regola delimitata dalle parentesi graffe e chiamata "blocco di dichiarazione".

Una volta scritte le regole è necessario associarle ad uno o più documenti. Per ottenere la massima flessibilità il W3C (World Wide Web Consortium) raccomanda di inserire tutte le regole CSS in un file di testo separato e collegato al/ai documento/i (X)HTML con l'elemento link (questo tipo di foglio di stile è chiamato "esterno").

Utilizzando questo metodo un singolo foglio di stile esterno può controllare la formattazione di un infinito numero di documenti (X)HTML, ed è precisamente in questo modo che si ottiene la separazione del contenuto dalla presentazione così essenziale per l'accessibilità.

Semplici suggerimenti per utilizzare CSS con l'accessibilità in mente

Unità di misura per dimensionare i caratteri

Ogni utente dovrebbe poter ingrandire i caratteri utilizzando il suo browser preferito. Ciò può rendere la lettura più confortevole per molte persone oltre ad essere essenziale per gli ipovedenti.

Al momento in cui scrivo il browser Internet Explorer 6 non è in grado di ingrandire il testo se i caratteri sono specificati in pixel. La nuova versione 7, recentemente rilasciata, è in grado di farlo grazie allo strumento per lo zoom della pagina integrato nel browser. Comunque, se si desidera garantire la retro-compatibilità, utilizzare i pixel non è ancora un metodo serio per dimensionare i caratteri.

Scegliere le migliori unità di misura può essere difficoltoso a causa di un vecchio fraintendimento in merito alle unità "relative" e l'accessibilità. Il punto di controllo 3.4 delle Techniques for Web Content Accessibility Guidelines 1.0 indica ai designer di utilizzare unità di misura relative piuttosto che assolute. I seguenti sono esempi di unità di misura assolute:

• pollici (in)
• centimetri (cm)
• millimetri (mm)
• punti (pt)
• pica (pc)

Non è una buona idea utilizzare unità di misura assolute. Esse sono utili esclusivamente quando le proprietà fisiche del dispositivo di output sono note, ecco perché il punto di controllo suggerisce di utilizzare sempre unità di misura relative al loro posto. Questa indicazione può però creare confusione dato che anche il pixel è un'unità di misura relativa (alla risoluzione del dispositivo di visualizzazione) e utilizzare i pixel per dimensionare i caratteri, come abbiamo visto, non è corretto per l'accessibilità, almeno per adesso.

Potremmo affermare che le unità di misura migliori per dimensionare i caratteri in modo accessibile sono em e percentuale (%). In realtà i designer dovrebbero poter utilizzare una qualsiasi unità di misura a loro scelta, a patto che garantisca l'ingrandimento del testo in ogni browser. Per questa ragione, quando si scrivono linee guida, sarebbe preferibile parlare di funzioni piuttosto che di specifiche unità di misura. I browser evolvono e il loro supporto per le unità e per le funzioni di ingrandimento può cambiare.

Alla luce di ciò, io suggerisco più generalmente di utilizzare sempre unità di misura scalabili per dimensionare i caratteri. Inoltre non bisogna dimenticare che anche lo spazio interlineare (lo spazio tra le righe del testo) deve essere scalabile. Per questa ragione è preferibile utilizzare valori numerici privi di unità di misura per la proprietà line-height (per esempio 1.5) perché questi valori sono scalabili e risolvono alcuni ulteriori problemi.

Infine, tutti i browser hanno un valore predefinito per il dimensionamento del testo che si applica quando nessun foglio di stile è specificato. Questa dimensione corrisponde a un valore di font-size pari al 100%, a 1em o alla parola chiave assoluta medium. Un designer può modificare la dimensione predefinita dei caratteri di una pagina con una regola come la seguente:

1. body { font-size: 0.7em; }

I browser tratteranno questo nuovo valore come quello "Normale" o "Medio". Se le unità di misura utilizzate sono scalabili i browser consentiranno all'utente di aumentare o diminuire la dimensione dei caratteri in relazione al valore normale impostato.

Ma è importante notare che i vari browser hanno funzionalità differenti per consentire all'utente l'ingrandimento del testo. Ecco, per esempio, un'immagine delle funzionalità per l'ingrandimento del testo in Firefox che consentono all'utente incrementi multipli:

Con IE, al contrario, sono possibili solo due incrementi (le opzioni "Grande" e "Molto grande"):

Poiché con IE sono possibili esclusivamente due incrementi, la dimensione massima visualizzata può non essere larga abbastanza per alcuni utenti ipovedenti se la dimensione normale del testo (corrispondente all'opzione "Medio") è impostata a un valore troppo basso.

Elementi interattivi

Una persona con disabilità motorie che influenzano la destrezza manuale può utilizzare sistemi di puntamento alternativi, o altre tecnologie assistive, per selezionare gli elementi interattivi di una pagina come i collegamenti ipertestuali o i pulsanti dei moduli. Siccome l'accuratezza dell'utente è generalmente scarsa, collocare i collegamenti, i pulsanti e i campi dei moduli troppo vicini l'uno all'altro può renderne difficoltoso il selezionamento. Per facilitare la selezione degli elementi interattivi è possibile:

• Incrementare il valore dell'interlinea. Il valore predefinito per l'interlinea nella maggior parte dei browser è 1.2. Un valore di almeno 1.5 è spesso una scelta migliore.
• Aumentare il margine tra le voci delle liste di collegamenti verticali e orizzontali. Per esempio, in una lista di collegamenti verticale, è possibile utilizzare una regola come la seguente: li { margin-top: 5px; margin-bottom: 5px; }. La spaziatura può anche essere incrementata utilizzando padding anziché margin.
• Assicurarsi che ci sia uno spazio adeguato tra i pulsanti dei moduli, tra i vari campi e tra questi ultimi e i pulsanti.

Questi sono suggerimenti generali e i valori indicati sono puramente esemplificativi.

E' necessario ricordare che anche le etichette dei pulsanti dei moduli, e il contenuto testuale dei campi, devono essere scalabili come il resto del testo. Per fare in modo che ciò avvenga anche in Internet Explorer è possibile impostare una regola come la seguente:

1. input, button, textarea, select { font-size: 100%; }

Navigazione del contenuto

Gli utenti non vedenti navigano il web in maniera differente. Questo fatto può sembrare ovvio, ma spesso i designer dimenticano che lo screen reader legge il contenuto di una pagina web esattamente nell'ordine in cui esso appare nel codice (X)HTML. Bisogna tenere bene in mente questo aspetto quando si specificano proprietà di posizionamento CSS.

Il posizionamento CSS consente infatti ai designer di collocare visualmente un elemento in qualsiasi punto della pagina web. Per esempio il posizionamento assoluto rimuove letteralmente l'elemento dal flusso normale del documento, in questo modo la posizione sullo schermo può essere anche molto diversa da quella occupata nel flusso del codice.

Dato che lo screen reader processa l'elemento nella posizione in cui appare nel codice è importante che l'ordine di lettura su schermo sia coerente con quello presente nel codice. In caso contrario possono verificarsi confusione e perdita di informazione per tutti gli utenti che non hanno accesso al rendering visuale della pagina.

Per progettare siti web accessibili è quindi necessario modificare le nostre comuni idee sulla navigazione web, comprendere meglio a cosa servono e cosa possono fare gli screen reader può essere utile a tale scopo. Per esempio uno screen reader:

• consente di spostarsi tra i vari elementi costituenti una pagina: parole, linee, paragrafi;
• consente di leggere i soli elementi Hn, indicandone la gerarchia;
• consente di saltare tra le varie tabelle e moduli presenti nella pagina;
• consente di leggere le liste (X)HTML indicando gli eventuali livelli di annidamento;
• è in grado di utilizzare l’informazione contenuta in alcuni attributi degli elementi (X)HTML, ad esempio: alt, summary, title;
• consente all’utente di gestire segnalibri creati ad hoc all’interno della pagina;
• consente di gestire cookies e bookmark alla stessa stregua di un browser visuale ecc.

A causa del modo in cui i lettori di schermo processano il contenuto, ascoltare una pagina letta può essere quindi un'esperienza del tutto differente dal leggere lo stesso contenuto su schermo. Il guru dell'usabilità Jacob Nielsen scrisse dieci anni fa: "Le persone raramente leggono le pagine web parola per parola; piuttosto scansionano la pagina, selezionando singole parole e frasi". Questa tecnica di scansione visiva casuale è evidentemente impossibile per un utente non vedente. Per dare alle persone con disabilità visive tutte le opportunità possibili per fruire al meglio dei contenuti del web, esistono alcuni accorgimenti che un designer può seguire:

• Strutturare le pagine in modo tale che possano essere lette quando i fogli di stile sono disabilitati o non supportati.
• Assicurarsi che vi sia coerenza tra il flusso del contenuto così come appare nel codice e quando è visualizzato a schermo.
• Facilitare sistemi alternativi di scansione del testo:
  • scrivendo le intestazioni come microcontenuti esplicativi e correttamente strutturati, in questo modo l'utente non vedente, facendosi leggere dallo screen reader solo le intestazioni, potrà costruire una mappa mentale della pagina in modo più semplice;
  • suddividendo il testo in paragrafi (elemento p) in modo tale che gli utenti possano navigare facilmente attraverso porzioni di contenuto;
  • utilizzando le liste (ul, ol) per raggruppare logicamente gli elementi informazionali, e utilizzando le liste numerate (ol) quando la successione è importante;
  • utilizzare gli elementi e gli attributi appropriati per le tabelle dati, come: summary, caption, headers, scope ecc.

Niente di nuovo quindi. Applicare le potenzialità dei linguaggi standard nel modo corretto è il primo e, a mio avviso, il più importante contributo all'accessibilità.

Un'altra considerazione importante riguarda i blocchi di informazione ripetuti da una pagina all'altra (come i menu). E' necessario implementare un meccanismo che consenta allo screen reader di saltare la lettura di questi elementi, per risparmiare agli utenti non vedenti l'irritazione della ripetizione. Un semplice link (X)HTML è sufficiente a risolvere il problema, tuttavia probabilmente si desidererà nascondere questo collegamento agli altri utenti. La proprietà CSS display, con il valore none, è stata spesso utilizzata per nascondere porzioni di codice destinate esclusivamente agli screen reader.

Il seguente esempio di codice può essere inserito prima di un menu che il designer desidera nascondere:

1. <p class="nascosto"><a href="#contenuto-principale" title="Salta al contenuto principale">Salta il menu</a></p>

Ad esso si associa la regola CSS: .nascosto { display: none; } e, teoricamente, ci si aspetta che l'informazione, nascosta ai browser visuali, resti visibile allo screen reader, in modo da consentire all'utente non vedente l'attivazione del link per saltare al contenuto principale.

Sfortunatamente, la visibilità allo screen reader non è garantita perché alcuni di essi non sono in grado di leggere il contenuto nascosto. Bob Easton ha sviluppato una soluzione al problema (chiamata off-left), senza l'utilizzo della proprietà display:

1. .nascosto {
2. position: absolute;
3. left: -999px;
4. width: 990px;
5. }

Nel tempo sono state sviluppate numerose varianti di questa tecnica, ma il principio comune è quello di utilizzare il posizionamento assoluto per rimuovere l'elemento che si desidera nascondere dall'area di visualizzazione dello schermo, mantenendone inviariata la visibilità agli screen reader.

Le tecniche per nascondere il contenuto possono inoltre essere utili per fornire aiuti contestuali alla navigazione per gli utenti non vedenti. Per esempio per evidenziare quale sezione della struttura della pagina (sezioni tipicamente codificate con elementi div) è la successiva nel flusso del documento (il menu principale, il contenuto principale, il box delle novità ecc.) fornendo collegamenti per saltare da una sezione all'altra.

Un ultimo consiglio per la navigazione riguarda i menu molto lunghi e con parecchi sottolivelli nidificati. Il primo suggerimento è quello di riconsiderare la gestione dei contenuti, perché un menu palesemente troppo lungo e complesso potrebbe essere indicativo di errori nella progettazione dell'interfaccia. Gli utenti non vedenti, per esempio, troveranno difficoltoso ricordare un menu con un elevato numero di voci e sottolivelli nidificati. E' preferibile perciò creare menu il più corti possibile e assicurarsi che abbiano una struttura sensata. Inoltre è buona regola raggruppare le voci coerenti con intestazioni e prevedere una modalità per saltare da un'intestazione all'altra, al posto di costringere gli utenti di screen reader ad ascoltare ogni voce e sotto-voce presente nel menu prima di raggiungere l'informazione che cercano.

Conclusione

Separare il contenuto strutturato dalla presentazione è un buon primo passo verso la produzione di siti web accessibili. Una volta che il contenuto è separato dalla presentazione, applicare la formattazione CSS in modo corretto è il passo successivo. Utilizzare fogli di stile esterni, specificare unità di misura scalabili per le dimensioni dei caratteri e dello spazio intelineare e rendere adeguato lo spazio attorno agli elementi interattivi, come campi dei moduli e collegamenti ipertestuali, può rendere il tuo sito web maggiormente usabile per tutti.

Articoli correlati

• Introduzione ai CSS - Centrare un box (2)
• Introduzione ai CSS - Due parole su XHTML (0)
• Introduzione ai CSS - Overflow, clip e visibility (0)
• Introduzione ai CSS - Il visual formatting model (3)
• Introduzione ai CSS - La struttura di un documento (5)

Tag: CSS, separazione del contenuto dalla presentazione

Questo articolo è stato inviato Mercoledì 2 Maggio 2007 alle 0:08 ed è archiviato nella categoria Accessibilità. Puoi seguire le risposte tramite il feed RSS 2.0. I commenti sono attualmente chiusi, ma puoi eseguire un trackback dal tuo sito.