I 22 REQUISITI ALLA MIA MANIERA I FAMOSI, O FAMIGERATI, 22 REQUISITI TECNICI DI ACCESSIBILITÀ DELLE APPLICAZIONI BASATE SU

TECNOLOGIE INTERNET, SPIEGATI SENZA PRENDERSI TROPPO SUL SERIO.

Marco Bertoni – www.semplicemente.org – marco@semplicemente.org

Marco Bertoni I 22 requisiti alla mia maniera 2

Versione 1.0

Avvertenza: le affermazioni presenti in questo documento sono idee e opinioni

personali dell’autore (che è un mentecatto). Per cui non fidatevi di lui e leggete

bene il testo originale dei requisiti presente nell’Allegato A1 del Decreto

Ministeriale 8 luglio 2005.

Quest’opera è rilasciata nei termini della licenza Creative Commons

Attribuzione-Non commerciale-Condividi allo stesso modo 2.5 Italia, la cui

versione integrale e utile ai fini legali è disponibile all’URL:

http://creativecommons.org/licenses/by-nc-sa/2.5/it/legalcode.

1 http://www.pubbliaccesso.gov.it/normative/DM080705-A.htm

Marco Bertoni I 22 requisiti alla mia maniera 3

SOMMARIO Una breve premessa (seriosa) ............................................................................................. 4

Uno ................................................................................................................................................. 5

Due ................................................................................................................................................. 5

Tre .................................................................................................................................................. 6

Quattro ......................................................................................................................................... 6

Cinque ........................................................................................................................................... 6

Sei ................................................................................................................................................... 7

Sette ............................................................................................................................................... 7

Otto ................................................................................................................................................ 7

Nove ............................................................................................................................................... 8

Dieci ............................................................................................................................................... 9

Undici ............................................................................................................................................ 9

Dodici ............................................................................................................................................ 9

Tredici ......................................................................................................................................... 10

Quattordici ................................................................................................................................ 10

Quindici ...................................................................................................................................... 10

Sedici ........................................................................................................................................... 11

Diciassette ................................................................................................................................. 11

Diciotto ....................................................................................................................................... 11

Diciannove ................................................................................................................................ 12

Venti ............................................................................................................................................ 12

Ventuno ...................................................................................................................................... 12

Ventidue ..................................................................................................................................... 13

Marco Bertoni I 22 requisiti alla mia maniera 4

UNA BREVE PREMESSA (SERIOSA) L’oggetto dell’accessibilità sono le persone disabili e la disabilità. Parlare di

accessibilità senza considerare ogni tipologia di disabilità e senza inserire nel

discorso il disabile è futile. L’UCD (User-Centered Design)2 accessibile non

può prescindere dalle peculiarità fisiche, e quindi dalle esigenze, dell’utente

disabile. La bravissima Shawn Lawton Henry ha scritto un bel libro3 in

merito.

La legge 4/20044 non è un sinonimo di accessibilità del Web5. Per ovvi motivi

si rivolge esclusivamente alle pubbliche amministrazioni6, oltre ad avere una

portata più ampia del solo Web. Quando si affronta il discorso sulla legge

4/2004, quindi, gli interlocutori sono le amministrazioni pubbliche italiane e

le aziende private che lavorano con esse.

L’accessibilità in generale, al contrario, si rivolge a chiunque approcci al

Web con responsabilità sociale, dal blogger alla multinazionale.

Un’azienda privata può decidere se perseguire o meno, per sé e per i suoi

clienti privati, una politica di responsabilità sociale. Nessuno può sindacare

questa scelta. Ma per la pubblica amministrazione il discorso cambia. Se

concordiamo sul fatto che le amministrazioni pubbliche esistono per curare

gli interessi della collettività, in particolare fornendo servizi ai cittadini7, e

che un disabile è a tutti gli effetti un cittadino come gli altri, allora è

semplicemente inaccettabile che un’amministrazione discrimini anche una

sola persona utilizzando una tecnologia non accessibile.

Questo testo è rivolto a chiunque affronti i 22 requisiti che questa legge

impone, con la voglia di fare e non di criticare. Lo sport nazionale della critica

distruttiva non mi interessa. Sei d’accordo?

Buona lettura.

