Guideline 1

Provide equivalent alternatives to auditory and visual content.
(Traduzione: Fornire un'alternativa al contenuto visivo ed auditivo.)

 
 
 

Checkpoint 1.1 [priority 1]

da http://www.basilicatanet.it

È necessario fornire un testo per qualunque elemento significativo non testuale della pagina.
L'esempio sottostante riporta una immagine mappata i cui link non forniscono indicazioni sulle loro destinazioni. Sarebbe comunque stato opportuno, in questo caso, utilizzare due distinte immagini piuttosto che una singola immagine mappata e per ognuna di esse fornire un testo alternativo ed indicazioni sulle modalità di apertura della nuova pagina.

immagine esplicativa Parte della pagina di www.basilicatanet.it che mostra un'immagine mappata priva di testo alternativo. d
codice d'esempio
-----------------------------------------------------
-----------------------------------------------------

Checkpoint 1.5 [priority 3]

da http://www.basilicatanet.it

I link di una immagine mappata (client-side) dovrebbero essere ridondanti nella pagina in modo da fornire un'alternativa testuale per raggiungerli.
Questo caso non riguarda precisamente un'immagine mappata, ma un oggetto Flash. Si tratta di una serie di tre link a tre diversi siti istituzionali ed una scritta scorrevole lascia appena il tempo, ad ogni pausa, di determinare a quale etichetta (scorrevole) appartiene l'icona linkata.
La scelta di utilizzare Flash (e senza l'utilizzo delle opportune estensioni di accessibilità disponibili dalla versione MX) impedisce di usufruire dei link qualora non sia disponibile il plugin per visualizzare gli oggetti Flash.
La mancanza di link ridondanti è rende dunque evidente la violazione di questo checkpoint, sebbene non si tratti propriamente di un'immagine mappata.

immagine esplicativa Parte della pagina di www.basilicatanet.it che mostra un'immagine mappata priva di testo alternativo. d
 
 
 

Guideline 2

Don't rely on color alone.
(Traduzione: Non affidarsi solamente al colore.)

 
 
 

Checkpoint 2.1 [priority 1]

da http://www.basilicatanet.it

È necessario assicurarsi l'informazione convogliata dai colori sia disponibile anche in altre forme e con l'opportuno utilizzo di meta tags.
Questo caso vede Una tabella utilizzata per costruire un menù orizzontale. Ogni cella cambia il proprio colore di sfondo al passaggio del mouse.
Tuttavia la soluzione proposta utilizza javascript, in assenza del quale i link non possono neppure essere attivati e le celle non cambiano colore. Inoltre non è stato previsto che al passaggio del puntatore sui link (o sulle celle) questi cambi rivelando all'utente la presenza di un link.
Simulando un monitor in bianco e nero si ènotato come questa scelta estetica, per il colore rosso, non renda possibile distinguere se le cella è evidenziata o meno.

Una soluzione decisamente più accessibile avrebbe previsto una lista di cui ogni elemento è un link. Con poche e semplici istruzioni CSS si dispongono gli elementi in linea (display:inline;). L'utilizzo dei selettori :link e :hover avrebbero permesso di gestire il cambio di stile al passaggio del mouse.

immagino esplicative
Immagini d'esempio: parte del menù orizzontale a colori ed in bianco e nero (d)
Link del menù orizzontale A colori In bianco e nero
Primo link Il puntatore passa sulla cella e questa si colora di grigio. Il puntatore non rileva la presenza di un link. Il puntatore passa sulla cella e questa appare più chiara. Il puntatore non rileva la presenza di un link.
Secondo link Il puntatore passa sulla cella e questa si colora di rosso. Il puntatore non rileva la presenza di un link. Il puntatore passa sulla cella e questa non sembra cambiare colore. Il puntatore non rileva la presenza di un link.
Terzo link Il puntatore passa sul link e la cella si colora di azzurro. Il puntatore non rileva la presenza di un link. Il puntatore passa sulla cella e questa appare più chiara. Il puntatore non rileva la presenza di un link.
codice d'esempio
-----------------------------------------------------
-----------------------------------------------------

Checkpoint 2.2 [priority 3]

da http://www.basilicatanet.it/news/homenews.asp

Il titolo ed il sottotitolo della sezione "Regione Informa" sono parte di un'immagine. Il colore delle scritte (tonalità blu e azzurre) rispetto allo sfondo (azzurro) non sembrano essere sufficientemente contrastati per essere facilmente letti da utenti ipovedenti. Test effettuati con un simulatore di daltonismo non hanno riscontrato problemi.

immagine esplicativa Intestazione della colonna delle notizie nella sezione Regione Informa. Il contrasto delle scritte sullo sfondo non sembra essere sufficiente. d
 
 
 

Guideline 3

Use markup and style sheets and do so properly.
(Traduzione: Usare markup e fogli di stile e farlo in modo appropriato.)

 
 
 

Checkpoint 3.1 [priority 2]

da http://www.basilicatanet.it/news/homenews.asp

Il titolo ed il sottotitolo della sezione "Regione Informa" sono parte di un'immagine. L'uso di immagini è scorretto quando esse rappresentano del testo altrimenti proponibile con un corretto utilizzo dei tag e degli stili.
Una soluzione valida consiste nell'inserire il testo in un <div> il cui layout è controllato da style sheet. Inoltre sarebbe stato opportuno l'utilizzo degli headers <h1..6> al fine di permettere ad un browser non grafico di identificare l'intestazione della sezione.

immagine esplicativa Intestazione della colonna delle notizie nella sezione Regione Informa. d

Checkpoint 3.2 [priority 2]

da http://www.basilicatanet.it/

Le pagine devono essere valide rispetto ad un DTD (ad esempio strict HTML 4.0) e tale riferimento deve essere indicato all'inizio del documento.
Solamente alcune pagine che esulano dal contesto principale del sito (probabilmente aggiunte in seguito, non inserite nel CMS del sito ed apparentemente sviluppate con tool WYSIWYG) riportano tale indicazione.

soluzione proposta
-----------------------------------------------------
-----------------------------------------------------

Checkpoint 3.3 [priority 2]

da http://www.basilicatanet.it/

Per controllare il layout e la presentazione della pagina si devono usare i fogli di stile.
È dunque deprecato l'utilizzo di markup al solo scopo di modificare la presentazione dei contenuti.
In questo caso vediamo come il tag font e b siano stati utilizzati erroneamente a tale scopo.

codice d'esempio
-----------------------------------------------------
-----------------------------------------------------
 
 
 

Guideline 4

Clarify natural language usage
(Traduzione: Esplicitare il linguaggio naturale utilizzato.)

 
 
 

Checkpoint 4.1 [priority 1]

da http://www.basilicatanet.it/cittele/isp.asp

È indispensabile identificare chiaramente i cambiamenti di linguaggio naturale in ogni testo del documento. Ciò permette a browser vocali di identificare la nuova lingua e leggere correttamente le parti di testo marcate come appartenenti ad una lingua diversa rispetto a quella primaria della pagina.

codice d'esempio
-----------------------------------------------------
-----------------------------------------------------
soluzione proposta
-----------------------------------------------------
-----------------------------------------------------

Si noti come nella soluzione proposta sia stato aggiunto l'acronimo per ISP (Checkpoint 4.3, priority 3).
Inoltre nel documento original si fa riferimento ad un numero verde presentato in forma di immagine e senza testo alternativo disponibile (Checkpoint 1.1, priority 1).

 
 
 

Guideline 5

Create tables that transform gracefully
(Traduzione: Creare tabelle che si trasformino in maniera elegante.)

 
 
 

Checkpoint 5.1 [priority 1]

da http://www.basilicatanet.it/news/homenews.asp

I titoli degli argomenti, la data dell'ultima risposta, il nickname dell'autore ed altre informazioni utili per orientarsi all'interno del forum, sono contenuti all'interno di una tabella.
In questo caso notiamo come le celle delle intestazioni utilizzino il tag td (che caratterizza del celle di dati) piuttosto che th (che identifica le intestazioni delle colonne/righe).

immagine esplicativa Parte superiore della tabella che contiene gli argomenti del forum d
codice d'esempio
-----------------------------------------------------
-----------------------------------------------------
 
 
 

Guideline 6

Ensure that pages featuring new technologies transform gracefully.
(Traduzione: Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in maniera elegante.)

 
 
 

Checkpoint 6.3 [priority 1]

da http://www.regione-basilicata.it

L'URL ufficiale del sito della Regione Basilicata e pubblicato nel portale nazionale Italia.gov.it nell'elenco delle Regioni, non è quello effettivamente utilizzato per ospitare il le pagine oggetto di questa analisi. All'indirizzo http://www.regione.basilicata.it troviamo una pagina html che si occupa, mediante l'uso di javascript, di redirigere l'utente all'url http://www.basilicatanet.it

codice d'esempio
-----------------------------------------------------
-----------------------------------------------------

Questa soluzione, qualora il supporto javascript fosse disattivato o non presente nel client dell'utente, renderebbe impossibile il redirect alle pagine effettive del sito della Regione Basilicata.

Esistono molteplici soluzioni per imporre una redirezione verso altre pagine usando tecnologie lato server (e dunque indipendenti dal client dell'utente). Una di queste è l'utilizzo di un file .htaccess.

.htaccess
-----------------------------------------------------
-----------------------------------------------------
 
 
 

Guideline 10

Use interim solutions.
(Traduzione: Usare soluzioni temporanee)

 
 
 

Una tabella al centro della pagina presenta una serie di link. L'esecuzione dei link è gestita mediante javascript: viene richiamata la funzione openNewWin usando come parametro l'url della pagina che si intende aprire. Tale funzione impone l'apertura della nuova pagina in una nuova finestra.

codice d'esempio
-----------------------------------------------------
-----------------------------------------------------

Non viene indicato da nessuna parte che la pagina verrà aperta in una nuova finestra e ciò può confondere un utente, l'utilizzo di javascript è improprio (usando l'attributo target si ottiene il medesimo effetto) e qualora questi fosse disattivo le pagine non verrebbero nemmeno aperte, infine se il client dell'utente è predisposto per bloccare l'apertura di nuove pagine per effetto di qualche funzione javascript queste non verrebbero aperte.


Appendici

Appendice A -- Descrizioni estese alle immagini

Immagine mappata priva di testi alternativi, Checkpoint 1.1

L'immagine a cui si riferisce questa descrizione visualizza una parte centrale della Home Page del sito della Regione Basilicata. In quest'area è presente un'immagine mappata (client-side) con riferimento a due link privi di testo alternativo. Tale mancanza impedisce, ad utenti non in grado di visualizzare immagini, di determinare a quali pagine (o azioni) puntano le singole regioni attive della mappa.

Oggetto Macromedia Flash paragonato ad un'immagine mappata e privo di link ridondanti, Checkpoint 1.5

L'immagine a cui si riferisce questa descrizione rappresenta un oggetto Macromedia Flash in cui sono collocati i loghi di tre siti istituzionali, ognuno dei quali linkato al sito al quale si riferisce. In prossimità del bordo inferiore è collocata una scritta che indica i titoli dei tre loghi (Regione, Governo, Unione Europea); tale scritta ad intervalli di qualche decina di secondi scorre scomparendo verso il bordo destro e riapparendo in quello sinistro fino a tornare alla posizione iniziale.

Menù orizzontale che reagisce al passaggio del mouse, Checkpoint 2.1

Le immagini contenute nella tabella a cui questa descrizione si riferisce sono divise nella categorie a colori e in bianco e nero. Si tratta di porzioni del menù orizzontale che sovrasta la pagina e le cui reazioni al passaggio del mouse sono gestite da un javascript. Il passaggio del mouse su ognuna delle voci del menù attiva il cambio di colore dello sfondo della cella che lo contiene. Nella simulazione di monitor in bianco e nero si nota come il cambio di colore dello sfondo sia appena percepibile o, come avviene nel caso del rosso, nullo.

Intestazione della sezione news, Checkpoint 2.2

L'immagine a cui si riferisce questa descrizione è l'intestazione della sezione delle notizie del sito. Il titolo ed il sottotitolo sono riportati in forma di immagine il cui sfondo (azzurro) non contrasta sufficientemente dal colore del testo (blu).

Intestazione della sezione news, Checkpoint 3.1

L'immagine a cui si riferisce questa descrizione è l'intestazione della sezione delle notizie del sito. Il titolo ed il sottotitolo sono stati riportati in forma di immagine piuttosto che utilizzare un opportuno markup per determinare i livelli e le titolazioni delle sezioni della pagina.

Intestazione della sezione news, Checkpoint 5.1

L'immagine a cui si riferisce questa descrizione rappresenta una parte della tabella che contiene le informazioni sugli argomenti più recenti trattati nel forum. Si evidenziano le intestazioni delle colonne le cui celle sono trattate come celle di dati piuttosto che come intestazioni.

Appendice B -- Glossario

Testo Alternativo

Il testo alternativo fornisce una descrizione equivalente per l'elemento a cui esso è associato.

Immagine mappata

Un'immagine mappata è un'immagine divisa in regioni a cui sono state associate delle particolari azioni.

Javascript

Javascript è un linguaggio di scripting. Fu originariamente sviluppato da Brendan Eich della Netscape Communications con il nome di Mocha e successivamente di LiveScript, ma in seguito è stato rinominato Javascript ed è stato formalizzato con una sintassi più vicina a quella del linguaggio Java di Sun Microsystems.

Markup

Markup...