Relazioni per il Corso di Progettazione siti web

Valutazione della conformità TgR Vai al sito del TgR

Introduzione

L'obiettivo principale dell'analisi della conformità di un sito web è verificare tutte le possibili violazioni degli standard, nel nostro caso quelli relativi al W3C WCAG 1.0.
Tali linee guida si riferiscono a caratteristiche strutturali della pagina, come far sì che le immagini abbiano un testo equivalente a loro associato, che contenuti, tabelle, fogli di stile e quant'altro vengano utilizzati in modo appropriato. Seguendo tali norme si vuole promuovere l'accessibilità delle pagine web in modo tale che il loro contenuto possa essere fruibile da tutti gli utenti indipendentemente alle eventuali limitazioni a cui essi possono essere costretti (es. disabilità fisiche, browser vecchi, schermi piccoli etc...)


Linee guida per l'accessibilità ai contenuti del Web

Linea guida 1. Fornire alternative equivalenti al contenuto audio e visivo.
1.1 Fornire un equivalente testuale per ogni elemento non di testo

Nelle pagine del sito analizzate gli attributi "alt" e "longdesc" sono correttamente specificati, fornendo un'adeguata descrizione delle immagini, ad esempio:

<img src="/dl/themes/rai/images/logo_RainetNews.gif" alt="Rainet News" longdesc="/description.html" />
<img longdesc="/description.html" title="ultime edizioni tg" alt="ultime edizioni tg" src="/dl/images/[1180364866977]edizioni_tg.jpg">
Linea guida 2. Non fare affidamento sul solo colore
2.1 Assicurarsi che tutta l'informazione veicolata dal colore sia disponibile anche senza.

Nel caso in cui venga utilizzato un monitor in B&N tutte le informazioni vengono rappresentate in modo chiaro e leggibile.

2.2 Assicurarsi che le combinazioni fra colori dello sfondo e del primo piano forniscano un sufficiente contrasto.

La scelta di colori presenta sfondi con varie gradazioni di blu su scritte bianche o scritte nere su sfondo bianco, che garantiscono un buon contrasto rendendo le informazioni facilmente fruibili.

Linee guida 3. Usare marcatori e fogli di stile e farlo in modo appropriato.
3.1 Quando esiste un linguaggio di marcatori adatto, per veicolare informazione usare un marcatore piuttosto che le immagini.

Il menù rubriche della homepage,contenente i titoli delle varie sezioni, viene erroneamente rappresentato tramite immagini al posto di un testo con associato un foglio di stile:

<a href="http://www.neapolis.rai.it"><img src="http://www.rai.it/SITITG/Static/immagine/1/Neapolis.gif"  border="0"></a>
<a href="http://www.italiaagricoltura.rai.it"><img src="http://www.rai.it/SITITG/Static/immagine/1/menu_italiaagr2.gif"  border="0"></a>
3.2 Creare documenti che facciano riferimento a grammatiche formali pubblicate.

L'intestazione del documento fa correttamente riferimento a un DTD pubblicato con relativa lingua:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3.3 Usare fogli di stile per controllare l'impaginazione e la presentazione.

In alcune parti del sito vengono utilizzati attributi come FONT o COLOR per campi testuali al posto di un appropriato css:

<font color="#b4c2c9" size="2" face="Arial">Engineered by Rainet</font>
<FONT size=2>dal 15 ottobre torna ogni sabato su Rai3 alle 12.25</FONT>
3.4 Usare unità relative e non assolute nei valori degli attributi del linguaggio dei marcatori e i valori della proprietà del foglio di stile.

Sia nel codice delle pagine analizzate che nel CSS vengono utilizzate unità di misura assulute (px) invece di unità relative (em):

<img src="/SITITG/tgr/img/img7.gif" width="252" height="7"></td>
<td height="62" align="right" bgcolor="#08598C" valign="bottom">
.livelli {
position:absolute;
left: 422px;
top: 108px;
visibility:hidden;
background-color:#10618C;
layer-background-color:#10618C;
border:0px;
border-width:0px;

width:150px;
height:45px;
}

Tale uso delle unità assolute potrebbe causare un'impropria visualizzazione della pagina per utenti che utilizzino una risoluzione di schermo non adatto a questo tipo di misure. Le misure assolute possono essere usate solo quando il tipo di strumento di visualizzazione è compatibile con quest'ultime.

