Rapporto di conformità WCAG AA del sito della Camera di Commercio di Pordenone

Indice

Sommario

La verifica di conformità alle linee guida per l'accessibilità del W3C del sito della Camera di Commercio di Pordenone è stata effettuata tra il 18 e il 20 Febbraio 2004 su un campione di undici fra le pagine principali.

Lo stato di conformità è negativo: sono state rilevate numerose infrazioni e mancanze, tali da non soddisfare nemmeno il primo livello (A) di priorità.

Le infrazioni più gravi riscontrate comprendono:

Alla luce di questi problemi il sito è da ritenersi non accessibile.

Dettagli tecnici

Livello di priorità 1 (A)

Fornire un'alternativa testuale ai contenuti non testuali

Ad eccezione di qualche caso, la maggior parte delle immagini presenti nelle pagine esaminate è priva di alternativa testuale.

In alcuni dei casi dove è presente, il contenuto dell'attributo alt costituisce un'alternativa efficace all'immagine: é il caso della pagina index2.html, dove i pulsanti del riquadro delle notizie sono implementati nel seguente modo:

<a href=""><img src="novita.gif" alt="Leggi l'ultima novità"></a>

Nel caso che sito venga visualizzato senza immagini, al posto del pulsante verrà visualizzato un link con il testo "Leggi l'ultima novità"

In altre occasioni, l'alternativa testuale non fa il suo dovere; è il caso della pagina pubblicazioni/pubblicazioni.html che, nella sezione "Block Notes", presenta un'immagine della versione cartacea dell'omonimo mensile. L'implementazione è la seguente:

<img src="" alt="Block Notes">

Nel caso che sito venga visualizzato senza immagini, comparirà l'etichetta "Block Notes", che è ridondante con il titolo della sezione. In questo caso sarebbe stato opportuno lasciare l'attributo alt vuoto oppure inserire l'etichetta "Immagine della versione cartacea di Block Notes".

Nella pagina index2.html il titolo è rappresentato da un'animazione Flash, priva di alternativa testuale. In questo caso è sufficiente inserire il testo alternativo all'interno del tag object. È possibile utilizzare un'immagine come alternativa all'oggetto Flash, in modo che i browser privi del plug-in possano visualizzare al suo posto l'immagine oppure l'alternativa testuale della stessa:

 <object>
 ...
 <img src="" alt="Camera di Commercio di Pordenone" />
 </object>

Assicurarsi che tutta l'informazione veicolata dal colore sia disponibile anche senza

In diverse pagine i link si differenziano dal testo solamente per il diverso colore: non sono sottolineati come da convenzione.

Nella pagina agenda/agenda.html il sottotitolo è diverso dal titolo solo per quanto riguarda il colore.

Identificare con chiarezza i cambiamenti nel linguaggio naturale del testo

In ogni pagina esaminata i cambiamenti di lingua non sono correttamente segnalati.

Per correggere questo problema bisogna specificare la lingua del testo interessato nell'attributo lang dell'elemento che lo contiene. Nel caso che il testo interessato sia l'intero corpo di un elemento, la soluzione è implementata così:

<a href="" lang="en">a website</a>

Nel caso che il testo interessato costituisca sia solo parte del testo di un elemento, bisogna racchiuderlo in un elemento span in questo modo:

<a href="">Sito <span lang="en">web</span> della Camera di Commercio</a>

L'attributo lang va aggiunto anche all'elemento html per indicare la lingua primaria del documento.

Usare il linguaggio più chiaro e semplice possibile che sia adatto al contenuto del sito

Nella pagina index2.html c'è una parte di testo che dice:

Imprese di facchinaggio - Domande di regolarizzo

Ciò risulta sia ambiguo che scorretto. Analogamente, nella pagina pubblicazioni/pubblicazioni.html, si fa riferimento ad un file zippato quando sarebbe stato più opportuno parlare di "archivio compresso formato Zip".

Nella pagina press_room.html si legge:

La nostra news letter per ricevere le nostre ultime informazioni

Una forma migliore potrebbe essere:

Iscriviti alla news letter per ricevere le nostre ultime informazioni

Ovviamente ricordando di identificare "news letter" come testo in lingua inglese.

