Risultati in dettaglio: conformità WCAG 2.1 livello A#

[Salta indice]

Indice#

1. Percepibile#

Le informazioni e i componenti dell'interfaccia utente devono essere presentati agli utenti in modi in cui essi possano percepirli.

Linea guida 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.

SINTOMO (pagina Bollettino stampa)
Utenti che usano tecnologie assistive per la navigazione della pagina potrebbero non essere in grado di interpretare i vari form di ricerca "Archivio dei Bollettini".

CAUSA
Nella pagina "Bollettino Stampa" i form sono impaginati tramite una tabella. Visivamente si capisce che questi sono form diversi grazie all'impaginazione, ma sematicamente non c'è alcun legame tra etichette ed input.

POSSIBILE SOLUZIONE
Utilizzare delle etichette per identificare gli input e il loro scopo.
Esempio:

<form>
    <label for="select">Ricerca per data:</label>
    <select type="select" name="select">
        <option value="/content/salastampa/it/bollettino/pubblico/2019/07.html">mese corrente</option>
        <option value="/content/salastampa/it/bollettino/pubblico/2019.html">2019</option>
        <option value="/content/salastampa/it/bollettino/pubblico/2019.html">2018</option>
        ...
    </select>
    <input type="button" value="Ricerca" onclick="document.location.href = jQuery('#time').val();">
</form>

SINTOMO (pagina Calendario)
Persone che hanno difficoltà a capire il significato delle frecce, non possono essere aiutate dalla tecnologia assistiva a capirne l'utilizzo.

CAUSA
Non sono presenti spiegazioni testuali per l'utilizzo dei bottoni per la navigazione tra le pagine.

POSSIBILE SOLUZIONE
Aggiungere una spiegazione utilizzando delle aria-label per fare in modo che il lettore di schermo possa indicare la funzione dei link (tag <a>).
Esempio:

<button class="arrLeft" aria-label="Indietro"></button>
<button class="arrRight" aria-label="Avanti"></button>

<a href="#" aria-label=“Indietro” onclick="javascript:history.go(-1);return false;">
    <img border="0" src="/etc/designs/vatican/library/images/back.png" width="30" height="30" alt="Back" title="Back">
</a>
<a href="#" aria-label=“Top” onclick="javascript:history.go(-1);return false;">
    <img border="0" src="/etc/designs/vatican/library/images/top.png" width="30" height="30" alt="Top" title="Top">
</a>
<a href="#" aria-label=“Stampa” onclick="self.print(); return false;">
    <img border="0" src="/etc/designs/vatican/library/images/print.png" alt="Print" title="Print" width="26" height="26">
</a>

Linea guida 1.2 Media temporizzati#

Fornire alternative per i media temporizzati.

Linea guida 1.3 Adattabile#

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

SINTOMO (pagina Bollettino stampa)
La navigazione può risultare difficile per chi utilizza la tastiera e i lettori di schermo.

CAUSA
I livelli di heading non vengono rispettati. Non è presente un <h1> all'interno del documento, solo una intestazione di livello 3 <h3>.

POSSIBILE SOLUZIONE
Impostare una struttura corretta per le intestazioni.

SINTOMO (pagina Home)
La navigazione può risultare confusionaria per chi utilizza tecnologie assistive come lettori di schermo.

CAUSA
I livelli di heading sono mal utilizzati: tag <h1> riutilizzato più volte nella stessa pagina.

POSSIBILE SOLUZIONE
Impostare una struttura corretta per le intestazioni.

SINTOMO (pagina Calendario)
La navigazione può risultare confusionaria per chi utilizza tecnologie assistive come lettori di schermo.

CAUSA
I livelli di heading non vengono rispettati: sono presenti i tag <h1> ed <h3>, non viene utilizzato il tag <h2>.

POSSIBILE SOLUZIONE
Seguire l'ordine degli heading facendo in modo che non vengano saltati livelli.

SINTOMO (pagina Bollettino stampa)
La navigazione può risultare difficile per chi utilizza la tastiera e i lettori di schermo.

CAUSA
Sia navigando da tastiera che utilizzando il lettore di schermo non è possibile leggere le "etichette" dei vari form di ricerca.

POSSIBILE SOLUZIONE
Eliminare il layout a tabella e utilizzare correttamente <label> per i form.

SINTOMO (pagina Home)
Utenti non abituati ad una regolare navigazione web potrebbero non arrivare ad intendere come fruire di tale contenuto.

CAUSA
Sezione della pagina fruibile scrollando orizzontalmente, per vedere l’intero contenuto che è in parte nascosto.

POSSIBILE SOLUZIONE
Segnalare all'utente una possibile interazione con un contenuto parzialmente nascosto che è fruibile tramite spostamento orizzontale (rotella del mouse, barra di spostamento della sezione, ...).

