ANALISI DELL' ACCESSIBILITA'

Per effettuare l’analisi di accessibilità del sito web di Alitalia abbiamo utilizzato e integrato tra loro tre metodi:

Abbiamo analizzato le pagine principali incontrate durante la precedente analisi di usabilità (lo user testing ) del medesimo sito. I problemi incontrati con i diversi metodi sono simili per tutte le pagine analizzate. Le pagine web sono infatti generate automaticamente in asp e hanno una struttura fissa in tutto il sito, quello che le differenzia è solamente il diverso contenuto.
Il codice html non varia molto ed errori evidenti di accessibilità sono ripetuti in tutte le pagine: assenza dell’alt nelle immagini, assenza di DOCTYPE, tabelle dati non accessibili, dimensioni assolute e non relative….

Analisi con Bobby.

Un sito web è considerato Bobby Approved se è interamente conforme alle specifiche manuali e automatiche rivelate dal tool Bobby. Bobby si basa sulle linee guida per l'accessibilità create e aggiornate dal Web Access Initiative World Wide Web Consortium.
Per effettuare l’analisi con Bobby abbiamo avviato una sessione di validazione con Bobby online direttamente dall' home page http://bobby.watchfire.com/. Abbiamo immediatamente incontrato un problema in quanto Bobby non può accedere a siti che usano Secure Socket Layers (SSL, or HTTPS) per questioni di privacy e sicurezza. In questo caso le guide di Bobby consigliano di testare una versione non il linea del sito che non usi SSL con la versione di Bobby scaricabile o posizionandola in un'url momentanea. E quest’ultimo è l’escamotage che abbiamo attuato, dato che l’intero sito Alitalia utilizza https.
Nessuna delle pagine del sito Alitalia è Bobby Approved.
Vediamo l’analisi di una pagina-tipo fatta da Bobby suddivisa per priorità.
Il report di accessibilità di Bobby consiste in tre sezioni: Priority 1 accessibility, Priority 2 accessibility, Priority 3 accessibility. In ogni sezione, per primi sono segnalati gli errori che Bobby è in grado di individuare automaticamente, seguiti da quelli che richiedono una verifica manuale (User Checks). Infine, per ogni livello di priorità Bobby indica le linee guida di riferimento.

Priorità 1.

Nella versione con le annotazioni della pagina web che Bobby restituisce, troviamo i cappelli blu di Bobby.

segnalazione errore bobby

I cappelli con la sedia a rotelle indicano che Bobby ha riscontrato un problema di accessibilità per i disabili di livello 1 in più punti della pagina web che Bobby identifica in maniera automatica.

errore rilevatoProvide alternative text for all image-type buttons in forms. (1 instance)

Linea 547

Il bottone “cerca” presente in tutte le pagine in alto a destra non è accessibile in quanto non ha nemmeno l’alt per poter essere visto da un lettore di schermo.

Questa è l’immagine in questione:

bottone cerca

E questa è la riga di codice all’interno del form.

<input type="image" src="bot_cerca_tcm9-1864_tcm10-1864.gif" >

errore rilevatoProvide alternative text for all images. (50 instances)

Linee 357, 360, 363, 375, 383, 394, 486, 489, 492, 507, 519, 530, 536, 539, 547, 554, 562, 569, 573, 579, 587, 596, 599, 603, 606, 609, 612, 616, 619, 622, 625, 629, 632, 635, 638, 642, 653, 669, 676, 683, 685, 687, 689, 691, 693, 695, 697, 699, 701, 703

Tutte queste istanze segnalate come immagini senza alt si riferiscono al file pixel_tcm10-60.gif, una immagine utilizzata nella pagina per gestire il layout. Il W3C non condanna l’utilizzo delle immagini in questo modo (per il layout, come spacer), ma obbliga a inserire nel tag IMG l’attributo ALT vuoto in modo che i browser non grafici sappiano di poter ignorare l’immagine:

<img src=” pixel_tcm10-60.gif” alt=””/>

Priorità 1 – user checks.

Le icone con il punto interrogativo indicano un possibile problema di accessibilità di livello 1 che richiede un esame diretto per poter formulare una diagnosi definitiva.

errore rilevatoIf you can't make a page accessible, construct an alternate accessible version.

Non esiste una versione accessibile alternativa del sito. Dato che la versione completa potrebbe essere resa accessibile, non è indicato crearne una secondaria e solo testo, che magari non verrebbe aggiornata e potrebbe avere meno contenuti del sito originale.
Una possibile soluzione alternativa potrebbe essere, invece, creare una versione accessibile solo testo ma generata automaticamente dalle pagine di partenza non escludendo alcun contenuto importante e essenziale. Questa soluzione potrebbe essere interessante dato che il sito originale viene già generato in maniera automatica con asp.

