i nostri consigli per i vostri siti scolastici
-piccoli suggerimenti-

Dopo aver analizzato decine di siti scolastici, pensiamo sia utile fornirvi anche un piccolo elenco di consigli su come migliorare l'accessibilità del vostro sito scolastico.

Le Immagini e i link

I contenuti

Le tabelle

I frame

LE IMMAGINI E I LINK

Tutte le immagini devono avere sempre la descrizione alternativa.

I link, soprattutto se conducono a pagine esterne al vostro sito devono avere all'interno del tag <a:href l'attributo title="....." che segnala che quel link conduce a una pagina esterna al vostro sito. Per intenderci, il testo che compare spostando il puntatore sui link della barra di navigazione blu di sinistra di questa pagina sono stati messi con l'attributo "title".

I CONTENUTI

Indicate in home page, sempre l'indirizzo completo della vostra scuola. Comprensivo di provincia e del numero telefonico e/o fax. Sembra una banalità ma è frequentissimo dimenticarsene anche una parte.

Dividete i contenuti che riguardano i servizi dal resto. E' difficile fare un sito che sia interamente accessibile. E' impossibile che pagine fatte dagli studenti e che volete pubblicare lo siano. Cercate però di garantire sempre l'accessibilità delle pagine che assolvono a funzione di servizio. Basta un'home page, una di descrizione della scuola e una per i servizi al pubblico, con le comunicazioni più importanti, ad esempio.
Se proprio non è possibile, fate in modo che le pagine di servizio non accessibili, dispongano di una seconda versione accessibile a cui l'utente può accedere.

I suoni e le animazioni collegati alle pagine sono la waterloo dell'accessibilità! Non usateli: soprattutto nella home page della scuola! O almeno lasciate all'utente la possibilità di escluderli . Pensate che ogni volta che l'utente visita il vostro sito si deve sentire la musica di sottofondo o assistere all'animazione. Se inoltre è disabile e visita la pagina con un browser vocale, sarà totalmente ostacolato nella navigazione.

LE TABELLE

Usatele il meno possibile. Sappiate che dovrebbero essere usate solo per contenere dati e non per impaginare la vostra pagina web, però se vengono usate con cura possono anche essere utilizzate come contenitore degli oggetti della vostra pagina. Vediamo come.

Tabelle di dati
Le tabelle che contengono i dati, per essere accessibili devono contenere:

• la descrizione della tabella (il CAPTION) che comparirà come didascalia della stessa;
• un riassunto del contenuto della tabella (il SUMMARY) che non verrà visualizzato ma solo letto dal browser vocale;
• l'intestazione delle colonne (gli HEADERS).

I tag e i loro usi sono illustrati nell'esempio seguente. Di seguito trovi anche il codice html corrispondente (l'esempio è preso direttamente da un documento WAI)

Esempio di tabella dati accessibile (visualizzazione)

Esempio di tabella dati accessibile (codice html associato)

<TABLE border="1"
summary="Questa tabella mostra il numero di tazze di caffè bevute da ogni senatore, il tipo di caffè e la presenza di zucchero">
<caption>
Tazze di caffe consumate dai senatori
</caption>
<tr>
<th id="header1">Nome</th>
<th id="header2">Tazze</th>
<th id="header3" abbr="Type">Tipo di caff&egrave;</th>
<th id="header4">Zucchero?</th>
<tr>
<td headers="header1">T. Sesti</td>
<td headers="header2">10</td>
<td headers="header3">Espresso</td>
<td headers="header4">No</td>
<tr>
<td headers="header1">J. Tacchi</td>
<td headers="header2">5</td>
<td headers="header3">Decaf</td>
<td headers="header4">Si</td>
</table>

In questo modo, un browser vocale leggerà la tabella in questo modo:

Caption: Tazze di caffè consumate dai senatori.
Summary: Questa tabella mostra il numero di tazze di caffè bevute da ogni senatore, il tipo di caffè e la presenza di zucchero.
Nome: T.Sesti Tazze:10 Tipo di caffè: Espresso Zucchero: No
Nome: J.Tacchi Tazze:5 Tipo di caffè: Decaf Zucchero: Si

Come puoi notare, l'introduzione degli header permette al browser vocale di richiamare ogni volta l'intestazione della colonna, prima di leggere il contenuto della cella.

^top

Tabelle per la struttura della pagina (chiamate anche tabelle di layout)
E' possibile usare le tabelle per contenere oggetti anzichè dati, senza per questo peggiorare l'accessibilità della pagina. E' comunque necessario adottare alcuni accorgimenti.

Non si deve assolutamente costruire tutta la pagina con un'unica tabella. Alcuni dei siti scolastici da noi analizzati contengono pagine che sono composte da un'unica tabella contenente all'interno altre piccole tabelle e ogni casella contiene immagini, testo, gif animate eccetera. Questo è un uso assolutamente non accessible.<esempio di uso non accessibile delle tabelle di layout (vista struttura)>
E' invece accessibile usare anche diverse tabelle di layout nella stessa pagina, purchè staccate fra loro. Questo migliorerà anche il tempo di caricamento della pagina, dal momento che il browser visualizza solo quelle tabelle di cui ha completato il caricamento. Fate in modo che i contenuti di una stessa tabella siano omogenei, riguardino cioè lo stesso argomento. I contenuti della tabella devono esser disposti in modo che abbiano senso qualora vengano letti in maniera linearizzata per colonne o per righe.<esempio di uso accessibile di tabelle di layout (vista struttura)>

^top

I FRAME

Sono uno strumento usatissimo nella costruzione dei siti scolastici. Purtroppo sono anche la principale causa che ne compromette l'accessibilità. Vanno usati il meno possibile. Rendere accessibili delle pagine con i frame spesso risulta più complicato di crearne delle copie prive di frame. Se proprio non potete farne a meno, ecco le regole elementari da seguire per contenere i danni all'accessibilità del vostro sito scolastico...

1. Il frameset e tutte le pagine che lo compongono devono avere l'attributo "title" che aiuti il navigatore nella navigazione.
2. Inserite sempre il tag "noframe" che segnala ai browser che non possono visualizzare i frame (vecchi o incompatibili) come comportarsi.
   Potete inserire un testo oppure direttamente un a:href ad una pagina senza frame. In questo caso ricordatevi di associarvi il tag title di descrizione del link.
3. Le pagine che formano il frameset devono essere pagine html. All'interno, poi, eventualmente metteteci le immagini (con l'alt). Nessun frame deve far riferimento diretto ad una immagine (in pratica non usare mai src="*.gif").

Ad esempio, supponiamo che questa pagina dell'osservatorio sia composta da due frame. Uno di sinistra, la barra verticale blu, e che corrisponde al file denominato "sinistra.html" e uno di destra, la parte verde, e che corrisponde al file "destra.html". Insieme formano un insieme (o set) di frame che costituisce la pagina che hai di fronte.
Il codice associato sarà il seguente (in grassetto gli elementi sopradescritti)

<HTML>
<HEAD>
<TITLE>Un frameset corretto</TITLE>
</HEAD>
<FRAMESET cols="100%" title="Pagina del sito dell'Osservatorio Tecnologico dedicata all'accessibilità">
<FRAME name="sinistra" src="sinistra.html" title="Barra di navigazione">
<FRAME name="nomedestra" src="destra.html" title="Documento">
</FRAMESET>
<noframes><body>
Il browser da te utilizzato non supporta l'uso dei frame!!
</body></noframes>
</HTML>

^top