Realizzare un portale Web accessibile non significa solo realizzare interfacce, codice e strutture a misura delle esigenze dell'utenza finale ma instaurare con la medesima un rapporto diretto fornendo consigli per una navigazione più semplice ed efficace possibile.
Questa guida è dedicata al circa 1 milione di invalidi motori, 600 mila sordi,
350 mila ciechi, 300 mila persone con insufficienza mentale che vivono in Italia.
A chi ha disabilità sensoriali (difficoltà nel sentire, vedere o parlare), che tocca l'1 percento della popolazione,
all'8-10 percento della popolazione maschile e allo 0,5 percento della popolazione femminile che
soffre di disturbi legati al riconoscimento dei colori, al milione e mezzo di ipovedenti residenti in Italia.
Al milione di disabili motori gravi e allo 0,5-1 percento della popolazione colpita da epilessia.
Ai milioni fra immigrati stranieri e stranieri temporaneamente alloggiati in Italia,
alle persone molte anziane ed ai bambini.
| torna all'indice |
Si può ipotizzare l'accessibilità dell'informazione su Web come un ciclo ricorsivo di condizioni che devono essere tutte soddisfatte indipendentemente dalle caratteristiche sensoriali e tecnologiche della persona o del dispositivo che accede al sito stesso.
La condizione di percezione èquella più importante da soddisfare:
percepire è ciò che riusciamo a recepire come informazione.
A seconda del tipo di dispositivo o di utenza ci sono diverse esigenze di percezione:
ad esempio una finestra di pop-up sarà percepita da una persona vedente
come elemento inserito in un contesto più ampio dato che la finestra
principale con le relative informazioni e funzionalità sarà sempre
visualizzata anche se in background, viceversa per un non-vedente la finestra di
pop-up diventa la sola ed unica informazione che viene percepita in quanto lo
screen-reader interpreta il solo oggetto pop-up ma non nel contesto generale e
quindi le informazioni e le funzionalità contenute nel pop-up diventano
strategiche per il buon proseguimento della navigazione; ancora per un vedente
una pagina Web viene percepita nel suo complesso tutta insieme mentre per un non-vedente
vi è una lettura lineare effettuata dallo screen-reader in alcuni casi
privilegiando l'elenco dei link come lettura iniziale.
L'attenzione è la condizione che ci porta a privilegiare la lettura di
una porzione di una pagina Web piuttosto che un'altra.
Relativamente alle possibilità sensoriali e tecnologiche delle persone e
dei dispositivi e che accedono a una pagina Web alcune porzioni della pagina Web
attraggono maggiormente l'attenzione di altre: per un normodato la parte in alto
a sinistra dello schermo, per una persona non-vedente i link (collegamenti),
per uno spider dei motori di ricerca gli elementi strutturali e le meta-informaizoni del sito.
Un sito Web per essere considerato accessibile è fuor di ogni dubbio che debba essere anche comprensibile dal soggetto-target del sito: ad esempio una comunicazione di lutto dovrà essere associata al colore nero per la cultura nord-occidentale ma viceversa al colore bianco per la cultura cinese, ancora... la scrittura sarà orientata da sinistra a destra ma da destra a sinistra per le persone arabe.
Un sito per essere utilizzabile dovrà essere usufruibile da chiunque e l'interazione dovrà essere garantita per chiunque, indipendentemente dalle caratteristiche sensoriali e tecnologiche della persona o del dispositivo che accede. Ad esempio funzionalità dove è richiesto l'utilizzo del mouse oppure di determinate tecnologie come java oppure flash necessitano di alternative per chi non ha accesso alle suddette tecnologie o non ha la possibilità di utilizzare il mouse. Inoltre alcune caratteristiche di usabilità del sito quali la presenza di una mappa del sito stesso diventano fondamentali per permettere un utilizzo ed un'interazione corretta col sito stesso.
Un sito Web per poter essere considerato accessibile deve farsi apprezzare dall'utente finale di leggibilità; e soprattutto soddisfare le aspettative anche estetiche di chi accede al sito. Non solo, deve anche comunicare un messaggio di qualche tipo che sia di stimolo all'utente finale ed invogliare una ulteriore navigazione sul sito stesso.
Alcuni tratti dell'informazione ospitata su un Web che ambisca ad essere accessibile devono essere originali e fortemente mnemonici a cominciare da nomi ed acronimi utilizzati nel titolo, dominio ed url del sito stesso affinché si faciliti una memorizzazione ma anche una comoda rintracciabilità del sito Web e dell'informazione ospitata anche attraverso un buon posizionamnto del sito sui risultati dei motori di ricerca relativamente ad una selezione di parole chiave considerate strategiche rispetto al proprio target di riferimento.
| torna all'indice |
Stabilire un rapporto di comunicazione diretta con l'utenza finale può diventare la strategia vincente per misurare l'efficacia del proprio portale Web sulla base delle esigenze dell'utenza stessa. Cercare di valutare a posteriori il comportamento degli utenti ed alcune loro prerogative attraverso lo studio delle statistiche è fondamentale ma è altrettanto importante stabilire una comunicazione diretta con gli utenti e dare ai medesimi la possibilità di poter esplicitare i loro apprezzamenti e o lamentele direttamente sul portale stesso. Blog, forum, chat, mailing-list, moduli e quant'altro possono tornare utili in questo senso ma un apposito servizio di helpdesk capace di intercettare ed elaborare le esigenze degli utenti rappresenta indubbiamente la migliore soluzione possibile.
| torna all'indice |
È importante indicare ai propri utenti l'esistenza di ausili ed ausilioteche che possono essere determinanti per migliorare l'efficienza di una navigazione Web soprattutto se in presenza di una disabilità di qualche tipo. Consigli utilissimi in italiano cosí come indicazioni tecniche in inglese possono essere reperite facilmente in Rete per imparare ad utilizzare software di utilizzo comune oppure ausili speciali al meglio delle loro possibilità e su misura delle proprie diverse abilità.
| torna all'indice |
A dispetto delle proibizioni a cui si allude con gli attuali requisiti tecnici della legge Stanca è opportuno permettere la personalizzazione all'utente finale del portale Web attraverso appositi comandi dei fogli stile ma anche attraverso più riconoscibili ed usabili link tradizionali: permettere quindi di accedere ad una versione solo testo per persone cieche, ad una versione con scorciatoie da tastiera (accesskey) per coloro che privilegiano questo approccio, permettere inoltre di variare a schermo dimensione del carattere, contrasti e sfondi per coloro che vengano viceversa penalizzati da dimensioni troppo piccole dei caratteri o da contrasti di colore di un certo tipo. La tecnologia attuale basata su database dl tipo mysql e linguaggi dinamici del tipo php permette indubbiamente un'unica gestione dei contenuti ed una presentazione differenziata (grazie anche ai fogli stile) per le varie esigenze di dispositivi e persone.
| torna all'indice |
Non utilizzare gif animate, refresh, redirect, marquee, pop-up, blink o altri oggetti, comandi, applicazioni o tag che provocano disturbo e movimenti inaspettati nelle pagine. In particolare evitare animazioni con frequenze fra 2 e e 59 Hz particolarmente disturbanti ed anche pericolose per soggetti epilettici nonché mutamenti repentini di oscurità e luce.
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.
Qualora per la fruizione di un servizio erogato in una pagina sia previsto un determinato intervallo di tempo per il compimento di determinate azioni, è necessario avvertire l'utente, indicando anche il tempo massimo utile previsto fornendo funzioni di aiuto come guide in linea e documentazione relativi al funzionamento dell'ambiente.
| torna all'indice |
Utilizzare un linguaggio chiaro ed una sintassi semplice con il minor numero di termini possibili, qualora si renda necessario allegare al documento un glossario tecnico per la spiegazione dei termini di uso specialistico utilizzati nel documento. Scrivere periodi brevi in forma attiva e specificando sempre il soggetto della frase.
| torna all'indice |
Permettere di accedere da tastiera ai vari oggetti e links della pagina anche attraverso appositi comandi per abbreviazioni da tastiera privilegiando le scorciatoie numeriche e fornendo in una pagina apposita la mappatura delle medesime, esempio:
<A accesskey="1" href="doc.html" hreflang="it" title="documentazione tecnica in linea">documentazione</A>.
| torna all'indice |
Dare la possibilità di saltare menù e barre di navigazione andando direttamente ai contenuti della pagina.
Per i collegamenti usare un testo che abbia senso anche se letto fuori dal contesto e in successione (ad esempio: non usare clicca qui).
Identificare i linguaggi naturali utilizzati nel documento, ad esempio:
<HTML lang="it"> ....documento scritto prevalentemente in lingua
italiana... <SPAN lang="fr">je ne sais quoi</SPAN>
</HTML>
Se state usando qualsiasi variante di HTML 4 , cambiate <html>
così (usando il codice della vostra lingua): <html lang="en">
Se state usando qualsiasi variante di XHTML 1.0 , cambiate <html> così
(usando il codice della vostra lingua):
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Se state usando XHTML 1.1 , cambiate <html> così
(sempre inserendo il vostro codice lingua):
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
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
Se si vuole o si deve aggiungere un oggetto non testuale (immagine -
evitare comunque di mettere immagini affiancate - ,AREA, file audio e video,
applet, script od oggetto di programmazione);
fornire testo alternativo significativo attraverso l'attributo alt,
l'attributo title, link a descrizione testuale o all'interno del contenuto di OBJECT, esempio:
<IMG SRC="path/file.x" ALT="breve descrizione" width="77" height="69">
<OBJECT TITLE="breve descrizione"> Descrizione immagine
od oggetto </OBJECT>
<script language="javascript">
...Script...
</script>
<noscript>
<p>testo significativo per funzionalità alternativa</p>
</noscript>
Non create mappe di immagini server-side, ovvero immagini che rispediscono
al server le coordinate esatte di quanto selezionato, per ulteriori elaborazioni.
Se dovete usare mappe di immagini server-side, aggiungetevi, subito sotto, una
barra di navigazione solo testo che includa veri link testuali ad ognuna delle
pagine a cui si accederebbe selezionando ognuno dei punti della mappa di immagini
[approfondisci con le tecniche del W3Consortium sulle mappe server].
Tenere a mente anche la possibilità di emulare le immagini mappate con i CSS:
tramite i CSS è possibile realizzare immagini mappate utilizzando una semplice lista di link.
Se si vuole o si deve aggiungere un modulo
assicurarsi che i campi di input siano pre-compilati da testo di esempio,
che ci sia una sola etichetta per riga con la relativa casella posizionata
adeguatamente (a sinistra per campi testo, textarea e menù a tendina e a destra
per radio button e checkbox), associare in maniera esplicita le etichette ai loro controlli
raggruppando logicamente le informazioni tramite FIELDSET e titolando i
vari gruppi con LEGEND,
orientare la compilazione tramite TABINDEX.
Nella modulistica prodotta fac-simile evitare l'utilizzo di caratteri speciali
come . o _ soprattutto in ripetizione
[approfondisci con le
tecniche del W3Consortium sui moduli
ma anche
approfondisci con la sezione sui moduli della Guida di Mark Pilgrim].
Se si vuole o si deve aggiungere una
tabella non utilizzare tabelle per formattare il testo
(qualora si utilizzino le tabelle a scopo di impaginazione:
assicurarsi che il loro contenuto sia comprensibile quando esse sono lette in modo linearizzato);
usare elementi (marcatori) ed attributi per descrivere i contenuti e per
identificare le intestazioni di righe e colonne all'interno di tabelle di dati.
Se utilizzi una tabella in modo proprio, ossia per tabulare dei dati, utilizza
i seguenti elementi:
il SUMMARY, per fornire una descrizione del contenuto della tabella;
il CAPTION, per fornire un titolo alla tabella;
l'ID all'interno del TH e l'HEADERS all'interno del TD per consentire la
ricostruzione della logica di inserimento dati nella tabella.
il TT per rendere a spaziatura fissa il testo;
il BR all'interno del DT a fine riga per gli spazi non collassabili fra testo.
Se puoi inserisci un link ad una descrizione letterale dei dati inseriti in
tabella, esempio:
<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>
Per approfondimenti vai alla sezione tabelle del W3Consortium
Se si vuole o si deve aggiungere una lista non utilizzare simboli come - o _ per elencare le voci e se utilizzata un'immagine come voce di lista prevedere l'attributo alt con la dicitura 'punto elenco'.
| torna all'indice |
La presentazione e i contenuti testuali di una pagina devono potersi adattare all'interfaccia utilizzata dall'utente senza sovrapposizione degli oggetti presenti o perdita di informazioni tali da rendere incomprensibile il contenuto, anche in caso di ridimensionamento, ingrandimento o riduzione dell'area di visualizzazione e/o dei caratteri; per questa ragione utilizzare quando possibile valori relativi e non assoluti: prevedi e ottimizza fogli di stile specifici per ciascun media (schermo, stampa, ecc.); le unità di misura % ed em sono considerate relative da tutti i maggiori browser ma per adattarsi alle varie esigenze dei browser è consigliabile usare le font-size in percentuale nel body e regolare il resto degli elementi in em. L'unità di misura pt (nominalmente assoluta), dovrebbe essere utilizzata solo per i CSS progettati per la stampa (media=print). Utilizza i CSS destinati alla stampa su carta (media=print), per predisporre documenti stampati altrettanto accessibili e leggibili: caratteri chiari, di dimensioni non inferiori a 14 pt e ben contrastati.
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. 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; il rosso e il verde, sono i colori più problematici per i daltonici;
le tonalità accese e il bianco sono poco riposanti e possono provocare abbagliamento;
va poi ricordato come spesso i colori accesi (bianco compreso),
risultano molto abbaglianti, mentre in alcuni casi quelli tenui vengono mal percepiti.
Le immagini non dovrebbero essere utilizzate come sfondo della pagina, non devono fare da sfondo al testo.
Impostare (anche nei CSS) dimensioni del testo non inferiori al 100%/1em. Arial a detta di molti (anche ipovedenti) è in assoluto il font più leggibile, utilizza il grassetto nei titoli, per brevi parti significative di testo e in caso di tipi di carattere dal tratto sottile. Molte righe di grassetto consecutive possono affaticare la vista. Utilizza perciò il grassetto solo dove veramente necessario; utilizza il corsivo solo nei titoli e nelle citazioni. Molte righe consecutive di corsivo possono affaticare la vista; evita il sottolineato: i browser lo utilizzano generalmente come marcatore dei collegamenti ipertestuali (link); si rischia pertanto l'erronea interpretazione dell'attributo, inoltre la sottolineatura interferisce con la forma di alcuni caratteri (g, j, p, q e y); evita l'uso simultaneo degli attributi. utilizza <strong>...</strong> in luogo di <b>...</b> e <em>...</em> in luogo di <i>...</i> : queste soluzioni permettono l'enfatizzazione universale del testo, a prescindere, cioè, dalla periferica di output utilizzata. L'allineamento del testo a sinistra di norma aiuta la leggibilità, soprattutto quando le righe sono numerose. La giustificazione del testo ovvero la diversa distanza tra le parole può confondere ed affaticare la vista, l'allineamento al centro, utilizzabile per i titoli e per brevissimi elementi significativi del testo, se distribuito su più righe, dovrebbe essere gestito in modo che queste abbiano una lunghezza analoga tra loro. Righe di diversa lunghezza, se allineate al centro, pregiudicano la leggibilità. L'allineamento a destra, utilizzabile per brevissimi e significativi elementi del testo, se distribuito su più righe, dovrebbe essere gestito in modo che queste abbiano una lunghezza analoga. Righe di diversa lunghezza, se allineate a destra, pregiudicano la leggibilità. Righe troppo ravvicinate o troppo distanziate, perdono in accessibilità. La troppa distanza può creare problemi nell'andare a capo, le righe in parte sovrapposte possono pregiudicare la comprensione di alcuni caratteri quali: b, d, f, g, h, j, l, p, q, t, y. Una pagina di contenuti non dovrebbe essere organizzata su più di due colonne. I contenuti testuali delle immagini devono sempre essere chiari e leggibili. Lascia almeno 10-15 px di distanza tra il testo e gli altri contenuti, margini della finestra compresi; la distanza verticale (interlinea) di liste di link sia di almeno 1 em; le distanze orizzontale e verticale tra i bottoni di un modulo (form) sia di almeno 1 em; le dimensioni dei bottoni in un form siano tali da rendere chiaramente leggibile l'etichetta in essi contenuta, per esempio utilizzando opportunamente il margine interno (padding) tra l'etichetta e i bordi del bottone.
Nel caso delle immagini mappate, dove ciascun settore implementa un link diverso, sarebbe bene lasciare un po' di spazio tra un settore e l'altro, in modo che il puntatore del mouse possa cambiare aspetto e permettere di capire quale link si sta attivando; e poi, comunque, va inserita la descrizione testuale del link.
| torna all'indice |
Prima di indicare quali sono le caratteristiche di usabilità di un sito Web è indispensabile domandarsi:
È necessario controllare il lavoro svolto a posteriori attraverso:
| torna all'indice |
Quando si prende in considerazione la problematica accessibilità Web è giusto ed opportuno privilegiare le esigenze degli esseri umani tutti ma non bisogna dimenticare anche le esigenze di altri tipi di utenti quali ad esempio gli spider dei motori di ricerca o i dispositivi della cosiddetta tecnologia mobile. Per capire come ogni tipo di dispositivo ha le sue esigenze mi soffermo solo su alcuni tratti necessari che un sito Web dovrebbe avere per soddisfare le esigenze di un palmare cosí come dettato dalle esigenze tecnologiche attuali di questi dispositivi:
Al neonato suffisso .mobi dedicato alla tecnologia mobile sono dedicate le indicazioni del W3Consortium denominate Mobile Web Best Practices. Il relativo linguaggio ipertestuale creato ad hoc e denominato xhtml-mp deve essere utilizzato rispettando tutti i canoni di accessibiita' espressi dalle Best Practices se vuole ambire a soddisfare le esigenze della tecnologia mobile che accede al Web.
| torna all'indice |
A cominciare dai browser di genealogia 4 esistono numerosi casi di esigenze particolari espresse da browser perlopiù non standard e soprattutto in disuso, alcuni esempi:
| torna all'indice |
Per poter stampare correttamente una pagina Web è consigliabile applicare il relativo foglio stile (print)con le seguenti caratteristiche:
Consultare anche dell'autore Eric Meyer l'articolo in inglese sui CSS a stampa.
| torna all'indice |
È difficile realizzare una pagina che non sia accessibile ai motori di ricerca, ma va pur detto che gli spider non riescano ancora ad interpretare o comunque non gradiscono:
Per compiacere un motore di ricerca e farlo affezionare ad un sito con visite approfondite e frequenti è però un obiettivo non del tutto banale, un sito deve essere a questo scopo: