Università degli Studi di Udine


Relazioni per il Corso di

"PROGETTAZIONE SITI WEB"

VERIFICA DELLA CONFORMITÀ

www.ryanair.it

Nell’ambito del progetto di Progettazione Siti Web, per quanto riguarda la verifica della conformità, abbiamo valutato alcune pagine del sito della Ryanair, basandoci sui requisiti tecnici dela legge Stanca. Abbiamo indicato a che livello di conformità si trova il sito e, per ogni problema riscontrato (requisito della legge Stanca non rispettato), abbiamo fornito diverse informazioni:



PAGINE CONSIDERATE

Pagine del sito analizzate:



REQUISITI TECNICI DELLA LEGGE STANCA

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

Analisi

Requisito 2: Non è consentito l'uso dei frame nella realizzazione di nuovi siti. eccezioni per siti già esistenti:
  • Frame ben titolati
  • Usare il CSS
  • Pianificare transizione a DTD strict con comunicazione alla Presidenza del Consiglio
Analisi

Requisito 3: 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.

Analisi

Requisito 4: Garantire che tutti gli elementi informativi e tutte le funzionalità siano disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina.
  • Per evidenziare righe in una tabella
  • Per evidenziare valori errati di una form
  • Per evidenziare diverse opzioni
Analisi

Requisito 5: 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.
  • Lampeggio tra 4 e 59 Hz
Analisi

Requisito 6: 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;
  • Previsto dalla legge:
    1. Differenza di luminosità: calcolo della luminosità dei colori di testo e di sfondo con la formula: ((Rosso X 299) + (Verde X 587) + (Blu X 114)) / 1000, in cui Rosso, Verde e Blu sono i valori decimali dei colori; il risultato deve essere non inferiore a 125.
    2. Differenza di colore: calcolo della differenza di colore con la formula[Max (Rosso1, Rosso2) - Min (Rosso1, Rosso2)] + [Max (Verde1, Verde2) - Min (Verde1, Verde2)] + [Max (Blu1, Blu2) - Min (Blu1, Blu2)], in cui Rosso, Verde e Blu sono i valori decimali dei colori e Max e Min il valore massimo e minimo tra i due presi in considerazione; il risultato deve essere non inferiore a 500;
Analisi

Requisito 7: 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

Requisito 8: Requisito 8 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.

Analisi

Requisito 9: 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.

Analisi

Requisito 10: 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.

Analisi

Requisito 11: 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.

Analisi

Requisito 12: 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.
  • Usare em, % e non px, pt, cm
  • CSS2 sul visual model
Analisi

Requisito 13: 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.
  • Le tabelle di layout generano "rumore"
  • Le tabelle di layout possono linearizzarsi male
  • Non usare SUMMARY, TH, HEADERS per le tabelle di layout
Analisi

Requisito 14: 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.
  • Usare LABEL/@FOR
  • Usare @TITLE
  • Usare FIELDSET
Analisi

Requisito 15: 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.

Analisi

Requisito 16: 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.
  • Onclick: con onkeypress, ma in input/text va sostituito da onfocus
  • Onmouseup: con onkeyup
  • Onmousedown: con onkeydown
  • Onmouseout: con onblur
  • Onmouseover: con onfocus (per links, form controls)
  • Ondblclick: non ha corrispondente da tastiera
Analisi

Requisito 17: 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.
  • Scripting techniques
  • PDF accessibili
  • Uso di Acrobat Reader
Analisi

Requisito 18: 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.
  • Trascrizioni testuali: (text transcripts) termine generale per equivalenti testuali di eventi uditivi; possono essere sincronizzati o no
  • Didascalie: (captions) servono come trascrizione della traccia audio (dialoghi ed eventi); sono sincronizzati
  • Open captions: che si possono spegnere
  • Closed captions: sono fisse
  • Sottotitoli: solo dei dialoghi, spesso in altre lingue
Analisi

Requisito 19: 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.

Analisi

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

Analisi

Requisito 21: 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

Requisito 22: Requisito 22 Per le pagine di siti esistenti che non possano rispettare i su elencati 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.

Analisi



