Drupal 6 navigazione veloce.
menu principale | colonna di navigazione a sinistra | contenuto principale | colonna di navigazione a destra | piè di pagina

menu principale

contenuto principale

Avvertenze per l'accessibilità

Legge Stanca e accessibilità dei siti scolastici.

Drupal si presta molto bene per la legge Stanca ed è un'ottima scelta per le scuole.
Se proviamo, infatti, a passare in rassegna 22 requisiti tecnici di accessibilità previsti dalla legge Stanca del 2004 per vedere come si comporta Drupal 6, ci accorgiamo che questo Content Management System (CMS) è particolarmente attento agli standards web.

In alcuni casi bisogna intervenire per apportare alcune modifiche ai moduli (in genere a quelli aggiuntivi al core) oppure al tema grafico scelto. Per gli aspetti che riguardano la presentazione e la formattazione bisogna intervenire sui fogli di stile CSS. I fogli di stile sono più di uno: non c'è infatti soltanto quello del tema grafico scelto, bisogna infatti contollare anche quelli di alcuni moduli aggiuntivi.

Vediamo ora, in estrema sintesi, come Drupal si presenta di fronte ai 22 requisiti tecnici di accessibilità e quali sono le gli aspetti rispetto ai quali bisogna prestare particolare attenzione.
Vedremo che nella maggior parte dei casi i problemi derivano dal modo in cui i contenuti vengono pubblicati sul sito.
I collaboratori del sito scolastico devono avere quindi una minima formazione su come deveno essere redatti i contenuti.
E' sufficiente, infatti, fare un copia incolla selvaggio da Word nell'editor web utilizzato nel nostro modello di sito (FCKeditor) per perdere immediamente la conformità al requisito 1 della legge Stanca.

Segnaliamo alcune risorse web significative:

Requisito 1
Drupal fa uso di codice web xhtml 1.0 strict valido con instestazioni corrette, almeno per il tema predefinito Garland. Certo, poi dipende da come l'utente genera le pagine web: se si usi FCKeditor e si fa il copia incolla selvaggio da Word il requisito 1 va a farsi friggere. Quando si fa il copia e incolla non si copia e incolla soltanto il testo "puro", ma anche un sacco di zuppa di codice html.

Sopratutto gli amministratori del sito, ma è bene insegnarlo anche agli altri web editor, dovranno costantemente controllare che tutti i nodi (ossia i vari tipi di contenuto) pubblicati passino il controllo con i validatori automatici per l'XHTML strict 1.0.
Bisogna controllare la correttezza anche dei fogli di stile CSS.
A questo proposito segnaliamo i servizi del W3C per le pagine web e per i fogli di stile CSS .

Va ricordato che bisogna anche rispettare i valore semantico degli elementi ed attributi del linguaggio XHTML.

Ciò significa che il testo di una pagina web deve essere strutturato con le intestazioni h1, h2, h3, ecc. e che queste devono rispettare l'ordine gerarchico. Ne consegue che una intestazione h2 non può, per esempio discendere da una h3 e che non si può passare direttamente da una h1 ad una h3 senza prima passare per l'intestazione h2. Nel modello di sito qui proposto abbiamo optato per una sola intestazione h1 per pagina web. I blocchi e il titolo principale della pagina sono marcati con h2. Quando si installa un nuovo tema grafico bisogna quindi controllare anche che sia rispettata la corretta gerarchia delle intestazioni.

Con il ricorso alla Barra dell'accessibilità per Explorer oppure mediante la Web developer toolbar per Firefox è possibile controllare e verificare la correttezza di questi aspetti e quindi la conformità al requisito tecnico 1.
Ciò significa che non è sufficiente ricorrere ai validatori automatici per verificare la conformità: ci sono controlli che devono essere effettuati anche attraverso altre modalità e strumenti.

