Relazione Progettazione Siti Web

Valutazione di conformità rispetto ai requisiti della legge Stanca del sito www.tg3.rai.it/SITOTG/HPTG3

Introduzione

L’accessibilità è la capacità dei sistemi informatici, nelle forme e nei limiti consentiti dalle conoscenze tecnologiche, di erogare servizi e fornire informazioni fruibili, senza discriminazioni, anche da parte di coloro che a causa di disabilità necessitano di tecnologie assistive o configurazioni particolari.

  • accessibilità: proprietà esterna (riguarda il sito mentre viene utilizzato da parte di utenti in determinate situazioni per determinati scopi)
  • conformità tecnica: proprietà prevalentemente interna (riguarda solo il sito)

La conformità è il modo migliore per arrivare prima ad un sito accessibile.

[Inizio]

Strumenti Utilizzati

Per eseguire le nostre valutazioni ci siamo aiutati con i seguenti strumenti:

[Inizio]

Pagine Testate

HOME PAGE

REDAZIONE

RUBRICHE

Le pagine sono state testate nel: Maggio-Giugno 2007

[Inizio]

Priorità

Nella valutazione utilizzeremo queste tre priorità:

  • 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 .

[Inizio]

Sommario Risultati

Il sito analizzato presenta delle non-conformità in tutti i controlli di priorità 1, 2 e 3, quindi non è conforme alla legge Stanca.

  • Per ottenere, almeno, un livello di conformità "A" dovranno essere effettuate tutte le modifiche necessarie a rendere conformi i controlli di priorità 1.
  • Per ottenere un livello di conformità "AA" dovranno essere resi conformi anche tutti i controlli di priorità 2.
  • Per ottenere un livello di conformità "AAA" devono essere resi conformi anche tutti i controlli di priorità 3.

Nelle immagini e nei video non sempre sono presenti degli equivalenti testuali per permettere anche ad utenti non vedenti di cogliere le informazioni trasmesse da media differenti dal semplice testo.

Ciò è molto grave, dal momento che, generalmente, immagini e video in un sito sono usati per veicolare informazioni aggiuntive. Se l’utente non le percepisce, riceverà sicuramente un messaggio deficitario rispetto a quello che il progettista del sito voleva comunicare.

L’utilizzo di Javascript può provocare diversi fallimenti: un utente non vedente che utilizza un lettore di schermo potrebbe non accorgersi di aver posizionato il focus su un elemento che causa l’apertura di un menu, con il risultato che il menu risulta totalmente inutilizzabile dall’utente. Oltre a questo, se viene disabilitato javascript o un utente utilizza browser privo di javascript, non sarà proprio possibile usare le funzionalità offerte dal menu, visto che non si attiva.

Nell’impostazione delle dimensioni degli elementi della pagina è opportuno utilizzare unità di misura relative e non assolute. La presentazione e i contenuti testuali di una pagina devono potersi adattare alle dimensioni della finestra del browser, senza sovrapposizione degli oggetti presenti. In caso di ridimensionamento, ingrandimento o riduzione, dei caratteri, rispetto ai valori predefiniti, la pagina si dovrebbe adattare di conseguenza: se ciò non avviene il contenuto presentato non è accessibile.

Nel sito analizzato questi accorgimenti non sono rispettati.

[Inizio]

Dettaglio Risultati

Introduzione

Di seguito vengono elencati i requisiti della legge Stanca per garantire l'accessibilità di un sito Web.

Per ciascun requisito vengono indicati:

  • Nome del requisito
  • Priorità
  • Descrizione del requisito
  • Dettaglio di come il requisito non è o è soddisfatto, all'interno del sito analizzato
  • Parti di codice Html/Css portate come esempio
  • Foto di videate
  • Possibili suggerimenti, rimedi al problema

[Inizio]

Elenco Requisiti Tecnici

  1. Validità del Codice
  2. No Frame
  3. Alternative Testuali
  4. Colore
  5. Scritte Lampeggianti
  6. Contrasto
  7. Mappe Immagine 1
  8. Mappe Immagine 2
  9. Tabelle Dati 1
  10. Tabelle Dati 2
  11. Fogli di Stile
  12. Liquid Layout
  13. Tabelle Layout
  14. Form
  15. Script, Applet, ...
  16. Eventi
  17. Script, Applet, PDF, ...
  18. Multimediale
  19. Link non Ambigui
  20. Temporizzazioni
  21. Link Distanti
  22. Pagine Equivalenti

[Inizio]

