Relazione di Progettazione Siti Web

sul sito di Rai Due

Zompicchiatti Luca


Valutazione della conformità

Indice delle relazioni




Menù:

Valutazione della conformità
Linee Guida WCAG 1.0
Conclusioni

Torna sù




Valutazione della conformità





Introduzione:

Analisi sistematica di Conformità all’Accessibilità del sito web www.tg2.rai.it secondo le linee guida di livello AA emanate dal consorzio W3C (WCAG 1.0). Il tutto verrà realizzato usufruendo in parte dell'aiuto del validatore bobby. Il test si propone di identificare le violazioni in ambito di accessibilità per le tecnologie html, css e javascript derivanti dalle pagine web prese in considerazione.
Essendo un sito di dominio pubblico dovrebbe essere accessibile a tutte le persone. A maggior ragione lo dimostra il fatto che in alcune edizioni del telegiornale viene affiancata, alla normale realizzazione del tg, una finestra con la sua traduzione gestuale da parte di un professionista. Questo fa sì che le persone con problemi di udito non siano menomati del loro problema.

Pagine visionate:

Riguardo l’analisi di accessibilità di questo sito, quasi tutte le pagine sono similari a livello di codice e presentano in genere sempre gli stessi problemi di accessibilità

Strumenti utilizzati:

Menù


Livelli di priorità:

A ciascun punto di controllo che sviluppano le linee guida, è stato assegnato un livello di priorità basato sull'impatto che tale punto possiede sull'accessibilità. A seconda se la pagina risponde positivamente a tutti i punti di controllo della priorità 1,2 e 3 si ha conformità a livello A,AA e AAA.

[Priorità 1] Lo sviluppatore di contenuti web deve conformarsi al presente punto di controllo. In caso contrario, a una o più categorie di utenti viene precluso l'accesso alle informazioni presenti nel documento. La conformità a questo punto di controllo costituisce un requisito base affinché alcune categorie di utenti siano in grado di utilizzare documenti web.
[Priorità 2] Lo sviluppatore di contenuti web dovrebbe conformarsi a questo punto di controllo. In caso contrario per una o più categorie di utenti risulterà difficile accedere alle informazioni nel documento. La conformità a questo punto consente di rimuovere barriere significative per l'accesso a documenti web.
[Priorità 3] Lo sviluppatore di contenuti web può tenere in considerazione questo punto di controllo. In caso contrario, una o più categorie di utenti sarà in qualche modo ostacolata nell'accedere alle informazioni presenti nel documento. La conformità a questo punto migliora l'accesso ai documenti web.

L'analisi si è fermata al secondo livello di valutazione.

Menù




Linee Guida WCAG 1.0





Linea Guida 1:

Linea Guida 1.1 "Fornire un equivalente testuale per ogni elemento non di testo"

Quasi tutte le le immagini usate dall’intero sito sono sprovviste dell'attributo alt="" e/o l’attributo longdesc="". Ad esempio:

<INPUT class=link2 id=CampoDiRicercaRaIDue title="Inserisci il testo da ricercare">
bottone vaid
<INPUT type=image src="Sito ufficiale del TG2_file/VaiBarra.gif" name=Image>

Il bottone "vai" presente nella home page nel fascione in alto non è accessibile in quanto manca l’attributo alt="" per poter essere visto da un lettore di schermo. Si usi un’etichetta funzionale basata sul contesto in cui il tasto è utilizzato, piuttosto che una descrizione visiva per esempio alt="conferma ricerca".

Esito: Negativo
Priorità: 1

Menù


Linea Guida 2:

Linea Guida 2.2 "Assicurarsi che le combinazioni fra colori dello sfondo e del primo piano forniscano un sufficiente contrasto se visti da qualcuno con deficit percettivi sul colore o se visti su uno schermo in Bianco e Nero."
parabolad
<img src="loghi/Sfondo-logo.jpg" width="401" height="138">

Nonostante ci sia un buon contrasto tra le scritte in grigio ":: tg2 :: - notizie:" e lo sfondo in bianco, il font usato per indicare "- notizie" non è adatto in quanto risulta troppo piccolo causando problemi di lettura a persone ipovedenti e comunque a persone anziane. Non c’è sufficiente contrasto invece, nella prima rubrica ovvero quella "Costume e società" in quanto la scritta in foreground si potrebbe confondere con l’immagine del background analizzata precedentemente.