2 http://en.wikipedia.org/wiki/User-centered_design 3 http://www.uiaccess.com/accessucd/ 4 http://www.pubbliaccesso.gov.it/normative/legge_20040109_n4.htm 5 Per avere un’idea più completa del significato della parola accessibilità ti consiglio di fare un giro nel sito della Web Accessibility Initiative (WAI) del W3C: http://www.w3.org/WAI/. 6 Se i motivi non ti sono ovvi, prova a immaginare quale sarebbe la reazione se la legge obbligasse tutte le aziende private italiane a produrre siti accessibili. 7 http://it.wikipedia.org/wiki/Amministrazione_pubblica

Marco Bertoni I 22 requisiti alla mia maniera 5

UNO Questo requisito ti chiede di scrivere codice pulito, senza errori sintattici e

semanticamente corretto. Che significa? Significa che bisogna finirla con il

codice spazzatura.

Se hai comprato un CMS8 da migliaia di

euro e pubblichi ancora pagine con

marcatori non chiusi o annidati male,

quintali di tabelle, assenza di

marcatura per i titoli, paragrafi messi li

a caso, elenchi marcati in modo

scorretto e altre amenità, fai causa alla

ditta che te lo ha venduto: ti hanno

fregato.

Se il codice lo scrivi a mano, compra un libro sugli standard9 e auto-formati.

Abbiamo fatto tutti così. Oppure fattelo prestare, così vedrai che

l’accessibilità può essere davvero a costo zero.

E’ sbagliato pensare, come alcuni fanno, che la causa della scarsa applicazione

della Legge 4/2004 sia l’obbligo di utilizzare correttamente i linguaggi

standard del Web. La logica di questa affermazione è quantomeno curiosa.

Sarebbe come dire che se alcuni guidano male l’automobile - o, peggio, hanno

comprato la patente - la colpa è del codice della strada.

Dimenticavo: i pop-corn sono buoni ma i pop-up sono indigesti!

DUE Questo requisito ti proibisce di

utilizzare i frame10.

Diciamolo: i frame sono brutti. Fanno

tanto web anni novanta. E rompono le

scatole agli screen reader11. Roba

vecchia e dannosa insomma. E cosa

dire dei frame in linea (gli iframe)? Ne

ho già parlato in un vecchio articolo12.

8 http://it.wikipedia.org/wiki/Content_management_system 9 Per esempio: http://hpe.pearsoned.it/scheda_opera.php?ID=2441&macrodestinazioneID=&materiaID= 10 http://www.w3.org/TR/html401/present/frames.html 11 http://it.wikipedia.org/wiki/Screen_reader 12 http://www.semplicemente.org/2007/05/la-morte-dei-frame/

Usa pure gli strumenti di

validazione automatica ma

ricorda che la semantica, di

solito, è roba per esseri

umani.

E il Dash? Pardon! l’Ajax? Leggi

questo articolo:

http://www.webaim.org/techniq

ues/ajax/

Marco Bertoni I 22 requisiti alla mia maniera 6

TRE Ogni volta che inserisci nelle tue pagine Web un oggetto non di testo:

un’immagine, un’animazione Flash, un applet Java ecc. devi associare ad esso

un’alternativa testuale equivalente (dove la metti? Nel codice HTML

ovviamente).

Faticoso? Noioso? Forse. Ma di certo non difficile da comprendere.

Attenzione però a non esagerare con i testi alternativi, ho scritto qualche

articolo13 in merito. Un testo alternativo errato è più dannoso

dell’assenza di testi alternativi!

QUATTRO Se elimini la sottolineatura per i collegamenti e li differenzi dal testo normale

solo grazie al colore, puoi creare notevoli problemi a chi è affetto da cecità ai

colori14, che non sarà in grado di distinguerli. Questo è un esempio per

chiarire che non devi usare solo il colore per assegnare significato

all’informazione.

Ovviamente non ti chiedo un’orgia di sottolineature. Solo nei blocchi di testo.

Perché il menu si vede che è un menu e un menu è un menu!

CINQUE Se ti piacciono le gif animate e le scritte lampeggianti … beh … ecco …

contento tu … Ma stai molto attento alla frequenza di lampeggiamento,

altrimenti rischi di danneggiare seriamente chi soffre di epilessia

fotosensibile. Oltre ad infastidire

enormemente tutti noi.