Requisiti Tecnici in Dettaglio

  1. Validità del codice (priorità=1)

    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.

    Il codice della pagina analizzata non è valido e quindi, non rispettando l’aspetto semantico, non è conforme alle specifiche del W3C. (sono presenti 236 errori solo nella Home page)

    Oltre al codice HTML, abbiamo riscontrato molti errori nella validazione dei fogli di stile (CSS).

    [Inizio]

    [Elenco Requisiti Tecnici]

  2. No frame (priorità=3)

    Non è consentito l’uso dei frame nella realizzazione di nuovi siti.

    E´ stato utilizzato un frame nella linea 538 della Home Page.

    < IFRAME WIDTH=120 HEIGHT=60 MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no BORDERCOLOR="#000000" SRC="http://www.banneradmin.rai.it/html.ng/sezione_RAI=TG3& subsezione_RAI=TG3home&dimBanner= 120x60&posBanner=ba&rnd=’+rnd+’">

    Il frame interno è usato, in questo caso, per caricare un banner nella pagina. Molto probabilmente l'effetto voluto poteva essere ottenuto usando codice lato-client, come ad esempio JavaScript: l'utilizzo di un I-Frame è superfluo.

    [Inizio]

    [Elenco Requisiti Tecnici]

  3. Alternative testuali (priorità=1)

    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.

    Ogni immagine funzionale dovrebbe contenere una breve descrizione alternativa, che rappresenta la funzione per la quale essa è presente nella pagina. In poche parole, possiamo dire che il testo da inserire all’interno dell’attributo ALT="" dev’essere ciò che direste, incontrando questa immagine, per rendere comprensibile ad un utente cieco, ciò che l’immagina raffigura.

    Nel sito analizzato molte delle immagini non hanno alternativa testuale, quindi, la linea guida 3 non è rispettata.

    Sono prive di testo alternativo, per esempio, quelle immagini che, riferendosi ad una notizia, vengono periodicamente sostituite.

    Esempio:

    Nelle pagine delle Redazioni e nelle varie Rubriche l’immagine che fa da titolo è priva di testo alternativo: prendiamo come esempio la "Redazione Cronaca"

    <img id="redpol" src="http://www.rai.it/SITITG/Static/immagine/2/tit_cronaca.jpg"/>

    titolo redazione cronaca

    Soluzione: E’ necessario inserire l’attributo alt contenente come testo alternativo, ad esempio, il titolo della pagina.

    <img id="redpol" src="http://www.rai.it/SITITG/Static/immagine/2/tit_cronaca.jpg" alt="Redazione cronaca" />

    Stessa soluzione da applicare a tutte le altre pagine.

    In ogni pagina analizzata è presente, inoltre, una foto della persona che conduce o che dirige la Rubrica o la Redazione. Riportiamo un esempio che vale per tutte le altre pagine. Nella Rubrica "Punto donna"

    punto donna

    <img src="http://www.rai.it/SITITG/Static/immagine/9/IldaBartoloni_PuntoDonna.jpg" width="191" height="122" border="0">

    Soluzione: una soluzione sensata sarebbe la seguente:

    <img src="http://www.rai.it/SITITG/Static/immagine/9/IldaBartoloni_PuntoDonna.jpg" alt="Ilda Bartoloni" width="191" height="122" border="0">

    Inserendo il nome della persona fotografata, volendo si potrebbe inserire anche il nome della rubrica.

    L’immagine:

    logo tg3

    presente in ogni pagina, oltre ad essere un'immagine è anche un link alla Home Page.

    <a href="/SITOTG/HPTG3/0,8383,,00.html"> <img alt="TG3" src="/SITITG/r2003/logo.jpg" height="107" width="193" /></a>

    Soluzione: il testo alternativo è presente ma non molto chiaro; sarebbe stato meglio

    <a href="/SITOTG/HPTG3/0,8383,,00.html"> <img alt="Vai alla Home Page - TG3" src="/SITITG/r2003/logo.jpg" height="107" width="193" /></a>

    [Inizio]

    [Elenco Requisiti Tecnici]

  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.

    Tutti gli elementi informativi e tutte le funzionalità sono disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina.

    Per effettuare la verifica abbiamo usato un "Simulatore di Disfunzioni Visive" (ColorFilter).

    [Inizio]

    [Elenco Requisiti Tecnici]

  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.

    Non è presente alcuna scritta lampeggiante: non si corre il rischio di provocare disturbi da epilessia fotosensibile o disturbi della concentrazione.

    [Inizio]

    [Elenco Requisiti Tecnici]

  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

    Utilizzando ColorFilter abbiamo simulato la vista di un utente daltonico, ed abbiamo notato che le informazioni sono tutte comprensibili.

    [Inizio]

    [Elenco Requisiti Tecnici]

  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 presenti mappe immagine

    [Inizio]

    [Elenco Requisiti Tecnici]

  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 sono presenti mappe immagine

    [Inizio]

    [Elenco Requisiti Tecnici]

  9. Tabelle dati (priorità=1)

    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.

    Di seguito è riportato un esempio di tabella dati presente nel sito, nella sezione "Chi siamo".Tutte le tabelle presenti sono organizzate nella seguente maniera e sono prive dei tag <thead> , <th> e <caption>.

    ( vedi pagina http://www.tg3.rai.it/SITOTG/tg3_sezioni/0,8371,1,00.html)

    esempio tabella di dati

    <TABLE borderColor=#104d7b cellSpacing=0 cellPadding=2 width="80%" bgColor=#cccc99 border=1> <TBODY> <TR> <TD vAlign=top bgColor=#efefe7 colSpan=2> <DIV align=center><FONT face=Verdana color=#104d7b size=2><B>Redazione Esteri</B></FONT></DIV></TD></TR> <TR bgColor=#adc7de> <TD vAlign=top width="49%"><FONT class=testo face=Verdana color=#104d7b size=2><B>Fabio Cortese</B></FONT></TD> <TD width="51%" bgColor=#8cb2d6><FONT face=Verdana size=1><B>Caporedattore Responsabile</B></FONT></TD></TR> <TR bgColor=#81abd1> <TD vAlign=top colSpan=2> <DIV align=center><FONT class=testo face=Verdana color=#104d7b size=2><A class=lsscuro href="http://www.tg3.rai.it/SITOTG/TG3_pagina/0,8769,31,00.html"><STRONG>Accedi alla pagina della Redazione</STRONG> </A></FONT></DIV></TD></TR></TBODY></TABLE>

    Soluzione: Presupponendo che l'aspetto grafico sia implementato mediante CSS, la tabella andrebbe riscritta in questo modo:

    <table> <caption summery="Elenco impiegati della Redazione Esteri">Redazione Esteri</caption> <thead> <tr> <th>Nome -Cogome</th> <th>Impiego</th> </tr> </thead> <tbody> <tr> <td>Fabio Cortese</td> <td>Caporedattore Responsabile</td> </tr> </tbody> </table>

    [Inizio]

    [Elenco Requisiti Tecnici]

  10. Tabelle dati (priorità=1)

    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.

    Nel sito analizzato non ci sono tabelle con livelli multipli di intestazione.

    [Inizio]

    [Elenco Requisiti Tecnici]

  11. Fogli di Stile (priorità=1)

    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.

    Con i fogli di stile disabilitati è impossibile navigare il sito efficientemente: la barra di navigazione posta nella parte alta della pagina contiene una serie di menú a tendina che appaiono/scompaiono muovendo il mouse sopra l'etichetta del menú. Il CSS viene usato per posizionare le voci del menú a tendina sotto la relativa etichetta; senza CSS la posizione in cui appaiono le voci non è centrata. L'utente non può attivare la voce di suo interesse.

    home page senza CSS

    Soluzione: Implementando il menu e i sottomenu attraverso delle liste e usando il codice CSS per realizzare l'effetto "menu a comparsa" (pseudoclassi :active :focus ...), il problema è risolto.

    Quando i fogli di stile sono disabilitati, l'utente vedrà una lista gerarchica di menú e sottomenú.

    [Inizio]

    [Elenco Requisiti Tecnici]

  12. Liquid Layout (priorità=2)

    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.

    La presentazione e i contenuti testuali della pagina non si adattano alle dimensioni della finestra del browser ottenendo una perdita di informazioni tali da rendere incomprensibile il contenuto. Le dimensioni dei componenti sono state impostate con l’utilizzo di px invece di % ed è questa scelta che causa il problema.

    Di seguito è stato riportata qualche linea di codice dei CSS, dove è stato commesso l’errore:

    #tutto {background:#fff; width:760px; }

    liquid layout erratoSoluzione: width:100%; sarebbe una possibile soluzione, poichè adatterebbe il contenuto alla dimensione della pagina.

    Il sito andrebbe ristrutturato realizzando un layout liquido (flow layout) a tre colonne. Un utilizzo opportuno della propietà css "float" e delle dimensioni in percentuale degli elementi possono rendere fruibile l'informazione anche riducendo le dimensioni della finestra.

    [Inizio]

    [Elenco Requisiti Tecnici]

  13. Tabelle Layout (priorità=1)

    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.

    Sono state utilizzate diverse tabelle di layout, poichè le informazioni vengono lette all’interno delle celle della tabella, queste generano "rumore". Dobbiamo dire che la lettura linearizzata della pagina risulta tutto sommato comprensibile, l’abbiamo testa utilizzando JAWS, un lettore di schermo che permette ad utenti disabili visivi, di poter fruire delle informazioni contenute nel sito.

    <table cellspacing="0" cellpadding="0" id="menualto" summary="Il menu di navigazione del sito del TG3"> <tr> <td><a href="/SITOTG/tg3_sezioni/0,8371,1,00.html" onmouseover="over_pul3()" onmouseout="su_pul3()"><img src="/SITITG/r2003/chisiamo_no.gif" alt="Chi siamo" name="chisiamo"/></a></td> <td><a href="#" onmouseover="over_pul4();show(’menuredazioni’)" onmouseout="su_pul4();hide(’menuredazioni’)"><img src="/SITITG/r2003/redazioni_no.gif" alt="Redazioni" name="redazioni"/></a></td> <td><a href="#" onmouseover="over_pul5();show(’menurubriche’)" onmouseout="su_pul5();hide(’menurubriche’)"><img src="/SITITG/r2003/rubriche_no.gif" alt="Rubriche" name="rubriche"/></a></td> <td><a href="#" onmouseover="over_pul6()" onmouseout="su_pul6()"><img src="/SITITG/r2003/weblog_no.gif" alt="Weblog" name="weblog"/></a></td> <td><a href="http://www.forum.rai.it/index.php?c=116&act=SC" onmouseover="over_pul7()" onmouseout="su_pul7()"><img src="/SITITG/r2003/forum_no.gif" alt="Forum" name="forum"/></a></td> <td><a href="/SITOTG/tg3_sezioni/0,8371,2,00.html" onmouseover="over_pul8()" onmouseout="su_pul8()"><img src="/SITITG/r2003/archivio_no.gif" alt="Archivio storico" name="archivio"/></a></td> <td><a href="mailto:tg3@rai.it"><img src="/SITITG/r2003/email.gif" alt="E-mail"/></a></td> </tr> </table>

    Soluzione: La scelta migliore sarebbe indubbiamente quella di ricreare il layout con l'utilizzo dei CSS, evitando l'uso di tabelle che come spiegato in precedenza possono creare rumore e difficoltà di comprensione per utenti che utilizzano un lettore di schermo.

    [Inizio]

    [Elenco Requisiti Tecnici]

  14. Form (priorità=3)

    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.

    Nella barra superiore della pagina è presente un campo di ricerca: questo è l’unico form presente. Non è stato utilizzato il tag LABEL, ma sono stati utilizzati opportunamente il tag FIELDSET e l’attributo TITLE.

    <FORM NAME="ricerca" ACTION="http://ricerca.rai.it/RaiSearch.asp"> <fieldset><legend>inserisci il testo da ricercare</legend> <input type="text" id="CampoDiRicercaTgTre" class="formtesto" name="query" title="inserisci il testo da ricercare"/></fieldset>

    Esempio campo testuale di input

    [Inizio]

    [Elenco Requisiti Tecnici]

  15. Script, Applet (priorità=1)

    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.

    La pagina contiene codice JavaScript, non appena l’utente posiziona il focus dell’interazione su un elemento del menu, viene aperto un sottomenu. Disabilitando JavaScript l’utente, quindi, non riuscirà proprio ad usare le funzionalità offerte dal menu, dato che esso non si attiva. Di conseguenza non può neanche ottenere le informazioni raggiungibili solamente attraverso il medesimo menu.

    Soluzione: Bisogna fare in modo che la pagina funzioni correttamente anche disattivando JavaScript. Un buon utilizzo dei CSS potrebbe risolvere questo problema.

    [Inizio]

    [Elenco Requisiti Tecnici]

  16. Eventi (priorità=1)

    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.

    In questo sito i gestori di eventi non sono indipendenti dal dispositivo, poichè è stato preso in considerazione soltanto il mouse.Un evento di "onfocus" dovrebbe accadere quando un controllo riceve il fuoco, indipendentemente dal fatto che si stia utilizzando il mouse o la tastiera.

    <a href="/SITOTG/tg3_sezioni/0,8371,1,00.html" onmouseover="over_pul3()" onmouseout="su_pul3()"></a>

    Bisogna renderli indipendenti da uno specifico dispositivo di input.Questi eventi devono, come minimo, poter essere generati anche dalla tastiera.

    Soluzione: La cosa migliore sarebbe usare anche i gestori di eventi logici, come "onfocus", "onkeypress",Ancora meglio sarebbe rendere disponibili le funzionalità senza javascript.

    [Inizio]

    [Elenco Requisiti Tecnici]

  17. Script, Applet, PDF, … (priorità=1)

    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.

    Molte funzionalità e informazioni non sono accessibili disabilitando javascript.E’ molto importante risolvere questo problema poichè causa un fallimento del processo informativo (l’utente non riesce ad ottenere le informazioni volute).

    Soluzione: Con un opportuno utilizzo dei CSS questo problema verrebbe risolto.

    [Inizio]

    [Elenco Requisiti Tecnici]

  18. Multimediale (priorità=1)

    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.

    Sono presenti dei video (nella sezione archivio storico e nella home page) che non contengono una alternativa testuale equivalente, e non è presente, in nessuno di essi, un riassunto o una semplice etichetta.

    Soluzione: Per rendere accessibili le informazioni è opportuno associare ad ogni filmato presente, un alternativa testuale; in questa maniera, anche un utente privo di udito sarà in grado di percepire il contenuto informativo.

    [Inizio]

    [Elenco Requisiti Tecnici]

  19. Link non ambigui (priorità=2)

    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.

    I link, generalmente, sono abbastanza chiari ed è di facile comprensione l’effetto che si otterrà cliccandoli.Sono presenti, però, dei link generici come "Continua" o "Vai" che non rendono chiara la destinazione del collegamento ipertestuale (link).

    esempio di un link generico presente nella pagina

    <a href="/SITOTG/TG3_pagina/0,8769,30,00.html">Continua</a>

    Soluzione:

    <a href="/SITOTG/TG3_pagina/0,8769,30,00.html">Articolo intero</a>

    [Inizio]

    [Elenco Requisiti Tecnici]

  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.

    E’ possibile visualizzare dei video, questi però sono visualizzabili in 2 modi differenti, in base al tipo di connessione dell’utente (56K o ADSL).Questa suddivisione non provoca tempi di attesa elevanti e quindi non è necessario avvisare esplicitamente l’utente, indicando il tempo massimo consentito e le alternative per fruire del servizio stesso.

    [Inizio]

    [Elenco Requisiti Tecnici]

  21. Link distanti (priorità=2)

    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.

    Parte dei link sono attivabili anche tramite comandi da tastiera, altri invece, non lo sono poichè gestiti con script java (specifici per il mouse).

    <a href="#" onmouseover="over_pul4();show(’menuredazioni’)" onmouseout="su_pul4();hide(’menuredazioni’)"><img src="/SITITG/r2003/redazioni_no.gif" alt="Redazioni" name="redazioni"/></a>

    come si può vedere viene specificato il mouse come dispositivo di puntamento, poichè le routine venono invocate tramite gestori di eventi legati al mouse.

    Soluzione: La cosa migliore sarebbe usare anche i gestori di eventi logici, come "onfocus", "onkeypress" o ancora meglio rendere disponibili le funzionalità senza javascript.

    La selezione e l’attivazione dei collegamenti presenti nelle pagine è accettabile poichè la distanza verticale ed orizzontale tra i link è di almeno 0,5 em, e le dimensioni dei pulsanti in un modulo sono tali da rendere chiaramente leggibile l’etichetta in essi contenuta.

    [Inizio]

    [Elenco Requisiti Tecnici]

  22. Pagine equivalenti (priorità=1)

    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.

    Non è presente il collegamento a una pagina conforme ai requisiti su elencati, 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 sarebbe dovuto essere evidente all’inizio della pagina non accessibile.

    [Inizio]

    [Elenco Requisiti Tecnici]

Tabella Riassuntiva

tabella riassuntiva
Requisiti Priorità
Validità del codice 1
Alternative testuali 1
Tabelle dati 1
Tabelle layout 1
Script, applet, ... 1
Eventi 1
Script, applet, PDF... 1
Multimediale 1
Pagine equivalenti 1
Liquid layout 2
Link non ambigui 2
Link distanti 2
Form 3
No frame 3

[Inizio]

Relazione elaborata nell’arco dei mesi di maggio e giugno 2007 - Copyleft - Robert Casanova, Federico Nicoloso, Federico Vitiello