Esito: Negativo
Priorità: 2 per le immagini, 3 per il testo

Menù


Linea Guida 3:

Linea Guida 3.2 "Creare documenti che facciano riferimento a grammatiche formali pubblicate."

Uso tipico:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

Esito: Negativo
Priorità: 2

Linea Guida 3.4 "Usare unità relative e non assolute nei valori degli attributi del linguaggio dei marcatori e i valori delle proprietà del foglio di stile."

Nei CSS sono state usate le misure assolute piuttosto che quelle relative. I formati assoluti sono unità come i pixel(.px), i punti(.pt), i pollici, ecc. I formati in queste unità sono riguardante una misura assoluta e non possono essere regolati. Al contrario, le unità relative(.em), quali le percentuali(%), lo SME (un’unità della larghezza riguardante una dimensione), ecc. sono regolati automaticamente quando l’unità bassa è regolata. Ciò permette che il testo cambi il formato e l’impaginazione a flusso senza generare lo spazio bianco supplementare o colare il bordo dello schermo o della carta. L’eccezione a questa regola è per le immagini ed a volte altri oggetti esterni quali i applet.

Esito: Negativo
Priorità: 2

Menù


Linea Guida 4:

Linea Guida 4.1 "Identificare con chiarezza i cambiamenti nel linguaggio naturale del testo di un documento e in ogni equivalente testuale."

L'intero sito è in lingua italiana.

Esito: Positivo
Priorità: 1

Menù


Linea Guida 5:

Linea Guida 5.3 "Non usare tabelle per impaginazioni a meno che la tabella non sia comprensibile se letta in modo linearizzato."

◊ L’impaginazione è stata fatta tramite tabelle di layout. Ricordimao che le tabelle devono essere solamente usate per contenere dati non per impaginare. Bisognava usare i fogli di stile.

Esito: Negativo
Priorità: 2

Menù


Linea Guida 6:

Linea Guida 6.1 "Organizzare i documenti in modo che possano essere letti senza fogli di stile."

Anche se non vengono utilizzati css la visualizzazione della pagina rimane identica anche se esteticamente meno piacevole.

Esito: Positivo
Priorità: 1

Linea Guida 6.5 "Assicurarsi che il contenuto dinamico sia accessibile oppure fornire una presentazione o pagina alternativa."

Non esiste una versione accessibile alternativa del sito in quanto è proprio grazie alle immagini che si può accedere a risorse altrimenti inaccessibili. C’è un unico versione-beta al link ULTIMORA... ma quando si clicca "Naviga in solo testo" lo sfondo assume un background di colore nero, i link di colore azzurrino acqua e quando sono stati visitati diventano rossi. Inoltre è sempre presente la stessa animazione realizzata in Flash. Inoltre bisognerebbe immettere alcuni tag per fornire un aiuto aggiuntivo alle persone che hanno altri tipi di disabilità come per esempio media="aural, braille, tty".

Esito: Negativo
Priorità: 1

Menù


Linea Guida 7:

Linea Guida 7.2"Fino a quando gli interpreti non permetteranno agli utenti si controllare il lampeggiamento evitare di far lampeggiare il contenuto."
forumd
<IMG height=160 src="Sito ufficiale del TG2_file/sondaggio2.gif" width=160>

È una gif animata e contiene delle immagini in movimento troppo veloci per un occhio non allenato e possono distrarre dalla lettura della pagina. Inoltre immagini che cambiano velocemente e provocano sfarfallio possono essere un pericolo per utenti che soffrono di epilessia.

Esito: Negativo
Priorità: 1

Linea Guida 7.3 "Fino a quando gli interpreto non permetteranno agli utenti di bloccare il contenuto in movimento, evitare il movimento nelle pagine."
guardad
<a href="#" onClick="window.open ('titoli.htm','titoli', 'scrollbars=1,status=no,resizable=no,top=100,left=150,width=435,height=550');"> <img src="immagini/TITOLI.gif" width="173" height="25" border="0"></a>

