"Realizzare le pagine e gli oggetti al loro interno utilizzando tecnologie definite da grammatiche formali pubblicate nelle versioni più recenti disponibili quando sono supportate dai programmi utente. Utilizzare elementi ed attributi in modo conforme alle specifiche, rispettandone l'aspetto semantico"
Problemi riscontrati:Copiare ed incollare il doctype corretto dal sito del w3c ed inserire lo stesso doctype in tutte le pagine, rivalidare il codice e correggere poi gli errori riscontrati, la maggior parte dovuti ad attributi non validi.
Figura 1
"Non è consentito l'uso dei frame nella realizzazione di nuovi siti."
Analisi:Nelle pagine analizzate non sono presenti frame.
"Fornire una alternativa testuale equivalente per ogni oggetto non di testo presente in una pagina e garantire che quando il contenuto non testuale di un oggetto cambia dinamicamente vengano aggiornati anche i relativi contenuti equivalenti predisposti; l'alternativa testuale equivalente di un oggetto non testuale deve essere commisurata alla funzione esercitata dall'oggetto originale nello specifico contesto."
Problemi riscontrati:Controllare che tutte le immagini abbiano l'attributo alt, specificando per le immagini funzionali una descrizione adeguata e per le immagini decorative, "spacer" o un alt vuoto.
Figura 2
Figura 3
Figura 4
"Garantire che tutti gli elementi informativi e tutte le funzionalità siano disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina."
Analisi:Disattivando i colori, è possibile usufruire comunque dei contenuti delle pagine in esame, in particolare non sono presenti casi simili a "clicca sul link verde".
"Evitare oggetti e scritte lampeggianti o in movimento le cui frequenze di intermittenza possano provocare disturbi da epilessia fotosensibile o disturbi della concentrazione, ovvero possano causare il malfunzionamento delle tecnologie assistive utilizzate; qualora esigenze informative richiedano comunque il loro utilizzo, avvertire l'utente del possibile rischio prima di presentarli e predisporre metodi che consentano di evitare tali elementi."
Analisi:Nelle pagine analizzate non sono presenti oggetti e scritte lampeggianti.
"Garantire che siano sempre distinguibili il contenuto informativo (foreground) e lo sfondo (background), ricorrendo a un sufficiente contrasto (nel caso del testo) o a differenti livelli sonori (in caso di parlato con sottofondo musicale); evitare di presentare testi in forma di immagini".
Problemi riscontrati:I colori utilizzati per le scritte sono #663300, #6B3506, #000000, per lo sfondo viene invece utilizzata un'immagine che contiene al suo interno i seguenti colori #fbd6a2, #e2c289, ed alcune tonalità intermedie.
| TABELLA RIASSUNTIVA |
Colore in Primo Piano | |||
|---|---|---|---|---|
| #663300 | #6B3506 | #000000 | ||
| Colore di Sfondo |
#fbd6a2 | Lum: 158.7 (OK) – Col: 474 (NO) | Lum: 155.3 (OK) – Col: 461 (NO) | Lum: 219.1 (OK) – Col: 627 (OK) |
| #e2c289 | Lum: 136.6 (OK) – Col: 404 (NO) | Lum: 133.2 (OK) – Col: 391 (NO) | Lum: 197.0 (OK) – Col: 557 (OK) | |
Lum: Differenza di Luminosità, Col: Differenza di Colore
Conclusioni:La maggior parte del sito è costituita da tonalità di marrone nelle scritte sul sfondo (costituito dall'immagine), in questo caso vengono soddisfatti i requisiti di differenza di Luminosità ma non di differenza di Colore (in quanto <500), quando invece le scritte sono nere, il requisito è soddisfatto.
Soluzione:Non utilizzare un immagine per lo sfondo, per di più con vari colori, ed utilizzare tonalità di colore che abbiano una maggior differenza di colore.
Sfondo del sito
"Utilizzare mappe immagine sensibili di tipo lato client piuttosto che lato server, salvo il caso in cui le zone sensibili non possano essere definite con una delle forme geometriche predefinite indicate nella DTD adottata."
Analisi:Delle pagine analizzate, solo la Homepage contiene mappe immagine, che sono di tipo client e non di tipo server, per questo il requisito viene ritenuto soddisfatto. Viene utilizzato il tag AREA per delimitare la zona, e l'attributo usemap. Riguardo alla mancanza di alcuni attributi alt, si rimanda invece al Requisito 1.
Figura 5
"In caso di utilizzo di mappe immagine lato server, fornire i collegamenti di testo alternativi necessari per ottenere tutte le informazioni o i servizi raggiungibili interagendo direttamente con la mappa."
Problemi riscontrati:Le pagine analizzate non contengono mappe immagine di tipo server.
"Per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti dalla DTD adottata per descrivere i contenuti e identificare le intestazioni di righe e colonne."
Problemi riscontrati:Nella pagina delle trasmissioni on demand è presente una tabella dati, contenente la griglia della programmazione settimanale, analizzando il codice sorgente , e con la collaborazione del bookmarklet tablet inspector, si è constatato che la tabella non supera il requisito in quanto non utilizza i tag: summary e th per le intestazioni, e gli attributi scope e headers.
Soluzione:Ristrutturare la tabella inserendo i tag e gli attributi sopra riportati.
"Per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti nella DTD adottata per associare le celle di dati e le celle di intestazione che hanno due o più livelli logici di intestazione di righe o colonne."
Problemi riscontrati:"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."
Problemi riscontrati:Il sito non utilizza fogli di stile, ma in qualche pagina viene utilizzato il tag style per definire alcune (poche) regole (vedi fig.6). Non vengono separati i contenuti dalla presentazione, in quanto vengono utilizzati abbondantemente i tag font, i, b, ecc… direttamente nel contenuto (vedi fig.7). Per questi motivi il requisito non è soddisfatto.
Soluzione:Utilizzare un foglio di stile esterno, rimuovere tutti i tag html di presentazione, e utilizzare le regole css.
Figura 6
Figura 7
"La presentazione e i contenuti testuali di una pagina devono potersi adattare alle dimensioni della finestra del browser utilizzata dall'utente senza sovrapposizione degli oggetti presenti o perdita di informazioni tali da rendere incomprensibile il contenuto, anche in caso di ridimensionamento, ingrandimento o riduzione dell'area di visualizzazione o dei caratteri rispetto ai valori predefiniti di tali parametri."
Problemi riscontrati:Nel sito vengono utilizzati valori assoluti e non relativi come % ed em. Inoltre facendo un test con la risoluzione 800x600 la pagina della Home non si adatta alla finestra ma compare la barra di scorrimento orizzontale (vedi fig.8).
Soluzione:Utilizzare valori relativi per il layout , il testo e le tabelle.
Figura 8
"In caso di utilizzo di tabelle a scopo di impaginazione, garantire che il contenuto della tabella sia comprensibile anche quando questa viene letta in modo linearizzato e utilizzare gli elementi e gli attributi di una tabella rispettandone il valore semantico definito nella specifica del linguaggio a marcatori utilizzato."
Problemi riscontrati:Pressoché tutto il sito utilizza tabelle di layout, spesso però non in modo esatto. Sebbene non vengano giustamente utilizzati i tag summary, th ed headers, si può notare che linearizzando la pagina della home (vedi fig.9), si perde ogni ordine logico dato alle sequenze di link, trovandoci di fronte ad una serie di link "sparsi", senza poter comprendere la connessione logica che c'è tra il link attuale e quello precedente ed il successivo. Questo può creare confusione nell'utente. Stesso discorso per la pagina delle trasmissioni On Demand come si può notare dalla figura 10.
Soluzione:Evitare l'uso di tabelle di layout privilegiando il css, in quanto rendono più lento il caricamento della pagina, e possono linearizzarsi male, come infatti è accaduto.
Figura 9
Figura 10
"Nei moduli (form), associare in maniera esplicita le etichette ai rispettivi controlli, posizionandole in modo che sia agevolata la compilazione dei campi da parte di chi utilizza le tecnologie assistive."
Problemi riscontrati:Tra le pagine analizzate, l'unica form presente è nella Homepage (vedi fig.11). Non viene utilizzato il tag <label for> accompagnato da <id>, oltre a lasciare vuoto il campo title. In aggiunta, nel caso di campi di testo è consigliato mettere l'etichetta a sinistra (qui è a destra) rispetto al campo di testo. (viceversa per radio button e checkbox)
Soluzione:Si consiglia di spostare l'etichetta a sinistra, di utilizzare il tag <label for> e <id>, compilare <title>
Figura 11
"Garantire che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati; ove ciò non sia possibile fornire una spiegazione testuale della funzionalità svolta e garantire una alternativa testuale equivalente, in modo analogo a quanto indicato nel requisito nº 3."
Problemi riscontrati:Disabilitando il codice javascript nella Homepage, l'unico cambiamento riscontrato riguarda i link di forma circolare al centro della pagina, dove con il codice abilitato e passandoci sopra con il mouse, compariva il nome del link, mentre adesso passando sopra con il mouse rimane la figura e non compaiono le scritte. Tuttavia la pagina rimane comunque navigabile, verificando sia con jaws che con Wave (vedi fig.12) che le immagini "fornite" di javascript hanno un alternativa testuale sufficiente , come richiede il requisito. Nella pagina delle trasmissioni OnDemand invece, disabilitando javascript si può notare come scompaia quasi del tutto la tabella dei programmi, e non è stata fornita un alternativa testuale. Un altro problema riscontrato in questa pagina ed in quella del calendario è la scomparsa della Freccia SU posta in cima alla pagina (vedi fig.13).
Soluzione:Non utilizzare javascript per creare la tabella, ed utilizzare i tag <noscript> </noscript> per inserire un alternativa testuale al codice javascript che sia ugualmente efficace.
Figura 12
Figura 13
"Garantire che i gestori di eventi che attivano script, applet o altri oggetti di programmazione o che possiedono una propria specifica interfaccia, siano indipendenti da uno specifico dispositivo di input."
Problemi riscontrati:Come si può notare dalla fig.14, i gestori di eventi ONMOUSEOVER e ONMOUSEOUT non sono associati ad ONFOCUS e ONBLUR rispettivamente. In questo modo i gestori di eventi non sono indipendenti da uno specifico dispositivo. Infatti navigando il sito con la tastiera, nei link a forma di cerchio non si attiva il javascript che fa comparire il nome del link.
Soluzione:Associare i tag sopra elencati.
Figura 14
"Garantire che le funzionalità e le informazioni veicolate per mezzo di oggetti di programmazione, oggetti che utilizzano tecnologie non definite da grammatiche formali pubblicate, script e applet siano direttamente accessibili."
Problemi riscontrati:Non ci sono informazioni veicolate per mezzo di oggetti di programmazione. Per Javascript, vedere il punto precedente.
"Nel caso in cui un filmato o una presentazione multimediale siano indispensabili per la completezza dell'informazione fornita o del servizio erogato, predisporre una alternativa testuale equivalente, sincronizzata in forma di sotto-titolazione o di descrizione vocale, oppure fornire un riassunto o una semplice etichetta per ciascun elemento video o multimediale tenendo conto del livello di importanza e delle difficoltà di realizzazione nel caso di trasmissioni in tempo reale."
Problemi riscontrati:Nella pagina Calendario, sono presenti dei link a dei video che vengono gestiti tramite un plugin del browser. Nessuno dei video ha un alternativa testuale, né in forma riassuntiva sul contenuto del video, né come didascalie (vedi fig.15). Nella pagina OnDemand, è possibile scaricare dei file .ram contenenti le registrazioni audio dei programmi radio, anche in questo caso non è presente la trascrizione testuale del contenuto. In entrambi i casi poi, non vengono date informazioni sul plugin che dovrà gestire i file multimediali (come ad esempio un link per scaricarlo).
Soluzione:Assicurarsi di specificare un alternativa testuale per ogni contenuto multimediale
Figura 15
"Rendere chiara la destinazione di ciascun collegamento ipertestuale (link) con testi significativi anche se letti indipendentemente dal proprio contesto oppure associare ai collegamenti testi alternativi che possiedano analoghe caratteristiche esplicative, nonché prevedere meccanismi che consentano di evitare la lettura ripetitiva di sequenze di collegamenti comuni a più pagine."
Problemi riscontrati:Nella pagina Celebrazioni, si può notare la violazione di questo requisito (vedi fig.16), in quanto i link sulla colonna di sinistra come ad esempio "Video" se letti fuori dal contesto non si riescono a distinguere. Inoltre nessuno di quei link ha il tag title per specificare il contenuto della destinazione, si potrebbe specificare ad esempio che si aprirà un file PDF cliccando su un determinato link. In nessuna pagina è presente lo skip-link, anche se in realtà per come è strutturato il sito non è necessario, in quanto in ogni pagina non sono presenti liste di link che si ripetono, ma i link indietro (per tornare alla pagina precedente e su per tornare alla home).
Soluzione:Rinominare correttamente tutti i link poco informativi (ad esempio: "Video" in "Video della Solennità dell'Epifania del Signore" ) ed utilizzare i tag title. Se si aprono file PDF (o casi simili) andrebbe specificato.
Figura 16
"Nel caso che per la fruizione del servizio erogato in una pagina è previsto un intervallo di tempo predefinito entro il quale eseguire determinate azioni, è necessario avvisare esplicitamente l'utente, indicando il tempo massimo consentito e le alternative per fruire del servizio stesso."
Problemi riscontrati:Non sono previste temporizzazioni nelle pagine analizzate
"Rendere selezionabili e attivabili tramite comandi da tastiere o tecnologie in emulazione di tastiera o tramite sistemi di puntamento diversi dal mouse i collegamenti presenti in una pagina; per facilitare la selezione e l'attivazione dei collegamenti presenti in una pagina è necessario garantire che la distanza verticale di liste di link e la spaziatura orizzontale tra link consecutivi sia di almeno 0,5 em, le distanze orizzontale e verticale tra i pulsanti di un modulo sia di almeno 0,5 em e che le dimensioni dei pulsanti in un modulo siano tali da rendere chiaramente leggibile l'etichetta in essi contenuta."
Analisi:I link delle pagine analizzate sono tutti abbastanza grandi e distanziati, per poter essere agevolmente cliccati, in particolare quelli della pagina Informazioni Utili.
"Per le pagine di siti esistenti che non possano rispettare i suelencati requisiti (pagine non accessibili), in sede di prima applicazione, fornire il collegamento a una pagina conforme a tali requisiti, recante informazioni e funzionalità equivalenti a quelle della pagina non accessibile ed aggiornata con la stessa frequenza, evitando la creazione di pagine di solo testo; il collegamento alla pagina conforme deve essere proposto in modo evidente all'inizio della pagina non accessibile."
Problemi riscontrati:Il sito viola molti punti della legge stanca, e non prevede un link ad una versione accessibile dei contenuti.
Soluzione:Applicando dei semplici accorgimenti (vedi soluzioni dei requisiti precedenti) si potrebbe rendere accessibile il sito esistente, senza dover fornire una versione accessibile parallela al sito attuale.
Camerin Matteo 80767 - camerin.matteo@spes.uniud.it | Vendramin Marco 80218 - vendramin.marco@spes.uniud.it