Valutazione di conformità

Sito analizzato: Tg3

Sito Tg3

La verifica di conformità é un metodo analitico che ha lo scopo di determinare se un sito é conforme a determinati criteri espressi sotto forma di linee guida. La conformità di un sito é una proprietà diversa dall'accessibilità dato che la conformità prescinde dalla validità o rilevanza dello standard rispetto alle specifiche circostanze di applicazione. Non é detto quindi che un sito conforme sia anche accessibile.

Si consiglia di visualizzare il sito su monitor con risoluzione uguale o superiore a 800x600 pixel.

Descrizione del metodo:

Il sito viene esaminato pagina per pagina e a ciascuna di esse vengono applicate tutte le regole dello standard adottato. Le violazioni che emergono devono essere elencate, con una descrizione delle cause e, dove possibile, una descrizione dei possibili rimedi.

Linee guida adottate:

Le linee guida adottate appartengono alla legge denominata "Legge Stanca", che definisce 22 requisiti a cui i siti devono attenersi per ritenersi accessibili. Questa legge costituisce un riferimento per le pubbliche amministrazioni, enti pubblici e aziende private che forniscono servizi pubblici.

Strumenti utilizzati:

-Mozilla Firefox
-Microsoft Internet Explorer
-W3C Validator
-CSS Validator
-Firebug 1.5.4
-Color Doctor, simulatore di disfunzioni visive

Pagine analizzate:

Homepage (Link),
Radio (Link),
Guida Programmi (Link),
Rubrica Sabato Notte (Link).

Pagine analizzate dal 15/12/2010 al 30/12/2010.

Analisi Pagine:

1-validità del codice: 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.

Requisito non soddisfatto in quanto la pagina fallisce alla validazione rispetto alle specifiche del W3C riportando 174 errori.

Errore: tag non chiuso

<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link title="default" type="text/css" rel="stylesheet" href="/dl/tg3/2010/css/tg3style.css">

Soluzione

<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link title="default" type="text/css" rel="stylesheet" href="/dl/tg3/2010/css/tg3style.css"/>

Errore: mancanza dell' attributo type

<script language="javascript">

Soluzione

<script language="Javascript" type="text/javascript">

Errore: attributo alt non specificato

<img width="290" src="/dl/images/1294760561770lavoratori.jpg">

Soluzione

<img width="290" alt="foto vignetta" src="/dl/images/1294760561770lavoratori.jpg">

Errore: validazione del css

<link title="default" type="text/css" rel="stylesheet" href="/dl/tg3/2010/css/tg3style.css">

Soluzione

<link title="default" type="text/css" rel="stylesheet" href="/dl/RaiTV/css/jScrollPane.css">

2-No Frame: Non é consentito l'uso di Frame nella realizzazione di nuovi siti.

Requisito non soddisfatto. Ad es. nella pagina relativa alla sezione radio é presente un iFrame.

<iframe id="4wnet-feed" src="http://feed.4wnet.com/feed.html.ashx?a=4030&n=3&u=REF&i=1&hd=1&f=0&s=rai_radio_spc_home&c=http://www.rai.it/dl/advertising/4wnetcustom.css" framespacing="0" frameborder="no" scrolling="no" width="620" height="180" style="background-color: #fff; margin; margin: 10px 0px 0px 0px;"> </iframe>

3-Alternative testuali: 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.

Requisito non soddisfatto in quanto sono presenti delle immagini senza relativa alternativa testuale.

Errore: es. nella rubrica "Sabato notte" tutte le immagini presenti sono prive dell'attributo alt.

<img src="/dl/images/1241612975890cerquetelli.jpg" class="reflect">

Soluzione

<img src="/dl/images/1241612975890cerquetelli.jpg" alt="Moreno Cerquetelli" class="reflect">

4-Colore: Garantire che tutti gli elementi informativi e tutte le funzionalità siano disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina.

Requisito soddisfatto.

Le informazioni e tutte le funzionalità presenti nelle pagine sono ben visibili anche in assenza di colori particolari utilizzati per presentarle. Requisito verificato con l'utilizzo di un simulatore di disfunzioni visive, Color Doctor.

5-Scritte Lampeggianti: 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.

Requisito soddisfatto.

Le pagine non presentano scritte lampeggianti o in movimento che possono procurare disturbi della concentrazione,epilessie o malfunzionamenti delle tecnologie assistive.

6-Contrasto: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.

Requisito soddisfatto.

Analizzando le pagine con Color Doctor, in base a tutti i problemi di vista, le informazioni presenti nelle varie pagine rimangono ben chiare e visibili.
Es: HomePage come la vedrebbe un utente affetto da protanopia e Guida programmi come la vedrebbe un utente affetto da deuteranopia:

Immagine verfica contrasto protonopia Immagine verfica contrasto dueteranopia

Rubrica del Sabato Notte come la vedrebbe un utente affetto da tritanopia:

Immagine verfica contrasto tritanopia

7-Mappe Immagine: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.

Non sono state utilizzate mappe immagine.

8-Mappe Immagine: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.

Non ci sono mappe immagine.

9-Tabelle Dati: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.

Non sono presenti tabelle nelle pagine esaminate.

10-Tabelle Dati: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.

Non sono presenti tabelle con due o più livelli logici.

11-Fogli di stile: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.

Requisito non soddisfatto: senza il relativo foglio di stile la navigazione delle pagine non é molto chiara.

12-Liquid layout: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.

Requisito non soddisfatto.

Immagine relativa a liquid layout

Errore:

I contenuti della pagina non si adattano alle dimensioni della finestra del browser. Il problema é dovuto al fatto che le dimensioni sono state impostate in px. Ad es. il blocco del contenuto ha attributo width impostato a 960px.