Alcune persone con disabilità cognitive o visive non riescono a leggere testo in movimento con velocità sufficiente, oppure non sono in grado di leggerlo affatto. Il movimento può anche causare una distrazione tale da rendere illeggibile il resto della pagina per persone con disabilità . I lettori di schermo non sono in grado di leggere testo in movimento. Persone con disabilità fisiche potrebbero non essere in grado di muoversi con velocità o precisione sufficienti ad interagire con oggetti.

Esito: Negativo
Priorità: 1

Menù


Linea Guida 8:

Linea Guida 8.1 "Fare in modo che elementi di pogrammmi come script e applet sia direttamente accessibili e compatibili conle tecnologie assistive.

Non ci sono interfacce

Esito: Positivo
Priorità: 2

Menù


Linea Guida 9:

Linea Guida 9.3 "Negli script specificare gestori di evento logici piuttosto che gestori di evento dipendenti dal dispositivo."
punto di domandad
<A onmouseover="MM_swapImage('Image198','','immagini/puntotg2_1_1_2.gif',1)" onmouseout=MM_swapImgRestore() href="http://www.incotek.net/public/
News-gest/segnalazioni.php?id=notizia" target=_blank>
</A>

Si sarebbe dovuto usare gli inneschi di evento del applicazione-livello piuttosto che gli inneschi del interazione-livello dell’utente. In HTML 4.0, gli attributi di evento del applicazione-livello sono "onfocus", "onblur" (l’opposto "del onfocus") e "onselect". Qualora si debba usare gli attributi dipendenti da un dispositivo, fornire meccanismi ridondanti dell’input.

Esito: Negativo
Priorità: 2

Menù


Linea Guida 10:

Linea Guida 10.1 "Fino a quando gli interpreto non permetteranno agli utenti di bloccare la generazione di nuove finestre."
vuoi rivedered
<A onclick="window.open('teche.htm','teche','scrollbars=no,status=no,resizable=no,top=100, left=150, width=470,height=650');" href="http://www.tg2.rai.it/#"></A>

Nello specifico questa gif "Anim-Teche1" posizionata nella parte bassa a sinistra della pagina, punta a un javascript e nessun testo normale o alternativo ci avverte del fatto che tale link aprirà una popup.

Esito: Negativo
Priorità: 2

Menù


Linea Guida 11:

Linea Guida 11.4 "Se nonstante ogni sforzo, non si può creare una pagina accessibile, fornire un collegamento ad una pagina alternativa con informazioni equivalenti e che si aggiorni con la stessa frequenza della pagina originale.

Se pur limitata ad una pagina del sito, vi è la possibilità di consultare la pagina stessa in versione alternativa.

Esito: Positivo
Priorità: 1

Menù


Linea Guida 12:

Linea Guida 12.4 "Associare esplicitamente le etichette ai loro controlli."
<FORM name=ricerca action=http://ricerca.rai.it/RaiSearch.asp>

Usare LABEL e il suo attributo "for". Un esempio poteva essere:

<FORM action="http://somesite.com/foo" method="get">
  <LABEL for="name">Name:</LABEL>
    <INPUT type="text" id="name" SIZE="50">

Il valore "for" l’attributo deve essere lo stesso del valore dell’attributo "dell’identificazione" del controllo del FORM.

Esito: Negativo
Priorità: 2

Menù


Linea Guida 13:

Linea Guida 13.1 "Identificare con chiarezza l’obiettivo di ogni collegamenti."
costume e societaàd

Questa è una delle undici immagini a cui fanno riferimento le rubriche trattate da Rai 2. A nessuna immagine è associato un link chiaro. Il testo di collegamento dovrebbe trasportare le informazioni sufficienti, come "vista la versione completa in HTML," o "per la versione del testo seleziona questo collegamento." Tutto questo x ottenere spiegazione razionali. È importante che il testo di collegamento assuma significato anche decontestualizzato.

Esito: Negativo
Priorità: 2

Menù


Linea Guida 14:

Linea Guida 14.1 "Usare il linguaggio più chiaro e semplice possibile che sia adatto ad un contenuto di un sito."