3.5 Usare elementi di intestazione per veicolare la struttura del documento e usarli in modo conforme alle specifiche.

Gli elementi di intestazione vengono usati in maniera appropriata, in successione e senza interruzioni(es. h2 deve seguire h1, non posso passare da h1 ad h3).

3.6 Marcare le liste ed elencare le voci della lista in modo appropriato.

Le liste sono impropriamente usate come elemento di impaginazione, si riporta un esempio relativo alla sezione news:

<h3 class="solotesto">L'informazione Rai</h3>
<ul>
<li><a title="" ... title="sito Tg1" alt="sito Tg1" src="/dl/images/link1.jpg" class="textImage"></a></li>
<li><a title="" ... title="description" alt="description" src="/dl/images/link2.jpg" class="textImage"></a></li>
<li><a title="" ... title="sito Tg3" alt="sito Tg3" src="/dl/images/link3.jpg" class="textImage"></a></li>
...
Linea guida 4. Chiarire l'uso di linguaggi naturali.
4.1 Identificare con chiarezza i cambiamenti nel linguaggio naturale del testo di un documento.

Il sito è stato puramente realizzato per un'utenza italiana, quindi non necessita di specifiche sul cambio di linguaggio tramite l'attributo "lang".

Linea guida 5. Creare tabelle che si trasformino in maniera elegante.
5.3 Non usare tabelle per impaginazioni a meno che la tabella non sia comprensibile se letta in modo linearizzato.

Tutte le pagine del sito in questione utilizzano erroneamente delle tabelle per suddividere la pagina in varie sezioni, ossia come elemento strutturale piuttosto che tabella di dati. Come esempio si riporta la barra superiore:

barra superiore tg3

<table cellspacing="0" cellpadding="0" id="barrasup" summary="menu di navigazione superiore">
<tr>
<td><a href="http://www.rai.it/tv">TV</a></td>
<td><a href="http://www.radio.rai.it">RADIO</a></td>
<td><a href="http://www.rai.it/news">NEWS</a></td>
<td><a href="http://www.community.rai.it">COMMUNITY</a></td>
<td><a href="http://www.junior.rai.it">JUNIOR</a></td>
<td><a href="http://www.teche.rai.it">TECHE</a></td>
<td><a href="http://www.rai.it/mappasiti">MAPPASITI</a></td>
<td><a href="http://www.rai.it/programmiaz">PROGRAMMI A-Z</a></td>
</tr>
</table>
Linea guida 6. Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in maniera elegante.
6.1 Organizzare i documenti in modo che possano essere letti senza i fogli di stile.

Togliendo i fogli di stile il sito risulta comunque leggibile e organizzato.

6.3 Assicurarsi che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati.

In varie pagine vengono utilizzati degli script relativi a vari banner rappresentati con gif animate. Disabilitando gli script le pagine risultano ugualmente friubili. inoltre nel codice è presente anche l'elemento NOSCRIPT in modo da fornire un collegamento testuale nel caso in cui il javascript sia disabilitato o non supportato.

Linea guida 7. Assicurarsi che l'utente possa tenere sotto controllo i cambiamenti di contenuto nel corso del tempo.
7.3 Fino a quando gli interpreti non permetteranno agli utenti di bloccare il contenuto in movimento, evitare il movimento nelle pagine.

Le gif animate con testo ed immagini in movimento,presenti in quasi tutte le pagine, potrebbero causare problemi di lettura ad utenti disabili.
Inoltre tali immagini non sono leggibili tramite un lettore di schermo.

Linea guida 8. Assicurare l'accessibilità diretta delle interfacce utente incorporate.
8.1 Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive.

Nella homepage del sito viene presentata una mappa interattiva che permette di visualizzare i vari tg in base alla regione di appartenenza e risulta perfettamente consultabile disponendo del relativo flash plug-in.

Dal sito è possibile consultare i video delle ultime edizioni del tgR e altri tg italiani, i quali presentano una propria interfaccia funzionale e accessibile.

Linea guida 9. Progettare per garantire l'indipendenza da dispositivo.
9.2 Assicurarsi che ogni elemento che possiede una sua specifica interfaccia possa essere gestito in una modalità indipendente da dispositivo.