Le ricerche15 dimostrano che finestre

pop-up, banner lampeggianti, colonne

di advertising ecc. sono bellamente e

sistematicamente ignorati dagli utenti.

Lo stesso Nielsen propone un

approccio non etico: making the ad look like content. Ma tu non seguirai

questo consiglio vero?

13 http://www.semplicemente.org/?s=%22testo+alternativo%22 14 http://it.wikipedia.org/wiki/Daltonismo 15 http://www.useit.com/alertbox/banner-blindness.html

Lo so che il cliente ha sempre

ragione, ma se vuole un Luna

Park al posto di un sito, almeno

prova a dissuaderlo.

Marco Bertoni I 22 requisiti alla mia maniera 7

SEI C’è stato un tempo in cui il colore

grigio chiarissimo per il testo andava

di moda sul Web. Bei tempi quelli, se

avevi 10 decimi.

Per fortuna adesso dimensioni e

contrasto sembrano generalmente

migliorati. Sarà che i Web Designer

invecchiano, e la vista cala.

Insomma, comunque sia, devi sempre garantire un adeguato contrasto tra

il testo e lo sfondo.

SETTE Hai presente le mappe immagini16? Usa quelle lato client.

Ma che diavolo sono le mappe lato client? Hai visto la cartina dell’Italia

con le regioni cliccabili? Ecco quella è una mappa immagine lato client: tutte

le informazioni sono incorporate nella pagina HTML. Si utilizza l’elemento

map oppure object17.

OTTO Lo sapevo. Non hai resistito alla tentazione di usare una mappa immagine

lato server18. Ma perché ti complichi la vita? A questo punto devi fornire

all’utente una serie di normali collegamenti, alternativi alla mappa, per

ottenere esattamente le stesse informazioni e gli stessi servizi

raggiungibili interagendo con essa … ma allora … perché creare la mappa?

Ecco, appunto.

Ma che diavolo sono le mappe lato server? Le mappe immagini una volta

erano generate da script CGI19 che risiedevano sul server. Questi script

processavano le coordinate provenienti dal clic dell’utente su un punto

dell’immagine e reindirizzavano all’appropriato URL. Come è facile

immaginare questo processo richiedeva continue connessioni al server. Per

definire la mappa si utilizzava l’attributo ismap di img20.

16 http://en.wikipedia.org/wiki/Image_map 17 http://www.ihip.com/cside.html 18 http://www.w3.org/TR/html401/struct/objects.html#h-13.6.2 19 http://it.wikipedia.org/wiki/Common_Gateway_Interface 20 http://www.ihip.com/

I designer hanno sempre

ragione? E allora cosa ne pensi di

quelli che hanno progettato la

Fiat Duna?

Marco Bertoni I 22 requisiti alla mia maniera 8

NOVE Quando crei una tabella devi sempre utilizzare alcuni elementi e attributi21

(per esempio th, summary, scope ecc.) che ne rendono più semplice la

navigazione da parte di chi usa le tecnologie assistive22.

S’intende che tu dovrai usare le tabelle solo per confrontare categorie

di dati e non per il layout delle pagine … Guarda che sto parlando sul serio!

Davvero! Smettila di ridere!

Eccoti una tabella accessibile:

<table class="tabella-dati" summary="Tabella riassuntiva sulle

tecniche per l'inserimento del testo alternativo" cellpadding="0"

cellspacing="0">

<tr>

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

<th scope="col">Testo alternativo</th>

</tr>

<tr>

<td>Immagine decorativa.</td>

<td>Nullo (<code>alt=""</code>)</td>

</tr>

<tr>

<td>Testo in formato immagine.</td>

<td>Identico al testo contenuto nell’immagine (senza aggiunte o

omissioni).</td>

</tr>

<tr>

<td>Immagine importante per la comprensione del testo.</td>

<td>Descrizione del significato dell’immagine.</td>

</tr>

</table>

21 http://www.w3.org/TR/html401/struct/tables.html#h-11.4 22 http://en.wikipedia.org/wiki/Assistive_technology

Marco Bertoni I 22 requisiti alla mia maniera 9

DIECI Se sei un patito delle tabelle dati, che è

soddisfatto solo quando queste

somigliano alla griglia del Tetris. Se la

parola “semplificare” per te è una

