A partire da Moodle 1.5 è iniziato un lavoro di separazione dei contenuti dalla loro presentazione con lo scopo di migliorare la flessibilità e l’accessibilità delle pagine. Così, nelle ultime versioni di Moodle, l’aspetto dell’aula virtuale può essere interamente modificato intervenendo solo sul foglio di stile scelto per il proprio corso. Alcuni temi sono forniti nella distribuzione ufficiale di Moodle, ma altri possono essere realizzati autonomamente ed è possibile personalizzare in modo abbastanza semplice il logo, i colori, gli stili e la grafica.
I temi di Moodle utilizzano i fogli di stile (CSS) per definire l’aspetto grafico di un corso. In particolare, in un tema sono generalmente presenti tre CSS che servono per definire gli stili per il layout (posizionamenti, margini, bordi, ecc), i font (tipo, dimensione, peso, allineamento, ecc.) e i colori (primo piano, sfondo, colore dei bordi, ecc). Moodle ha un tema “standard” che può servire come layout di base per realizzare altri temi . Sfruttando la cascata dei fogli di stile, infatti, le istruzioni definite nell’ultimo CSS sovrascrivono quelle definite precedentemente; questo dà agli autori dei temi molte opportunità, perché permette di realizzare un nuovo tema apportando solo piccole modifiche, come usare differenti colori o aggiungere il proprio logo, ad uno esistente. Per ulteriori informazioni sulla realizzazione di un tema si consulti la documentazione ufficiale di Moodle .
Di seguito verranno presentati alcuni suggerimenti per la realizzazione di un tema accessibile e conforme ai requisiti tecnici della Legge 4/2004; per ulteriori approfondimenti, si consulti Tecniche e suggerimenti per realizzare CSS conformi alle WCAG 1.0 .
Layout
Il primo requisito della Legge 4/2004 richiede l’utilizzo delle versioni più recenti disponibili dei linguaggi definiti da grammatiche formali pubblicate. Nel caso del layout di un sito, questo significa usare i fogli di stile definiti dalle Specifiche CSS . Per poter garantire la conformità a questo requisito è necessario utilizzare solo codice conforme alle specifiche ed e vitare tutte le caratteristiche deprecate dalle tecnologie W3C; per verificare la conformità del proprio foglio di stile alle specifiche del W3C è possibile utilizzare il servizio di validazione dei CSS .
Il requisito 11 impone di usare i fogli di stile per controllare la presentazione dei contenuti e organizzare le pagine in modo che possano essere lette anche quando i fogli di stile siano disabilitati o non supportati. Ciò significa che gli autori devono scrivere documenti che possono essere letti anche senza i fogli di stile. Come abbiamo visto precedentemente, nelle ultime versioni di Moodle il codice di marcatura risulta maggiormente strutturato e più attento all’uso semantico degli elementi XHTML; per quanto riguarda gli autori dei temi quindi il grosso del lavoro è stato già realizzato e gli interventi per realizzare un tema conforme alla normativa italiana devono essere concentrati solo sulla personalizzazione del foglio di stile e non su eventuali modifiche da apportare al codice di marcatura generato dalla piattaforma.
Il requisito 12 prevede che una pagina web debba potersi adattare alle dimensioni della finestra del browser anche in caso di ridimensionamento, ingrandimento o riduzione dell’area di visualizzazione. Ciò vuol dire realizzare layout che si adattano alla risoluzione scelta dall’utente (i cosiddetti layout liquidi). Nel DM 8 luglio 2005 non vengono specificati dei parametri per effettuare la verifica di questo requisito tecnico. Generalmente si tende a considerare 800*600pixel come la risoluzione minima dello schermo per la quale deve essere verificato che non ci siano sovrapposizione degli elementi della pagina o perdita di informazioni, tali da rendere incomprensibile il contenuto. È bene precisare che il tema standard rispetta il requisito 12: si consiglia, quindi, agli autori dei temi di non modificare le impostazioni definite in questo foglio di stile.
Anche se le tabelle d’impaginazione sono altamente sconsigliate, il loro uso non è vietato dalla Legge 4/2004, che richiede semplicemente di garantire che il contenuto della tabella sia comprensibile anche quando questa viene letta in modo linearizzato. Nelle prossime versioni di Moodle assisteremo con ogni probabilità all’abbandono delle tabelle di layout (in Moodle è già presente un formato di corso che non ne fa uso) e quindi per il momento si sconsiglia di intervenire sul codice della piattaforma.
Per facilitare la selezione e l’attivazione dei collegamenti presenti in una pagina, il requisito 21 richiede che la distanza verticale di liste di link e tra i pulsanti di un modulo sia di almeno 0,5em e che le dimensioni dei pulsanti siano tali da rendere chiaramente leggibile l’etichetta in essi contenuta. Per rispettare questo requisito è quindi necessario non ridurre eccessivamente gli spazi per il posizionamento dei link e degli oggetti ed evitare che gli elementi selezionabili abbiano una dimensione troppo piccola o che siano estremamente vicini tra loro. Anche in questo caso il tema standard di Moodle rispetta ampiamente il requisito in analisi e quindi non è necessario intervenire in alcun modo.
Un’ultima considerazione riguarda i loghi e in generale le immagini inserite nel proprio tema. Come vedremo successivamente, un accorgimento fondamentale per realizzare contenuti accessibili è la presenza di buoni testi alternativi, soprattutto se le immagini veicolano delle informazioni importanti per la comprensione del testo; n el caso del logo è necessario fornire un’alternativa testuale equivalente che deve svolgere la stessa funzione e quindi, ad esempio, deve riportare il nome del corso.
Font
I contenuti testuali di una pagina devono potersi adattare alle dimensioni dello schermo. Si deve quindi permettere il ridimensionamento o l’ingrandimento dei caratteri rispetto ai valori predefiniti dal browser. Per soddisfare questo requisito per la dimensione dei font è necessario utilizzare unità relative (em o %) e non i pixel perché Microsoft Internet Explorer non ne permette il ridimensionamento. Ad esempio, nel proprio CSS scrivere h1{font-size:2em} e non h1{font-size:16px} .
Un altro accorgimento da seguire riguarda la tipologia di font. Da studi effettuati risulta che i font senza grazie come Arial e Verdana sono maggiormente leggibili a schermo e quindi sono da preferire rispetto a quelli con le grazie come ad esempio il Times New Roman; inoltre, poiché non si può dare per scontato che l’utente abbia un particolare font sul proprio computer, è necessario specificare sempre un font generico di ripiego. In questo caso, scrivere nel proprio CSS body{font-family: arial,verdana,sans-serif;}
Colori
Il requisito 6 stabilisce che è necessario garantire che siano sempre distinguibili il contenuto informativo e lo sfondo ricorrendo a un sufficiente contrasto nel caso del testo. A tale scopo è possibile utilizzare dei software appositi, come ad esempio il Contrast Color Analyzer , in grado di verificare se le combinazioni di colori utilizzate rispettano le soglie previste dalla Legge 4/2004.
Se nel proprio CSS si specifica un colore di primo piano, inoltre, è necessario specificare sempre anche un colore di sfondo, e viceversa, in quanto l’utente potrebbe aver modificato le impostazioni del proprio sistema operativo, con il risultato che alcuni contenuti potrebbero risultare illeggibili. Infine, è preferibile evitare di inserire sfondi grafici sotto il testo; in ogni caso, la verifica sul contrasto dei colori va effettuata anche qualora il testo si trovi sovrapposto a uno sfondo grafico.
Un’ultima considerazione riguarda il colore dei link. In molti temi, tra cui purtroppo anche quello standard, i collegamenti ipertestuali vengono differenziati dal normale testo solo da un diverso colore e non dalla “classica” sottolineatura. Questa scelta viola il requisito 4, che richiede di g arantire che tutte le funzionalità siano disponibili anche in assenza di colore. L’antica convenzione di sottolineare i link può essere violata solo nei casi in cui è evidente che si tratta di collegamenti ipertestuali, come ad esempio nei menu di navigazione.