Il sito ultilizza in linguaggio chiaro e semplice.

Esito: Positivo
Priorità: 1

Menù




Conclusioni





Difetti Sparsi

◊ In entrambi i menu sia quello di destra che quello di sinistra alcune immagini come ad esempio quella sotto-riportata sono senza l’aggiunta di una notazione grafica rischiando quindi di non essere percepiti come link.

immagine logo Rai.itd

◊ Real player apre on-line file .ram ma questi non sono altro che dei semplici file di testo contenenti l’indirizzo url del file .ra che sta sul RTSP server.

Sezione: Sono on-line le edizioni del Tg2 delle 13,00 e delle 20,30

I problemi quindi riscontrati per ottenere i tanto desiderati file sono:
 1 - Trovare l'indirizzo dei file
 2 - Scaricare un file da un server RTSP

◊ Nella pagina dei conduttori, oltre alla loro lista, vi è anche una sequenza di diapositive che mostrano il loro volto. Qualora ci si fermi su una di essa, la sequenza si ferma evidenziando un link. Il problema stà nel fatto che quasi tutte le foto hanno il collegamento che punta alla stessa pagina tranne una che ci riporta all'index. Questo crea una duplicazione nonchè una sovrapposizione di due finestre contenenti la stessa pagina.
Mentre in "Informazioni Utili" sia il logo della Croce Rossa Italiana e la scritta portano allo stesso indirizzo. Quindi esistoni 2 link puntano alla stessa pagina.

◊ Questa barra in fondo alla home page è completamente inutile in quanto, qualora volessi inviare ad esempio una mail al direttore, non potrei farlo visto che non è presente nessun link.

immagine barra crediti...d

◊ Sempre nell’index, a differenza del caso sovrastante, il link esiste ma la pagina no e quindi visualizza la classica schermata di errore causata dalla risorsa inesistente "Pagina Web non disponibile in modalità non in linea".
Un altro errore di collegamento riguarda l’immagine posizionata nella parte destra sempre della home page riportante la scritta "Quelli che...il calcio". Questo proprio non funziona.

◊ Nella pagina riguardante il papa sarebbe stato utile "collegare" la sua immagine o fornire un link al proprio sito nel caso che un utente volesse avere qualche informazione in aggiunta.

◊ Le pagine qui sotto elencate sono ancora in fase di allestimento:


◊ Quando si visita la pagina relativa al "Papa" o quella relativa alle "Informazioni utili" non si riesce a capire se ci si trova ancora all’interno del sito di Rai 2 o meno, causando all’utente un senso di smarrimento. L’unico modo per capire dove ci si trova è guardare l’URL.

Immagine Indexd   Immagine pagina Papad

◊ Fornire metadati per aggiungere informazione di tipo semantico alle pagine e ai siti come ad esempio:

◊ Non tutti i link hanno senso se presi fuori dal loro contesto come per esempio nella home page "dicono di noi". Di chi?. Questo poterbbe causare un fallimento di tipo semantico.

◊ I grandi blocchi di informazione non vengono scissi in gruppi più maneggevoli in quanto nella rubrica "BREVINEWS..." il primo paragrafo riguardante "La sveglia intelligente" risulta essere troppo lungo causando nel lettore una perdita di attenzione con la conseguenza dell’abbandono dell’articolo.

◊ Le pagine non si autoaggiornano automaticamente per esempio con il "refresh".

◊ In ogni pagina diversa dalla home page non è presente un breadcrumb che indica all’utente dove si trova non attivo tra le diverse voci del menu.

◊ I fogli di stile non sono usati per evitare di utilizzare le immagini per veicolare informazione, cosicchè il Menù e tutti i tasti di submit sono immagini linkate e non testo formattato con i css. Con il tag STRONG vengono enfatizzate alcune parti che vengono visualizzate in grassetto.

Menù


Aspetti Positivi

◊ La struttura di navigazione è abbastanza chiara, ma sarebbebbe stato meglio creare una lista delle principali rubriche invece di concatenare delle piccole immagini raffiguranti le pagine da visitare.

Menù


Applicazioni utilizzate

Torna sù