bestemmia. Allora devi usare un

metodo più esplicito per associare le

celle alla/alle loro intestazione/i (gli

attributi id per th e headers per td)23.

UNDICI Usa i fogli di stile (CSS24) e non porcate HTML come font, align, width ecc.

Se non sai di cosa sto parlando, ci sono un milione di ottimi libri

sull’argomento. Ti consiglio la guida pratica25 scritta dagli inventori del

linguaggio. Oppure puoi leggere qualche articolo del sottoscritto26 (anzi puoi

anche partecipare commentando o integrando o insultando i miei articoli).

DODICI Devi fare in modo che il testo possa essere ridimensionato (ingrandito).

Anche con Internet Explorer 6 e precedenti (menu Visualizza > Carattere)27.

Quando il carattere è ingrandito non deve esserci sovrapposizione tra le

diverse parti della pagina. Anche ridimensionando la finestra.

Devi usare un layout liquido (elastico). Perché? Nell’enunciato del requisito si

afferma: “La presentazione e i contenuti testuali di una pagina devono potersi

adattare alle dimensioni della finestra del browser utilizzata dall’utente […]”.

Se la parola presentazione si riferisce al layout allora se ne evince che la legge

impone layout liquidi. Liquido è meglio? Si, ma con buon senso! Attenzione

alle risoluzioni elevate: i blocchi di testo troppo larghi sono poco leggibili.

Una delle prime obiezioni che fu fatta a questo requisito fu che esso non

indica la percentuale di ingrandimento del carattere e la risoluzione dello

schermo minime con le quali testare la conformità. Ti propongo un quiz:

perché considero stupida questa obiezione? Chi da la risposta esatta vince un

aperitivo a Genova, alla Taverna di Zaccaria, quella vicino alla Bottega del

Conte.

23 Un ottimo articolo di approfondimento: http://usability.com.au/resources/tables.cfm 24 http://www.w3.org/Style/CSS/ 25 http://hpe.pearsoned.it/scheda_opera.php?ID=2460&macrodestinazioneID=&materiaID= 26 http://www.semplicemente.org/2007/10/introduzione-ai-css/ 27 Un ottimo articolo di approfondimento: http://www.subvedenti.it/Saggio/Saggio_v2.asp

Se la tua tabella è così

complessa che neppure tu la

comprendi, c’è qualcosa che

non va!

Marco Bertoni I 22 requisiti alla mia maniera 10

TREDICI Lo sapevo. CSS è per te così difficile da imparare che usi ancora le tabelle per

il layout. Sei irrecuperabile. Per

fortuna il legislatore ci ha pensato: se

proprio vuoi usarle in modo

improprio allora fallo, ma nelle tabelle

di impaginazione non usare mai

elementi e attributi propri delle

tabelle dati: non scrivere mai immani

scemenze come summary="tabella di

layout", non inserire mai le celle di

intestazione (th) e tanto meno gli attributi scope, headers ecc.

QUATTORDICI Devi assolutamente associare a tutti i campi di tutti i moduli un’etichetta

(elemento label) perché altrimenti le persone che navigano con tecnologie

assistive potrebbero avere seri problemi nella compilazione.

Se non sai di che parlo leggi questo interessante articolo28.

QUINDICI Un bel po’ di gente naviga con gli script disabilitati. Devi fartene una

ragione. Quindi devi garantire che le tue pagine siano utilizzabili anche da chi

ha disabilitato gli script, gli applet o altra robaccia 2.0.

Ma il legislatore non è folle. Se per

motivi religiosi non puoi fare a meno

dei tuoi script inaccessibili, allora dai

una spiegazione testuale della

funzionalità (che il 15% degli utenti si

perderà) e, come impone il requisito Tre, fornisci un’alternativa testuale

equivalente.

Gli script però non sono il demonio. Basta leggere PPK29 per capire che con

un po’ di competenza si può fare tutto ciò che si vuole.

28 http://www.webaim.org/techniques/forms/controls.php 29http://hpe.pearsoned.it/scheda_opera.php?ID=2358&macrodestinazioneID=&materiaID=117

Hai voluto lo script? Godi solo

con il 2.0? E ora pedala.

Ma davvero usi ancora le

tabelle per il layout? Ho

sentito che all’Ikea assumono,

hai mai pensato di cambiar