Soluzione

La soluzione é di adottare misure in % per tutte le misure di larghezza e altezza degli elementi, mentre per i testi utilizzare misure espresse in em.

13-Tabelle Layout: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.

Requisito soddisfatto in quanto non vengono utilizzate tabelle per l'impaginazione.

14-Form: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.

Requisito non soddisfatto. Il form per la ricerca non possiede i tag label, fielset, title.

Errore:

<form action="http://www.ricerca.rai.it/search" method="get" name="qs">
<input type="text" onfocus="doClear(this)" value="Cerca" maxlength="256" size="40" name="q"/>
<input class="submit" type="image" src="/dl/tg3/images/trasparent.png" value="invia"/>
</form>
Immagine relativa al form

15-Script, Applet: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.

Requisito non soddisfatto.

Disabilitando Javascript le pagine non sono più fruibili come prima:barre con i vari link non più visualizzabili, titoli non comprensibili, video non visualizzabili.

Immagine relativa ai script

Usando l'elemento <noscript> si potrà fornire una versione alternativa anche in HTML.

16-Eventi, Applet: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.

Requisito non soddisfatto.

Gli eventi possono essere gestiti solo con il mouse visto che é presente solo l'evento onmousedown (evento attivato schiacciando il tasto sinistro del mouse).

<a id="" onmousedown="UntrustesLink.bootstrap($(this),"6d65d",evebt)";" href="">

L'unico evento che presenta onfocus é presente nella gestione del motore di ricerca.

<form action="http://www.ricerca.rai.it/search" method="get" name="qs">
<input type="text" onfocus="doClear(this)" value="Cerca" maxlength="256" size="40" name="q"/>
</form>

Non tutti gli utenti navigano il Web tramite interfaccia grafica, utilizzando il mouse come periferica di input: utenti disabili utilizzano la tastiera, tastiere alternative o comandi vocali per accedere a collegamenti ipertestuali, per accedere o inviare dati da un modulo, ecc. La soluzione é far sì che qualsiasi elemento contenuto nella pagina sia interagibile tramite tastiera in modo che sia fruibile anche da sistemi assistivi di navigazione (oltre all'uso del mouse). Al comando onMousedown può essere quindi associato anche il comando onkeypress, oppure utilizzare gestori di eventi indipendenti dl dispositivo come ad esempio onFocus.

17-Script, Applet, PDF: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.

Requisito non soddisfatto.

Molte informazioni come ad esempio le varie barre menu non sono disponibili disattivando Javascript quindi l'utente non é in grado di poter sfruttare tutte le funzionalità dell'interfaccia grafica. Problema risolvibile con un opportuno uso dei CSS.

18-Multimediale: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.

Requisito soddisfatto. Breve descrizione in parte al video.

19-Link non ambigui: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.

Requisito non soddisfatto.

Ci sono vari link nella homepage che si riferiscono a pagine diverse(i vari articoli) ma per i quali viene usato lo stesso testo "leggi".

<a href="/dl/tg3/focus/articoli/ContentItem-012d810c-2aa8-496c-a58d-3f101163ded9.html">leggi</a>
<a href="/dl/tg3/articoli/ContentItem-6379f396-736e-4284-b586-3b942d9a6976.html">leggi</a>
Immagine relativa ai link

Sono presenti anche tre link "Scrivi" che portano a scrivere mail a tre diversi indirizzi.

Immagine relativa ai link

20-Temporizzazioni: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.

Requisito soddisfatto.

Sono presenti dei video che contengono della pubblicità: l'utente viene avvisato con un messaggio relativo alla durata del messaggio pubblicitario.

21-Link distanti: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.

Requisito non soddisfatto.

Ci sono link gestiti con script java attivabili solo con il mouse. La soluzione é di rendere disponibili le informazioni senza javascript o di poter gestire gli eventi anche attraverso la tastiera. Inoltre, i link presenti nella barra di navigazione sono troppo vicini.

22-Pagine equivalenti: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.

Requisito non soddisfatto.

Non é presente il collegamento a una pagina conforme ai requisiti sopra elencati contenente informazioni e funzionalitá uguali a quelli presenti nelle pagine analizzate.

Sommario risultati:

Num Requisito Esito
1 Validità del codice Non superato
2 No frame Non superato
3 Alternative testuali Non superato
4 Colore Superato
5 Scritte lampeggianti Superato
6 Contrasto Superato
7 Mappe immagine Superato
8 Mappe immagine Superato
9 Tabelle dati Superato
10 Tabelle dati Superato
11 Fogli di stile Non superato
12 Liquid layout Non superato
13 Tabelle layout Superato
14 Form Non superato
15 Script, Applet Non superato
16 Eventi Non superato
17 Script, Applet, PDF Non superato
18 Multimediale Superato
19 Link non ambigui Non superato
20 Temporizzazioni Superato
21 Link distanti Non superato
22 Pagine equivalenti Non superato

Il sito presenta numerose violazioni dei requisiti della legge Stanca.
Tra i problemi più importanti c'è la non conformità al requisito 15, infatti le pagine non sono fruibili con JavaScript disabilitato.
Inoltre, mancano le alternative testuali alle immagini e sono presenti diversi link con stessa destinazione, che possono creare problematiche per gli utenti disabili visivi che fan uso del lettore di schermo.
Quasi tutti gli eventi possono essere gestiti solo col mouse: bisogna garantire che gli eventi siano gestiti anche con la tastiera.
Le pagine non presentano layout fluido: in caso di ridimensionamento, ingrandimento o riduzione, rispetto ai valori predefiniti, la pagina non si adatta.