errore rilevatoProvide alternative content for each SCRIPT that conveys important information or functionality.

Esistono molti javascript per visualizzare, soprattutto, delle finestre di pop up. Nessun testo alternativo, però, viene fornito. Non è così possibile raggiungere le informazioni presenti nella nuova pagina se non con Javascript.
Per esempio nella barra di navigazione nella parte inferiore di tutte le pagine del sito le voci “Investor relations”, “Comunicati stampa” e “Copyright” sono link che si aprono solo attraverso Javascript e lo stesso accade nella pagina in questione con la tabella che riporta le informazioni su altri aeroporti italiani:

Per maggiori informazioni sul check-in negli aeroporti italiani ed
esteri consulta l’apposita&nbsp;
<strong>
<a href="javascript: winOpComunicatiStampa('popup_checkin.htm')">
<u>tabella</u>
</a>
</strong>

correttezza If style sheets are ignored or unsupported, are pages still readable and usable?

Se non vengono utilizzati css la visualizzazione della pagina è identica anche se esteticamente meno piacevole.

correttezza If you use color to convey information, make sure the information is also represented another way. (114 instances)

Linee 22, 24, 28, 39, 46, 47, 51, 60, 61, 65, 74, 75, 79, 88, 89, 93, 102, 103, 107, 116, 120, 129, 133, 142, 146, 155, 159, 168, 172, 181, 185, 194, 198, 207, 208, 212, 221, 222, 226, 235, 239, 248, 249, 253, 262, 263, 267, 276, 277, 281, 290, 291, 295, 304, 305, 309, 316, 319, 325, 357, 360, 363, 375, 383, 394, 486, 489, 492, 507, 519, 525, 530, 536, 539, 547, 554, 562, 569, 573, 579, 587, 593, 596, 599, 603, 606, 609, 612, 616, 619, 622, 625, 629, 632, 635, 638, 642, 653, 669, 676, 683, 685, 687, 689, 691, 693, 695, 697, 699, 701, 703

In questo punto sono segnalate da Bobby tutte le immagini usate all’interno del tag <img> o utilizzate come background in altri tag.
In realtà nel sito non si utilizza il colore per veicolare l’informazione nè con le immagini vere e proprie nè con le immagini di sfondo.

errore rilevato If this is a data table (not used for layout only), identify headers for the table rows and columns. (33 instances)

Linee 44, 58, 72, 86, 100, 114, 127, 140, 153, 166, 179, 192, 205, 219, 233, 246, 260, 274, 288, 302, 41, 355, 378, 423, 352, 484, 534, 528, 567, 601, 591, 585, 15

Tutte le tabelle elencate da Bobby sono tabelle di layout, solo quella della riga 423 è una vera e propria tabella dati, quella che dal browser è visualizzata in questo modo:

Questa tabella, però, non è accessibile e le intestazioni non sono evidenziate in maniera corretta. La tabella possiede soltanto TD e TR senza associazioni tra esse e senza celle di intestazione TH.

correttezza If the submit button is used as an image map, use separate buttons for each active region. (1 instance)

Linea 547

Questo bottone non è una mappa di immagine e non possiede diverse regioni attive.

errore rilevato If an image conveys important information beyond what is in its alternative text, provide an extended description. (72 instances)

Linee 22, 24, 28, 46, 60, 74, 88, 102, 116, 129, 142, 155, 168, 181, 194, 207, 208, 221, 222, 235, 248, 262, 276, 290, 304, 316, 325, 357, 363, 375, 383, 394, 486, 492, 507, 519, 530, 536, 539, 547, 554, 562, 569, 573, 579, 587, 593, 596, 599, 603, 609, 612, 616, 622, 625, 629, 635, 638, 642, 653, 676, 683, 685, 687, 689, 691, 693, 695, 697, 699, 701, 703

Nessuna delle immagini ha un testo alternativo significativo. Quasi tutte le immagini presentano il tag alt vuoto. Solo le immagini alla riga di codice 22 e 28 hanno come testo alternativo “Alitalia”. Queste immagini corrispondono al logo in alto a sinistra (che serve per tornare alla home page) e il banner in alto nella parte centrale della pagina (con il solo valore estetico) e il testo “Alitalia” non è assolutamente significativo in questi frangenti.

correttezza If a table has two or more rows or columns that serve as headers, use structural markup to identify their hierarchy and relationship. (49 instances)