Assicurarsi che le pagine siano utilizzabili quando script, applet o altri oggetti di programmazione sono disabilitati oppure non supportati.

Nella pagina index2.html, i pulsanti già citati precedentemente attivano delle finestre pop- up tramite Javascript, in modo non accessibile:

<a href="javascript:popUp();"<img src="" alt=""></a>

A prescindere dal fatto che usare delle finestre pop-up è di per sè una violazione delle linee guida, la pagina attivata dallo script non sarà visitabile senza supporto Javascript.

È preferibile evitare di fare riferimento allo script all'interno dell'attributo href, e utilizzare invece i gestori di eventi onclick e onkeypress.

Livello di priorità 2 (AA)

Assicurarsi che le combinazioni fra colori dello sfondo e del primo piano forniscano un sufficiente contrasto.

In qualche occasione il contrasto fra testo e sfondo è risultato insufficiente, sopratutto nella sezione blocknotes/index.html.

Quando esiste un linguaggio di markup appropriato, preferirlo all'uso delle immagini

Nella maggior parte delle pagine esaminate si fa un uso inappropriato delle immagini, anche qui il caso emblematico è rappresentato dalla pagina blocknotes/index.html che è interamente costituita da immagini, tra l'altro prive di alternativa testuale.

Creare documenti validi rispetto a delle grammatiche formali pubbliche

Tutte le pagine sono prive di doctype. È opportuno includere all'inizio di ogni pagina il riferimento al doctype più appropriato:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">

Bisogna inoltre assicurarsi che il documento rispetti tale definizione, utilizzando ad esempio il validatore del W3C.

Usare i fogli di stile per controllare presentazione e impaginazione

Le pagine esaminate fanno uso dei fogli di stile, ma solo per controllare la presentazione dei link; il resto è specificato all'interno delle singole pagine HTML.

Usare unità relative piuttosto che assolute negli attributi del linguaggio di markup e nei fogli di stile

Le tabelle di usate come griglia di impaginazione usano sia unità relative che assolute, in modo non consistente.

In alcuni casi anche al testo viene specificata una dimensione assoluta.

Usare elementi di intestazione per dare struttura al documento

In nessuna delle pagine esaminate è stato utilizzato alcun elemento di intestazione, preferendo combinazioni di elementi font e b per ottenere lo stile grafico desiderato.

Gli elementi di intestazione utilizzabili in HTML sono h1, h2, h3, h4, h5, h6, dove h1 è l'elemento gerarchicamente più importante.

Nella pagina index2.html, il titolo "Novità" è implementato più o meno in questo modo:

<b><font size="1" color="#FFFFFF">NOVITÀ</font></b>

Un implementazione corretta consiste nell'utilizzare un elemento h2:

<h2>Novità</h2>

La presentazione deve essere poi specificata nel foglio di stile:

h2 { font-size: medium; color: white; text-transform: uppercase }

Nel caso che si intenda utilizzare un'immagine per il titolo, si può inserire l'immagine all'interno dell'elemento di intestazione:

<h1><img src="" alt="Titolo"></h1>

Utilizzare le liste in modo appropriato

In nessuna delle pagine esaminate è stato utilizzata alcuna lista, nonostante ci siano diversi elementi che sarebbe stato opportuno implementare con delle liste.

Il corpo della pagina importexport/importexport.html è presentato come una lista non ordinata, ma è implementato senza utilizzare gli elementi ul e li.

Il menù presente nelle pagine

È costruito con una tabella, quando si potrebbe usare una lista di link, opportunamente presentata con i fogli di stile:

 <ul>
   <li><a href="">Voce 1</a></li>
   <li><a href="">Voce 2</a></li>
   <li><a href="">Voce 3</a></li>
   <li><a href="">Voce 4</a></li>
 </ul>

Usare le tecnologie del W3C quando sono disponibili, ed evitare quelle obsolete

Tutte le pagine esaminate non sono conformi alle specifiche HTML del W3C e fanno largo uso di elementi obsoleti come font, b, i.

Identificare chiaramente la destinazione di ogni link

Ci siamo imbattuti in diversi link la cui destinazione non è esplicita, ad esempio "Clicca qui". È opportuno evitare queste situazioni e fare in modo che la destinazione del link sia chiara anche al di fuori del suo contesto.