Vediamo altri esempi di uso semantico corretto:

  • Quando si scrivono delle liste di contenuti queste devono essere marcate come liste con l'elemento "OL" oppure "UL".
  • Le tabelle devono essere utilizzate per organizzare i dati e non per sostanzialemte formattare i contenuti
  • Per far rientrare blocchi di testo rispetto ai margini della pagina bisogna ricorrere ai fogli di stile CSS e non all'elemento "blockquote"
  • Le intestazioni h1, h2, h3, ecc. devono essere utilizzate per strutturare i contenuti e non per ingrandire la dimensione dei testi

Requisito 2
Drupal non fa uso di frame, almeno per il front office.
Nel modello di sito qui proposto è stato tolto, sul lato amministrativo, nella sezione Permessi un frame.

Requisito 3
Quando si pubblicano delle immagini all'interno dei nodi bisogna inserire i testi alternativi alle immagini.
Ciò significa che bisogna istruire i collaboratori del sito che pubblicano immagini nei vari nodi di Drupal affinchè inseriscano il testo alternativo. Se l'immagine è soltanto decorativa l'attributo "ALT" dell'elemento "IMG" va lasciato vuoto.
Il testo alternativo deve essere significativo. Per esempio, se mettiamo sul sito in numero verde antibullismo sotto forma di immagine GIF, il testo alternativo dovrà contenere come minimo in numero verde (e non il testo "numero verde antibullismo"), altrimenti un alunno non vedente vittima di atti di bullismo non potrà fare ricorso al servizio.

Requisito 4
Per non vincolare informazioni e funzionalità alla possibilità di percepire i colori bisogna inserire almeno la sottolineatura dei link nelle pagine con il testo. Se si usa il tema grafico di default di Drupal si deve quindi modificare il CSS di Garland.

Requisito 5
Per gli oggetti lampeggianti si deve stare attenti a che tipo di banner o GIF si intende inserire.
Spesso soprattutto le insegnanti amano inserire effetti luna park di ogni genere che fanno a pugni con l'accessibilità

Requisito 6
Per i contrasti tra foreground e lo sfondo si deve stare stare attenti ai colori che si vuole utilizzare.
L'editor FCKeditor che abbiamo scelto per il modello di sito scolastico permette di sbizzarrirsi alla grande: bisogna allora fare ricorso alla barra dell'accessibilità di Explorer per controllore che il contrasto sia conforme alla legge.
Bisogna prestare attenzione anche al set di colori forniti dal tema grafico scelto: alcuni contrasti del tema Garland non passano la verifica di conformità. Nel caso di Garland si può fare ricorso alla ruota cromatica per modificare i colori e quindi i contrasti. Per gli latri temi grafici si deve agire sui fogli di stile CSS.
Bisogna fare attenzione anche alle immagini ed ai banner che contengono sfondi colorati e testi.
Se usando il tema Garland disabilitiamo il caricamento delle immagini ci accorgiamo che il titolo del nostro sito diventa improvvisamente invisibile! Ciò perchè l'intestazione (header) del sito è realizzata mediante una gif sfumata ripetuta, mentre il titolo del sito è di colore bianco.

Il requisito riguarda anche i contenuti multimediali: il parlato deve essere sufficientemente percepibile quando c'è una musica di sottofondo.

Requisito 7 e 8
Per le mappe immagine si deve stare attenti a come le costruiamo

Requisito 9
Per le tabelle dati si deve stare attenti a come le costruiamo ricordandoci di inserire il Summary.

Requisito 10
Per le tabelle dati più complesse tutto dipende ancora una volta da come le costruisce il collaboratore del sito

Requisito 11
Drupal usa i fogli di stile CSS per controllare la presentazione dei contenuti.
Quindi, per esempio, per posizionare le immagini a destra o a sinistra del testo nondobbiamo usare "ALIGN" bensì i fogli di stile CSS.
Il tema grafico di default Garland usa i fogli di stile e non le tabelle.
In genere oramai tutti i temi grafici fanno ricorso ai fogli di stile, bisogna però controllare questo aspetto quando si decide di scaricarne uno nuovo dalla sezione "Temi" del sito ufficiale di Drupal. Circolano ancora infatti alcuni temi grafici in formato tabellare. I temi forniti dal core di Drupal 6 come Pushbutton, Marvin e Chamaleon sono infatti ancora in formato tabellare.