Linee 26, 19, 44, 58, 72, 86, 100, 114, 127, 140, 153, 166, 179, 192, 205, 219, 233, 246, 260, 274, 288, 302, 41, 333, 343, 355, 381, 378, 373, 370, 352, 484, 339, 505, 329, 517, 541, 534, 528, 560, 567, 577, 601, 591, 585, 651, 667, 681, 15

Non sono presenti nel sito tabelle complesse con più di un livello di intestazione.

Priorità 1 – altre considerazioni.

errore rilevato Identify any changes in the document's language.

Molte sono le parole in inglese presenti nel sito e nessuna è marcata con l’attributo LANG.

correttezza Use the simplest and most straightforward language that is possible.

Il linguaggio usato è semplice. Per la presenza di paragrafi poco significativi e per l’impatto sull’utente delle informazioni contenute nel sito si rimanda all’analisi di usabilità svolta con gli utenti.

Priorità 2.

errore rilevato Use relative sizing and positioning (% values) rather than absolute (pixels). (71 instances)

Linee 15, 24, 25, 41, 47, 51, 61, 65, 75, 79, 89, 93, 103, 107, 120, 133, 146, 159, 172, 185, 198, 212, 226, 239, 249, 253, 263, 267, 277, 281, 291, 295, 305, 309, 324, 329, 331, 333, 339, 352, 370, 372, 373, 378, 516, 525, 530, 536, 539, 554, 562, 569, 572, 579, 587, 590, 596, 599, 601, 603, 606, 609, 616, 619, 622, 629, 632, 635, 642, 653, 681

Nella tabella dati tutte le misure sono in px, nel resto della pagina solo le tabelle di layout hanno alcune dimensioni in percentuale(ampiezza o altezza), ma la maggior parte delle misure è data in maniera assoluta (senza nemmeno le unità di misura px o cm).
I posizionamenti sono stati fatti tutti con le tabelle di layout e per questo non hanno nè valori assoluti nè relativi.

correttezza Create link phrases that make sense when read out of context. (1 instance)

Linea 573

Alcuni dei link utilizzati non hanno senso se letti fuori dal contesto, come per esempio “cerca” o “Vai” presenti nella home page:

errore rilevato Use a public text identifier in a DOCTYPE statement. (1 instance)

Linea 1

Nessun DOCTYPE è presente nell’intero sito. Non è inclusa all'inizio del documento alcuna dichiarazione sul tipo di documento che rimandi a una DTD pubblicata.

correttezza Make sure event handlers do not require use of a mouse. (19 instances)

Linee 48, 62, 76, 90, 104, 117, 130, 143, 156, 169, 182, 195, 223, 236, 250, 264, 278, 292, 306

Non è richiesto l’utilizzo del mouse per poter navigare tra i link del sito, si può benissimo selezionare qualsiasi link utilizzando anche solo la tastiera (con TAB e INVIO).

errore rilevato Provide an explicit label for each form control. (1 instance)

Linea 546

La form di ricerca non ha etichetta identificata dal tag LABEL. Lo stesso vale per le form presenti nel resto del sito. bisogna dire, però, che in tutti questi casi l’etichetta testuale (non codificata come LABEL) che viene visualizzata dal browser precede immediatamente il campo della form.

errore rilevato Do not use the same link phrase more than once when the links point to different URLs. (1 instance)

Linea 19

Il logo in alto a sinistra punta a due pagine diverse i cui link sono rispettivamente “index-1” e “index-2”. come se ciò non bastasse l’alt non è presente e, come emerge dall’analisi di usabilità, nemmeno graficamente la differenza tra i due link è percepibile.

Priorità 2. – index -

Come detto all’inizio dell’analisi di accessibilità di questo sito, tutte le pagine sono similari a livello di codice e presentano in genere sempre gli stessi problemi di accessibilità. Analizzando, però, la home page del sito, Bobby ha riscontrato un problema in più di livello 2, che analizziamo qui di seguito:

errore rilevato Consider grouping long lists of selections into a hierarchy. (6 instances)

Linee 342, 355, 409, 419, 471, 481

Questo problema è stato riscontrato nella home page perchè questa pagina presenta diverse form per l’acquisto del biglietto aereo. Nessuna delle option all’interno dei select è raggruppata logicamente. Il W3C raccomanderebbe di dividere grandi blocchi di informazione in gruppi più maneggevoli quando è naturale ed appropriato (e in questo caso lo sarebbe) usando per esempio OPTGROUP per raggruppare gli elementi OPTION all'interno di un SELECT. In questo modo, ad esempio, si potrebbero raggruppare tutti gli aeroporti di partenza italiani e esteri, poi tutti gli aeroporti di arrivo tra italiani e stranieri, e così via.

