*Linux Guide

Fare Web - Accessibilità Parte 4

*
Punti a Priorità 2 (tra parentesi l'indicizzazione del WAI)

Nei box di esempio, le stringhe di testo importanti e collegate al punto in discussione, sono evidenziate con un colore rosso e la sottolineatura.

# (2.2) Assicurate che i colori in primo e secondo piano, siano sufficientemente contrastati
quando siano visti da coloro che hanno problemi di percezione dei colori o quando siano visionati con monitor in bianco e nero (Priorità 2 per le immagini, Priorità 3 per il testo).
Ad esempio un testo rosso su fondo blu, è un testo molto poco contrastato, mentre un testo blu su fondo bianco è una buona associazione.
Immagini che contengano del testo, devono avere un contrasto evidente altrimenti per soggetti affetti da daltonismo, l'immagine non è interpretabile.
# (3.1) Quando esista un appropriato marcatore, usate il marcatore al posto dell'immagine per trasmettere informazioni.
Realizzare complessi menù con piccole immagini che contengono del testo, è dispendioso e poco accessibile rispetto allo stesso menù costruito con le liste e il testo.
Utilizzare separatori grafici è sconsigliato quando è possibile inserire un separatore HTML (<hr>)
# (3.2) Create documenti che siano validati dal punto di vista formale e sintattico.
Sfruttate i programmi di validazione previsti dal W3C e da altri siti, per ottenere una validazione formale. A questo scopo è possibile scaricare gratuitamente dal sito relativo, il fantastico programma HTML-kit che vaglia accuratamente il testo html per validarlo.
# (3.3)
Usate i fogli di stile per controllare il layout e la presentazione
# (3.4) Usate unità di misura relative piuttosto che assolute nei valori degli attributi
Al posto di valori assoluti come pixel (px) o punti (pt), usate valori relativi come illustrato sotto :


body{font-family : Arial,Verdana,Sans-serif;
font-size : 1.2em;
color : #006;
}

h1{font-family : Arial,Verdana,Sans-serif;
font-size : 200%;
color : #c00;
}

Questo accorgimento permette l'ingrandimento dei caratteri attraverso le funzioni del browser ed i soggetti ipovedenti potranno leggere agevolemente il testo.
# (3.5) Usate i capitoli per trasmettere la struttura del documento e utilizzarli in accordo con le loro specifiche
Usate i vari tags h1>h6 tenendo presente che h1 deve essere il primo ad essere inserito nella pagina e gli altri a seguire in ordine di grandezza :


<h1> Titolo </h1>
<h2> Sottotitolo </h2>
<h3> Paragrafo </h3>
<h4> Comma </h4>... ecc.

E' errata la formula :
<h3>Titolo</h3>
<h1>Sottotitolo</h1>...
# (3.6)Definire le liste appropriatamente
Per creare un elenco progressivo di dati è bene inserire le Ordered List :


<ol>
<li>primo dato</li>
<li>secondo dato</li>
<li>terzo dato</li>
</ol>

Se invece dobbiamo solo creare un menù o una lista non ordinata, si deve usare una Unordered List :


<ul>
<li>dato a</li>
<li>dato b</li>
<li>dato c</li>
</ul>

# (3.7)
Non usate il tag <quote> per effetti di formattazione come l'indentazione in quanto questo tag ha un significato intrinseco relativo alle citazioni ed alle frasi riportate e l'uso di tecnologie assistive le considera come tali.
# (6.5)
Assicuratevi che il contenuto dinamico sia accessibile o provvedete per una presentazione o per pagine alternative accessibili.
# (7.2) Fino a quando i programmi utente permetteranno all'utente di controllare il lampeggiamento, evitate di far lampeggiare il contenuto
Gif animate con alta frequenza di ripetizione ed effetto lampeggiante, potrebbero arrecare gravi disturbi in persone sensibili anche a loro insaputa!
Evitate l'uso di immagini lampeggianti.
# (7.4) Fino a quando i programmi utente permetteranno all'utente di fermare il ricaricamento, non create pagine autoricaricanti.
Il ricaricamento delle pagine potrebbe far perdere l'orientamento all'utente il quale vuole possedere il controllo della propria navigazione.
# (7.5)
Fino a quando i programmi utente permetteranno di fermare l'autoredirezione, evitate i marcatori che permettono la redirezione delle pagine. Configurate il server per le redirezioni.
# (10.1) Fino a quando i programmi utente permetteranno di chiudere le finestre figlie, non causate l'apertura di pop-up o di altre finestre a comparsa e non cambiate la finestra corrente senza avvisare l'utente.
Se proprio volete far aprire una nuova finestra per un link, inserite un avvertimento :


<a href="http://nuovolink.htm" target="_blank" title="Collegamento a Nuovo link">Nuovo link [Il collegamento si apre in una nuova finestra]</a>

<a href="http://nuovolink.htm" target="_blank" title="Collegamento [in nuova finestra] a Nuovo link">Nuovo link</a>

# (11.1) Utilizzate le tecnologie del W3C
quando sono disponibili e appropriate per il lavoro da fare e usate le ultime versioni quando supportate.
# (11.2)
Evitate le tecniche sconsigliate dal W3C
# (12.3)
Dividete i grandi blocchi di informazioni in più gruppi più piccoli e maneggevoli, quando questo risulti appropriato e naturale
# (13.1) Identificare chiaramente l'obiettivo di ogni collegamento.


<a href="http://nuovolink.htm" title="Collegamento a Nuovo link">Nuovo link</a>

# (13.2) Inserite i metadata per aggiungere informazioni semantiche a pagine e siti.
Il web è oggi sfruttabile se si effettuano delle ricerche, per ottenere nuove informazioni, attraverso la digitazione di parole chiave, nei box di ricerca dei motori.
Tutti sanno che digitando una parola, si ottengono centinaia di collegamenti, ma la maggior parte di essi è inutile.
Supponiamo che si stiano cercando informazioni non su una precisa parola, ma su un concetto o su un significato. Non avremo mai il risultato desiderato, perché le parole cercate non fanno riferimento al concetto che stiamo cercando, ma alle parole stesse.
Una soluzione a questa mancanza di comprensibilità del web, può essere quella di inserire dei metadata nelle pagine che indichino il contenuto concettuale del sito in oggetto. Si impiegano i Link HTML collocati nella testata delle pagine come illustrato sotto :


<html>
<head>
<title>Pagina semantica</title>
<meta name="keywords" content="parole chiave" />
<link rel="prev" href="Paginaprecedente.htm" />
<link rel="next" href="Paginasuccessiva.htm" />

</head>
<body>
</body>
</html>

In modo che sia possibile, attraverso browser testuali come Lynx, raggiungere contenuti precedenti e successivi alla pagina contattata, per poter ottenere le informazioni richieste.
# (13.3)
Prevedere informazioni circa il layout generale del sito (ad esempio con una mappa o con una tabella dei contenuti).
# (13.4) Usate massicciamente gli strumenti di navigazione.
Fate in modo che le pagine siano sempre provviste di opportuni collegamenti per facilitare la navigazione e che tali collegamenti siano evidenti e di facile comprensione. Ogni utente deve poter trovare la via di casa e quella per raggiungere le parti importanti del sito.
# (5.3) Non usate le tabelle per il layout
a meno che le tabelle abbiano senso una volta linearizate. Al contrario, se una tabella non conferisce un senso, provvedete ad inserire una alternativa equivalente e accessibile.
# (5.4)
Se usate le tabelle per il layout, non usate tutti i marcatori disponibili per ottenere la formattazione visiva.
Ad esempio non è corretto usare il marcatore <th> per rendere il testo in grassetto. E' meglio usare una normale cella con all'interno un blocco di testo con opportuni attributi e valori al fine di ottenere il testo in grassetto, come illustrato sotto :


<td><div style="font-weight:bold>Questo testo è in grassetto</div></td>

# (12.2)
Descrivete lo scopo dei frames e quale di questi è collegato a tutti gli altri, se ciò non è evidente dal titolo del frame.
# (10.2)
Fino a che i programmi utente supporteranno esplicite associazioni tra etichette e controlli dei form, per tutti i controlli di un modulo con etichetta associata, assicurarsi che l'etichetta sia correttamente posizionata.
Ad esempio, se ci sono dei bottoni opzionali disposti orizzontalmente, le etichette di identificazione vanno inserite DOPO il bottone stesso :
prima | seconda | terza

se, invece, sono disposti verticalmente è bene che l'etichetta si trovi sopra il bottone opzionale :

prima

seconda

terza
# (12.4)
Associate esplicitamente le etichette al loro punto di controllo
# (6.4)
Per gli scripts e le applet, assicurate che il manipolatore dell'evento inserito nell'applet o nello script, sia indipendente dallo strumento di attivazione.
Ad esempio, se uno script contiene la possibilità di avviare un evento cliccando su un pulsante di attivazione, fate in modo che l'attivazione non possa avvenire solo con l'uso del mouse, ma anche attraverso l'uso della tastiera o di un microfono. Questo può garantire a chi non può usare il mouse (per disagi fisici o per questioni di lavoro) di attivare l'evento.
# (7.3) Fino a quando i programmi utente permetteranno agli utenti di fermare i contenuti in movimento, evitate i movimenti nelle pagine.
Ci sono degli scripts DHTML molto simpatici e d'effetto, che determinano lo scorrimento di testo all'interno di una finestrella. Ci sono persone che non riescono a leggere velocemente o a comprendere rapidamente, quanto è scritto nello scroller automatico. Queste persone sono quindi in difficoltà e devono aspettare di ripetere lo scorrimento per poi ripeterlo ancora e così via. Se non è possibile permettere loro di fermare lo scorrimento, evitate di inserire queste magie del DHTML.
# (8.1)
Costruite elementi programmatici come scripts e applet, direttamente accessibili o compatibili con le tecnologie assistive (lettori di schermo, browser vocali, browser braille). Priorità 1 se la funzione è importante e non presentabile diversamente, altrimenti Priorità 2.
# (9.2) Assicurare che ogni elemento che abbia una sua propria interfaccia, sia operativa in modo indipendente dal progetto sorgente.
Se ci sono delle animazioni che contengono pulsanti di attivazione di eventi al loro interno, è necessario che questi pulsanti siano disponibili indipendentemente dall'animazione o non inseriti solo al suo interno. Classico esempio sono i filmati swf che contengono al loro interno links o pulsanti di collegamento a pagine web diverse. Se il browser dell'utente, non è provvisto dell'apposito plug-in di Macromedia, l'utente è impossibilitato ad entrare nelle pagine linkate nel filmato.
# (9.3) Per gli scripts, specificare un attivatore logico, piuttosto che un attivatore dipendente da uno strumento.
Ci sono delle azioni che vengono inserite in uno script e che dipendono dall'attivazione di un evento. E' necessario inserire degli attivatori logici che diano la possibilità di attivare l'evento con l'uso di più strumenti. Uno potrebbe essere il mouse e l'altro potrebbe essere la tastiera.
Ad esempio con il mouse un evento viene attivato con l'evento 'onmousedown' che non funziona con la tastiera, che invece funziona con l'evento 'onkeydown'.
La funzione del mouse 'onclick' ha un corrispettivo per la tastiera che è 'onkeypress'.
Passiamo alle Priorità 3

<< Precedente | Indice | Successiva >>

Linux Guide | Torna in alto