Spiegazioni alla Accessibility Checklist 2.0

Spiegazione dei criteri di successo ed esempi tecnici relativi alla Accessibility Checkliste 2.0 delle «Linee guida per l’accessibilità dei contenuti Web (WCAG 2.0)»

 

Contenuto                             

1.         Principio: Percepibile..................................................................................................... 4

1.1.      Alternative testuali: Fornire alternative testuali per qualsiasi contenuto................................................ 4

1.2.      Tipi di media temporizzati: fornire alternative per i tipi di media temporizzati....................................... 5

1.3.      Adattabile: Creare contenuti che possano essere rappresentati in modalità differenti......................... 9

1.4.      Distinguibile: Rendere più semplice agli utenti la visione e l'ascolto dei contenuti.............................. 14

2.         Principio: Utilizzabile.................................................................................................... 21

2.1.      Accessibile da tastiera: Rendere disponibili tutte le funzionalità tramite tastiera................................ 21

2.2.      Adeguata disponibilità di tempo: Fornire agli utenti tempo sufficiente................................................ 22

2.3.      Convulsioni: Non sviluppare contenuti che possano causare attacchi epilettici................................... 25

2.4.      Navigabile: Fornire delle funzionalità di supporto all'utente per navigare........................................... 25

3.         Principio: Comprensibile............................................................................................... 32

3.1.      Leggibile: Rendere il testo leggibile e comprensibile................................................................................. 32

3.2.      Prevedibile: Creare pagine Web che appaiano e che siano prevedibili................................................. 35

3.3.      Assistenza nell'inserimento: Aiutare gli utenti ad evitare gli errori......................................................... 37

4.         Principio: Robusto....................................................................................................... 42

4.1.      Compatibile: Garantire la massima compatibilità con i programmi utente attuali e futuri................ 42

 

 

Disponibile all’indirizzo:      http://www.ch.ch/accessibility

Versione:                                Versione 2.10

 


I.        Riferimento: le Linee guida per l’accessibilità dei contenuti Web (WCAG 2.0)

Le presenti spiegazioni alla Checklist 2.0 si basano sulle «Linee guida per l’accessibilità ai contenuti Web (WCAG 2.0)» riconosciute a livello internazionale. Testo originale: http://www.w3.org/Translations/WCAG20-it/

Validità

Il presente documento contiene i testi originali della traduzione ufficiale dei documenti «Principi», «Linee guida» e «Criteri di successo» delle WCAG 2.0. Per ogni criterio di successo figurano le sezioni «Capire» e «Esempi», il cui testo è sQuesto testo è applicabile ai siti web creati con le tecniche di configurazione attualmente più in uso e permette un uso efficace delle WCAG 2.0.

Il presente documento non sostituisce le linee guida prodotte dalla «Web Accessibility Initiative» (WAI). In caso di dubbi, fa sempre fede il testo originale della WAI.

Requisiti di conformità delle WCAG 2.0

Per essere conforme al livello A (minimo), AA (consigliato) o AAA (massimo), l’intera pagina Web deve soddisfare tutti i criteri di successo del livello corrispondente (o dei livelli corrispondenti) oppure viene fornita una versione alternativa conforme.

Requisiti di conformità: http://www.w3.org/Translations/WCAG20-it/ - conformance

Glossario dei termini tecnici

Nel presente documento non sono riportati per motivi di spazio testi importanti relativi alle linee guida. Nel glossario proposto insieme al presente documento vengono spiegati molti dei termini tecnici utilizzati.

Glossario sulla Accessibility Checklist 2.0: http://www.ch.ch/accessibility

Glossario della WAI (italiano): http://www.w3.org/Translations/WCAG20-it/ - glossary

Applicazione

La Accessibility Checklist 2.0 può essere impiegata per valutare l’accessibilità di contenuti Web. Riprende la struttura delle linee guida WCAG 2.0 e riprende i testi originali, garantendo quindi la massima corrispondenza.

Alcuni requisiti riguardono più criteri di successo (CS). Diversi aspetti possono essere pertanto esaminati in modo dettagliato. I riferimenti incrociati sono indicati attraverso, ad esempio, la segnalazione: (vedi anche criterio di successo 1.2.1).

Per ogni criterio di successo vengono indicati anche strumenti di verifica e un link nonché ulteriori soluzioni alla voce «Come applicare».

Per ulteriori informazioni si veda l’allegato al presente documento.

1. Principio: Percepibile

Le informazioni e i componenti dell'interfaccia utente devono essere presentati agli utenti in modo che possano essere percepiti.

1.1.      Alternative testuali: Fornire alternative testuali per qualsiasi contenuto non di testo in modo che questo possa essere trasformato in altre forme fruibili secondo le necessità degli utenti come stampa a caratteri ingranditi, Braille, sintesi vocale, simboli o un linguaggio più semplice.

1.1.1.  Contenuti non testuali (Livello A)

Tutti i contenuti non testuali presentati all'utente hanno un'alternativa testuale equivalente che serve allo stesso scopo, ad eccezione delle seguenti situazioni:

·         Controlli, input: Se il contenuto non testuale è un controllo o accetta l'input degli utenti, allora ha un nome che ne descrive la finalità. (Riferirsi alla Linea guida 4.1 per i requisiti supplementari richiesti per controlli e contenuto che accettano l'input da parte dell'utente).

·         Tipi di media temporizzati: Se il contenuto non testuale è un tipo di media temporizzato, allora le alternative testuali forniscono almeno una identificazione descrittiva per il contenuto non testuale. (Riferirsi alla Linea guida 1.2 per ulteriori requisiti per i tipi di media).

·          Test: Se il contenuto non testuale è un test o un esercizio che potrebbe essere non valido se presentato come testo, allora le alternative testuali forniscono almeno una descrizione identificativa per il contenuto non testuale.

·         Esperienze sensoriali: Se il contenuto non testuale ha lo scopo primario di creare una specifica esperienza sensoriale, allora le alternative testuali forniscono almeno una descrizione identificativa per il contenuto non testuale.

·         CAPTCHA: Se la finalità del contenuto non testuale è confermare che il contenuto viene utilizzato da una persona e non da un computer, allora verranno fornite alternative testuali che identifichino e descrivano lo scopo del contenuto non testuale, e forme alternative di CAPTCHA utilizzando diverse modalità di output per differenti tipologie di percezioni sensoriali al fine di soddisfare differenti disabilità.

·         Decorazioni, formattazioni, contenuti invisibili: Se il contenuto non testuale è puramente decorativo, viene utilizzato solamente per formattazione visuale oppure non viene presentato agli utenti, allora è implementato in modo da poter essere ignorato dalla tecnologia assistiva.

Capire:

Per rendere accessibili agli utenti ciechi o ipovedenti (e ai motori di ricerca) i grafici informativi, essi devono essere descritti da un testo alternativo esplicativo.

Nel caso di una foto o di un simbolo (ad.es. stampa o PDF), il rispettivo contenuto deve essere descritto fedelmente nel testo Alt.

Nel caso di grafici informativi complessi come diagrammi o organigrammi, spesso la descrizione contenuta nel testo alternativo non è sufficiente. È quindi necessaria una descrizione aggiuntiva. Essa può essere fornita nel testo vicino oppure attraverso un attributo longdesc.

Esempio di codice:

<p><img src=“immagine.gif“ alt=“Organigramma dell’amministrazione. Spiegazione attraverso descrizione lunga.“ longdesc=“organigramma-amministrazione.html“ /></p>

 

<p><img src=“immagine.gif“ alt=“Organigramma dell’amministrazione. Spiegazione nel paragrafo successivo“ /></p>

Esempio CAPTCHA:

Illustrazione 1: Due varianti di CAPTCHA accessibili. A sinistra viene offerta, parallelamente, la possibilità di ascoltare la parola di sicurezza; a destra viene proposto un semplice calcolo da risolvere.

WCAG 2.0, 1.1.1, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-text-equiv-all

Strumenti di verifica        Web Developer Toolbar oppure Web Accessibility Toolbar, analisi del testo fonte

1.2.      Tipi di media temporizzati: fornire alternative per i tipi di media temporizzati.                                    

1.2.1.  Solo audio e solo video (preregistrati) (Livello A)

Per i tipi di media preregistrati di solo audio e di solo video, a meno che questi non costituiscano un tipo di media alternativo ad un contenuto testuale chiaramente etichettato come tale, vengono soddisfatti i seguenti punti: (Livello A)

·         Solo audio preregistrato: È fornita un'alternativa per il tipo di media temporizzato che presenti informazioni equivalenti per il contenuto di solo audio preregistrato.

·         Solo video preregistrato: È fornita un'alternativa per il tipo di media temporizzato oppure una traccia audio che presenti informazioni equivalenti per il contenuto di solo video preregistrato.

Capire:

È disponibile un’alternativa per rendere accessibili anche alle persone cieche e non udenti le informazioni contenute in tipi di media preregistrati di solo audio e solo video.

Esempio:

I contenuti visivi di un video sono offerti all’ascolto attraverso podcast (file audio). Viceversa, i contenuti di un podcast vengono descritti tramite immagini a fumetti. Viene così soddisfatto il "principio dei due sensi".

Media alternativo: viene offerta la riproduzione scritta (versione testuale) delle parole pronunciate, con riferimenti alle azioni visive o sonore più significative, in un documento collegato attraverso un link (formato RTF o HTML).

WCAG 2.0, 1.2.1, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-av-only-alt

Strumenti di verifica:       Verifica visiva (walkthrough)

 

1.2.2.  Sottotitoli (preregistrati) (Livello A)

Per tutti i contenuti audio presenti in tipi di media preregistrati sono forniti sottotitoli sotto forma di tipi di media sincronizzati, eccetto quando tali tipi di media sono l'alternativa di testi e sono chiaramente etichettati come tali.

Capire:

Sono forniti i sottotitoli per rendere accessibili anche ai non udenti le informazioni fornite nei video attraverso il parlato.

WCAG 2.0, 1.2.2, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-captions

Strumenti di verifica:       Verifica visiva (walkthrough)

 

1.2.3.  Descrizione audio o tipo di media alternativo (preregistrato) (Livello A)

Un'alternativa per i tipi di media temporizzati oppure una descrizione audio per i contenuti video preregistrati sono forniti per i tipi di media sincronizzati, eccetto quando il tipo di media è un tipo di media alternativo ad un contenuto testuale ed è chiaramente etichettato come tale.

Capire:

Viene offerta un'alternativa che renda accessibile anche alle persone cieche e non udenti le informazioni contenute in media preregistrati, ad esempio un podcast audio o un video con sonoro. Devono essere descritte anche le azioni non verbali, ossia visive o sonore, con un contenuto rilevante.

Esempio:

Al di sotto di un video è presente un link «Descrizione audio» che offre un documento sonoro. Esso si costituisce dell’audio originale completato da descrizioni orali relative  all’azione visiva.

Media alternativo: viene offerta la riproduzione scritta (versione testuale) delle parole pronunciate, con riferimenti alle azioni visive o sonore più significative, in un documento collegato attraverso un link (formato RTF o HTML).