Priorità 2 – user checks.

errore rilevato Check that the foreground and background colors contrast sufficiently with each other. (114 instances)

Linee 22, 24, 28, 39, 46, 47, 51, 60, 61, 65, 74, 75, 79, 88, 89, 93, 102, 103, 107, 116, 120, 129, 133, 142, 146, 155, 159, 168, 172, 181, 185, 194, 198, 207, 208, 212, 221, 222, 226, 235, 239, 248, 249, 253, 262, 263, 267, 276, 277, 281, 290, 291, 295, 304, 305, 309, 316, 319, 325, 357, 360, 363, 375, 383, 394, 486, 489, 492, 507, 519, 525, 530, 536, 539, 547, 554, 562, 569, 573, 579, 587, 593, 596, 599, 603, 606, 609, 612, 616, 619, 622, 625, 629, 632, 635, 638, 642, 653, 669, 676, 683, 685, 687, 689, 691, 693, 695, 697, 699, 701, 703

Il contrasto tra i colori dei caratteri e lo sfondo non è sempre sufficiente. Come emerge dallo user testing, il fatto di avere verde su verde e caratteri piccoli crea spesso problemi, specialmente per gli utenti più anziani. Con uno schermo in bianco e nero immaginiamo che il contrasto non sia sufficiente.

correttezza If there are logical groupings of form controls, use FIELDSET with LEGEND on each group. (1 instance)

Linea 544

Non è necessario dividere grandi blocchi di informazione in gruppi più maneggevoli perchè non presenti.

errore rilevato Avoid use of obsolete language features if possible. (2 instances)

Linee 450, 550

Non è adeguato l’uso del tag <u> per sottolineare il testo, potrebbe essere ottenuto lo stesso effetto con i css.

errore rilevato Is the user made aware that there will be pop-up windows or changes in the active window? (2 instances)

Linee 684, 686

No, l’utente non è informato della presenza di finestre di pop up e se non ha la possibilità di visualizzare i javascript gli verrà negata la possibilità di accedere alle informazioni visualizzate dai link in questione.

errore rilevato Make sure that labels of all form controls are properly placed.

L'etichetta deve precedere il proprio controllo immediatamente sulla stessa riga (permettendo più di un controllo/etichetta per riga) oppure essere nella riga precedente il controllo (con una sola etichetta e un solo controllo per riga). Ciò avviene in questa pagina (nel form della ricerca), anche se in altre pagine del sito non sempre la corrispondenza può essere così chiara. La soluzione definitiva sarebbe includere sempre il tag LABEL nei campi della form.

errore rilevato Do not create a blinking effect with animated gif images. (108 instances)

Linee 22, 24, 46, 47, 51, 60, 61, 65, 74, 75, 79, 88, 89, 93, 102, 103, 107, 116, 120, 129, 133, 142, 146, 155, 159, 168, 172, 181, 185, 194, 198, 207, 208, 212, 221, 222, 226, 235, 239, 248, 249, 253, 262, 263, 267, 276, 277, 281, 290, 291, 295, 304, 305, 309, 316, 319, 325, 357, 360, 363, 375, 394, 486, 489, 492, 507, 519, 530, 536, 539, 547, 554, 562, 569, 573, 579, 587, 593, 596, 599, 603, 606, 609, 612, 616, 619, 622, 625, 629, 632, 635, 638, 642, 653, 669, 676, 683, 685, 687, 689, 691, 693, 695, 697, 699, 701, 703

L’unica linea di codice in cui avviene questo è alla linea 573.
Riportiamo di seguito il codice in questione:

<td class="bordo_verde" valign="top" height="155">
<a href="booking.asp.htm" tppabs="http://www.alitalia.it/booking.asp">
<img src="banner_acquista2[1]_tcm10-3144.gif" border="0">
</a>
</td>

L’immagine “banner_acquista2[1]_tcm10-3144.gif” è una gif animata e non vi è modo di bloccarla

Quando una pagina include contenuto in movimento, bisognerebbe fornire un meccanismo all'interno di uno script o applet per permettere agli utenti di bloccare il movimento. Il fatto di usare i fogli di stile insieme con gli script per creare il movimento permetterebbe agli utenti di disabilitare oppure tenere sotto controllo gli effetti con maggiore facilità. In questo caso ciò non è possibile.

errore rilevato If programmatic objects create pop-up windows or change the active window, make sure that the user is aware this is happening. (1 instance)

Linea 5

