I Moduli di interrogazione (Form) sono senz’altro il primo scoglio per l’accessibilità nell’interrogazione di qualsiasi banca dati.
Esempio di modulo in rete:
Ecco qualche consiglio per poterli rendere più accessibili.
Sono state individuate due vie principali:
- Via esterna
Per aiutare la comprensione logica del modulo
2. Via interna
Per aiutare i programmi non visuali ad interpretare meglio i comandi del modulo
1. Via esterna (come appare)
I punti sottostanti sembreranno delle ovvietà ma, come molte ovvietà, sono dei piccoli accorgimenti che possono facilitare le cose a molti utenti.
1.1 Evitare i frame.
I frame creano molte difficoltà nell’individuare il focus: possono disorientare e far perdere la percezione esatta di quale finestra è attiva in un dato momento (in poche parole in quale delle due, tre, quattro finestre si trova il cursore). Questo vale per chi usa dei browser non testuali, ma anche per tutti gli altri.
1.2 Il testo dei vari campi dovrebbe apparire prima del campo relativo.
Esempio:
1.3 Nelle opzioni di scelta (tipo “check boxes” e “radio botton”) il testo dovrebbe apparire dopo il campo stesso.
Esempio:
1.4 Se le opzioni di scelta sono divise in gruppi distinti, porre il titolo dei vari gruppi prima del gruppo stesso.
Esempio:
Scegli la lista: Liste di parole Liste di frasi
1.5 Inserire già un breve testo esplicativo nelle eventuali aree di inserimento testo (textarea).
E’ un modo per forzare i browser non testuali ad interpretare l’area di inserimento.
Esempio:
2. Via Interna (codice HTML)
Nel codice HTML, dotando i moduli di opportuni tag, si facilitano i vari browser non visuali nella corretta interpretazione.
2.1 Associare delle etichette esplicative ai relativi input (con label). Ogni etichetta è legata al nome specifico attraverso l’attributo “for”. Il contenuto dell’attributo “for” corrisponde all’attributo “id” dell’input
Esempio:
<form action="submit" method="post">
<label for="/autore">Autore:</label>
<input type="text" id="/autore" /><br />
<label for="titolo">Titolo:</label>
<input type="text" id="titolo" /><br/>
<label for="soggetto">Soggetto:</label>
<input type="text" id="soggetto" />
</form>
2.2 Assicurare un ordine logico di tabulazione fra gli elementi che ricevono il focus delle azioni, per poter navigare attraverso essi tramite la tastiera, anche se i campi sono in un ordine sparso, come in certe tabelle (con tabindex).
Il modulo dell’esempio iniziale (DISAPPROVATO) è in realtà una tabella, con i campi di inserimento sparsi tra le celle:
Con tabindex si può dare l’esatto ordine dei campi, da poter seguire con il tasto di tabulazione.
Breve esempio:
<form action="submit" method="post">
<label for="/autore">Autore:</label>
<input type="text" id="/autore" tabindex="1" />
<label for="titolo">Titolo:</label>
<input type="text" id="titolo" tabindex="3" />
<label for="soggetto">Soggetto:</label>
<input type="text" id="soggetto" tabindex="2" />
</form
2.3 Fornire scorciatoie per poter operare da tastiera, attraverso la combinazione di tasti, nei link, nelle opzioni e nell’invio dei dati (con accesskey).
Esempio:
<form action="submit" method="post">
<label for="/autore" accesskey="A">Autore:</label>
<input type="text" id="/autore" tabindex="1" /><br />
<label for="titolo" accesskey="T">Titolo:</label>
<input type="text" id="titolo" tabindex="3" /><br/>
<label for="soggetto" accesskey="S">Soggetto:</label>
<input type="text" id="soggetto" tabindex="2" />
</form>
La combinazione del tasto “Alt” più la lettera “A” (più eventualmente “Invio”) trasferirà il cursore nel campo da compilare dell’Autore, “Alt” più “T” andrà nel campo del Titolo, ecc.
2.4 In tutte le opzioni di scelta è opportuno che ve sia già una sempre selezionata (con checked).
Esempio:
Cerca in:
<input type="checkbox" ... checked="checked" />Arte
<input type="checkbox" ... />Diritto
<br />
Scegli la lista:
<input type="radio"... checked="checked" />Liste di parole
<input type="radio" ... />Liste di frasi
Risultato:
Scegli la lista: Liste di parole Liste di frasi
2.5 Nelle opzioni di scelta del tipo “menu a tendina” si possono raggruppare i termini delle opzioni in modo organizzato, con delle etichette (con optgroup e label).
Esempio 1: Termini non raggruppati
<form action=”submit” method=”post”>
...
<select name=”periodici”>
<option value=”0.0” selected>cerca nei periodici:</option>
<option value=”a1”>arte viva</option>
<option value=”a2”>rinascimento oggi</option>
<option value=”a3”>l’astrattismo</option>
<option value=”d1”>leggi e decreti</option>
<option value=”d2”>lex</option>
</select>
</form>
Risultato menu con termini non raggruppati (aprire il menu per vedere):
Esempio 2: Termini raggruppati
<form action="submit" method="post">
...
<select name="periodici">
<option value="0.0" selected>cerca nei periodici:</option>
<optgroup label="arte">
<option value="a1">arte viva</option>
<option value="a2">rinascimento oggi</option>
<option value="a3">l'astrattismo</option>
</optgroup>
<optgroup label="diritto">
<option value="d1">leggi e decreti</option>
<option value="d2">lex</option>
</optgroup>
</select>
</form>
Risultato menu con termini raggruppati (aprire il menu per vedere):
2.6 Evitare automatismi (JavaScript) nelle opzioni di scelta del tipo “menu a tendina”.
2.7 Evitare le tabelle per impostare graficamente un modulo. E’ possibile raggruppare l’insieme delle informazioni, e dividerle per aree recanti il proprio titolo con <fieldset> e <legend>.
Esempio di come si può rendere il modulo colorato già visto al punto 2.2:
<form action="submit" method="post">
<fieldset>
<fieldset>
<label for="/autore" accesskey="A">Autore:</label>
<input type="text" name="/autore" id="/autore" tabindex="1" size="20" maxlength="32" /> <br /> <br />
<label for="titolo" accesskey="T">Titolo:</label>
<input type="text" name="titolo" id="titolo" tabindex="2" size="20" maxlength="32" /> <br /><br />
</fieldset>
<fieldset>
<legend>Cerca in:</legend>
<input type="checkbox" name="/area" value="arte" checked /> Arte
<input type="checkbox" name="/area" value="diritto" /> Diritto
</fieldset>
<fieldset>
<legend>Scegli la Lista:</legend>
<input type="radio" name="liste "value="parole" checked />Liste di parole
<input type="radio" name="liste" value="frasi" />Liste di frasi
</fieldset>
<fieldset>
<legend>Cerca tra:</legend>
<input type="checkbox" name="fondo" value="monografie" checked /> Monografie
<input type="checkbox" name="fondo" value="periodici" />Periodici
<input type="checkbox" name="fondo" value="Musica" /> Musica
</fieldset>
</fieldset>
<input type="submit" value="Cerca">
</form>
Risultato:
2.8 E’ consigliabile sempre mettere i “title ” in ogni input.
Esempio:
<input type="submit" value="Cerca" name="ricerca" title="Avvia la ricerca" />
2.9 Tasti di invio ricerca: meglio usare il tasto classico di input. Se il “bottone” di ricerca è una immagine, usare sempre il testo alternativo (alt) ed il title. Non usare automatismi (JavaScript) per l’avvio automatico della ricerca, i browser testuali non li riconoscono.
Esempi:
<input type="submit" name="Cerca" value="Avvia la ricerca" title="Cerca" />
Risultato:
<input type="image" src="CERCA-IMM.gif" width="109" height="26" alt="Inizia la ricerca" name="Invia" value="Cerca" title="Avvia la ricerca" />
Risultato: