Separare Contenuto, Struttura Presentazione

I Fogli di stile

Testo alternativo

Specificare la lingua

Non è nostra intenzione elencare tutte le regole che bisogna seguire per fare un sito perfettamente accessibile. Ci limiteremo a spiegarne solo alcune. La selezione è stata fatta con un occhio alle linee guida WAI e con l'altro agli errori più comuni che abbiamo trovato nei siti web scolastici. Sono, infatti, alcune centinaia quelli finora analizzati (vedi elenco) e possiamo dire che la loro accessibilità è compromessa da poche ma gravi mancanze.

Non è richiesta alcuna conoscenza specifica o tecnologica particolare, solo alcune elementari nozioni di html. Se pensi di non possederle, ti suggeriamo questo piccolo corso di alfabetizzazione sull'html, pubblicato sul sito html.it

SEPARARE CONTENUTO, STRUTTURA E PRESENTAZIONE

Uno dei princìpi generali più importanti dell'accessibilità recita che bisogna sforzarsi di separare i contenuti dalla struttura e dalla presentazione. Cosa vuol dire esattamente?

Il contenuto sono le parole, le immagini ecc.
La struttura è la gerarchia che esiste tra gli elementi all'interno della pagina
La presentazione si riferisce allo stile con cui il documento è visualizzato

Ipotizziamo di voler realizzare una pagina web contenente il testo della Divina Commedia. Abbiamo la necessità che essa venga visualizzata nel seguente modo che stabilisce una gerarchia tra le sue varie parti (titolo dell'opera, nome del libro, canto ecc).

-inizio dell'esempio-

La Divina Commedia

Inferno

Canto 1

Nel mezzo del cammin di nostra vita
mi ritrovai per una selva oscura,
ché la diritta via era smarrita.

Ahi quanto a dir qual era è cosa dura
esta selva selvaggia e aspra e forte
che nel pensier rinova la paura!

Tant' è amara che poco è più morte;
ma per trattar del ben ch'i' vi trovai,
dirò de l'altre cose ch'i' v'ho scorte.

Canto 2

.........

........

Purgatorio

Canto 1

...........

Paradiso

-fine dell'esempio-

Questa pagina può essere il risultato della visualizzazione di pagine con codice html molto diverso tra loro. Ti proponiamo due esempi distinti di codice. Nel primo non hai separazione, nel secondo, invece il codice contiene degli elementi che permettono di separare il contenuto da tutto il resto.

Ripetiamo. Entrambi gli esempi di codice, vengono visualizzati dal browser nello stesso modo, quello della colonna "visualizzazione".
Come puoi notare, nell'esempio 1, l'effetto di ottenere i caratteri di aspetti differenti lo ottieni semplicemente modificando il font. Questo è un classico esempio in cui il contenuto è mescolato alla presentazione. E' una delle abitudini più comuni nei siti scolastici e anche peggiori per la loro accessibilità. Le dimensioni del carattere non devono mai essere specificate usando il tag "font" insieme al contenuto.
Mai.

Un modo corretto è quello visualizzato nell'esempio 2 in cui si usa un elemento dell'html che consente di creare una gerarchia logica all'interno del documento. Questo elemento si chiama "Heading" ed è contrassegnato da una h associata ad un numero. La funzione che assolve è quella di segnalare al browser che quelle parole sono di un tipo di titolo. Il browser quindi gli dà un certo rilievo. Ecco perchè con browser diversi o settati in modo differente, questi titoli possono esser visualizzati in maniera differente. La gerarchia al loro interno però, sarà sempre rispettata.

^top

I FOGLI DI STILE

Un modo più efficace degli headers per separare il contenuto dalla presentazione è quello di usare i fogli di stile. Pochissimi dei siti scolastici da noi testati li usano. Eppure sono uno strumento facile, flessibile e soprattutto una tappa obbligata per conseguire il livello minimo di accessibilità.
Vediamo brevemente cosa sono.

I fogli di stile sono file esterni alle pagine create, in cui sono raggruppati tutti gli elementi che permettono di definire lo stile di tutte le pagine. Tornando al nostro esempio, sarà necessario avere due file distinti: uno che contiene il codice html (colonna centrale) e un altro che è il foglio di stile.

Cosa c'è nella pagina html?
Nel tag head bisogna richiamare il foglio di stile.
Inoltre ogni elemento del body contiene il riferimento ad un determinato tag (<p>, <ul>, <a> oppure <h1>ecc) oppure ad una determinata classe, cioè una tipologia di carattere .

Cosa c'è nel foglio di stile?
C'è la descrizione delle caratteristiche dello stile di ogni tag e di ogni classe.

In questo modo, possiamo dire di isolare il contenuto che è nella pagina html, dalla presentazione che è nel foglio di stile

^top

Come puoi notare nel foglio di stile viene specificata la formattazione del tag <p> e di 3 classi a cui sono stati assegnati i nomi di "principale", "libro" e "canto". Le differenze tra di loro sono minime, solo il tipo di font-family o il font-size.

In pratica il foglio di stile raggruppa tutte le caratteristiche di formattazione che dovranno avere le varie parti di una pagina web.

Questo è un esempio molto semplice di uso di un foglio di stile. Uno strumento molto usato nel web e indispensabile per la realizzazione di siti accessibili.
Infatti associando una stessa pagina html a fogli di stile differenti è possibile ottenere delle visualizzazioni differenti.

L'esempio che abbiamo fatto è di foglio di stile cosiddetto "esterno" perchè esso è staccato dal codice html della pagina. E' anche possibile fare fogli di stile "interni" alla pagina. Essi sono collocati all'interno del tag <head> e gli stili definiti vengono applicati solo a quella pagina.

^top

TESTO ALTERNATIVO

Questo è uno dei punti più caldi in assoluto! Il WAI lo mette al primo posto e anche noi abbiamo visto che è il vero tallone d'Achille dei siti scolastici.
Abbiamo detto che la nostra pagina web deve prevedere la possibilità di essere letta dai Browser vocali . Fin quando incontrano testo, nessun problema! Ma quando si trovano di fronte ad una immagine non accessibile cosa fanno? Semplicemente non la leggono, la saltano.
Ecco perchè bisogna fornire equivalenti testuali al contenuto dell'immagine. Tecnicamente, si deve inserire nel codice una descrizione alternativa appositamente progettata e indicata.
Ti proponiamo questo esempio di immagine visualizzata e del suo codice associato.

La seguente immagine:

ha il seguente codice html associato:

<img src="../../IMAGES/logo_ote.gif" width="136" height="130">

essa non può essere in alcun modo compresa da un non vedente. Il contenuto dell'immagine non può essere trasmesso. Il codice non contiene informazioni inerenti l'immagine che il browser vocale possa trasmettere.

Ecco perchè e' necessario quindi, fornire un equivalente testuale di descrizione. Questa funzione viene assolta da un attributo specifico del tag img. Questo attributo importantissimo è chiamato descrizione alternativa, quello che si chiama comunemente "alt". Il codice dell'esempio precedente va quindi modificato inserendo le parti che qui sono in grassetto:

<img src="/images/accessibilita/logo_pro.gif" width="240" height="70" alt="Logo dell'Osservatorio Tecnologico " border="0" /></a>.

Ecco il risultato

Come puoi notare passando sopra all'immagine con il mouse, compare il testo esplicativo contenuto nel tag "alt"

Più che la descrizione dell'immagine, è più corretto dire che bisogna descrivere la funzione a cui l'immagine assolve. Così se ha solo funzione grafica, l'alt corretto sarà "Logo OTE". Se invece l'immagine ha anche funzione di link alla home page allora l'alt corretto sarà "Logo. Collegamento alla Home Page".

^top

SPECIFICARE LA LINGUA NATURALE DEL TESTO

Noi vogliamo fare un sito accessibile. Un sito per essere tale deve poter essere letto dai cosiddetti Browser vocali. Questi dispositivi creano una voce sintetica, hanno quindi bisogno di sapere la lingua del documento. Ecco perchè bisogna modificare il tag che trovi in cima alla pagina, aggiungendo una indicazione della lingua. Nel caso di pagina in italiano, cambia da:

<html>

in:

<html lang="ita">
Devi solo inserire lang="ita". Lo devi fare agendo direttamente sul codice. Anche da notepad.

Nel caso in cui, il tuo testo contenga dei cambi di linguaggio, li devi segnalare ogni volta.

Poniamo il caso di un documento scritto in italiano che contenga dei termini inglesi. In tal caso si deve inserire in cima alla pagina l'indicazione che la lingua prevalente è l'italiano, come suesposto, poi, in corrispondenza di ogni termine in lingua diversa dall'italiano, ne devi specifcare la lingua. A questo scopo ci torna utile usare l'elemento html "span". Esempio:

.........
<p>L'introduzione della <span lang="en">Information Technology </span>nella nostra scuola, ha permesso di migliorare i servizi offerti dal nostro <span lang="fr"> bureau</span> d'accoglienza studenti.
.....

In questo modo, il browser vocale, rispetterà il cambio di pronuncia in corrispondenza di ognuna delle parole straniere contenute nel testo

^top