L’utente non è informato della presenza di finestre di pop up e il sito fa apparire finestre a cascata cambiando la finestra attiva senza informare l'utente.

errore rilevato Add a descriptive title to links when needed.

Anche se in alcuni link sarebbe necessario, perchè l’etichetta non è sufficientemente esplicativa, il title non è mai presente in nessun link.

correttezza Mark up any quotations with the Q and BLOCKQUOTE elements.

Non ci sono citazioni all’interno della pagina. Non vi è inoltre nessun testo marcato con questi elementi per creare particolari effetti di layout.

Priorità 2 – altre considerazioni.

errore rilevato Make sure that all link phrases make sense when read out of context.

Non tutti i link hanno senso se presi fuori dal loro contesto per esempio “Prenota e acquista” o “Orari” nel menu sulla sinistra. Verrebbe da chiedersi: acquisto cosa? quali orari?
Un altro link davvero incomprensibile fuori dal contesto della frase in cui si trova è:

“Per maggiori informazioni sul check-in negli aeroporti italiani ed esteri consulta l’apposita tabella. “

in cui solo la parola “tabella” è un link e per questo incomprensibile se si volesse navigare soltanto tra i link della pagina.

errore rilevato Group related elements when possible.

Anche se fosse possibile non viene raggruppato mai nessun elemento.

errore rilevato Make sure your document validates to formal published grammars.

Il sito non è validato per nessuna grammatica formale.

correttezza Is there a site map or table of contents, a description of the general layout of the site, the access features used, and how to use them?

C’è una mappa del sito a cui si può accedere in modo non molto immediato dal menu nella parte inferiore della pagina. In questa mappa è ripreso semplicemente il menu a sinistra e è esteso nella sua massima profondità. Nella parte centrale della pagina, comunque, c’è un link (anche se poco chiaro) dal titolo Novità e Offerte che spiega con una presentazione flash e in maniera superficiale quali sono le parti del sito e come accedere a esse.

correttezza Is there a clear, consistent navigation structure?

La struttura di navigazione è abbastanza chiara, grazie al menu sulla sinistra sempre disponibile. In realtà resta da apprendere l’utilità della barra inferiore di navigazione, poco usata e poco immediata per chi utilizza il sito per la prima volta.

errore rilevato Use the latest technology specification available whenever possible.

Non sono usate rigorosamente le tecnologie W3C e non sono usate, soprattutto, le versioni più recenti anche se supportate.

correttezza Where it's possible to mark up content (for example mathematical equations) instead of using images, use a markup language (such as MathML).

Non ci sono espressioni matematiche e per questo non è stato necessario marcare nulla all’interno del sito con uno specifico linguaggio di markup.

Analisi secondo le linee guida

In questa analisi non vogliamo ripetere quanto detto in precedenza durante l’analisi della validazione con Bobby.
Ci limiteremo dunque a segnare se :

Commenteremo solamente quelle linee guida che non sono state prese in considerazione in precedenza o che, per qualche ragione, sono interessanti da commentare.

Priorità 1 - In generale