SINTOMO (pagina Calendario)
Persone cieche o con limitata capacità visiva potrebbero non capire come utilizzare il componente di ricerca.

CAUSA
Il pulsante che permette di inviare la richiesta di ricerca, per far capire all'utente la sua funzione, si basa solo sulla posizione e il carattere contenuto.

<input type="submit" value="»" name="go">

POSSIBILE SOLUZIONE
Sostituire informazione testuale a quella visiva.

<input type="submit" value="Vai" name="go">

Linea guida 1.4 Distinguibile#

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

SINTOMO (pagina Calendario)
Persone con problemi nella visualizzazione dei colori potrebbero non percepire lo stato in cui un elemento è in focus o hover.

CAUSA
Il colore e l’opacità sono utilizzati come unica modalità visiva per rappresentare alcune informazioni.

POSSIBILE SOLUZIONE
Utilizzare il css per fornire altre informazioni oltre al colore, per esempio utilizzare la proprietà text-decoration per aggiungere la sottolineatura.

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

2. Utilizzabile#

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

Linea guida 2.1 Accessibile da tastiera#

Rendere disponibili tutte le funzionalità tramite tastiera.

SINTOMO (pagina Calendario)
Persone cieche o con limitata capacità visiva e quelle con tremori di mano tali da non poter usare il mouse, non riescono ad usufruire pienamente del sito.

CAUSA
Non tutte le funzionalità del contenuto sono utilizzabili tramite un'interfaccia di tastiera a causa dell’utilizzo di eventi attivabili solo da mouse e gestiti tramite jQuery:

• Non è possibile consultare l’orario degli eventi in programma;
• Non è possibile passare al mese precedente o successivo nel calendario;
• Non è possibile effettuare alcuna ricerca in Archivio Eventi.

POSSIBILE SOLUZIONE
Aggiungere la possibilità di attivare le funzionalità anche con evento keydown().

Linea guida 2.2 Adeguata disponibilità di tempo#

Fornire agli utenti tempo sufficiente per leggere e utilizzare i contenuti.

SINTOMO (pagina Home)
Utenti che non utilizzano un mouse non sono in grado di posizionare il puntatore sopra il testo a scorrimento per fermarlo temporaneamente.

CAUSA
Mancanza di meccaniscmi alternativi per fermare il testo a scorrimento oltre all'hover del puntatore del mouse.

POSSIBILE SOLUZIONE
Assicurarsi che venga implementato un meccanismo da tastiera (o altri dispositivi input) per permettere di fermare lo scorrimento del testo, oltre che con il posizionamento del mouse.

Linea guida 2.3 Convulsioni e reazioni fisiche#

Non sviluppare contenuti con tecniche che sia noto causino attacchi epilettici o reazioni fisiche.

Linea guida 2.4 Navigabile#

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

SINTOMO (pagina Bollettino Stampa)
Persone con disabilità fanno fatica a raggiungere il contenuto principale velocemente e facilmente.

CAUSA
Il sito è privo di link diretti al contenuto principale.

POSSIBILE SOLUZIONE
Aggiungere un link all'inizio della pagina per arrivare al contenuto principale.

Linea guida 2.5 Modalità di input#

Rendere più facile agli utenti l'utilizzo di funzionalità attraverso input diversi dalla tastiera.

3. Comprensibile#

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

Linea guida 3.1 Leggibile#

Rendere il testo leggibile e comprensibile.

SINTOMO
Tecnologie assistive come un lettore di schermo non capiscono in quale lingua è stato scritto il documento.

CAUSA
Assenza di un attributo lang.

POSSIBILE SOLUZIONE
Aggiungere un attributo lang al tag <html>.

<html lang="it">

Linea guida 3.2 Prevedibile#

Creare pagine Web che abbiano aspetto e funzionamento prevedibili.

Linea guida 3.3 Assistenza nell'inserimento#

Aiutare gli utenti a evitare gli errori e agevolarli nella loro correzione.

SINTOMO (pagina Calendario)
Gli utenti con disabilità cognitive non riescono ad utilizzare lo strumento di ricerca. Il lettore di schermo non dà informazioni sull’utilizzo.

CAUSA
Gli utenti non hanno adeguati suggerimenti per le operazioni di input per il form di ricerca nell’Archivio Eventi.

<select name="year" style="display: none;">
<option value="">Anno</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>

POSSIBILE SOLUZIONE
Inserire una <label> associata al <select> per la ricerca.
Esempio:

<label for="year">Seleziona l’anno della ricerca</label>
<select id=”year” name="year">
<option value="">Anno</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
</select>

4. Robusto#

Il contenuto deve essere abbastanza robusto per essere interpretato in maniera affidabile da una grande varietà di programmi utente, comprese le tecnologie assistive.

Linea guida 4.1 Compatibile#

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