Il sito è predisposto per una navigazione tramite tastiera e mouse, si può comunque accedere ai vari link anche senza l'utilizzo di quest'ultimo grazie alle freccie della tastiera per lo scorrimento della pagina e tramite il tasto TAB per la selezione del collegamento desiderato.

Linea guida 10. Usare soluzioni provvisorie.
10.1 Fino a quando gli interpreti non permetterano agli utenti di bloccare la generazione di nuove finestre, non fare apparire finestre a cascata o di altro tipo e non cambiare la finestra attiva senza informare l'utente.

Il sito presenta numerose gif animate impostate tramite un javascript che, cliccandoci sopra, generano una nuova finetra relativa al link senza avvisare l'utente in alcun modo. Inoltre cliccando sul link "news" posto nella barra superiore, oltre ad aprire il collegamento richiesto, viene aperta una nuova finestra di pop-up pubblicitarià senza che l'utente lo abbia richiesto.

Linea guida 11. Usare le tecnologie e le raccomandazioni del W3C.

Le raccomandazioni del w3c sono seguite soltanto in parte e vari elementi e attributi non rispettano gli standard (come spiegato nelle altre linee guida). Anche disabilitando gli script o qualora questi non siano supportati dal browser l'accessibilità del sito rimane inalterata. Sono inoltre implementati del filmati visualizzabili solo disponendo del relativo real plug-in.

Linea guida 12. Fornire informazione per la contestualizzazione e l'orientamento.
12.2 Descrivere lo scopo dei frame e il modo in cui essi interagiscono se non è evidente dai titoli dei frame da soli.

I frames permettono di suddividere la finestra del browser in sezioni separate, ciascuna delle quali può essere aggiornata e contenere dati in modo autonomo rispetto alle altre, risultando perciò un'ottima soluzione per la strutturazione del sito. Il sito in questione invece è erroneamente strutturato tramite tabelle e liste, come spiegato ai punti 3.6 5.3

12.3 Dividere grandi blocchi di informazione in gruppi più maneggevoli quando è naturale ed appropriato.

In Html è possibile usare OPTGROUP per raggruppare gli elementi OPTION all'interno di un SELECT, oppure raggruppare i controlli dei moduli con FIELDSET e LEGEND. Tali elementi non vengono usati nel sito in questione.

12.4 Associare esplicitamente le etichette ai loro controlli.

Bisognava utilizzare dove opportuno l'elemento Label, il quale consente di associare logicamente un'etichetta ad un campo di input.
Per farlo è necessario che il valore dell'attributo "for" di label coincida con il valore dell'attributo "id" di input: in questo modo si stabilisce un legame logico tra i due elementi, e questo legame può essere sfruttato dai browser in fase di rendering.

<form method="GET" action="http://www.ricerca.rai.it/search">
<fieldset>
...
<label for="Search"  class="SearchText">CERCA: </label>
<input type="text" id="Search" name="titolo" size="60"/>
Linea guida 13. Fornire chiari meccanismi di navigazione.
13.1 Identificare con chiarezza l'obiettivo di ogni collegamento.

Nel sito sono presenti numerose immagini con annesso un link ad un sito esterno, le quali però non presentano nessun attributo che dia una chiara spiegazione del collegamento associato.

13.2 Fornire metadata per aggiungere informazione di tipo semantico alle pagine e ai siti.

Viene utilizzato l'elemento Title però non è presente il metadata RDF per indicare l'autore del sito.

13.3 Fornire informazione sulla configurazione generale di un sito (per es., una mappa oppure un indice del sito).

Nella barra superiore sono presenti due link denominati "mappasiti" e "programmi a-z" che dovrebbero soddisfare tale linea guida, purtroppo nei giorni in cui sono state analizzate tali pagine, i link corrispondenti non erano presenti.

13.7 Se sono fornite funzionalità di ricerca, rendere possibili diversi tipi di ricerca per differenti livelli di abilità e per preferenze diverse.

Il sito è predisposto di un unico form per la ricerca dove è possibile limitare quest'ultima ad un'unico sito tra quelli elencati oppure eseguire una ricerca generale.

Linea guida 14. Assicurarsi che i documenti siano chiari e semplici.
14.1Usare il linguaggio più chiaro e semplice possibile che sia adatto al contenuto di un sito.

Il sito utilizza un linguaggio chiaro e facilmente comprensibile ,non sono necessarie conoscenze particolari.