errore rilevato 1.1 Fornire un equivalente testuale per ogni elemento non di testo (per esempio, mediante "alt", "longdesc" o contenuto nell'elemento stesso). Questo comprende: immagini, rappresentazioni grafiche di testo (compresi i simboli), zone di immagini sensibili, animazioni (ad es. GIF animate), applet e oggetti programmati, arte ascii frame, script, immagini usate come richiamo per elenchi, spaziatori, bottoni grafici, suoni (azionati con o senza l'intervento dell'utente), file di solo audio, tracce audio di video e video.

La maggior parte delle immagini contiene un alt vuoto (e non una descrizione esplicativa), solo gli spaziatori non contengono alt (mentre è qui che lo dovremmo trovare vuoto!). Non si è pensato a un LONGDESC per nessun elemento del sito.

correttezza 2.1 Assicurarsi che tutta l'informazione veicolata dal colore sia disponibile anche senza, per esempio grazie al contesto o ai marcatori.

Nessuna informazione è veicolata dal colore.

errore rilevato 4.1 Identificare con chiarezza i cambiamenti nel linguaggio naturale del testo di un documento e in ogni equivalente testuale (per es. nelle didascalie).

In nessun testo o equivalente testuale è identificata la lingua usata, anche se all’interno del testo, che è in italiano, sono spesso introdotti termini in inglese

correttezza 6.1 Organizzare i documenti in modo che possano essere letti senza i fogli di stile. Per esempio, quando un documento HTML viene reso senza i fogli di stile associati, deve essere sempre possibile leggere il documento.

errore rilevato 6.2 Assicurarsi che gli equivalenti del contenuto dinamico vengano aggiornati quando il contenuto dinamico cambia.

Bisognerebbe per esempio fornire una presentazione alternativa per gli script, magari con un elemento NOSCRIPT. Il contenuto di questo elemento viene visualizzato quando gli script non sono abilitati.

correttezza 7.1 Fino a quando gli interpreti non permetteranno agli utenti di controllare lo sfarfallìo, evitare di far sfarfallare lo schermo.

correttezza 14.1 Usare il linguaggio più chiaro e semplice possibile che sia adatto al contenuto di un sito.

Il linguaggio usato è chiaro e semplice, ma spesso poco efficace a livello di contenuti, non dà immediatamente le informazioni che l’utente vorrebbe avere. Si ha per esmpio poca chiarezza nell’uso del linguaggio nella pagina www.alitalia.it/vademecum.htm quando si parla dei documenti necessari per i propri viaggi in base alla destinazione:

Viaggi verso un paese Schengen?
Se devi partire per una destinazione Schengen, dovrai avere con te un documento valido per l’espatrio e, quindi, uno di questi:
[…]

Non è spiegato cosa sia una destinazione Schengen e non è detto che l’utente medio debba esserne a conoscenza.

Priorità 1 - Se si utilizzano immagini o mappe immagine

[N/A] 1.2 Fornire ridondanti collegamenti di testo per ogni zona attiva di una immagine sensibile sul lato server.

[N/A] 9.1 Fornire immagini sensibili sul lato client invece di immagini sensibili sul lato server, con l'eccezione dei casi nei quali le zone non possono essere definite con una forma geometrica valida.

Non ci sono immagini server-side.

Priorità 1 - Se si utilizzano tabelle

errore rilevato 5.1 Per tabelle di dati, identificare le intestazioni di righe e colonne.

Nessuna delle tabelle dati presente nel sito è accessibile.

[N/A] 5.2 Per tabelle di dati che hanno due o più livelli logici di intestazioni di righe o colonne, usare marcatori per associare le celle di dati e le celle di intestazione.

Non ci sono tabelle dati complesse.

Priorità 1 - Se si utilizzano i frame

[N/A] 12.1 Dare un titolo a ogni frame per facilitare l'identificazione del frame e la navigazione.

Priorità 1 - Se si utilizzano applet e script

errore rilevato 6.3 Assicurarsi che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati. Se questo non è possibile, fornire informazione equivalente in una pagina accessibile alternativa.

Niente di tutto questo avviene nel sito. Non è possibile vedere alcune pagine quando script sono disabilitati e non esiste nemmeno una pagina accessibile alternativa.

Priorità 1 - Se si utilizzano elementi multimediali

errore rilevato 1.3 Fino a quando gli interpreti non potranno leggere automaticamente ad alta voce l'equivalente testuale di un filmato, fornire una descrizione audio delle informazioni essenziali del filmato di una presentazione multimediale.

Per la presentazione in flash che si apre dalla home page da “Novità e Offerte” non esiste alcuna descrizione audio.

[N/A]1.4 Per ogni presentazione multimediale temporizzata (per esempio un film o una animazione), sincronizzare alternative equivalenti (per esempio didascalie o descrizioni parlate del filmato) con la presentazione.

Priorità 1 - Se tutto il resto fallisce

errore rilevato 11.4 Se, nonostante ogni sforzo, non si può creare una pagina accessibile, fornire un collegamento a una pagina alternativa che usi le tecnologie W3C, sia accessibile, contenga informazioni (o funzionalità) equivalenti, e sia aggiornata con la stessa frequenza della pagina (originale) inaccessibile.

Priorità 2 - In Generale

errore rilevato 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. [Priorità 2 per le immagini, Priorità 3 per il testo].

il contrasto in tutto il sito non è molto evidente nelle voci di menù e nelle barre di navigazione. Infatti, considerando il cerchio dei colori di seguito riportato è in genere consigliato di contrastare i colori utilizzando colori opposti nel cerchio di colore, piuttosto che adiacenti (in questo caso il contrasto non è efficace). nel sito, invece vengono contrastati tra loro colori sulle tinte di “Green” con tinte di “Blue-green”.

scelta dei colori per un giusto contrasto

Ad esempio nell' acquisto di un biglietto aereo:

visualizzazione delle fasi per l'aquisto di un biglietto

errore rilevato 3.1 Quando esiste un linguaggio di marcatori adatto, per veicolare informazione usare un marcatore piuttosto che le immagini.

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.
Non esistono, però, formule matematiche e per questo non viene utilizzato MathLab e non vengono utilizzati marcatori in modo errato, anzi, per esempio con il tag STRONG vengono enfatizzate alcune parti che vengono visualizzate in grassetto dal browser grafico e che, da un lettore di schermo, potrebbero essere lette in maniera differente grazie all’uso adeguato di questo marcatore.

errore rilevato 3.2 Creare documenti che siano validi rispetto alle grammatiche formali pubblicate.

errore rilevato 3.3 Usare fogli di stile per controllare l'impaginazione e la presentazione.

I fogli di stile sono usati ma solo per controllare una piccola parte dell’impaginazione, la maggior parte della grafica è fatta tramite tabelle di layout.

errore rilevato 3.4 Usare unità relative e non assolute nei valori degli attributi del linguaggio di marcatura e nei valori della proprietà del foglio di stile.

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

Non vengono usate le intestazioni per dividere il testo in capitoli. Gli elementi di intestazione (H1 … H6) non vengono proprio utilizzati. Il tag HR non viene usato per creare linee orizzontali, che invece sono fatte utilizzando immagini. La presentazione è solo visuale e non marcata adeguatamente per distinguere le varie sezioni, le quali sono divise solo grazie a tabelle di layout.

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

Le liste sono utilizzate in modo corretto, includendo i tag LI all’interno del tag UL per le liste non ordinate.

correttezza 3.7 Marcare le citazioni. Non usare marcatura che definisca citazioni per ottenere effetti di formattazione come il rientro.

errore rilevato 6.5 Assicurarsi che il contenuto dinamico sia accessibile oppure fornire una presentazione o pagina alternativa.

questo non avviene: se l’utente usa la modalità text only non è aiutato dal codice nella visualizzazione delle informazioni, come invece si potrebbe fare con un codice di questo tipo:

<HEAD>
<TITLE>Welcome to the Virtual Mall!</TITLE>
<LINK title="Text-only version"
rel="alternate"
href="text_only"
media="aural, braille, tty">
</HEAD>
<BODY><P>...</BODY>

inoltre i javascript sono usati come URI. Se l’utente non sta usando gli script non saranno capaci di vedere la pagina poichè il browser non può leggere il contenuto del link. Sono infatti usati tag del tipo:
<A href="javascript:">...</A>

Che il W3C indica come deprecati.

[N/A] 7.2 Fino a quando i programmi utente non permetteranno agli utenti di controllare il lampeggiamento, evitare di far lampeggiare il contenuto (cioè di cambiare la presentazione a intervalli regolari, come se si accendesse e spegnesse).

correttezza 7.4 Fino a quando i programmi utente non forniranno la possibilità di bloccare l'autoaggiornamento, non creare pagine che si autoaggiornano periodicamente.

Le pagine non si autoaggiornano automaticamente per esempio con il “refresh”.

correttezza 7.5 Fino a quando i programmi utente non forniranno la capacità di bloccare l'auto-reindirizzamento, non usare marcatura per reindirizzare le pagine automaticamente. Piuttosto, configurare il server in modo che esegua i reindirizzamenti.

errore rilevato 10.1 Fino a quando i programmi utente 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.

Questo invece avviene a causa di finestre di pop up che si aprono visitando alcuni link di cui già si è parlato in precedenza

errore rilevato 11.1 Usare le tecnologie W3C quando sono disponibili e sono appropriate per un certo compito e usare le versioni più recenti quando sono supportate.

Le correnti tecnologie W3C sono:
Nessuna di queste tecnologie è utilizzata in maniera adeguata nel sito (non si specifica che versione di HTML è usata, non essendoci una dichiarazione di DOCTYPE, non vengono usati i css per strutturare tutto il layout ma solo piccole parti, non viene usato SMIL per le presentazioni, ma Flash).

errore rilevato 11.2 Evitare le caratteristiche delle tecnologie W3C che sono disapprovate.

Viene utilizzato, per esempio il tag U, disapprovato dal W3C.

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

errore rilevato 13.1 Identificare con chiarezza l'obiettivo di ogni collegamento.

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

Vengono utilizzati i tag TITLE e META per dare informazioni di tipo semantico alle pagine, per esempio:

<title>Alitalia - Info di viaggio</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">

<META HTTP-EQUIV ="Content-Language" content="1252">

non vengono, però, usati tag del tipo ADDRESS per dare informazioni sul creatore della pagina.

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

Esiste la mappa del sito e il menù di navigazione sulla sinistra è sempre presente nelle varie pagine.

correttezza 13.4 Usare meccanismi di navigazione in modo coerente.

In ogni pagina diversa dalla home page è presente un breadcrumb che indica all’utente dove si trova e il menù sulla sinistra è sempre aggiornato in base alla posizione dell’utente indicata dall’unico link non attivo tra le diverse voci del menu.

Priorità 2 - Se si utilizzano le tabelle

correttezza 5.3 Non usare tabelle per impaginazioni a meno che la tabella non sia comprensibile se letta in modo linearizzato. Altrimenti, se la tabella non risulta leggibile, fornire una alternativa equivalente (che può essere una versione linearizzata).

Le tabelle di layout sono utilizzate ma, lletta in modo linearizzato, la tabella risulta comunque comprensibile.

correttezza 5.4 Se per l'impaginazione viene usata una tabella non usare nessun marcatore di struttura per la formattazione della resa visiva.

Non vengono utilizzati marcatori di struttura per la resa visiva della tabella. Le righe e le colonne servono solo per allineare il testo.

Priorità 2 - Se si utilizzano i frame

[N/A] 12.2 Descrivere lo scopo dei frame e il modo in cui essi interagiscono se non è evidente dai titoli dei frame da soli.

Priorità 2 - Se si utilizzano i moduli

errore rilevato 10.2 Fino a quando i programmi utente non supporteranno esplicite associazioni fra etichette e controlli dei moduli, assicurare, per tutti i controlli dei moduli che hanno etichette associate implicitamente, che l'etichetta sia posizionata correttamente.

Le etichette non sono posizionate correttamente: non precedono immediatamente la form.

errore rilevato 12.4 Associare esplicitamente le etichette ai loro controlli.

Non è utilizzato nessun LABEL per associare le etichette ai loro controlli: le etichette sono marcate come un normale testo e non vi è una esplicita corrispondenza tra il testo e la form.

Priorità 2 - Se si utilizzano applet e script

correttezza 6.4 Per quanto riguarda script e applet, assicurarsi che i gestori di eventi siano indipendenti dai dispositivi di input.

I gestori di eventi sono indipendenti dai dispositivi di input, poichè si attivano attraverso dei link, che sono accessibili con qualsiasi dispositivo di input.

errore rilevato 7.3 Fino a quando i programmi utente non permetteranno agli utenti di bloccare il contenuto in movimento, evitare il movimento nelle pagine.

Sono utilizzate gif animate per i banner pubblicitari.

correttezza 8.1 Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive [Priorità 1 se la funzionalità è importante e non presentata altrove, altrimenti Priorità 2].

Per questo punto si rimanda all’analisi di accessibilità con Home Page Reader e Lynx .

correttezza 9.2 Assicurarsi che ogni elemento che possiede una sua specifica interfaccia possa essere gestito in una modalità indipendente da dispositivo.

L’accesso ai link con la tastiera è possibile grazie all’ordine esatto che si ha navigando con il tab. Esiste il testo alternativo per i link del logo in alto a sinistra che è una mappa di immagine client side, anche se non particolarmente efficace come testo. Non si ha, invece, la possibilità di utilizzare shortcut da tastiera.

correttezza 9.3 Negli script, specificare gestori di evento logici piuttosto che gestori di evento dipendenti da dispositivo.

I gestori di evento sono dipendenti dal dispositivo, ma sono utilizzati semplicemente per effetti decorativi e per questo sono accettati. (E’ utilizzato onmousedown per illuminare le voci di menu quando selezionate)

Debugging con tecnologia assistiva.

Abbiamo voluto verificare che la non adeguatezza alle linee guida, riscontrata in precedenza con Bobby e sistematicamente per ogni linea guida, si rispecchia in problemi di navigazione utilizzando un qualche tipo di tecnologia assistiva. Procediamo analizzando in dettaglio qualcuna tra le pagine principali del sito, scelte anche per l'analisi di usabilità.
L'analisi è stata svolta con il browser testuale Lynx versione 2.8.5dev.16 (01 Jun 2003) e con il browser vocale IBM Home Page Reader (in seguito HPR) versione 2.1.13.0.
I problemi riscontrati una prima volta non vengono ripetuti in seguito nelle altre pagine.

Index (www.alitalia.it/index-1.htm)

Iniziamo ad analizzare i problemi di carattere generale riscontrati in questa pagina, per poi proseguire con quelli propri della pagina:

IN GENERALE:

IN PARTICOLARE:

In aeroporto (www.alitalia.it/index-19.htm)

Vademecum del viaggiatore www.alitalia.it/vademecum.htm )

Altri aeroporti italiani (www.alitalia.it/airposrts.htm)

I tempi del check-in (www.alitalia.it/checkin.htm )