mestiere?

Marco Bertoni I 22 requisiti alla mia maniera 11

SEDICI Devi sempre ricordare che non esiste solo il mouse. Ci sono persone che

hanno problemi agli arti superiori e

non possono usare il mouse. Se tu

stesso ti rompessi un braccio (non che

te lo auguri) come faresti a usarlo?

Ecco perché, per esempio, se decidi di

associare ad un oggetto un evento

onmouseover devi associare anche un evento onfocus. Così l’azione sarà

indipendente dal singolo dispositivo30.

DICIASSETTE Devi garantire che le funzionalità (per esempio un menu) e le informazioni (il

testo) presenti negli script, negli applet, nelle animazioni Flash siano

direttamente accessibili alle tecnologie assistive.

Questo significa che devi installare uno screen reader e provare a navigare

all’interno della tua animazione Flash. Se qualche “esperto” ti ha detto che

Flash non può essere accessibile, mandalo al diavolo e digli di leggersi la

letteratura in merito31 e questi articoli32.

DICIOTTO Se pubblichi un video importante devi renderlo accessibile a chi non sente e a

chi non vede.

L’alternativa testuale equivalente può essere:

sincronizzata (sottotitoli e descrizione vocale);

un riassunto testuale;

una semplice etichetta testuale.

Devi decidere quale opzione utilizzare in base all’importanza del video. Chi

decide l’importanza del video? Tu.

Se pensi che sottotitolare un video sia troppo difficile o costoso ti invito a fare

un giro su Webmultimediale33.

30 http://www.quirksmode.org/js/events_pairs.html 31 http://www.adobe.com/accessibility/index.html 32 http://www.semplicemente.org/tag/interfacce/ 33 http://www.webmultimediale.org/

Procurati un paio di guantoni

da pugile, indossali e poi prova

a usare un mouse …

Marco Bertoni I 22 requisiti alla mia maniera 12

DICIANNOVE Lo sai che lo screen reader può leggerti direttamente tutti i collegamenti

presenti in una pagina? Questo è un modo per evitare la noiosa lettura del

testo che precede il collegamento che ti interessa.

Ecco perché il testo dei collegamenti deve essere sempre comprensibile

anche al di fuori del contesto.

Esempi positivi: Domande Frequenti, Versione stampabile, Comunicati

stampa.

Esempi negativi: (clicca) qui, leggi, vai, continua.

Ma non solo: quando cambi pagina lo screen reader legge nuovamente tutto

dall’inizio (e seguendo l’ordine del testo com’è nel codice). Ecco perché devi

inserire nel codice collegamenti che ti consentano di saltare direttamente al

contenuto. Sai che palle altrimenti!

VENTI Se la tua pagina si autodistrugge entro

un tempo prestabilito, mi

raccomando: avverti l’utente

indicando il tempo massimo e

un’alternativa meno ansiogena per il servizio che offri.

Ricorda che persone diverse hanno tempi di riposta diversi.

VENTUNO Ah. Questo è il mio preferito. Ho pure contribuito a correggere un errore

presente nella prima versione dell’enunciato34.

Devi sempre considerare il fatto che per chi ha difficoltà nel controllo dei

dispositivi di puntamento è molto difficile selezionare il collegamento o

il pulsante giusto se sono troppo ravvicinati. Immagina la frustrazione

quando dopo uno sforzo enorme ti scappa il clic sul pulsante sbagliato.

Quando ti fischiano le orecchie, pensa alle maledizioni che ti mandano gli

utenti per questa mania di appiccicare tutto. Saranno per caso carenze

affettive?

La soluzione è semplice: distanziare in modo adeguato pulsanti dei moduli,

campi dei moduli, liste di collegamenti e, in generale, tutti gli oggetti attivi

all’interno della pagina.

34 Si, me la sto tirando un po’.

Ritenta, sarai più fortunato!

Marco Bertoni I 22 requisiti alla mia maniera 13

Io aggiungo che anche un’interlinea superiore a quella predefinita è meglio.

Ma so che non tutti sono d’accordo: evidentemente c’è chi ama i muri di

testo che si vedono così spesso negli orribili portali di molte aziende e

pubbliche amministrazioni italiane.

VENTIDUE Questo requisito non conta. Serve solo ai fannulloni.