Guida alla costruzione di un Web accessibile.


Definizione di principio di accessibilità

Costruire un'interfaccia il cui uso sia accessibile a tutti. Un'interfaccia che dunque non faccia uso di tecnologie il cui uso implichi attrezzature o software particolarmente costosi, complessi o con caratteristiche che ne impediscono l'uso anche solo ad alcuni. Garantire l'accesso alle informazioni di tipo pubblico senza alcun limite o discriminazione verso gruppi o individui. L'informazione vuole essere libera: appartiene a tutto il mondo, essa è prodotta da e per tutto il mondo e l'accesso all'informazione non deve più essere diritto esclusivo di un'elite o di un gruppo privilegiato.

Tommaso Tozzi

Struttura, usabilità e navigabilità

Le indicazioni riportate rispettano, in grossa parte, quanto suggerito dal W3C a livello di Priority 1 che è il livello di base senza il quale uno o più gruppi di utenti troveranno impossibile accedere all'informazione del documento.

Dedica qualche tempo alla fase di progettazione di un sito, alla 'strutturà, ai contenuti e alle tappe di sviluppo. Occupati del layout grafico quando hai già ben determinato lo scopo di un lavoro.

Nel caso non riuscissi a rendere il tuo sito accessibile, o non volessi toccare la struttura delle pagine provvedi a crearene una versione alternativa ed accessibile. Questo ti permetterà con poco lavoro in più di ottenere un elevato grado di accessibilità. Cerca di aggiornare regolarmente anche questa versione.