WCAG 2.0, 1.2.3, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-audio-desc

Strumenti di verifica:       Verifica visiva (walkthrough)

 

1.2.4.  Sottotitoli (in tempo reale) (Livello AA)

I sottotitoli sono forniti per tutti i contenuti audio in tempo reale sotto forma di tipi di media sincronizzati.

Capire:

Vengono forniti i sottotitoli per permettere anche alle persone non udenti di accedere alle informazioni di contenuti audio in tempo reale.

Esempio:

Il telegiornale viene trasmesso in tempo reale con sottotitoli.

 

WCAG 2.0, 1.2.4, AA      

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-real-time-captions

Strumenti di verifica:       Verifica visiva (walkthrough)

 

1.2.5.  Descrizione audio (preregistrata) (Livello AA)

Una descrizione audio è fornita per tutti i contenuti video preregistrati sotto forma di tipi di media sincronizzati.

Capire:

È offerta un'alternativa per rendere accessibili anche alle persone cieche tutte le informazioni di contenuti video preregistrati. È necessario descrivere anche l’azione visiva e non verbale rilevante sul piano del contenuto.

Esempio:

Al di sotto di un video è presente un link «Descrizione audio» che offre un documento sonoro. Esso si costituisce dell’audio originale completato da descrizioni orali relative  all’azione visiva.

WCAG 2.0, 1.2.5, AA      

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-audio-desc-only

Strumenti di verifica:       Verifica visiva (walkthrough)

 

1.2.6.  Lingua dei segni (preregistrato) (Livello AAA)

L'interpretazione tramite lingua dei segni è fornita per tutti i contenuti audio preregistrati sotto forma di tipi di media sincronizzati.

Capire:

Per i contributi Internet che si rivolgono alla collettività si consiglia l’adozione di video in lingua dei segni. I contenuti più complessi di un sito web dovrebbero essere offerti insieme a un video in lingua dei segni che offra la versione integrale oppure la presentazione di un riassunto.

La lingua materna di molte persone non udenti è la lingua dei segni, mentre la lingua scritta è la loro seconda lingua. Il rapporto dei non udenti con le informazioni scritte è pertanto difficile e per molti assai limitato. Solo la lingua dei segni è in grado di trasmettere ai non udenti tutti i contenuti di un’informazione e di garantire lo stesso livello di conoscenza e di informazione. Per i non udenti, l'utilizzo incondizionato della loro lingua materna o prima lingua, ossia la lingua dei segni, rappresenta un contributo importante verso un utilizzo paritario delle informazioni.

Esempio:

Esempio di video in lingua dei segni: www.access-for-all.ch / http://www.pisourd.ch/

WCAG 2.0, 1.2.6, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-sign

Strumenti di verifica:       Verifica visiva (walkthrough)

 

1.2.7.  Descrizione audio estesa (preregistrata) (Livello AAA)

Per tutti i contenuti video preregistrati, se le pause nell'audio principale sono troppo brevi per consentire alle descrizioni audio di comunicare il senso del video, sono fornite delle descrizioni audio estese sotto forma di tipi di media sincronizzati.

Capire:

Si tratta di rendere accessibile anche alle persone cieche le informazioni contenute in qualsiasi contenuto video preregistrato. Deve essere descritta anche l’azione non verbale visiva rilevante sul piano del contenuto.

I criteri A e AA vengono estesi qualora, ad esempio, le pause tra una scena e l’altra non siano sufficienti per inserire la descrizione dell’azione visiva fatta dalla voce.

Esempio:

Al di sotto di un video è presente un link «Descrizione audio estesa», ove è disponibile un documento sonoro in cui si interrompe, ove necessario, l’audio originale per lasciare spazio alla descrizione dell’azione visiva.

WCAG 2.0, 1.2.7, AA      

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-extended-ad

Strumenti di verifica:       Verifica visiva (walkthrough)

 

1.2.8.  Tipo di media alternativo (preregistrato) (Livello AAA)

Un'alternativa per i tipi di media temporizzati è fornita per tutti i contenuti preregistrati di tipi di media sincronizzati e per tutti i tipi di media preregistrati di solo video.

Capire:

È offerta un'alternativa ai media di solo video preregistrati. Può trattarsi di una trascrizione o di una descrizione dell’azione e del parlato, offerte via link.

I criteri relativi ai livelli A- e AA- vengono così ampliati, e i requisiti qui sopra formulati vengono estesi a tutti i video preregistrati, quindi anche a quelli il cui contenuto è già disponibile online sotto un’altra forma.

Esempio:

