Porte Aperte sul Web

di Marco Bertoni, membro del WCAG Working Group del W3C per l’International Webmasters Association

Marco Bertoni, moderatore della Giornata Aperta del 3 maggio 2007 e organizzatore del Convegno “Websenzabarriere” del 31 maggio, .gentilmente ci autorizza a pubblicare un suo intervento recentemente apparso in versione italiana ed inglese sul sito www.xhtml.com e sul suo blog www.semplicemente.org. Conoscendo ad apprezzando la chiarezza comunicativa dell’autore, lo sottoponiamo ai docenti convinti che ne potranno trarre preziose indicazioni.

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.

<h1>Questa è un'intestazione</h1>
<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, una regola che modifica le dimensioni dei caratteri nei paragrafi:

p { font-size: small; }

Le regole CSS seguono il seguente modello:

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’e-sempio 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:

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:

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 incre-menti, la dimensione massima visualizzata può non es-sere larga abbastanza per alcuni utenti ipovedenti se la dimensione normale del testo (corrispondente all’o-pzione “Medio”) è impostata a un valore troppo basso.