Corso di Laurea Magistrale in Informatica UmanisticaProgettazione di interfacce e valutazione dell’usabilità

Esercitazione 7 Valutazione Accessibilità

regione Calabria

Francesca Pulina e-mail: frampy.p@hotmail.it

HOMEPAGE: http://www.regione.calabria.it/

Url delle pagineUrl delle pagine

PAGINA CON FORM: http://www.regione.calabria.it/urp/index.php?option=com_contact&task=view&contact_id=1&Itemid=166

PAGINA CON INDICE: http://www.regione.calabria.it/index.php?option=com_content&task=section&id=8&Itemid=196

PAGINA CON TABELLA DATI: http://elezioni2014.regione.calabria.it/

PAGINA CON CONTENUTO: http://www.regione.calabria.it/index.php?option=com_content&task=view&id=15796&Itemid=136

NOTA: Il sito non presenta media queries (come rilevato grazie al tool Responsive Inspector), per cui la visualizzazione su dispositivo mobile è identica a quella su desktop, e di conseguenza anche gli errori segnalati da tutti e tre i tool.

Homepage - DesktopHomepage - Desktop AlertsS k i p p e d h e a d i n g l e v e lWhat It MeansA heading level is skipped.Why It MattersHeadings provide document structure and facilitate keyboard navigation by users of assistive technology. These users may be confused or experience difficulty navigating when heading levels are skipped.How to Fix ItRestructure the document headings to ensure that heading levels are not skipped.The Algorithm... in EnglishA heading level is skipped (e.g., an <h1> is followed by an <h3>, with no intermediate <h2>). Note that an <h1> is not required to be the first heading within the document.Standards and Guidelines

Section 508 (o) 1.3.1 Info and Relationships (Level A) 2.4.1 Bypass Blocks (Level A) 2.4.6 Headings and Labels (Level AA)

WAV EWAV E

Wave non rileva errori, ma solo un alert, ossia il salto del livello h2 negli headings. Quello

evidenziato infatti ha livello h3, pur essendo preceduto da un altro di livello h1.

WAV EWAV EHomepage - DesktopHomepage - Desktop

Evidenziati inoltre otto casi di contrasto molto basso.

Homepage - DesktopHomepage - Desktop A C h e c ke rA C h e c ke r

Achecker rileva due errori (oltre a 310

problemi potenziali), che violano

rispettivamente il principio di

u t i l i z z a b i l i t à e quello di

c o m p r e n s i b i l i t à :

2.4 navigabile Header nesting -

header following h1 is incorrect.

3.3 assistenza nell'inserimento

Label text is empty.

M AU V EM AU V E

Mauve rileva un totale di 53 errori (52 di livello AA e 1 di livello A).

Gli errori riguardano:-Using percent for font sizes-Using em units for font sizes

-Using h1-h6 to identify headings

Homepage - DesktopHomepage - Desktop

Form - DesktopForm - Desktop WAV EWAV E

Wave rileva 1 errore e 5 alerts. In questa pagina evidenzio l'errore. Per gli alerts, si veda la slide

che segue.

Linked image missing alternative textWhat It MeansAn image without alternative text results in an empty link.Why It MattersImages that are the only thing within a link must have descriptive alternative text. If an image is within a link that contains no text and that image does not provide alternative text, a screen reader has no content to present to the user regarding the function of the link.How to Fix ItAdd appropriate alternative text that presents the content of the image and/or the function of the link.The Algorithm... in EnglishAn image without alternative text (missing alt attribute or an alt value that is null/empty or only space characters) is within a link that contains no text and no images with alternative text.Standards and Guidelines Section 508 (a) 1.1.1 Non-text Content (Level A) 2.4.4 Link Purpose (In Context) (Level A)

Form - DesktopForm - Desktop WAV EWAV E

1 – Fieldset missing legend (utile per utenti che facciano uso di screenreaders)

1.1.1 1.3.1 2.4.6 3.3.2

2 – Missing first level heading (l'uso degli headings è importante per la navigazione

da parte di utenti che facciano uso di tecnologie assistive, in quanto forniscono

anche informazioni di tipo semantico e visuale al documento)

1.3.1 2.4.6

Wave evidenzia inoltre 5 casi di contrasto molto basso (cfr Home)

Form - DesktopForm - Desktop A C h e c ke rA C h e c ke r

Achecker rileva due errori (oltre a 135 problemi

potenziali), che violano rispettivamente il principio di p e r c e p i b i l i t à e quello di

c o m p r e n s i b i l i t à :

1.1 alternative testualiImage used as anchor is

missing valid Alt text.

3.3 assistenza nell'inserimento

Label text is empty.

Form - DesktopForm - Desktop M AU V EM AU V E

Mauve rileva 132 errori (120 di livello AA e 12 di livello A) e 3 warnings.Gli errori riguardano:

- Using percents for font sizes- Using em units for font sizes

- Providing link text that describes the purpose of a link for anchor elements- Providing a description for groups of form controls using fieldset and legend elements

- Using h1-h6 to identify headingsIl warning invece:

- Using alt attributes on img elements

Indice - DesktopIndice - Desktop WAV EWAV E

Wave non rileva errori, ma solo un alert,che riguarda (come nella

homepage, cfr slide 3) la gerarchia tra gli

headings: anche qui viene rilevato un

s k i p p e d h e a d i n g l e v e l .

1.3.1 2.4.1 2.4.6

Anche in questa pagina sono rilevati casi (x8) di contrasto

molto basso.

Indice - DesktopIndice - Desktop A C h e c ke rA C h e c ke r

Achecker rileva un errore (oltre a 272 problemi potenziali), che viola il principio di c o m p r e n s i b i l i t à :