Evitare codice proprietario non conforme agli standard del W3C, non utilizzare codice non uniformemente interpretato (ad esempio adottare l'ascii-standard ed evitare vocali accentate ecc. ); allo stesso modo non adottare alcun tipo di tecnologia non universalmente diffusa. A questo proposito accertati in fase di salvataggio del lavoro in html che lo standard della pagina web prodotta sia del tipo ISO-9660 ovvero nomina i files tramite stringhe lunghe non più di 8 lettere (possibilmente minuscole) e la cui estensione sia di 3 cifre (quindi ad esempio htm e non html).

Evitare di ottimizzare le pagine per una specifica versione di browser o risoluzione video.

Fai molta attenzione alle informazioni posizionate in alto e a sinistra dello schermo.

Inserisci sempre informazioni sugli aggiornamenti delle pagine e sul come contattare il responsabile delle stesse. Valuta attentamente i tempi di caricamento delle tue pagine, e considera che spesso gli utenti che visitano un sito: sono alla ricerca di qualcosa di preciso; non conoscono la struttura del sito né della pagina; non hanno molto tempo da dedicare alla visione di ogni pagina; non amano i lunghi tempi di attesa per download di una pagina.

Per i collegamenti - links - usare un testo che abbia senso anche se letto fuori dal contesto e in successione (ad esempio, non usare "clicca qui") oppure dove non è possibile utlizzare l'attributo title per renderlo comunque significativo; evitare di mettere links adiacenti e nel caso delimitarli e separarli da spazi e caratteri di testo ricordandosi che la lettura di una pagina web viene spesso effettuata a scansione alla ricerca di parole chiave.

Utilizzare quando possibile valori relativi e non assoluti.

Qualora sia realizzata una versione accessibile del sito collegala come da esempio che segue all'interno della sezione HEAD con il marcatore LINK e gli attributi AURAL, BRAILLE e TTY che facilitano l'indirizzamento verso la pagina accessibile correttamente interpratibile rispettivamente da software di sintesi, stampante Braille e telescrivente

<LINK TITLE="versione accessibile" HREF="file.htm" MEDIA="aural, Braille, tty">

Non scrivere pagine più pesanti di 32 Kb (codice e oggetti inclusi); allo stesso modo fare attenzione a non includere oggetti nella pagina da scaricare troppo pesanti e specificare in ogni caso la natura - estensione - degli oggetti stessi; semplifica il più possibile la stampa del documento per consentirne la lettura off-line.

Utilizzare URL facili da memorizzare e mantenerli costante nel tempo.

Fornire messaggi di errore significativi ed utili per proseguire la navigazione.

Fornire dove possibile ogni pagina di motore di ricerca interno, mappa e barra di navigazione con collegamenti alle altre sezioni del sito.

Utilizzare metafore (ad esempio utilizzo delle icone) in maniera coerente ed in una forma presumibilmente riconoscibile dall'utenza finale.

Scrivere title molto pertinenti e significativi (non utilizzare più di 60 caratteri).

Utilizzare opportunamente il tag di descrizione (deve essere non superiore a 120 caratteri) e il tag keywords con le parole chiavi separate da virgole evitando quelle di uso comune (non più di 150 caratteri in totale)

<META NAME="KeyWords" CONTENT="accessibilita, disabili, world wide web">
<META NAME="Description" CONTENT="Sviluppo del portale sull'accessibilità delle risorse web">

Non utilizzare frames (nel caso titolare correttamente i frames e provvedere a fornire una lettura alternativa a quella a cornice con NOFRAMES; accorgimento simile può essere adottato nel caso di SCRIPT con il tag NOSCRIPT).

Fare il sito il meno profondo possibile.

Distinguere fra struttura e presentazione ovvero: nidificare in maniera correttamente gerarchica gli elementi headers (esempio <h1>) che dovrebbero servire per identificare tramite una struttura ad albero la struttura del documento e non per mettere in risalto quà e là del testo per la stessa ragione codificare la struttura e i componenti di una lista con gli elementi appropriati (ul, li, ecc.) identificare le citazioni con gli elementi Q e BLOCKQUOTE in HTML, evitando invece di usare questi ultimi per creare effetti di rientro del testo; per dare enfasi strutturale a parti del testo usare EM oppure STRONG per evidenziare del testo usare BIG e per il fine opposto SMALL

<strong>PAROLA DA ENFATIZZARE A LIVELLO DI STRUTTURA</strong>
<small>testo reso più piccolo a livello di presentazione</small>

Può tornare utile adoperare i fogli di stile per razionalizzare e snellire il codice ma è bene ricordare che non tutti i browsers li supportano anche se esistono riferimenti tecnici per cercare di rendere i fogli stile maggiormente accessibili

Permettere di accedere da tastiera ai vari oggetti e links della pagina anche attraverso appositi comandi per abbreviazioni da tastiera

<A accesskey="D" href="doc.html" hreflang="it" title="documentazione tecnica in linea">documentazione</A>

Adottare tutti gli accorgimenti necessari per salire nel ranking dei motori di ricerca ~ strano.net/chaos

| torna su |

Scelta dei colori

Garantire un buon contrasto tra testo e sfondo ovvero assicurarsi che testo e grafica siano percepibili e comprensibili anche se visualizzati senza colori e comunque non delegare ai colori contenuti informativi ricordandoti che non tutti i browser supportano i colori con nome e quindi è necessario attribuire al valore dell'attributo - da scrivere come tutti gli attributi tra apici un valore esadecimale. A causa di numerose patologie non è spesso possibile per molte persone vedere correttamente i colori mentre è vero per tutt* che con l'invecchiamento gli occhi diventano meno sensibili al colore blu così come il comune abbinamento elettrico rosso-blu, rosso-viola può provocare comunemente un fastidioso seppur intrigante effetto 3D. In prospettiva tenere di conto della gestione del colore dei CSS: oltre a gestire in modo molto più preciso il colore (di background, dei link, delle scrollbar e delle parti di una tabella), i moduli in progress di CSS3 stabiliscono nuove proprietà come il "rendering-intent", tramite il quale sarà possibile per il designer forzare uno specifico profilo di colore sul client diverso da quello di default [ http://www.w3.org/TR/css3-color/].

| torna su |

Scelta dei caratteri e loro leggibilità

E' bene ricordarsi che Times e Courier sono gli unici due font correttamente adoperati sia da piattaforme Mac che PC tanto che spesso si adopera il trucco di assegnare una serie di font diverse in successione e separate da virgole come valori dell'attributo FONT al fine di sperare di vedere adottato dal browser una delle FONT scelte; viceversa specialmente per i monitor a bassa risoluzione sono i caratteri "sans serif" a risultare più leggibili, sempre i caratteri "sans serif" sembrano essere preferiti sia da lettori molto anziani ma anche molto giovani.

Per assicurare la leggibilità dei caratteri è importante ricordarsi di attribuire una grandezza appropriata agli stessi, così come un'interlinea ed una crenatura appropriata.

| torna su |

Aspetto linguistico

Specificare lo scioglimento di ogni abbreviazione o acronimo nel documento laddove compare per la prima volta attraverso i marcatori ABBR e ACRONYM e l'attributo TITLE

<ACRONYM title="World Wide Web">WWW</ACRONYM>

Tentare di tradurre la propria pagina in più lingue e dove possibile utilizzare una variabile di ambiente CGI per presentare la codifica della preferenza linguistica dell'utente

Identificare i linguaggi naturali utilizzati nel documento

<HTML lang="it"> ....documento scritto prevalentemente in lingua italiana... <SPAN lang="fr">je ne sais quoi</SPAN> </HTML>

Di seguito i codici che identificano i linguaggi naturali secondo lo standard ISO 639:

aa Afar - ab Abkhazian - af Afrikaans - am Amharic - ar Arabic - as Assamese - ay Aymara - az Azerbaijani - ba Bashkir - be Byelorussian - bg Bulgarian - bh Bihari - bi Bislama - bn Bengali; Bangla - bo Tibetan - br Breton - ca Catalan - co Corsican - cs Czech - cy Welsh - da Danish - de German - dz Bhutani - el Greek - en English - eo Esperanto - es Spanish - et Estonian - eu Basque - fa Persian - fi Finnish - fj Fiji - fo Faeroese - fr French - fy Frisian - ga Irish - gd Scots Gaelic - gl Galician - gn Guarani - gu Gujarati - ha Hausa - hi Hindi - hr Croatian - hu Hungarian - hy Armenian - ia Interlingua - ie Interlingue - ik Inupiak - in Indonesian - is Icelandic - it Italian - iw Hebrew - ja Japanese - ji Yiddish - jw Javanese - ka Georgian - kk Kazakh - kl Greenlandic - km Cambodian - kn Kannada - ko Korean - ks Kashmiri - ku Kurdish - ky Kirghiz - la Latin - ln Lingala - lo Laothian - lt Lithuanian - lv Latvian, Lettish - mg Malagasy - mi Maori - mk Macedonian - ml Malayalam - mn Mongolian - mo Moldavian - mr Marathi - ms Malay - mt Maltese - my Burmese - na Nauru - ne Nepali - nl Dutch - no Norwegian - oc Occitan - om (Afan) Oromo - or Oriya - pa Punjabi - pl Polish - ps Pashto, Pushto - pt Portuguese - qu Quechua - rm Rhaeto-Romance - rn Kirundi - ro Romanian - ru Russian - rw Kinyarwanda - sa Sanskrit - sd Sindhi - sg Sangro - sh Serbo-Croatian - si Singhalese - sk Slovak - sl Slovenian - sm Samoan - sn Shona - so Somali - sq Albanian - sr Serbian - ss Siswati - st Sesotho - su Sundanese - sv Swedish - sw Swahili - ta Tamil - te Telugu - tg Tajik - th Thai - ti Tigrinya - tk Turkmen - tl Tagalog - tn Setswana - to Tonga - tr Turkish - ts Tsonga - tt Tatar - tw Twi - uk Ukrainian - ur Urdu - uz Uzbek - vi Vietnamese - vo Volapuk - wo Wolof - xh Xhosa - yo Yoruba - zh Chinese - zu Zulu

| torna su |

Aggiunte di oggetti di vario tipo

se si vuole o si deve aggiungere una versione grafica anteporre al testo di una pagina un sommario che ne descrive i contenuti e nel quale sia possibile individuare facilmente l'eventuale opzione per la pagina accessibile (qualora si sia scelto di fare un sito con doppia versione, accessibile e non) prevedere anche una pagina solo testo ed accertarsi che l'utente possa passare sempre facilmente dalla versione solo testo alle pagine FULL e viceversa

se si vuole o si deve aggiungere una immagine, AREA, applet, script od oggetto di programmazione evitare di mettere immagini affiancate; fornire il testo alternativo attraverso l'attributo alt, attraverso l'attributo title o all'interno del contenuto di OBJECT
Evitare di utilizzare il nome dell'immagine e le dimensioni nell'attributo ALT.

Non usare più immagini di quante non ne servano, e cercare di riutilizzarle più volte fra/nelle pagine del sito. Cercare di limitare l'uso di immagini ad alta risoluzione che appesantiscono la pagina aumentando i tempi di download ed in ogni caso specificare larghezza ed altezza delle stesse e nel caso abbiano funzione di collegamento ipertestuale accertati che tale funzione sia compresa facilmente. Accertarsi che le dimensioni dell'immagine siano specificate dagli appositi attributi e che siano equivalenti ad essi.

<IMG SRC="path/file.x" ALT="breve descrizione" width="77" height="69">
<OBJECT TITLE="breve descrizione"> Descrizione immagine od oggetto </OBJECT>.

Dove necessario realizzare una long description con un D-link (Link ad una pagina di solo testo che descrive l'oggetto individuato da una "D")

<IMG src="immagine.gif" alt="breve descrizione immagine" longdesc="descrizione.html" width="77" height="69">
<A href="descrizione.html" title="D link">[D]</A>

Non utilizzare gif animate, refresh, redirect, marquee, pop-up, blkink o altri oggetti, comandi, applicazioni o tag che provocano disturbo e movimenti inaspettati nelle pagine. In particolare evitare animazioni con frequenze fra 2 e 5 "battiti" al secondo particolarmente disturbanti ed anche pericolose per soggetti epilettici. Evitare di dare troppa enfasi a porzioni della pagina senza serie motivazioni.

In alcuni casi particolari può risultare utile realizzare un filmato in che tramite il "linguaggio dei segni" rappresenti il filmato o la comunicazione altrimenti incomprensibile per chi - persona sorda - conosce solo suddetto linguaggio.

se si vuole o si deve aggiungere una versione XML controllare le caratteristiche di accessibilità dipendenti dal relativo foglio di stile; nel DTD assicurarsi di associare una descrizione agli elementi che la necessitano

se si vuole o si deve aggiungere una mappa cliccabile prevedere che ci debba essere un metodo alternativo di accesso, ad esempio con una lista di link sotto la stessa e un testo alternativo

se si vuole o si deve aggiungere una audioclip oppure video provvedi a commentarli in modo corretto con l'attributo ALT e alla realizzazione di un testo della parte parlata ad uso delle persone prive dell'udito, e nel caso di un video un file audio, in cui un narratore illustra cosa avviene nel filmato in maniera sincronizzata rispetto al filmato stesso ad uso di persone ipovedenti, in entrambi i casi fornire equivalente testuale

se si vuole o si deve aggiungere una form assicurarsi che i campi di input siano pre-compilati da testo di esempio. Se utilizzi una form complessa per ottenere informazioni dettagliate dall'utente, prevedi anche una versione txt da scaricare, compilare e inviare via email in modo da consentire la compilazione del modulo in un secondo momento e/o anche ai client che non gestiscono i form.

<TEXTAREA name=nome rows="20" cols="80"> per favore inserisci il tuo nome qui. </TEXTAREA>
<INPUT type="submit" value="Send"><INPUT type="reset">
</P>
</FORM>

se si vuole o si deve aggiungere una tabella non utilizzare tabelle per formattare il testo; identificare le intestazioni di righe e colonne ed usare marcatori per associare le caselle di dati e le celle di intestazioni

Se utilizzi una tabella in modo proprio, ossia per tabulare dei dati, utilizza i seguenti elementi:

cerca di non superare le 79 colonne.
Questi accorgimenti ti permetteranno di ottenere una corretta presentazione dei dati anche in molti browser che non supportano le tabelle. Se puoi inserisci un link ad una descrizione letterale dei dati inseriti in tabella.

Se utilizzi le tabelle impropriamente, per creare layout, non usare markup strutturali come TH, Hn, ecc, inserisci una didascalia che comunica che la tabella è usata per il layout. Evita riferimenti spaziali all'interno della tabella (Es. colonna a destra, in alto, o qui sotto, ecc). Nel caso la tabella sia a larghezza fissa non farla più larga di 585 pixel e centrala sulla pagina.

I dati in forma di tabella possono essere rappresentati anche tramite testo preformattato utilizzando l'accortezza di utilizzare spazi e non tabulazioni visto che quest'ultime variano da client a client.

<TABLE border="1" summary="descrizione della tabella"> <CAPTION>titolo della tabella</CAPTION>
<TR>
<TH id="header1">nome prima colonna</TH> <TH id="header2">nome seconda colonna</TH>
<TR>
<TD headers="header1">dato prima colonna</TD> <TD headers="header2">dato seconda colonna</TD>
<TR>
<TD headers="header1">altro dato prima colonna</TD> <TD headers="header2">altro dato seconda colonna</TD>
</TABLE>

- se si vuole o si deve aggiungere ascii-art fornire la possibilità di saltarla e se importanti fornire una descrizione (D) link

in caso di plug-in aggiungere l'attributo pluginspage per creare un collegamento al sito da cui scaricare appunto il plug-in nel caso non fosse già installato sulla macchina

| torna su |

Descrizione delle risorse in Rete

Un possibile, semplice ma efficace standard di descrizione delle risorse in Rete è il seguente:

titolo - autore -
descrizione
indirizzo di approfondimento

dove il titolo dovrebbe essere una stringa corta che rappresenti significativamente la risorsa descritta, l'autore chi ha prodotto la risorsa descritta rappresentato attraverso il suo indirizzo e protocollo di Rete, la descrizione corrispondente a poche righe con le quali si riesca ad illustrare quanto descritto nel nome e l'indirizzo di approfondimento gli estremi, bibliografici, di Rete eccetera necessari per approfondire l'argomento trattato nella descrizione

| torna su |

Controlli sul lavoro svolto

Controllare il lavoro svolto con tutti i tipi di browser conosciuti ed attraverso connessioni Internet di vario tipo e qualità; per controllare se i colori scelti sono intelleggibili ai più controllare se la pagina è leggibile in bianco e nero e a tonalità di grigio. Analizzare attentamente anche i log del sito realizzato e far svolgere periodicamente agli utenti finali questionari sul livello di usabilità del sito stesso.

Controllare il lavoro fatto, usare degli strumenti di valutazione (uno per tutti, il più severo: http://www.cast.org/bobby) e dei browser in modo testo come Lynx oppure disabilitando tutte le opzioni avanzate dal consueto browser di riferimento (magari anche con monitor di vario tipo, a varia risoluzione ed anche monocromatici) per controllare l'accessibilità in particolare controllare il lavoro fatto anche con uno schermo a 640x480 (la definizione che normalmente usano gli ipovedenti) e scegliere la modalità di visualizzazione caratteri "molto grande" con Internet Explorer, oppure ingrandire almeno 3-4 volte di seguito con Netscape o altri browsers, esplorare la pagina con il tasto TAB per vedere se i LINKS (e la loro successione) sono facilmente comprensibili.

Utilizzare demo di screen reader come jaws ~ http://www.freedomscientific.com/fs_downloads/jaws_form.asp che consente di esplorare in voce e in Braille il contenuto dello schermo ed emulatori come Vischeck [ http://vischeck.com/daltonize/runDaltonize.php] [ http://vischeck.com/vischeck/vischeckURL.php], che propone un interessante simulatore di daltonismo, utile per selezionare tonalità nella progettazione dei siti.

| torna su |

HTML 4

all'interno delle specifiche dell'html4 ci sono molte nuove specifiche che intendono facilitare l'accessibilità del web, bisognerà comunque vedere che tipo di diffusione avranno i browser che recepiranno tale standard e tutto ciò comunque non risolverà il problema di chi continuerà, per una ragione o un'altra, ad usare browsers di vecchio tipo.

Alcuni esempi:
| torna su |

CSS2

I fogli stile del tipo CSS2 ~ www.w3.org/TR/1998/REC-CSS2-19980512 possono veramente tornare utili per realizzare siti che soddisfano esigenze diverse per la visione a schermo, lettura con media specifici come lettori vocali e stampa.
CSS2 quindi come strumento per realizzare codice pulito, standard ed accessibile per un sito la cui formattazione è comandata da un unico file detto appunto foglio di stile ed in cui ci possono essere riferimenti per adattare la pagina a finalità di proiezione, lettura vocale, lettura braille, stampa, stampa braille, visione a schermo per visori normali ma anche molto piccoli, televisioni, telescriventi.
Il codice che segue ad esempio offre la possibilità di far eseguire un file audio dopo l'interpretazione di un tag.


@media aural {
BLOCKQUOTE:after { content: url("voice-description.wav") }
}

Ancora, speak-header permette di specificare in che maniera gli headers delle tabelle devono essere lette a voce, così come un'intera sezione dei CSS2, denominata "aural style sheets" permette di gestire la lettura audio delle singole sezioni del sito in maniera molto specifica.
A titolo di esempio riportiamo i valori base consigliati dal W3Consortium per guidare rispettivamente la stampa e la lettura a voce di un documento attraverso un foglio stile di tipo CSS2.


@media print {
@page { margin: 10% }
H1, H2, H3,
H4, H5, H6 { page-break-after: avoid; page-break-inside: avoid }
BLOCKQUOTE,
PRE { page-break-inside: avoid }
UL, OL, DL { page-break-before: avoid }
}

@media speech {
H1, H2, H3,
H4, H5, H6 { voice-family: paul, male; stress: 20; richness: 90 }
H1 { pitch: x-low; pitch-range: 90 }
H2 { pitch: x-low; pitch-range: 80 }
H3 { pitch: low; pitch-range: 70 }
H4 { pitch: medium; pitch-range: 60 }
H5 { pitch: medium; pitch-range: 50 }
H6 { pitch: medium; pitch-range: 40 }
LI, DT, DD { pitch: medium; richness: 60 }
DT { stress: 80 }
PRE, CODE, TT { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
EM { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
STRONG { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
DFN { pitch: high; pitch-range: 60; stress: 60 }
S, STRIKE { richness: 0 }
I { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
B { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
U { richness: 0 }
A:link { voice-family: harry, male }
A:visited { voice-family: betty, female }
A:active { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}

| torna su |

WAP

I telefonini hanno requisiti diversi sia per quanto riguarda la larghezza di banda che la capacità di elaborazione. Il WAP Forum ha quindi pensato a WML (Wireless Mark-up Language), un linguaggio basato su XML per formattare il testo e permettere la navigazione tra documenti WML differenti e tra parti di un singolo documento. Si può considerare WML come un'HMTL più pulito e semplificato.
Il tag <p> delimita un paragrafo. Deve essere usato per mostrare qualsiasi testo si voglia rendere visibile.
Alcuni elementi tradizionali utilizzati per l'impaginazione (em, i, b, small, etc) sono supportati, così come le tabelle con la familiare sintassi HTML. br è supportato ma alla maniera xml ovvero <br />

Vedi anche collegamento a Wireless Markup Language (WML) Document Type Definition ~ www.wapforum.org/DTD/wml_1.1.xml

note su documenti XML

Alcune regole che rendono un documento XML ben impostato sono:


Secondo molte persone, l'XML ha serie possibilità di rendere finalmente la separazione tra contenuto e presentazione una realtà. Per approfondire l'argomento XML è consigliabile consultare il sito del W3Consortium ~ www.w3c.org oppure documentazione specifica in merito quale XML and Accessibility in lingua inglese di Daniel Dardailler

| torna al menù principale |