Viene offerta la riproduzione scritta (versione testuale) delle parole pronunciate, con riferimenti alle azioni visive più significative, in un documento collegato attraverso un link (formato RTF o HTML.

WCAG 2.0, 1.2.8, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-text-doc

Strumenti di verifica:       Verifica visiva (walkthrough)

 

1.2.9.  Solo audio (in tempo reale) (Livello AAA)

Fornire un'alternativa per i tipi di media temporizzati che presenta informazioni equivalenti per i contenuti solo audio in tempo reale.

Capire:

Viene fornita un’alternativa a tutti i media di solo audio in tempo reale, così da permettere ad esempio anche alle persone non udenti di capire i rispettivi contenuti.

Esempio:

Un notiziario in tempo reale viene trasmesso contemporaneamente sotto forma di testo scritto.

WCAG 2.0, 1.2.9, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-media-equiv-live-audio-only

Strumenti di verifica:       Verifica visiva (walkthrough)

1.3.      Adattabile: Creare contenuti che possano essere rappresentati in modalità differenti (ad esempio, con layout più semplici), senza perdere informazioni o la struttura.

1.3.1.  Informazioni e correlazioni (Livello A)

Le informazioni, la struttura e le correlazioni trasmesse dalla presentazione possono essere determinate programmaticamente oppure sono disponibili tramite testo.

Capire 1.3.1 A. Struttura delle intestazioni:

Ogni blocco di contenuto deve essere introdotto da una intestazione (h1, h2, h3, ecc.), che ne indica classificazione e significato all’interno della pagina web. Una pagina web non deve necessariamente cominciare con l’intestazione 1 (h1). Tuttavia, per gli utenti ciechi di screen reader è ritenuto un buon stile la struttura gerarchica delle intestazioni (h1 seguito da h2, h3, ecc.) e la presenza di tutti i livelli.

Esempio 1.3.1 A Struttura delle intestazioni

Illustrazione 2: Visualizzazione schematica, con zone grigie, dei blocchi informativi di cui è costituito un sito Web tipico (a sinistra). Il linguaggio di marcatura corrispondente è presentato nella colonna di sinistra. I blocchi informativi possono essere strutturati con intestazioni in prima posizione (h1, h2, ..., h6) e liste (ul).
Esempio di codice Intestazioni invisibili:

Le intestazioni posso anche essere rese invisibili tramite la classe CSS, spostandole al di fuori del viewport. In generale, questa classe può essere utilizzata per i riferimenti invisibili solo per gli utenti di screen reader.

.hidden {

display: inline;

left: -1000px;

overflow: hidden;

width: 0px;

position: absolute;

top: -1000px;

height: 0px
}

Capire 1.3.1 B. Elenchi e liste:

Le liste sono elementi importanti per il raggruppamento e la struttura semantici. In particolare, aiutano gli utenti di screen reader a riconoscere se le informazioni sono elencate, quali link appartengono allo stesso gruppo e dove inizia un nuovo raggruppamento di link.

Per gli utenti di screen reader gli elenchi senza formattazione equivalgono a un lungo testo confuso, di lunghezza indefinita. Una lista, al contrario, viene identificata dallo screen reader come, ad esempio, una “lista con 12 elementi”.

-       Gli elenchi di contenuti (ad es. una lista di prodotti) devono essere non solo rappresentati come liste bensì anche formattati come tali;

-       la navigazione deve essere sempre formattata come lista – anche nel caso di una navigazione orizzontale;

-       riunire i link in unità logiche. Ad esempio, raccogliere vari gruppi di categorie principali in una lista (<ul> o <ol>) e le sottocategorie in un’altra lista annidata;

-       per i glossari, le liste di link commentate e simili si possono utilizzare liste di definizione (vedi l’esempio di codice);

-       annidare correttamente le liste (vedi esempio di codice).

Esempio di codice:

<ul id="menue"><!--osservare annidamento corretto -->

   <li><a href="#">punto superiore 01</a>

        <ul class="submenue" id="active">

           <li><a href="#">sottomenu 1.a</a></li>

           <li><a href="#">sottomenu 1.b</a></li>

           <li><a href="#">sottomenu 1.c</a></li>

        </ul>

   </li>         

<li> ... </li>

</ul>

 

<dl><!--Lista di definizione -->

  <dt><a href="website.htm">Website</a></dt>

  <dd>Descrizione o osservazioni sul link contenuto nell’elemento DT </dd>

  <dd>Possibile anche con più celle di definizioni</dd>

</dl>

 

Capire 1.3.1 C. Correlazioni dei moduli:

Per creare il collegamento logico tra le etichette e i campi del modulo si deve utilizzare l’elemento <label>. Per creare sezioni all’interno di moduli molto lunghi e per raggruppare checkbox e radio button è indicato l’elemento <fieldset>.

Best Practice per i moduli: http://www.usability.com.au/resources/wcag2/
Osservazioni sui moduli:

Per creare un legame logico tra le etichette e i campi dei moduli si deve utilizzare l’elemento <label>.

Esempio di codice:

 

<form action="modulo.html">

    <fieldset>

         <legend>

               Dati personali

         </legend>

         <label for="vn">

               Nome:

         </label>

         <input type="text" id="vn" title="Inserire il nome" name="nome" value="">

         <br />

         <label for="nn">

               Cognome:

         </label>

         <input type="text" id="nn" title="Inserire il cognome" name="cognome" value="">

         <br />

         Selezionare:

         <input type="checkbox" id="selezione" name="cgv" value="">

         <label for="selezione">

               Ho letto le condizioni generali di vendita.</label>

         <br />

    </fieldset>

</form>

 

Commento:

Una voce sintetica legge ciò che è stato definito nell’etichetta (label). L’elemento “legend” serve per etichettare le sezioni del modulo (fieldset). È necessario mantenere una sequenza sensata ed etichette brevi e chiare.

Lo screen reader legge il codice esemplificato qui sopra come segue:

“Modulo

Dati personali: inputbox nome,
Dati personali: inputbox cognome,
Dati personali: combo box Ho letto le condizioni generali di vendita
Fine modulo“

Checkbox e radio button

Per permettere anche agli utenti ciechi di utilizzare correttamente checkbox e radio button, deve essere creato attraverso un "fieldset" il legame con l’etichetta corrispondente.

Esempio di codice:

<fieldset>

<legend>titolo</legend>

<div>

<input type="radio" name="titolo" id="titolo_donna" value="1" />

<label for="titolo_donna">donna</label>

</div>

<div>

<input type="radio" name="titolo" id="titolo_uomo" value="0" />

<label for="titolo_uomo">uomo</label>

</div>

</fieldset>

Commento:

Gli attributi "ID" sono sempre unici in tutto il documento, ossia possono essere utilizzati una sola volta. Gli attributi "name" degli elementi "radio" sono uguali, mentre gli elementi “ID” sono differenti tra loro.

Capire 1.3.1 D. Tabelle di dati

Nel caso di tabelle di dati con un’unica riga di intestazione delle colonne, la prima riga può valere come «header» se al posto di "tr" si utillizza "th". Gli attributi “scope” possono essere omessi (vedi esempio di codice 1).

Nel caso di tabelle di dati bidimensionali gli attributi “scope” vengono utilizzati correttamente, vedi l’esempio di codice 2. Nel caso di tabelle di dati pluridimensionali o di intestazioni riassuntive delle colonne, la classificazione può avvenire attraverso l’attributo “ID” (vedi tecnica H43).

Le tabelle necessitano di una intestazione. Essa può consistere in una intestazione situata all'inizio (h2, ..., h6) oppure nell’apposito elemento "caption". Per gli utenti visivi quest’ultimo può essere nascosto, vedi esempio di codice 1.

Le tabelle complesse necessitano inoltre di un riassunto (summary). Poiché gli screen reader leggono sempre questo riassunto, occorre curarne la brevità e l’incisività (vedi esempio di codice 2).

Nelle tabelle non bisogna mai utilizzare celle vuote per creare gli spazi bianchi. Se una cella è vuota, è opportuno inscrivervi un segno, ad esempio – oppure 0 (zero).

Esempio di codice 1 per la tabella di dati semplice con intestazione delle colonne solo attraverso header (<th>):

Tre città a confronto

Coira

Berna

Basilea

1287

2355

2233

 

<table>

    <caption>Tre città a confronto</caption>

    <tr>

         <th>Coira</th>

         <th>Berna</th>

         <th>Basilea</th>

    </tr>

    <tr>

         <td>1287</td>

         <td>2355</td>

         <td>2233</td>

    </tr>

</table>

 

Esempio di codice 2 per una tabella di dati con intestazione di colonne e righe attraverso scope:

Uffici postali

2005

2006

2007

Sedi centrali

2389

2357

2312

Filiali

657

654

649

Agenzie

135

129

150

 

<table summary="Si confronta il numero delle sedi centrali, delle filiali e delle agenzie negli anni 2005, 2006 e 2007">

    <caption>Uffici postali in Svizzera</caption>

    <tr>

                   <th scope="col">Uffici postali</th>

                   <th scope="col">2005</th>

                   <th scope="col">2006</th>

                   <th scope="col">2007</th>

              </tr>

              <tr>

         <th scope="row">Sedi centrali</th>

         <td>2'389</td>

         <td>2'357</td>

         <td>2'312</td>

    </tr>

    <tr>

         <th scope="row">Filiali</th>

                   <td>657</td>

                   <td>654</td>

                   <td>649</td>

    </tr>

    <tr>

         <th scope="row">Agenzie</th>

         <td>135</td>

         <td>129</td>

         <td>150</td>

    </tr>
</table>

 

Capire 1.3.1 E. Utilizzo dei segni

È garantita la separazione tra informazione con struttura (contenuto e HTLM) e presentazione (CSS). Il testo viene formattato con il markup semantico adeguato, es. le citazioni con <cite> e gli estratti con <blockquote>, ma si utilizzano anche <q>, <em> e <strong>, <sup>,<sub>.

Se differenti scritture hanno un significato a livello di contenuto, ciò deve essere chiaro a tutti (il carattere italico, ad esempio, non viene letto dagli screen reader).

Non utilizzare né spazi bianchi né <pre> per il layout.

Elementi, quale Del, sono da evitare poiché non vengono interpretati correttamente dagli screen reader. Le modifiche (ad esempio quando più persone lavorano a un testo), pertanto, devono risultare evidenti nel testo.

WCAG 2.0, 1.3.1, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#content-structure-separation 

Strumenti di verifica:       Web Developer Toolbar, Web Accessibility Toolbar, analisi del codice fonte, verifica visiva (walkthrough)

 

1.3.2.  Sequenza significativa (Livello A)

Quando la sequenza in cui il contenuto è presentato influisce sul suo significato, la corretta sequenza di lettura può essere determinata programmaticamente.

Capire:

Tutti i contenuti vengono ordinati secondo una sequenza appropriata per far sì che il senso corretto sia mantenuto anche qualora, ad esempio, uno screen reader riproduca il contenuto senza CSS e linearmente.

Esempio:

Illustrazione 3: La sequenza dei contenuti non è comprensibile solo visivamente (illustrazione a sinistra), ma anche con CSS disattivato (illustrazione a destra).

WCAG 2.0, 1.2.8, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-content-structure-separation-sequence

Strumenti di verifica:       Verifica visiva (walkthrough), disattivazione di CSS,

 

 

1.3.3.  Caratteristiche sensoriali (Livello A)

Le istruzioni fornite per comprendere ed operare sui contenuti non devono basarsi unicamente su caratteristiche sensoriali dei componenti quali forma, dimensione, ubicazione visiva, orientamento o il suono.

Nota: Per i requisiti relativi al colore, riferirsi alla Linea guida 1.4.

Capire:

Le informazioni e le istruzioni vengono trasmesse in una forma tale da essere capite a prescindere da eventuali limitazioni sensoriali.

Esempio:

Non:

"Ulteriori informazioni sono disponibili nel riquadro grigio in alto a destra"

bensì:

Ulteriori informazioni sono disponibili nel riquadro "Utilizzo di una intestazione sensata".

WCAG 2.0, 1.3.3, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-content-structure-separation-understanding 

Strumenti di verifica:       Verifica visiva (walkthrough), script per Greasemonkey

 

1.4.       Distinguibile: Rendere più semplice agli utenti la visione e l'ascolto dei contenuti, separando i contenuti in primo piano dallo sfondo.

1.4.1.  Uso del colore (Livello A)

Il colore non deve essere utilizzato come unica modalità visiva per rappresentare informazioni, indicare azioni, richiedere risposte o come elemento di distinzione visiva.

Nota: Questo criterio di successo è specifico per la percezione del colore. Altre modalità di percezione sono presenti nella linea guida 1.3, incluso l'accesso programmatico al colore e ad altre codifiche visive della presentazione.

Capire:

Le informazioni e le istruzioni vengono trasmesse in una forma tale da essere capite a prescindere dalla capacità di riconoscere i colori.

Esempio:

I punti attivi del menù sono evidenziati non solo attraverso il colore bensì anche, ad esempio, attraverso il grassetto. Le intestazioni non sono solo colorate bensì anche in caratteri più grandi e in grassetto.

Esempio Informazioni con colori

Illustrazione 4: Lo schema di sinistra mostra per quali corsi vi sono ancora posti liberi. L’informazione è data esclusivamente dai colori (verde, rosso e giallo). Una persona daltonica o cieca non può quindi percepirla.
Basta un semplice segno supplementare (illustrazione a destra) per segnalare la differenza, indipendentemente dai colori.

WCAG 2.0, 1.4.1, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-without-color 

Strumenti di verifica:       Verifica visiva (walkthrough), disattivazione di CSS, impostazioni del colore predefinite dall’utente

 

1.4.2.  Controllo del sonoro (Livello A)

Se un contenuto audio all'interno di una pagina Web è eseguito automaticamente per più di tre secondi è necessario fornire una funzionalità per metterlo in pausa o interromperlo, oppure si deve fornire una modalità per il controllo dell'audio che sia indipendente dal controllo predefinito del sistema.

Nota:Dal momento che qualsiasi contenuto che non soddisfi questo criterio di successo può interferire con la possibilità dell'utente di fruire l'intera pagina, tutto il contenuto della pagina Web (sia se utilizzato o meno per soddisfare altri criteri di successo), deve rispondere a tale criterio di successo. Consultare il requisito di conformità 5: non interferenza.

Capire:

Un contenuto audio eseguito automaticamente disturba molto, ad esempio, l’utente di uno screen reader e deve poter essere bloccato o abbassato di volume.

Esempio:

Devono essere disponibili pulsanti di controllo (play, stop, ecc.).

WCAG 2.0, 1.4.2, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-dis-audio 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

1.4.3.  Contrasto (minimo) (Livello AA)

La rappresentazione visiva del testo e di immagini contenenti testo ha un rapporto di contrasto di almeno 4.5:1, fatta eccezione per i seguenti casi:

·         Testo grande: Testo grande e immagini contenenti testo grande devono avere un rapporto di contrasto di almeno 3:1;

·         Testo non essenziale: Testo o immagini contenenti testo che sono parti inattive di componenti dell'interfaccia utente, che sono di pura decorazione, non visibili a nessuno, oppure che fanno parte di immagini contenenti contenuti visuali maggiormente significativi, non hanno alcun requisito di contrasto.

·         Logotipi: Un testo che è parte di un logo o marchio non ha alcun requisito minimo di contrasto.

Capire:

Un sufficiente contrasto cromatico è generalmente assai importante per una migliore leggibilità del testo, poiché permette di distinguerlo meglio dallo sfondo. Tante persone soffrono di disabilità visiva e tra queste molte ricorrono a impostazioni individuali supplementari, quale l’inversione di colore. Affinché queste impostazioni permettano di raggiungere l’effetto desiderato, è indispensabile un contrasto cromatico sufficiente. Va prestata attenzione anche ai link con la pseudo-classe :hover (mouseover) nonché a quelli che ricevono il focus e attivi.

Contrasto minimo necessario:

Scrittura: fattore di contrasto minimo 4,5:1
Scrittura di grandi dimensioni (a partire da 18 pt o 14 pt + grassetto): fattore di contrasto minimo 3:1
(valido anche per i testi di grafici informativi, ma non necessariamente per i logotipi)

Osservazione sulle dimensioni dei caratteri:

La WAI utilizza l’inusuale mass point (pt), che noi convertiamo come segue: sullo schermo (risoluzione 1200 x 900 pixel) 18 point corrisponde almeno a 5,3 mm di altezza della W maiscola, mentre 14 pt e grassetto corrisponde ad almeno 4 mm di altezza della W maiuscola in grassetto.

Esempio Contrasto dei colori

Illustrazione 5: Con lo strumento di verifica "Color Contrast Analyzer"(disponibile anche in italiano)  i colori utilizzati possono già essere misurati e determinati durante la fase di progettazione. L’algoritmo "luminanza" misura i colori secondo il metodo necessario ad applicare i requisiti WCAG 2.0.

WCAG 2.0, 1.4.3, AA      

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-contrast

Strumenti di verifica:       Verifica visiva (walkthrough), misurazione del contrasto con Colour Contrast Analyser (freeware Win, Mac): http://www.visionaustralia.org.au/info.aspx?page=628

 

1.4.4.  Ridimensionamento del testo (Livello AA)

Il testo, ad eccezione dei sottotitoli e delle immagini contenenti testo, può essere ridimensionato fino al 200 percento senza l'ausilio di tecnologie assistive e senza perdita di contenuto e funzionalità.

Capire:

Molte persone con disabilità visiva sono obbligate a ricorrere alle funzioni di ingrandimento del loro browser. Per poterle utilizzare, il layout e i caratteri del testo devono poter essere modificate secondo il bisogno.

Requisiti:

Sono soddisfatti i seguenti requisiti:

-       le dimensioni del testo (font size) sono definite nei CSS in % o in em;

-       l'ingrandimento non deve causare sovrapposizioni nel layout; nessun testo deve scomparire e ogni testo deve poter essere letto in qualsiasi momento;

-       funzione zoom (se disponibile) per l'intero contenuto della finestra fino a 200%; test:

o    funzione zoom di Internet Explorer 7, 8: 200%.

o    funzione zoom di Firefox: 200%; premere 6 volte "strg" + "+" (ingrandire con modalità 'solo testo' disattivata)

-       ingrandimento del testo fino a 200% (senza sovrapposizioni nel layout); test:

o    in Internet Explorer 7, 8: "Dimensioni testo grande"

o    in Firefox: ingrandimento del testo: premere 2 volte "strg" + "+" (con modalità 'solo testo' attivata).

Esempio 1.4.4 Ridimensionamento del testo

Illustrazione 6: Il sito Web a sinistra nella sua versione normale e, a destra, con un ingrandimento del 200 per cento mediante il programma di navigazione Firefox. Tutti i testi devono ancora risultare leggibili.

WCAG 2.0, 1.4.4, AA      

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-scale 

Strumenti di verifica:       Internet Explorer, Firefox, verifica visiva (walkthrough)

 

1.4.5.  Immagini di testo (Livello AA)

Se le tecnologie utilizzate consentono la gestione della rappresentazione visiva dei contenuti, il testo è utilizzato per veicolare informazioni piuttosto che le immagini di testo, ad eccezione dei seguenti casi:

·         Personalizzabile: L'immagine di testo può essere personalizzata visivamente per le esigenze dell'utente;

·         Essenziale: Una particolare rappresentazione del testo è essenziale per il tipo di informazioni veicolate.

Nota: I logotipi (testo che fa parte di un logo o di un marchio) sono considerati essenziali.

Capire:

Per trasmettere i contenuti si utilizzano testi piuttosto che immagini di testo. La rappresentazione del testo può avvalersi delle tecniche grafiche CSS.

WCAG 2.0, 1.4,5, AA      

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-text-presentation 

Strumenti di verifica:       Internet Explorer, Firefox, impostazione di colori predefiniti dall'utente, Verifica visiva (walkthrough)

 

1.4.6.  Contrasto (avanzato) (Livello AAA)

La rappresentazione visiva del testo e immagini contenenti testo  ha un rapporto di contrasto di almeno 7:1, fatta eccezione per i seguenti casi: (Livello AAA)

·         Testo grande: Testo grande e immagini contenenti testo grande devono avere un rapporto di contrasto di almeno 4.5:1;

·         Testo non essenziale: Testo o immagini contenenti testo che fanno sono parti inattive di componenti dell'interfaccia utente, che sono di pura decorazione, non visibili a nessuno, oppure che fanno parte di immagini contenenti contenuti visuali maggiormente significativi, non hanno alcun requisito di contrasto.

·         Logotipi: Un testo che è parte di un logo o marchio non ha alcun requisito minimo di contrasto.

Capire:

Un sufficiente contrasto cromatico è generalmente assai importante per una migliore leggibilità del testo, poiché permette di distinguerlo bene dallo sfondo.

Il presente criterio di successo estende il criterio 1.4.3 con valori soglia più elevati.

Va prestata attenzione anche ai collegamenti con la pseudo-classe :hover (mouseover) nonché a quelli che ricevono il focus e attivi.

Contrasto minimo necessario:

Scrittura: fattore di contrasto minimo pari a 7:1
Scrittura a caratteri grandi (a partire da 18 pt o 14 pt + grassetto): fattore di contrasto minimo pari a 4,5:1
(valido anche per i testi di grafici informativi, ma non necessariamente per i logotipi)

Osservazione sulle dimensioni dei caratteri:

Sullo schermo (risoluzione 1200 x 900 pixel) 18 point corrispondono almeno a 5,3 mm di altezza della W maiscola, mentre 14 pt e grassetto corrispondono almeno a 4 mm di altezza della W maiuscola in grassetto.

WCAG 2.0, 1.4.6, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast7 

Strumenti di verifica:       Color Contrast Analyser

 

1.4.7.  Sottofondo sonoro basso o non presente (Livello AAA)

Per i contenuti di solo audio preregistrato che (1) contengono principalmente parlato in primo piano (2) non sono CAPTCHA audio o loghi audio e (3) non sono una vocalizzazione intesa per essere principalmente espressone musicale come canto o rap, si applica almeno uno dei seguenti casi:

·         Nessun sottofondo: Il sonoro non contiene suoni di sottofondo.

·         Spegnimento: Il sottofondo sonoro può essere disattivato.

·         20 dB: Il sottofondo sonoro deve essere inferiore di almeno 20 decibel rispetto al parlato in primo piano, con l'eccezione di suoni occasionali che durano solo per uno o due secondi.

Nota:Secondo la definizione di "decibel", il sottofondo sonoro che soddisfa tale requisito sarà pari a circa quattro volte più silenzioso del parlato in primo piano.

 

 

Capire:

Affinché gli utenti che si affidano al parlato possano comprenderlo, i contenuti riprodotti sotto forma di parlato devono avere un basso o nessun sottofondo sonoro.

WCAG 2.0, 1.4.6, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-noaudio 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

1.4.8.  Presentazione visiva: (Livello AAA)

Per la presentazione visiva di blocchi di testo, è disponibile una modalità per conseguire i seguenti obiettivi:

·         I colori del testo in primo piano e dello sfondo possono essere scelti dall'utente.

·         La larghezza non supera gli 80 caratteri o glifi (40 se CJK).

·         Il testo non è giustificato (allineato sia al margine destro che al margine sinistro).

·         Lo spazio tra righe (interlinea) è almeno di uno spazio e mezzo all'interno del paragrafo mentre lo spazio tra paragrafi, è almeno una volta e mezzo più grande rispetto all'interlinea.

·         Il testo può essere ridimensionato fino al 200 percento senza il supporto delle tecnologie assistive in modo da non richiedere all'utente di dover scorrere orizzontalmente per leggere una riga di testo in una finestra a schermo intero.

Capire:

Il rispetto dei criteri tipografici appena esposti accresce sensibilmente la leggibilità dei contenuti.

WCAG 2.0, 1.4.8, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-visual-presentation 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

1.4.9.  Immagini di testo (senza eccezioni) (Livello AAA)

Le immagini contenenti testo sono utilizzate soltanto per pura decorazione o dove una particolare presentazione del testo è essenziale per il tipo di informazioni veicolate.

Nota: I logotipi (testo che fa parte di un logo o di un marchio) sono considerati essenziali.

Capire:

Per contenuti rilevanti viene utilizzato testo invece delle immagini di testo.

WCAG 2.0, 1.4.9, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-text-images 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

2. Principio: Utilizzabile

I componenti e la navigazione dell'interfaccia utente devono essere utilizzabili.

2.1.      Accessibile da tastiera: Rendere disponibili tutte le funzionalità tramite tastiera.

2.1.1.  Tastiera (Livello A)

Tutte le funzionalità del contenuto sono utilizzabili tramite un'interfaccia di tastiera  senza richiedere tempi specifici per le singole battiture, salvo il caso in cui sia la funzionalità di fondo a richiedere un input che dipende dal percorso del movimento dell'utente e non solo dai suoi punti d'arrivo.

Nota 1: Questa eccezione si riferisce alla funzionalità di fondo, non alla tecnica di input. Per esempio, usando la scrittura a mano per immettere del testo, la tecnica di input (scrittura a mano) richiede un input che dipende dal percorso tracciato mentre la funzionalità di fondo (immissione di testo) non lo richiede.

Nota 2: Ciò non vieta e non dovrebbe scoraggiare l'utilizzo di input da mouse o di altri metodi di input in aggiunta all'utilizzo della tastiera.

Capire:

Molti utenti comandano il pc attraverso la tastiera e non con il mouse. Anche speciali periferiche d'entrata utilizzano la tastiera come interfaccia.

Le programmazioni proprie possono essere ottimizzate per l'uso della tastiera attraverso "Accessibility for Rich Internet Applications" (ARIA).

Previo preavviso all'utente in forma di testo, per l'esecuzione di una funzione possono essere utilizzati anche altri tasti della tastiera oltre a quelli abituali (tabulatore, frecce).

WCAG 2.0, 2.1.1, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-keyboard-operation-keyboard-operable 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

2.1.2.  Nessun impedimento all'uso della tastiera (Livello A)

Se il focus può essere portato tramite interfaccia di tastiera su un componente della pagina, deve anche poter essere spostato dallo stesso componente sempre tramite interfaccia di tastiera e, se a tal fine non fosse sufficiente l'uso dei normali tasti freccia o tab o l'uso di altri metodi di uscita standard, l'utente deve essere informato sul metodo per rilasciare il focus.

Nota: Dal momento che qualsiasi contenuto che non rispetti questo criterio di successo può interferire con l'utilizzo da parte dell'utente dell'intera pagina, tutti i contenuti della pagina web (che siano usati per rispettare altri criteri di successo o meno) devono rispettare questo criterio di successo. Consultare il requisito di conformità 5: non interferenza.

Capire:

Molti utenti comandano il pc attraverso la tastiera. Alcuni elementi quali video o programmazioni proprie possono "catturare" il focus tastiera e impedire così qualsiasi altra forma di comando del pc. Tutti gli attuali browser devono impredire il verificarsi di simili casi.

Previo preavviso all'utente in forma di testo, per l'esecuzione di una funzione possono essere utilizzati anche altri tasti della tastiera oltre a quelli abituali (tabulatore, frecce).

Esempio:

Avvertenza: "Chiudere la lightbox con ESC".

WCAG 2.0, 2.1.2, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-keyboard-operation-trapping 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

2.1.3.  Tastiera (nessuna eccezione) (Livello AAA)

Tutte le funzionalità del contenuto sono utilizzabili tramite un'interfaccia di tastiera senza richiedere tempi specifici per le singole battute.

Capire:

Molti utenti comandano il pc attraverso la tastiera. L'uso della tastiera deve essere possibile senza eccezione alcuna.

WCAG 2.0, 2.1.3, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-keyboard-operation-all-funcs 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

2.2.      Adeguata disponibilità di tempo: Fornire agli utenti tempo sufficiente per leggere ed utilizzare i contenuti.

2.2.1.  Regolazione tempi di esecuzione (Livello A)

Per ogni temporizzazione presente nel contenuto, è soddisfatto almeno uno dei seguenti casi:

·         Spegnimento: All'utente è consentito arrestare il limite di tempo prima di raggiungerlo; oppure

·         Regolazione: All'utente è consentito regolare il limite di tempo prima di raggiungerlo in un'ampia gamma che sia almeno dieci volte superiore alla durata dell'impostazione predefinita; oppure

·         Estensione: L'utente è avvisato prima dello scadere del tempo; gli sono dati almeno 20 secondi per estendere il limite tramite un'azione semplice (per esempio: "premere la barra spaziatrice") e gli è consentito di estendere il limite per almeno 10 volte; oppure

·         Eccezione per eventi in tempo reale: Il limite di tempo è un elemento fondamentale di un evento in tempo reale (ad esempio, un'asta on line), e non è possibile eliminare questo vincolo; oppure

·         Eccezione di essenzialità: Il limite di tempo è essenziale per l'attività (ad esempio: una verifica a tempo) ed estenderlo l'invaliderebbe; oppure

·         Eccezione delle 20 ore: Il limite di tempo è superiore a 20 ore.

Nota: Questo criterio di successo aiuta a garantire che gli utenti possano completare gli obiettivi senza dei cambiamenti inaspettati nel contenuto o nel contesto che siano il risultato di una limite di tempo. Questo criterio di successo dovrebbe essere considerato in congiunzione con il criterio di successo 3.2.1, che pone dei limiti nelle modifiche di contenuto o contesto come risultato di un'azione dell'utente.

Capire:

Numerosi utenti sono molto lenti nell'utilizzare il pc. Se vengono imposte temporizzazioni o limiti di tempo, devono essere regolabili.

Esempio:

La durata della sessione per eseguire un'ordinazione.

WCAG 2.0, 2.2.1, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-time-limits-required-behaviors 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

2.2.2.  Pausa, stop, nascondi (Livello A)

Nei casi di animazioni, lampeggiamenti, scorrimenti o auto-aggiornamenti di informazioni, sono soddisfatti tutti i seguenti punti:

·         Spostamento, lampeggiamento, scorrimento: Per qualsiasi movimento, lampeggiamento o scorrimento di informazioni che (1) si avvia automaticamente, (2) dura più di cinque secondi ed (3) è presentato in parallelo con altro contenuto, è presente un meccanismo per metterlo in pausa, interromperlo o nasconderlo, a meno che il movimento, il lampeggiamento o lo scorrimento siano parte essenziale dell'attività; e

·         Auto-aggiornamento: Per qualsiasi auto-aggiornamento di informazioni che (1) si avvia automaticamente ed (2) è presentato in parallelo con altro contenuto, è presente un meccanismo per metterlo in pausa, interromperlo o nasconderlo o per controllare la frequenza dell'aggiornamento a meno che l'auto-aggiornamento sia parte essenziale dell'attività.

Nota 1: Per i requisiti relativi a lampeggiamenti e flash del contenuto, fare riferimento alla linea guida 2.3.

Nota 2: Poiché ogni contenuto che non soddisfi questo criterio di successo può interferire con la capacità dell'utente di usare l'intera pagina, tutto il contenuto della pagina Web (sia che sia utilizzato per soddisfare altri criteri di successo oppure non lo sia) deve soddisfare questo criterio. Consultare il requisito di conformità n. 5: non interferenza.

Nota 3: Il contenuto aggiornato periodicamente dal software o che è trasmesso in streaming al programma utente non ha l'obbligo di mantenere o presentare le informazioni generate o ricevute tra la pausa e la riattivazione della presentazione, dato che questo potrebbe non essere tecnicamente possibile, e in molti casi potrebbe anche essere fuorviante.

Nota 4: Per una fase di caricamento o un evento analogo, durante il quale sia interdetta qualsiasi altra interazione, un'animazione può considerarsi essenziale se non può verificarsi interazione durante quella fase da parte di tutti gli utenti e se la mancanza di quest'ultima ad indicare il progresso può confondere gli utenti o indurli a pensare che c'è stata un'interruzione nel caricamento o non è andato a buon fine.

Capire:

Contenuti che cambiano automaticamente possono impedire l'utilizzo della pagina Web agli utenti con esigenze cognitive particolari o che lavorano con strumenti assistivi, ad es. uno screen reader.

Esempio:

Newsticker automatici, diaporama.

 

WCAG 2.0, 2.2.2, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-time-limits-pause 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

2.2.3.  Nessun tempo di esecuzione (Livello AAA)

Le temporizzazioni non sono indispensabili per la tipologia di contenuto, ad eccezione fatta dei tipi di media sincronizzati ed eventi in tempo reale.

Capire:

Numerosi utenti sono molto lenti nell'utilizzare il pc. Bisogna pertanto evitare temporizzazioni o limiti di tempo.

Esempio:

La sessione per effettuare un'ordinazione non presenta limiti di tempo.

WCAG 2.0, 2.2.3, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-time-limits-no-exceptions

Strumenti di verifica:       Verifica visiva (walkthrough)

 

2.2.4.  Interruzioni (Livello AAA)

Le interruzioni possono essere rinviate o annullate dall'utente ad eccezione di quelle che riguardano un'emergenza.

Capire:

Per molti utenti l'accendersi improvviso, ad esempio, di finestre pubblicitarie o la comparsa sullo schermo di notizie che interrompono l'azione rappresentano un ostacolo. I messaggi d'errore che appaiono in caso di inserimento sbagliato da parte dell'utente sono da considerarsi ad es. un'emergenza e pertanto sono ammessi.

Esempio:

Finestre pop-up che davantini sovrappongono al contenuto per mostrare un prodotto a scopo pubblicitario e che l'utente deve chiudere.

 

WCAG 2.0, 2.2.4, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-time-limits-postponed

Strumenti di verifica:       Verifica visiva (walkthrough)

 

2.2.5.  Reautenticazione (Livello AAA)

Quando una sessione autenticata scade, l'utente deve poter continuare l'attività senza perdita di dati dopo essersi reautenticato.

Capire:

Nessuna spiegazione necessaria.

WCAG 2.0, 2.2.5, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-time-limits-server-timeout 

Strumenti di verifica:       Verifica visiva (walkthrough)

2.3.      Convulsioni: Non sviluppare contenuti che possano causare attacchi epilettici.

2.3.1.  Tre lampeggiamenti o inferiore alla soglia (Livello A)

Le pagine Web non devono contenere nulla che lampeggi per più di tre volte al secondo oppure il lampeggiamento è al di sotto della soglia generale di lampeggiamento e della soglia del lampeggiamento rosso.

Nota: Dal momento che qualsiasi contenuto che non soddisfa questo criterio di successo può interferire con la capacità di un utente di utilizzare l'intera pagina, tutto il contenuto della pagina Web (sia che venga utilizzato o meno per soddisfare altri criteri di successo) deve rispondere a questo criterio di successo. Consultare il requisito di conformità 5: non interferenza.

Capire:

Diversi tipi di lampeggiamento possono causare attacchi a soggetti che soffrono di epilessia fotosensibile. Il grado di luminosità dello schermo, in particolare, è una causa diretta. 

WCAG 2.0, 2.3.1, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-seizure-does-not-violate 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

2.3.2.  Tre lampeggiamenti (Livello AAA)

Le pagine Web non devono contenere nulla che lampeggi per più di tre volte al secondo.

Capire:

Diversi tipi di lampeggiamento possono causare attacchi a soggetti che soffrono di epilessia fotosensibile. Il grado di luminosità dello schermo, in particolare, è una causa diretta.

WCAG 2.0, 2.3.2, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-seizure-three-times

Strumenti di verifica:       Verifica visiva (walkthrough)

 

2.4.      Navigabile: Fornire delle funzionalità di supporto all'utente per navigare, trovare contenuti e determinare la propria posizione.

2.4.1.  Salto di blocchi (Livello A)

Fornire una modalità per saltare i blocchi di contenuto che si ripetono su più pagine Web.

Capire:

Diverse categorie di utenti hanno bisogno di supporti alla navigazione per muoversi in siti Web con un'elevata densità di contenuti. Attraverso un link di salto (skiplink) "Vai al contenuto", ad esempio, un cieco può accedere direttamente al testo senza dovere riascoltare l'intera navigazione ad ogni pagina.

Requisiti:

-       almeno 1 link di salto (skiplink) "Vai al contenuto";

-       raggruppamento dei blocchi di informazione ripetitivi o loro segnalazione tramite intestazione;

-       le chiavi di accesso (accesskey) sono opzionali.

Raccomandazione:

La fondazione "Accesso per tutti" raccomanda di definire link di salto (skiplink) e chiavi d'accesso (accesskey) come segue:

0 "Pagina iniziale"

1 "Navigazione" (skiplink all'interno della pagina Web)

2 "Contenuto" (skiplink all'interno della pagina Web)

3 "Contatto"

4 "Mappa del sito" (sitemap)

5 "Cerca" (skiplink all'interno della pagina Web)

6-9 opzionali (solo se necessario e sensato)

 

L'etichetta dei link di salto e delle chiavi di accesso dovrebbe essere breve ( ad es. "Contenuto", "Cerca", ecc.), in quanto lo screen reader annuncia: "Link Contenuto". L'informazione è univoca. Occupando i tasti numerici si evitano i conflitti tra le combinazioni di tasti del sistema operativo e i programmi.

In una situazione ideale link di salto e chiavi d'accesso sono combinati tra loro. Nell'esempio riportato qui sotto i link di salto sono collocati all'inizio della pagina, mentre per le persone vedenti vengono spostati fuori dal viewport attraverso la classe CSS "skiplinks".

Esempio di codice HTML:

<body>

<ul class="skiplinks">

 <li><a href="#mainmenu"  accesskey="1" title="[ALT + 1]">Navigazione principale</a></li>

 <li><a href="#content" accesskey="2" title="[ALT + 2]">Vai al contenuto</a></li>

 <li><a href="#additional" accesskey="6" title="[ALT + 6]">Informazioni supplementari</a></li>

</ul>

Esempio di codice CSS:

.skiplinks {

display: inline;

left: -1000px;

overflow: hidden;

width: 0px;

position: absolute;

top: -1000px;

height: 0px
}

WCAG 2.0, 2.4.1, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-skip 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

2.4.2.  Titolazione della pagina (Livello A)

Le pagine Web hanno titoli che ne descrivono l'argomento o la finalità.

Capire:

Per molti utenti il titolo della pagina è il principale elemento per orientarsi. Per questo motivo il titolo deve fornire un riferimento tematico alla pagina in corso.

Esempio:

Attualità - Accesso per tutti – Utilizzo delle tecnologie adattato ai disabili

Code-Beispiel HTML:

<head>

  <title>Attualità – Accesso per tutti – Accessibilità delle tecnologie

  </title>

  <meta ...

</head>

WCAG 2.0, 2.4.2, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-title 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

2.4.3.  Ordine del focus (Livello A)

Se una pagina Web può essere navigata in modo sequenzialee le sequenze di navigazione influiscono sul significato e sul funzionamento, gli oggetti che possono ricevere il focus lo ricevono in un ordine che ne conserva il senso e l'operatività.

Capire:

Molti utenti utilizzano la tastiera (tasto tabulatore) per comandare il pc. Si muovono in modo sequenziale attraverso la pagina Web e sono legati alla sequenza logica dei link.

Esempio:

L'ordine di tabulazione deve essere logico, in particolare per la compilazione di moduli.

WCAG 2.0, 2.4.3, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-focus-order 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

2.4.4.  Scopo del collegamento (nel contesto): (Livello A)

Lo scopo di ogni collegamento può essere determinato dal solo testo del collegamento oppure dal testo del collegamento insieme a dei contenuti contestuali che possono essere determinati programmaticamente, salvo il caso in cui lo scopo del collegamento potrebbe risultare ambiguo per la gran parte degli utenti.

Capire:

Per molti utenti è indispensabile un’indicazione il più univoca possibile dello scopo (target) del link (vedi gli esempi presentati qui di seguito).

L’apertura di nuove finestre (target="_blank") è problematica. L’indicazione “Nuova finestra” non è più necessaria per gli screen reader, poiché quelli attuali la riconoscono e la annunciano. Per i vedenti è utile un riferimento nell’attributo ‘title’ del tag del link (title="In una nuova finestra").

Esempi:

Un link nel testo fornisce informazioni sullo scopo del collegamento in questione.
Una pagina contiene la frase “Durante il Medioevo fu versato molto sangue”.
Il passo “Medioevo” rappresenta il link.

Un link segnala la spiegazione di un elemento del testo.
Una pagina contiene la frase “Scoprite di più sulla Commisione irlandese per il voto elettronico su Go Vote!”
Il passo “Go Vote!” è il link.

Un’icona e un testo sono contenuti in uno stesso link.
Un’icona raffigurante una macchina per il voto e il testo “Commissione irlandese per il voto elettronico” sono nello stesso collegamento. Il testo Alt dell’icona è vuoto (alt=““) poiché lo scopo del collegamento è già stato indicato nel testo vicino all’icona.

Una lista di titoli di libri
Un certo numero di libri è disponibile in tre formati: HTML, PDF, mp3 (audiolibro). Per evitare la triplice ripetizione del titolo (uno per ciascun formato), il titolo di ciascun libro è contenuto nel primo collegamento (HTML), il secondo collegamento reciterà “PDF” e il terzo “mp3”.

Prospetto di articoli di stampa
Una pagina Web contiene diversi articoli di stampa. La pagina inziale presenta le prime righe di ciascun articolo, seguite dal collegamento “Leggi articolo intero”. Siccome i collegamenti sono inseriti nel rispettivo paragrafo, gli screen reader sono in grado di riprodurre il contesto attraverso una specifica funzione e di interpretare lo scopo del collegamento (vedi esempio di codice 1).

Esempio di codice 1:

<p><img src="teas003.jpg" alt="Sguardo sulla festa con il lago di Zurigo sullo sfondo"> Alla festa di primavera di quest’anno hanno partecipato numerosi <span class"wt03"><a href="123.html">Leggi articolo intero . . .</a></span></p>

Ulteriori esempi:

Riassunto (PDF, 34 KB)

Modulo di ordinazione (in una nuova finestra)

Nota bene:

Per molti utenti i testi espliciti dei collegamenti (link) rappresentano un grande vantaggio. Si raccomanda pertanto il criterio di successo 2.4.9 Scopo del collegamento (solo collegamento) (livello AAA).

WCAG 2.0, 2.4.4, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-refs

Strumenti di verifica:       Web Accessibility Toolbar

 

2.4.5.  Differenti modalità (Livello AA)

Rendere disponibile più di una modalità per identificare una pagina Web all'interno di un insieme di pagine Web, salvo il caso in cui una pagina Web sia il risultato – o una fase – di un'azione.

Capire:

Esiste almeno un'altra modalità, oltre alla navigazione, per accedere ai contenuti.

Esempio:

Una funzione di ricerca o una mappa del sito (sommario) o entrambi.

WCAG 2.0, 2.4. 5, AA     

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-mult-loc

Strumenti di verifica:       Verifica visiva (walkthrough)

 

2.4.6.  Intestazioni ed etichette (Livello AA)

Utilizzare intestazioni ed etichette per descrivere argomenti o finalità.

Capire:

Per la leggibilità del contenuto sono importanti le intestazioni poste prima delle sezioni di testi lunghi nonché le intestazioni prima o le etichette delle differenti zone di una pagina Web. Esse aiutano gli utenti a distinguere le zone e a dirigervisi. Devono essere provviste di etichetta anche le zone attive in una mappa immagine (image map) e i link che eseguono funzioni programmate.

Esempio:

Le etichette devono essere brevi e incisive.

WCAG 2.0, 2.4.6, AA      

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-descriptive 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

2.4.7.  Focus visibile (Livello AA)

Qualsiasi interfaccia utente utilizzabile tramite tastiera ha una funzionalità operativa in cui è visibile l'indicatore del focus.

Capire:

Quando si lavora con la tastiera, il tasto tabulatore permette di saltare da un collegamento all’altro. Se un collegamento viene selezionato e riceve pertanto il focus, ciò deve essere visibile per chi lavora visivamente con la tastiera. Il collegamento che riceve il focus deve distinguersi visivamente in modo chiaro dagli altri collegamenti. Anche i link di salto devono essere visibili, quando ricevono il focus.

Esempio Focus visibile

Illustrazione 7: Utilizzando la tastiera (avanzando con il tasto della tabulazione) tutti i collegamenti ipertestuali elencati a sinistra sono chiaramente messi in evidenza e anche i collegamenti di navigazione vengono evidenziati in una zona ben visibile (in alto a sinistra).

Esempio di codice:

a:focus, a:hover, a:active {
text-decoration:underline;

}

WCAG 2.0, 2.4.6, AA      

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-focus-visible 

Strumenti di verifica:       Verifica visiva (walkthrough), Firefox e Internet Explorer

 

2.4.8.  Posizione (Livello AAA)

Rendere disponibili informazioni sulla posizione dell'utente all'interno di un insieme di pagine Web.

Capire:

Viene indicata la posizione dell’utente all’interno di un certo numero di pagine Web.

Esempio:

La posizione dell’utente viene indicata attraverso la navigazione

o
La posizione dell’utente è indicata attraverso il breadcrumb                       

o
Nel testo compare la segnalazione: "Siete al passo 3 di 5".

 

WCAG 2.0, 2.4.8, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-location 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

2.4.9.  Scopo del collegamento (solo collegamento) (Livello AAA)

Rendere disponibile una funzionalità per comprendere lo scopo dei collegamenti basandosi sul solo testo del collegamento, salvo il caso in cui lo scopo del collegamento potrebbe risultare ambiguo per la gran parte degli utenti.

Capire:

Se i link sono di per sé facili da comprendere, ciò agevola un elevato numero di persone. Per fare un esempio, un cieco che utilizza lo screen reader ricorre volentieri alla funzione “Mostra lista di collegamenti”: in tal modo vengono mostrati sulla stessa pagina tutti i collegamenti che poi possono essere selezionati.

Esempio:

Prospetto di articoli stampa
Una pagina Web contiene diversi articoli stampa. La pagina inziale presenta le prime righe di ciascun articolo, seguite dal collegamento “Leggi articolo intero”. Per far sì che i collegamenti siano chiari di per sé, il collegamento “Leggi articolo intero” viene completato con il titolo dell’articolo. Il collegamento recita dunque “Leggi articolo intero Titolo XY”.

Esempio di codice 1:

<p><img src="teas003.jpg" alt=" Sguardo sulla festa con il lago di Zurigo sullo sfondo "> Alla festa di primavera di quest’anno hanno partecipato numerosi. <span class"wt03"><a href="123.html">Leggi articolo intero ...</a></span></p>

 

WCAG 2.0, 2.4.9, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-link 

Strumenti di verifica:       Web Accessibiliy Toolbar

 

2.4.10.       Intestazioni di sezione (Livello AAA)

Le intestazioni di sezione sono utilizzate per organizzare il contenuto.

Nota 1: "Intestazione" è usato nel suo senso generale ed include titoli ed altri modi per aggiungere un'intestazione a differenti tipi di contenuto.

Nota 2: Questo criterio di successo riguarda le sezioni all'interno dell'area di scrittura, non i componenti dell'interfaccia utente. I componenti dell'interfaccia utente sono trattati nel criterio di successo 4.1.2.

Capire:

Per la leggibilità del contenuto sono importanti le intestazioni delle sezioni all’interno di testi lunghi.

WCAG 2.0, 2.4.10, AAA 

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-headings

Strumenti di verifica:       Verifica visiva (walkthrough)

 

3. Principio: Comprensibile

Le informazioni e le operazioni dell'interfaccia utente devono essere comprensibili.

3.1.      Leggibile: Rendere il testo leggibile e comprensibile.

3.1.1.  Lingua della pagina (Livello A)

L'impostazione della lingua predefinita di ogni pagina Web può essere determinata programmaticamente.

Capire:

È molto importante segnalare correttamente la lingua principale di ogni pagina. Diversamente, lo screen reader leggerebbe in inglese una pagina Web scritta in tedesco.

Esempi di codice:

I documenti HTML accessibili possono essere creati come HTML 4.01 con la dichiarazione di contenuto text/html, a cui viene aggiunto l’attributo relativo alla lingua:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html lang=“de“>

oppure come XHTML 1.0 con la dichiarazione di contenuto xml e text/html. Entrambe le dichiarazioni di contenuto necessitano di un attributo relativo alla lingua:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-ch" lang="de-ch">

<head>

oppure come XHTML 1.1 con la dichiarazione di contenuto application/xhtml+xml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>

  <title>document écrit en français</title>

  <meta http-equiv="content-type" content="application/xhtml+xml;

  charset=utf-8" /> </head>

  <body>       ...document écrit en français...  </body>

</html>

oppure come HTML 5:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Swapping Songs</title>

</head>

<body>

<h1>Swapping Songs</h1>

<p>Tonight I swapped some of the songs I wrote with some friends, who

gave me some of the songs they wrote. I love sharing my music.</p>

</body>

</html>

WCAG 2.0, 3.1.1, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-doc-lang-id

Strumenti di verifica:       Web Accessibiliy Toolbar

 

3.1.2.  Parti in lingua (Livello AA)

La lingua di ogni passaggio o frase nel contenuto può essere determinata programmaticamente ad eccezione di nomi propri, termini tecnici, parole in lingue indeterminate e parole o frasi che sono diventate parte integrante del gergo del testo immediatamente circostante.

Capire:

Per permettere allo screen reader di riprodurre correttamente l’accentuazione di sezioni di testo in un’altra lingua, queste ultime sono marcate con l’attributo lang.

Esempio di codice:

<h1>Swapping Songs</h1>

<p>Tonight I swapped some of the songs I wrote with some friends, who

gave me some of the songs they wrote. I love sharing my music.</p>

 

<blockquote lang="de">

<p>Da dachte der Herr daran, ihn aus dem Futter zu schaffen, aber der Esel merkte, dass kein guter Wind wehte, lief fort und machte sich auf den Weg nach Bremen: dort, meinte er, könnte er ja Stadtmusikant werden. Er kaufte sich beim bekannten Geigenbauer <span lang="fr">Henry Lagrumière</span> eine Violine.</p>

</blockquote>   

 

 

WCAG 2.0, 3.1.2, AA      

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-other-lang-id

Strumenti di verifica:       Web Accessibility Toolbar

 

3.1.3.  Parole inusuali (Livello AAA)

Rendere disponibile una modalità per l'identificazione di specifiche definizioni di parole o frasi usate in un modo insolito o ristretto, compresi espressioni idiomatiche e gergali.

Capire:

-       parole speciali, ad esempio i termini tecnici, vengono spiegate nel body-copy;

oppure

-       dispongono di un meccanismo specifico, ad es. un collegamento ad un glossario che spiega il termine.

 

WCAG 2.0, 3.1.3, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-idioms

Strumenti di verifica:       Verifica visiva (walkthrough)

 

3.1.4.  Abbreviazioni (Livello AAA)

Rendere disponibile una modalità per identificare la forma espansa o il significato delle abbreviazioni.

Capire:

Le abbreviazioni vengono spiegate o sempre nel testo o attraverso un collegamento ad un glossario.

La prima occorrenza di una abbreviazione può essere scritta per esteso; per le occorrenze successive si possono utilizzare <abbr> o <acronym> e l’attributo title.

Se le abbreviazioni vengono sempre contraddistinte con <abbr> o <acronym> e l’attributo title, l’attributo title deve essere utilizzato in modo accessibile.L’attributo title può così essere letto anche dagli screen reader.

Abbreviazioni frequenti e conosciute da tutti, come PDF, non necessitano di alcuna spiegazione.

Esempio:

<p>Oggi l’Organizzazione delle Nazioni Unite (ONU) ha eletto il nuovo segretario.</p>

<p>Poiché oggi l’ <abbr title="Organizzazione delle Nazioni Unite" lang="it">ONU</abbr> è stata a lungo impegnata ...</p>

WCAG 2.0, 3.1.4, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-located 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

3.1.5.  Livello di lettura (Livello AAA)

Quando il testo richiede capacità di lettura più avanzata rispetto al livello di istruzione secondaria inferiore dopo aver rimosso i nomi propri ed i titoli, fornire dei contenuti supplementari oppure una versione che non richieda la capacità di lettura più avanzata rispetto al livello di istruzione secondaria inferiore.

Capire:

Quando si devono trasmettere istruzioni importanti o informazioni specifiche, un riassunto scritto in una lingua semplice dovrebbe facilitare la comprensione per quelle persone che hanno difficoltà a capire la lingua scritta.

Beispiele:

Informazioni mediche alla collettività
Un gruppo di ricerca informa attraverso alcuni contributi in un sito Web su nuove scoperte. Ogni contributo è introdotto da un riassunto contenente le informazioni più importanti presentate in una lingua semplice.

Un’applicazione di e-learning
Un corso online sulla cultura spagnola contiene testi adatti a differenti livelli di lettura. Riassunti scritti in una lingua semplice, foto e grafici informativi spiegano e riducono i nessi più complicati. Il tal modo il corso può essere superato facilmente già all’inizio degli studi anche, ad esempio, da studenti di lingua straniera.

WCAG 2.0, 3.1.5, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-supplements 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

3.1.6.  Pronuncia (Livello AAA)

Rendere disponibile una modalità per identificare specifiche pronunce per le parole dove il significato delle parole, nel contesto, è ambiguo senza la conoscenza della pronuncia.

Capire:

Informazioni circa l’accentuazione possono essere fornite direttamente nel testo subito dopo la parola o tramite un link ad un glossario contenente indicazioni sull'accentuazione oppure attraverso un elemento RUBY.

Esempio:

<p>When we talk about these guidelines, we often just call them
 <ruby>
   <rb>WCAG</rb>
    <rp>(</rp>
     <rt>Wuh-KAG</rt>
    <rp>)</rp>
 </ruby>.
</p>

WCAG 2.0, 3.1.6, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-meaning-pronunciation 

Strumenti di verifica:       Verifica visiva (walkthrough), Internet Explorer, Firefox con Addon "XHTML Ruby"

3.2.      Prevedibile: Creare pagine Web che appaiano e che siano prevedibili.

3.2.1.  Al focus (Livello A)

Quando qualsiasi componente riceve il focus, non deve avviare automaticamente un cambiamento del contesto.

 

Capire:

Affinché i siti Web funzionino per tutti gli utenti in maniera prevedibile, non vengono automaticamente aperte finestre, inviati moduli né attivate funzioni per il solo fatto che un elemento riceva il focus.

WCAG 2.0, 3.2.1, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-consistent-behavior-receive-focus 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

3.2.2.  All'input (Livello A)

Cambiare l'impostazione di qualsiasi componente nell'interfaccia utente non provoca automaticamente un cambiamento di contesto, a meno che l'utente sia stato informato del comportamento prima di utilizzare il componente.

Capire:

Affinché i siti Web funzionino per tutti gli utenti in maniera prevedibile, non vengono automaticamente aperte finestre, inviati moduli né attivate funzioni per il solo fatto che l'utente operi un inserimento in un elemento. A meno che l'utente venga avvisato in tempo, ossia immediatamente prima dell'elemento, dell'automatismo.

Esempi:

La selezione da un menù a tendina (drop-down menu) non attiva automaticamente un link, bensì occore l'esplicita conferma dell'utente (es. pulsante "Seleziona").

Dopo aver selezionato una checkbox, ulteriori opzioni collegate vengono visualizzate solo dopo che l'utente abbia premuto un pulsante.

Esempio Automatismi all’input

Illustrazione 8: I menu a tendina per un accesso rapido con JavaScript programmati in modo da lanciare automaticamente, dopo la selezione, il collegamento ipertestuale, disorientano e irritano gli utenti. La migliore soluzione è in ogni caso consentire all’utente di lanciare un collegamento solo dopo l’azionamento attivo di un apposito comando (ad es. "selezionare").

WCAG 2.0, 3.2.2, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-consistent-behavior-unpredictable-change

Strumenti di verifica:       Verifica visiva (walkthrough)

 

3.2.3.  Navigazione coerente (Livello AA)

I meccanismi di navigazione che sono ripetuti su più pagine Web all'interno di un insieme di pagine Web, devono apparire nello stesso ordine corrispondente ogni volta che si ripetono, a meno che un cambiamento sia stato avviato da un utente.

Capire:

Affinché le pagine Web funzionino in maniera prevedibile per tutti gli utenti, gli elementi per la navigazione devono essere ordinati e strutturati allo stesso modo in tutte le pagine.

Esempio:

La funzione di ricerca occupa sempre la stessa posizione.

Le categorie per la navigazione sono sempre le stesse, a meno che l'utente crei nuove sottocategorie, ad es. attivando un link.

WCAG 2.0, 3.2.3, AA      

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-consistent-behavior-consistent-locations 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

3.2.4.  Identificazione coerente (Livello AA)

I componenti che hanno la stessa funzionalità all'interno di un insieme di pagine Web sono identificati in modo univoco.

Capire:

Affinché le pagine Web funzionino in maniera prevedibile per tutti gli utenti, gli elementi comuni a più pagine presentano la stessa struttura.

Esempio:

La funzione di ricerca presenta la stessa struttura in tutte le pagine.

WCAG 2.0, 3.2.4, AA      

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-consistent-behavior-consistent-functionality

Strumenti di verifica:       Verifica visiva (walkthrough)

 

3.2.5.  Cambiamenti su richiesta (Livello AAA)

I cambiamenti di contesto sono avviati solo su richiesta degli utenti, oppure è disponibile un meccanismo per disattivare questi cambiamenti.

Capire:

Alcuni utenti non si accorgono di cambiamenti intervenuti automaticamente. Affinché le pagine Web funzionino in modo prevedibile per tutti gli utenti, i contenuti vengono modificati solo quando l'utente lo provoca espressamente.

Esempi:

Un pulsante "Update"
Al posto di un aggiornamento automatico, è previsto un pulsante "Aggiorna ora".

Un trasferimento
Talvolta si viene trasferiti da una pagina Web scaduta a una nuova senza che l'utente si accorga di nulla.

L'azione di cliccare su un link è un esempio di richiesta esplicita dell'utente.

WCAG 2.0, 3.2.5, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-consistent-behavior-no-extreme-changes-context 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

3.3.      Assistenza nell'inserimento: Aiutare gli utenti ad evitare gli errori ed agevolarli nella loro correzione.

3.3.1.  Identificazione di errori (Livello A)

Se viene rilevato automaticamente un errore di inserimento, l'elemento in errore viene identificato e descritto tramite testo.

Capire:

Quando un errore di inserimento, ad es. al momento della compilazione di un modulo di contatto, viene riconosciuto automaticamente, la relativa segnalazione avviene in forma testuale leggibile per tutti gli utenti: o come messaggio d'errore ("system alert") o nel campo visibile all'inizio del contenuto. Il messaggio appare davanti al modulo e identifica il campo non compilato correttamente. La segnalazione avviene testoni forma testuale, oppure addizionalmente anche in forma visiva. La soluzione migliore consiste nel mostrare i messaggi di errore sotto forma di link che rimandano direttamente al campo da correggere.

Esempio Identificazione di errori

Illustrazione 9: Questa segnalazione di errori all'inizio del settore designa i campi compilati in modo errato e conduce, attraverso un apposito collegamento, al primo errore. Le indicazioni sono date in forma testuale e visiva, in rosso.

WCAG 2.0, 3.3.1, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-identified 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

3.3.2.  Etichette o istruzioni (Livello A)

Fornire etichette o istruzioni quando il contenuto richiede azioni di input da parte dell'utente.

Capire:

Quando azioni di input da parte dell'utente sono obbligatorie oppure viene richiesto un formato specifico per un determinato inserimento, le istruzioni sono chiare e leggibili per tutti gli utenti.

Esempio campo obbligatorio:

Riguardo all'indicazione "Campo obbligatorio" occorre tener presente che il segno * (asterisco) non viene letto dagli screen reader, così come tutti i segni di interpunzione. Per permettere anche ai ciechi di conoscere quali sono i campi obbligatori, è necessario introdurre un opportuno riferimento anche nel testo label. In alternativa, si può ricorrere a grafici contrassegnati da un asterisco e con il testo Alt "Campo obbligatorio". Un'ulteriore possibilità per segnalare i campi obbligatori è lo script WAI-ARIA attraverso "aria-required="true".

È opportuno adottare solo una delle misure proposte per evitare ridondanze.

Esempio codice 1:

<form action="post">
<p><label for=" firstName "><span class="hidden">obligatorio </span>Cognome:*</label>
<input id="firstName" type="text" /></p>

L’esempio mostra come con la classe CSS "hidden" (descrizione: cfr. esempio codice in CS 1.3.1. A) l’indicazione "obbligatorio" possa essere data come complemento a * per lettore di schermo.

Esempio codice 2:

<form action="post">
<p><label for="firstName">Cognome:*</label>
<input id="firstName" type="text" aria-required="true" /></p>

 </form>

Legenda:

L’esempio mostra come l’attributo ARIA "aria-required" possa essere utilizzato con facilità. Funziona tuttavia solo con i programmi di navigazione e i lettori di schermo più recenti. Per garantire la compatibilità con contesti meno aggiornati, cfr. tecnica ARIA4.

WCAG 2.0, 3.3.2, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-cues

Strumenti di verifica:       Verifica visiva (walkthrough)

 

3.3.3.  Suggerimenti per gli errori (Livello AA)

Se viene identificato un errore di inserimento che si può correggere, è necessario fornire suggerimenti all'utente, a meno che ciò non pregiudichi la sicurezza o la finalità del contenuto.

Capire:

Quando azioni di input da parte dell'utente sono obbligatorie oppure viene richiesto un formato specifico per un determinato inserimento, le istruzioni sono chiare e leggibili per tutti gli utenti. Nel caso di formati complessi viene fornito un esempio oppure all'utente vengono corretti gli errori durante l'inserimento.

Esempio:

Formato della data (tt.mm.jjjj)

WCAG 2.0, 3.3.3, AA      

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-suggestions 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

3.3.4.  Prevenzione degli errori (legali, finanziari, dati) (Livello AA)

Per le pagine Web che contengono vincoli di tipo giuridico o finanziario o che gestiscono inserimento, cancellazione, gestione di dati controllabili dall'utente  in un sistema di archiviazione oppure che inoltrano delle risposte di utenti a test, è soddisfatta almeno una delle seguenti condizioni:

Reversibilità: Le azioni sono reversibili.

Controllo: I dati inseriti dall'utente sono verificati e si fornisce all'utente la possibilità di correggere eventuali errori di inserimento.

Conferma: è disponibile un funzionalità per la revisione, conferma e correzione delle informazioni prima del loro invio definitivo.

Capire:

Per l'inserimento di dati che, se scorretti, porterebbero a conseguenze rilevanti, è importante per gli utenti poter verificare, confermare, modificare o cancellare tali dati prima di procedere al loro invio.

Esempio:

Prima dell'invio di un'ordinazione online, viene mostrata una pagina che riassume tutti i dati relativi all'ordinazione e al cliente. Solo dopo conferma delle informazioni contenute in questa pagina può partire l'ordinazione.

Esempio Prevenzione degli errori

Illustrazione 10: Per prevenire gli errori, le pagine di conferma sono di grande aiuto. Il riassunto permette di controllare costantemente la procedura: mediante il comando "Rielaborare" si può risalire alle operazioni precedenti e, se occorre, riformularle; mediante il comando "Inviare l’ordinazione", il processo d'ordinazione viene concluso con le relative conseguenze.

WCAG 2.0, 3.3.4, AA      

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-reversible

Strumenti di verifica:       Verifica visiva (walkthrough)

 

3.3.5.  Aiuto (Livello AAA)

Rendere disponibili degli aiuti contestuali.

Capire:

Un aiuto contestuale deve essere offerto solo se il testo contenuto nell'etichetta non è sufficiente a descrivere completamente la funzionalità. L'aiuto deve essere riconoscibile e disponibile per tutti gli utenti.

Esempio:

Candidatura di lavoro online
Il modulo di candidatura presenta alcune domande di difficile comprensione. Un link di aiuto collocato vicino ad ogni domanda conduce alle relative istruzioni e spiegazioni.

WCAG 2.0, 3.3.5, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-context-help 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

3.3.6.  Prevenzione degli errori (tutti)  (Livello AAA)

Per tutte le pagine Web che richiedano l'invio di informazioni da parte dell'utente, è soddisfatta almeno una delle seguenti condizioni:

Reversibilità: Le azioni sono reversibili.

Controllo: I dati inseriti dall'utente sono verificati e si fornisce all'utente la possibilità di correggere eventuali errori di inserimento.

Conferma: è disponibile una funzionalità per la revisione, conferma e correzione delle informazioni prima del loro invio definitivo.

Capire:

Questo criterio si basa sul criterio 3.3.4 Prevenzione degli errori, anche se in questo caso è valido per ogni tipo di inserimento dell'utente.

Esempio:

Le informazioni inserite dall'utente in un modulo di contatto vengono presentate un'ultima volta prima del loro invio. È possibile confermare o modificare.

 

WCAG 2.0, 3.3.6, AAA   

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-minimize-error-reversible-all 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

4. Principio: Robusto

Il contenuto deve essere abbastanza robusto per essere interpretato in maniera affidabile mediante una vasta gamma di programmi utente, comprese le tecnologie assistive.

4.1.      Compatibile: Garantire la massima compatibilità con i programmi utente attuali e futuri, comprese le tecnologie assistive.

4.1.1.  Analisi sintattica (parsing) (Livello A)

Nel contenuto implementato utilizzando linguaggi di marcatura gli elementi possiedono tag di apertura e chiusura completi, sono annidati in conformità alle proprie specifiche, non contengono attributi duplicati e tutti gli ID sono unici, salvo il caso in cui le specifiche permettano eccezioni.

Nota: I tag di apertura e chiusura nei quali manca un carattere fondamentale per la loro struttura, come una parentesi angolare chiusa mancante o le virgolette discordanti di un attributo, non possono essere giudicati completi.

Capire:

Il codice della pagina viene controllato (validato) e corretto.

Gli elementi che sono stati implementati utilizzando linguaggi di marcatura possiedono tag di apertura e chiusura completi, sono annidati in conformità alle proprie specifiche, non contengono attributi ripetuti e tutti gli ID sono univoci, salvo il caso in cui le specifiche permettono diversamente.

Osservazione:

I browser e altri programmi utente, ad es. screen reader, analizzano la sintassi dei documenti a seconda del tipo di documento indicato (doctype), avvalendosi della Doctype Definiton (DTD). Il tipo di documento (doctype) deve essere valido e scritto correttamente.

Lista dei tipi di documento raccomandati: http://www.w3.org/QA/2002/04/valid-dtd-list.html

La correttezza e la validità del codice sono le premesse per contenuti Web di qualità, controllabili e verificabili. I documenti XHTLM richiedono codici ben codificati esintatticamente corretti; per gli screen reader e le lenti di ingrandimento degli schermi ciò è ancor più importante che non per i browser visivi, considerato anche il fatto che tollerano meno errori.

WCAG 2.0, 4.1.1, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-ensure-compat-parses 

Strumenti di verifica:       W3C-Validator: http://validator.w3.org/

 

4.1.2.  Name, Role, Value (Livello A)

Per tutti i componenti dell'interfaccia utente (inclusi ma non limitati a: elementi di un modulo, collegamenti e componenti generati da script), name (nome) e role (ruolo) devono essere determinati programmaticamente; stati, proprietà e valori che possono essere impostati dall'utente devono essere impostabili da programma; e le notifiche sui cambi di stato di questi elementi devono essere rese disponibili ai programmi utente, incluse le tecnologie assistive.

 

Nota: Questo criterio di successo ha valenza soprattutto per gli autori Web che sviluppano o programmano con linguaggi di scripting i componenti delle proprie interfacce utente. Per esempio, se utilizzati in accordo alle specifiche i controlli HTML standard rispondono a questo criterio.

Capire:

Gli autori Web che programmano elementi propri dovrebbero operare nel rispetto delle specifiche degli standard per il Web. Diverse tecnologie dispongono di Accessibility-API, come Java, Flash, Mozilla-DHTML, che bisognerebbe ugualmente prendere in considerazione.

I siti Web e i componenti UI creati dovrebbero poter essere utilizzati da tutti i programmi utente in uso, sia attraverso i browser sia con screenreader e lenti di ingrandimento dello schermo, ecc.

WCAG 2.0, 4.1.2, A        

Come applicare:              http://www.w3.org/WAI/WCAG20/quickref/#qr-ensure-compat-rsv 

Strumenti di verifica:       Verifica visiva (walkthrough)

 

 


II.        Allegato

Termini importanti contenuti nelle WCAG 2

Le WCAG 2 contengono termini tecnici importanti la cui definizione è contenuta in un glossario. Esso accompagna il presente documento.

Glossario relativo alla Accessibility Checklist 2: http://www.access-for-all.ch/checklist/

Glossario della WAI (italiano): http://www.w3.org/Translations/WCAG20-it/ - glossary

Requisiti di conformità WCAG 2

Per la conformità ad uno dei livelli A (minimo), AA (consigliato) o AAA (massimo), l’intera pagina Web deve soddisfare tutti i criteri di successo del livello corrispondente (o dei livelli corrispondenti) oppure è fornita una versione alternativa conforme al livello. Il logo di conformità sulla pagina Web deve essere accompagnato da una breve spiegazione con gli elementi necessari: http://www.w3.org/Translations/WCAG20-it/ - conformance

Conformità parziale conformemente alle WCAG 2

Se la pagina Web soddisfa tutti i criteri ma presenta contenuti non controllati che non sono accessibili (ad es. gli indici di borsa di un fornitore esterno), lo si può segnalare attraverso una “Dichiarazione di conformità parziale”. Valgono le seguenti condizioni:

a.     sono contenuti su cui l’autore non ha controllo;

b.     tutte le parti (pagine e settori) sono indicate e contraddistinte in modo comprensibile.

Requisiti di conformità nella legislazione svizzera

Si richiede il rispetto dei criteri di conformità dei livelli A e AA delle WCAG 2. Vedi la direttiva federale P028: http://www.isb.admin.ch/themen/standards/alle/03237/

Responsabili della checklist

La redazione della presente checklist è stata resa possibile dal contributo dell’Ufficio federale delle comunicazioni (UFCOM), della Cancelleria federale (CaF), della Posta Svizzera e di Swisscom. Un gruppo di lavoro costituito da un membro di ciascuna organizzazione succitata ha steso la lista sotto la direzione della Fondazione “Accesso per tutti”. Un gruppo di esperti ha partecipato a titolo gratuito alla sua revisione.

Gruppo degli autori

Prénom

Nom

Entreprise

Isabelle

Haas

La Poste

Beatrice

Stampbach

Swisscom

Markus

Riesch

Accès pour tous

Sven

Jenzer

Accès pour tous

Gruppo degli esperti incaricati della revisione

Prénom

Nom

Entreprise

Alain

Vérgeres

Swisscom

Oliver

Füri

La Poste

Julia

Dressler

Unic

Christian

Hahnloser

Unic

Kerstin

Probiesch

Esperta dell'accessibilità autonoma

 

Tina

Kohler

OFIT

Diritto di utilizzo

Il trasferimento e il riutilizzo della checklist insieme alle relative spiegazioni e al glossario sono espressamente autorizzati, a condizione che si mantenga la denominazione «AG Accessibility Checkliste 2» e il trasferimento avvenga sempre alle stesse condizioni. In caso di rielaborazione, si prega di fornire un esemplare giustificativo. Mailto: checklist@access-for-all.ch

Aggiornamenti

L’ultima versione aggiornata è sempre disponibile all’indirizzo: http://www.ch.ch/accessibility

Gli autori invitano a inviare eventuali proposte e segnalazioni di errori.

Mailto: checklist@access-for-all.ch