Requisito 12
In genere i contenuti di un sito realizzato con Drupal si adattano alla finistra del browser e i caratteri possono essere ridimensionati.
Bisogna stare attenti a scegliere un tema grafico liquido anzichè fisso.
Il tema predefinito Garland va bene, tranne quando la risoluzione dello schermo utilizzata dall'utente scende a 800 per 600: in questo caso compare la fastidiosa barra orizzontale di scorrimento.

Requisito 13
Drupal 6 non fa uso di temi grafici realizzati con le tabelle. Il tema predefinito Garland è realizzato solo con i CSS.
Qui vale quanto detto già detto per il requisito 11, quindi bisogna stare attenti al tema grafico che si intende installare. Nel modello di sito scolastico qui proposto il tema grafico è il framework Genesis modificato che fa uso solo di fogli di stile.

Requisito 14
Nel tema predefinito Garland i moduli (form) hanno l'etichetta esplicita label for e così pure il Genesis da noi modificato per il modello di sito proposto. Qui il controllo va fatto con attenzione perchè a volte i validatori automatici di accessibilità come Wave danno il semaforo verde nonostante manchi l'etichetta esplicita nei moduli (come il il motore di ricerca interno, il modulo di contatto e la maschera per effettuare il login)

Requisito 15 e 16
Per i requisiti 15 e 16 non mi pare ci siano problemi

Requisito 17
Qui ci troviamo di fronte ad un bel problema che è dato dai documenti allegati spesso scaricabili dagli utenti in formato PDF.
Se riempiamo il sito di files PDF non accessibili ci rendiamo facilmente conto che, ancora una volta, tutto dipende da noi: Drupal è un'ottima piattaforma di partenza rispettosa dell'accessibilità e quindi ottima per i siti scolastici perchè appartenenti alla Pubblica Amministrazione, ma se poi chi pubblica i contenuti non ha la più pallida idea di cosa sia l'accessibilità...
Il classico esempio estremo di file PDF non accessibile è quello ottenuto da un documento cartaceo passato allo scanner e acquisito come immagine.

Requisito 18
Se sul sito abbiamo intenzione di pubblicare presentazioni multimediali o filmati dobbiamo inserire la trascrizione o un riassunto decente.

Requisito 19
Rendere chiara la destinazione di ogni link indipendetemente dal contesto: si deve stare attenti a non creare link del tipo "clicca qui o lì".
Drupal 6 quando tronca un articolo perchè troppo lungo inserisce il link "Leggi tutto", però crea anche un Title del tipo "Leggi tutto il nodo xyz": in questo modo il requisito è soddisfatto. Diversamente si potrebbero avere nella stessa pagina web numerosi link a pagine diverse con lo stesso link "Leggi tutto".

Dobbiamo anche controllare che il tema grafico che abbiamo scelto sia fornito di salta menu che facilitano la navigazione agli utenti che visitano il sito con un lettore di schermo. In genere i temi grafici non hanno i salta menu e quindi dobbiamo crearli noi intervenendo sul tema grafico per adeguarci a questo requisito della legge Stanca.
Il tema grafico del modello di sito scolastico qui proposto è fornito di salta menu. Questo lo si verifica disabilitando i fogli di stile oppure visualizzando il codice xhtml.

Requisito 20
Per quanto riguarda i servizi temporizzati dipende sempre da cosa mettiamo sul sito

Requisito 21
Per le distanze tra i link o pulsanti si deve controllare il tema grafico prescelto. La distanza orizzontale e verticale tra link e pulsanti deve essere pari a 0.5 em

Requisito 22
Il requisito 22 non è più in vigore perchè la fase della prima applicazione delle legge è ormai passata da tempo.


colonna sinistra

colonna destra