3.3 assistenza nell'inserimento Label text is empty.

(si tratta dello stesso problema rilevato nella homepage, per il quale cfr slide 5)

Indice - DesktopIndice - Desktop M AU V EM AU V E

Mauve rileva 401 errori (394 di livello AA e 7 di livello A) e 1 warning.

Gli errori riguardano:- Using percents for font sizes- Using em units for font sizes

Il warning invece:- Using alt attributes on img elements

Tabella - DesktopTabella - Desktop WAV EWAV E E m p t y l i n kWhat It MeansA link contains no text.Why It MattersIf a link contains no text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users.How to Fix ItRemove the empty link or provide text within the link that describes the functionality and/or target of that link.The Algorithm... in EnglishAn anchor element has an href attribute, but contains no text (or only spaces) and no images with alternative text.Standards and Guidelines2.4.4 Link Purpose (In Context) (Level A)

Wave rileva un errore (empty link) e numerosi alerts, che hanno a che fare con ridondanza o di link (1) o di testo (2).

1

2

Il testo dell'attributo title è identico al testo stesso.

Due link adiacenti rimandano alla medesima pagina.

Tabella - DesktopTabella - Desktop A C h e c ke rA C h e c ke rAchecker rileva due errori

(oltre a 45 problemi potenziali), che violano

rispettivamente il principio di p e r c e p i b i l i t à e quello di

u t i l i z z a b i l i t à :

1.4 distinguibileThe contrast between the

colour of text and its background for the element

is not sufficient to meet WCAG2.0 Level AA.

2.4 navigabile Anchor contain no text.

Tabella - DesktopTabella - Desktop M AU V EM AU V E

Mauve rileva un totale di 43 errori (42 di livello AA e 1 di livello A) e 1 warning.

Gli errori riguardano:- Using percents for font sizes- Using em units for font sizes

- Providing link text that describes the purpose of a link for anchor elements

Il warning invece:- Using the summary attribute of the table element to give an overview of data tables

Contenuto - DesktopContenuto - Desktop WAV EWAV E

Wave non rileva errori; l'unico alert riguarda uno skipped heading level (lo stesso rilevato nelle pagine già analizzate, ad eccezione della pagina con tabella).

Contenuto - DesktopContenuto - Desktop A C h e c ke rA C h e c ke r

Achecker rileva un solo errore (oltre a 272 problemi potenziali), che viola il principio di c o m p r e n s i b i l i t à :

3.3 assistenza nell'inserimentoLabel text is empty

(si tratta dello stesso problema rilevato nella homepage, per il quale cfr slide 5)

Contenuto - DesktopContenuto - Desktop M AU V EM AU V E

Mauve rileva un totale 29 errori (livello AA) e un totale di 3 warnings.

Gli errori riguardano:- Using percents for font sizes- Using em units for font sizes

Il warning invece:- Using alt attributes on img elements

Risultati dell'analisiRisultati dell'analisi

GUIDELINES VIOLATEGUIDELINES VIOLATE HOMEPAGEHOMEPAGE FORMFORM INDICEINDICE TABELLA DATITABELLA DATI CONTENUTOCONTENUTO

percepibilitàpercepibilità

1.4 distinguibileem/percents for font sizes

em/percents for font sizes

em/percents for font sizes

low contrast; em/percents for font sizes

em/percents for font sizes

1.1 alternative testuali

linked image missing

alternative text

linked image missing

alternative text

utilizzabilitàutilizzabilità 2.4 navigabile header nestingempty link;

anchor contain no text

comprensibilitàcomprensibilità3.3 assistenza

nell'inserimentoempty label

textempty label

textempty label

textempty label

text

Confronto tra i toolConfronto tra i tool

WAVE – tool di facile utilizzo, che offre informazioni chiare ed intuitivamente comprensibili. Restituisce infatti la schermata della pagina con annotati gli elementi problematici, suddividendoli in ben definite categorie. Per ogni errore/alert/feature etc, si ha la possibilità, dopo averli identificati chiaramente nella pagina, di approfondire la natura del problema, grazie a un dettagliato riquadro informativo che contiene anche suggerimenti per la sua riparazione. Molto utile la possibilità immediata di visualizzare la porzione di codice html relativa all'elemento in questione.

ACHECKER – dopo l'inserimento dell'indirizzo della pagina da analizzare (preciso che le possibilità di input sono tre: web page url, html file upload, paste html markup), il tool offre come output un registro delle violazioni raggruppate in base alla guideline violata (c'è anche la possibilità di raggrupparle in base al numero di riga del codice). È positivo il fatto che sia immediatamente chiara quale sia la guideline non rispettata; non così scrupolosa è l'attenzione dedicata ai suggerimenti per la riparazione. Infine, il riferimento al codice html non è altrettanto immediato che nel tool WAVE, essendo talvolta anche incompleto.

MAUVE – come ACHECKER, offre la possibilità di scegliere tra diversi tipi di input, di selezionare le linee guida di riferimento, ed inoltre – elemento che lo differenzia dai due precedenti – di scegliere uno user agent. Offre come output la segnalazione del totale degli errori e/o di eventuali warnings, rispettivamente selezionati con colore rosso e giallo, ripartiti unicamente in base al loro livello (A, AA); segue il codice html della pagina con errori e/o warnings, evidenziati nel colore caratteristico prima dell'elemento del codice che li riguarda. L'informazione è così, a mio parere, più frammentata; inoltre il conteggio si riferisce alla totalità dei casi problematici e non al totale delle guidelines violate (quindi il totale degli errori può riferirsi anche ad un'unica violazione).