*Linux Guide

Fare Web - Accessibilità Parte 5

*
Punti a priorità 3 (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.

# (4.2) Specificare le espansioni di ogni acronimo o abbreviazione inseriti nel documento.


<p>Questo tutorial si basa sulle linee guida del <acronym title="Web Accessibility Initiative" lang="en">WAI</acronym> per l'<abbr title="accessibilit&agrave;">access.</abbr> dei siti web.</p>

# (4.3) Identificare il linguaggio naturale primario del documento


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="it" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Accessibilit&agrave;</title>
</head>
<body> ... </body>
<html>

Questo per indicare ai lettori di schermo la lingua principale del documento e disporsi alla pronuncia relativa.
# (9.4) Creare un ordine logico nei controlli dei links, dei controlli modulo e degli oggetti.
Chi non può usare il mouse, deve per forza usare la tastiera per raggiungere i vari links ed i controlli dei moduli, usando il tasto 'Tab'. Creiamo il documento in modo che ci sia una logica nel raggiungimento dei vari links e controlli con l'uso dell'attributo "tabindex", come illustrato :


<form method="post"><br />
<fieldset><label for="Nome e Cognome">Nome e Cognome: </label><input type="text" name="name" size="50" tabindex="1" value="Il tuo nome" /><br />
<br />
<label for="Citt&agrave;">Citt&agrave;:</label><input type="text" name="name" size="50" tabindex="2" value="La tua città"><br />
<br />
<label for="E-mail">E-Mail:</label><input type="text" name="e-mail" size="30" tabindex="3" value="E-mail"><br />
</fieldset>
<br />
<input type="submit" name="Submit" tabindex="4" value="Invia"> <input type="hidden" name="redirect" value="http://digilander.libero.it/borgio3/Form1.htm"><input type="reset" name="reset" tabindex="5" value="Cancella"></form>

In questo modo l'utente, cliccando sul pulsante tab della tastiera, partirà dal controllo del nome e cognome, poi passerà al controllo 'Città', quindi a quello 'E-mail' e così via.
# (9.5) Prevedete le chiavi di accesso ai links importanti (inclusi quelli delle mappe di immagine lato client), ai controlli dei moduli ed ai gruppi di controllo dei Form.
Chi non può usare il mouse per cliccare su un link, usa la tastiera per ottenere lo stesso risultato. Attiva quindi delle chiavi di accesso. Tuttavia non può farlo se non sono state previste nel documento. Potete inserire queste chiavi di accesso inserendo nel link, il seguente attributo:


accesskey="lettera o numero" come illustrato nel menù sottostante :
<a href="primapagina.htm" accesskey="p" title="collegamento alla prima pagina">Prima pagina</a> | <a href="secondapagina.htm" accesskey="s" title="collegamento alla seconda pagina">Seconda pagina</a>

# (10.5)
Fino a quando i programmi utente (incluse le tecnologie assistive) visualizzeranno distintamente i links adiacenti, includete dei caratteri stampabili non linkati e spaziati, tra i vari links.
Ad esempio questa sequenza di links è poco comprensibile per i lettori di schermo e per i braille:
Chi siamo Linux Utilità Contattaci Aiuto!
potrebbero considerare il tutto come un link unico!
E' necessario quindi inserire dei caratteri non linkati per separare i vari links come evidenziato sotto :
Chi siamo | Linux | Utilità | Contattaci | Aiuto!
# (11.3)
Prevedete informazioni che gli utenti potrebbero usare secondo le loro preferenze (ad esempio lingua, tipi di contenuto, ecc.)
# (13.5) Prevedete delle barre di navigazione risaltate e date accesso ai meccanismi di navigazione
Ogni pagina del sito deve essere provvista di una barra di navigazione evidente e ben comprensibile, e soprattutto usabile e accessibile. Sono da evitare barre di navigazione costituite da immagini prive di testo alternativo, menù di navigazione fondati su Javascript o DHTML, barre di navigazione fondate su Applet Java o si filmati swf. Sono sempre da preferire menù testuali o grafici con testo alternativo chiaro e comprensibile.
# (13.6)
Raggruppate i links, identificate i gruppi e, fino a che i programmi utente potranno farlo, inserite una via per bypassare il gruppo.
Per chi usa i lettori di schermo, è alquanto noioso e irritante doversi ascoltare il menù di navigazione, ogni volta che si apre una pagina dello stesso sito. E' importante facilitare l'accesso, da parte di individui con browser vocali, verso i contenuti della pagina saltando il menù. Si può procedere inserendo un link appena dopo il tag <body> che si ancori appena prima dell'inizio del contenuto, in modo che l'utente agendo su questo link, passi direttamente al contenuto della pagina.
Inseriamo quindi il link :


<body><div style="display:none"><a accesskey="0" href="#contenuto" tabindex="0" title="vai al contenuto">Vai al contenuto</a></div>
poi inseriamo l'ancoraggio :
<a name="contenuto" id="contenuto"></a>

e il gioco è fatto.
# (13.7)
Se sono state inserite funzioni di ricerca, abilitate differenti tipi di ricerca per differenti livelli di preferenza.
E' utile inserire dei box di ricerca che si rivolgano sia all'interno del sito, sia all'esterno di esso, come il box presente nelle pagine di questo sito.
# (13.8) Inserite informazioni diversificate all'inizio dei capitoli, paragrafi, liste, ecc.
Cercate di non ripetere lo stesso testo all'inizio di paragrafi, o capitoli, o liste, ma diversificate il testo in modo da inserire maggiori informazioni preliminari.
# (13.9)
Inserite informazioni circa gruppi di documenti (documenti che prevedono pagine multiple).
# (13.10) Inserite un links per saltare i disegni ASCII.
I lettori di schermo non riescono a leggere i disegni creati con il Blocco Note, per cui è necessario inserire links che permettano all'utente di saltare questi oggetti.. Si può procedere allo stesso modo indicato al punto 13.6 illustrato poco sopra.
# (14.2)
Rafforzare il testo con grafici o file audio dove questo faciliterà la comprensione della pagina.
# (14.3) Create uno stile di presentazione che sia coerente con tutte le pagine.
Evitate di creare pagine che abbiano layout diversi. Questo provoca disorientamento nel visitatore.
# (1.5)
Fino a quando i programmi utente mostreranno un testo alternativo equivalente per le mappe immagine lato cliente, inserite un link testuale ripetuto per ogni regione attiva della mappa.
# (5.5) Inserite un sommario per le tabelle.
Se la tabella è formata da numerose celle di dati diversificati, è bene inserire un sommario che illustri la composizione della tabella ed il tipo di dati contenuti in essa.


<table summary="La tabella è composta di 10 righe e 5 colonne che contengono i dati relativi agli introiti mensili ed alle spese sostenute ...">
<tr>
<td> ... </td>
<td> ... </td>
...
</tr>
</table>

# (5.6) Prevedete delle abbreviazioni per le etichette di capitolo.
Se in una tabella ci sono delle celle capitolo, è bene inserire in esse delle abbreviazioni che indichino il contenuto della cella stessa, altrimenti il lettore di schermo leggerà l'intero contenuto della cella.
<th abbr="Segnalazioni"> Segnalazioni di siti da parte dei lettori</th>
# (10.3)
Fino a quando i programmi utente (compresi i sistemi assistivi) visualizzaranno fianco a fianco il testo, prevedete un testo lineare alternativo (nella stessa o in altra pagina) per tutte le tabelle che mostrano il testo in parallelo con il medesimo incolonnato.
Se ci sono due o più colonne di tabelle affiancate che contengono del testo, il lettore di schermo non leggerà prima una colonna poi l'altra, ma leggerè il testo senza fare separazioni, il che risulta disastroso.
E' necessario provvedere a fornire un testo alternativo linearizzato nella stessa pagina o in altra pagina.
# (10.4)
Fino a quando i programmi utente tratteranno correttamente i controlli di modulo vuoti, annidate del testo nei box selezionabili e nelle aree di testo.
primo secondo terzo

Vediamo ora alcuni strumenti per l'accessibilità

<< Precedente | Indice | Successiva >>

Linux Guide | Torna in alto