STRUMENTI AUTOMATICI USATI

  1. Validatore HTML del WDG (www.htmlhelp.com/tools/validator )
  2. Web Developer ToolBar 1.1.3 (firefox addons)
  3. Firebug TollBar (www.getfirebug.com)
  4. Validatore CSS del W3C(jigsaw.w3.org/css-validator)
  5. Controllo contrasto e colori juicystudio (juicystudio.com)



LIVELLO DI CONFORMITÀ

Il sito non si trova ad un buon livello di conformità, molti sono i problemi riscontrati durante la valutazione automatica; alcuni sono piuttosto gravi, tanto che impediscono agi utenti di svolgere azioni e procedure essenziali.




DETTAGLIO RISULTATI

Requisito 1
  • HOME-PAGE

    valutazione HTML del WDG della home-page valutazione CSS del W3C della home-page


  • PREONATAZIONE VOLI

    valutazione HTML del WDG della home-page valutazione CSS del W3C della home-page

Requisito 2
  • HOME-PAGE
    C'è un piccolo frame pubblicitario con le offerte sugli hotel; è comunque ben titolato e distinguibile dal resto del sito.

    Esempio:

    frame di pubblicità

    Soluzione:
    Si poteva ottenere lo stesso identico effetto grafico senza l'inserimento di un Frame.

  • PREONATAZIONE VOLI
    Non c'è alcun tipo di frame.

Requisito 3
  • HOME-PAGE
    Salvo una o due eccezioni, tutte le immagini hanno la propria alternativa testuale.

  • PREONATAZIONE VOLI
    Tutte le immagini anche le più piccole hanno la loro alternativa testuale ben spiegata.

Requisito 4
  • HOME-PAGE
    Il colore non è indispensabile per effettuare scelte, recuperare informazioni o inserire dati.

  • PREONATAZIONE VOLI
    Il colore non è indispensabile per effettuare scelte, recuperare informazioni o inserire dati.

Requisito 5
  • HOME-PAGE
    C'è un banner pubblicitario lampeggiante ma non causa problemi avendo una frequenza molto bassa.

    Esempio:

    Immagine Lampeggiante

  • PREONATAZIONE VOLI
    Non sono presenti oggetti lampeggianti.

Requisito 6
  • HOME-PAGE,PREONATAZIONE VOLI
    La differenza di luminosità è sempre rispettata anche se lo scarto non è mai elevato. La differenza di colore è invece un serio problema in quanto, nella home, ci sono molte coppie di colori che non superano il test di juicystudio. E' infatti ben evidente che i colori usati nel sito sono tutti molto simili e ripetuti (rosso, giallo pallido, blu e azzurro).



    Esempio:

    colore home-page

    Soluzione:
    Basta scegliere dei colori con contrasti più evidenti.


Requisito 7
  • HOME-PAGE
    Non sono presenti mappe immagine di nessun tipo.

  • PREONATAZIONE VOLI
    Non sono presenti mappe immagine di nessun tipo.

Requisito 8
  • HOME-PAGE
    Non sono presenti mappe immagine di nessun tipo.

  • PREONATAZIONE VOLI
    Non sono presenti mappe immagine di nessun tipo.

Requisito 9
  • HOME-PAGE
    Non è presente alcun tipo di tabella dati.

  • PREONATAZIONE VOLI
    Non è presente alcun tipo di tabella dati.

Requisito 10
  • HOME-PAGE
    Non è presente alcun tipo di tabella dati.

  • PREONATAZIONE VOLI
    Non è presente alcun tipo di tabella dati.

Requisito 11
  • HOME-PAGE
    Vengono usati i fogli di stile per controllare la presentazione dei contenuti. Le pagine sono navigabili normalmente anche disattivando i fogli di stile.

  • PREONATAZIONE VOLI
    Vengono usati i fogli di stile per controllare la presentazione dei contenuti. Le pagine sono navigabili normalmente anche disattivando i fogli di stile.

Requisito 12
  • HOME-PAGE, PRENOTAZIONE VOLI
    Sia nella home-page che nella pagina di Prenotazione dei voli tutti i contenitori del testo hanno misure assolute. questo comporta che all'aumentare delle dimensioni del testo i riquadri in cui è contenuto rimangono della stessa grandezza provocando una sovrapposizione dei caratteri e un' impossibilità di lettura da parte dell'utente. Tutte le pagine analizzate non si ridimensionano con la dimensione della finestra facendo comparire le barre di scorrimento.

    Esempio:

    Dimensioni Assolute
    Dimensioni Assolute
    Soluzione:
    Si dovevano usare le dimensioni relative di modo che la pagina si ridimensioni relativamente alla dimensione del testo; in questo modo un utente che ne ha la necessità può ingrandire a piacere il testo della pagina.


Requisito 13
  • HOME-PAGE
    C'è un massiccio utilizzo di tabelle di layout nella home-page che però si linearizzano bene e non vengono usati SUMMARY, TH, HEADERS.

  • PREONATAZIONE VOLI
    Stessa cosa per le tabelle nella sezione: "selezione voli".

Requisito 14
  • HOME-PAGE, PREONATAZIONE VOLI
    Nelle Form c'è una totale mancanza di associazioni tra le etichette e i rispettivi controlli.



    Errore:
    usando un lettore di schermo non si riesce a capire cosa si deve inserire sui vari campi della form.
    < select id="ADULT" class="sbsm" size="1" name="ADULT">
    < option value="0">0
    < option selected="selected" value="1">1
    < option value="2">2
    ...
    < option value="25">25

    ...
    < td style="padding-bottom: 3px;">Adulti
    ...


    Soluzione:
    Basta usare gli attributi LABEL/@FOR, @TITLE, FIELDSET.


Requisito 15
  • HOME-PAGE, PREONATAZIONE VOLI
    Se si disattivano gli oggetti di programmazione diventa impossibile prenotare un volo, sia dal form della home-page che dalla sezione "prenotazione".

    Soluzione:
    è possibile creare dei percorsi alternativi per accedere alle stesse informazioni senza usare gli oggetti di programmazione usando tag come NOSCRIPT per distinguere i due casi.


Requisito 16
  • HOME-PAGE
    Nella home-page sono presenti elementi di programmazione che non sono indipendenti dal dispositivo.

    Esempio:

    < input id="tt1" type="radio" checked="checked" onclick="change_sector_2_fields(0,false)" name="travel_type"/ >

    Soluzione:
    Evitare di ricorrere a questi elementi o fornire una alternativa per raggiungere lo scopo.

  • PREONATAZIONE VOLI
    Non sono presenti eventi dipendenti ai singoli dispositivi.

Requisito 17
  • HOME-PAGE, PREONATAZIONE VOLI
    Gli applet e script presenti non sono direttamente accessibili: Le informazioni veicolate attraverso di essi sono di una certa importanza ai fini della comprensione dei contenuti; esse sono veicolate attraverso oggetti di programmazione e non sono rese accessibili senza l'utilizzo di tali tecnologie.

    Soluzione:
    Evitare di ricorrere a questi elementi per fornire informazioni importanti o fornire una alternativa per poter accedere ad esse.


Requisito 18
  • HOME-PAGE
    Non sono presenti elementi multimediali.

  • PREONATAZIONE VOLI
    Non sono presenti elementi multimediali.

Requisito 19
  • HOME-PAGE
    C'è un link ambiguo: "Hertz" presente nella home-page che manda all'agenzia di noleggio auto.

    Esempio:

    home-page ingrandita

    Soluzione:
    utilizzare parole esplicative del contenuto

  • PREONATAZIONE VOLI
    Il resto dei link hanno nomi esplicativi.

Requisito 20
  • HOME-PAGE
    Non sono presenti temporizzazioni

  • PREONATAZIONE VOLI
    Non sono presenti temporizzazioni

Requisito 21
  • HOME-PAGE, PREONATAZIONE VOLI
    La spaziatura dei link nelle liste è in valore assoluto e questo comporta che in caso di ridimensionamento diventi impossibile selezionare un link con sicurezza. Questo succede anche nei pulsanti in cui il testo scompare se diventa troppo grande. Mancano completamente le scorciatoie da tastiera.


    Esempio:

    home-page ingrandita

    pulsante ingrandito

    Soluzione:
    Basta usare misure relative in em per i box in modo che aumentino con l'aumentare del carattere.


Requisito 22
  • HOME-PAGE, PRENOTAZIONE VOLI
    Non è presente la possibilità di accedere ad una pagina accessibile che rispetti i requisiti sopra indicati e che contenga le stesse informazioni delle pagine analizzate.