Moduli (Form) accessibili

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:

Esempio di modulo

Ecco qualche consiglio  per  poterli rendere  più accessibili.

Sono state individuate due vie principali:

  1.   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:

       Autore:    Titolo:

 

1.3  Nelle opzioni di scelta (tipo  “check boxes” e  “radio botton”)  il testo dovrebbe apparire dopo il campo stesso.

Esempio:

Arte Diritto
Liste di parole Liste di frasi

 

1.4  Se le opzioni di scelta sono divise in gruppi distinti, porre il titolo dei vari gruppi prima del gruppo stesso.

Esempio:

Cerca in: Arte Diritto
  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:

Autore  Cerca in:  Scegli la lista
Titolo Arte   Diritto Liste di parole   Liste di frasi
   Cerca tra: Monografie Periodici Musica

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:

Cerca in: Arte Diritto
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:

Cerca in:

Arte Diritto

Scegli la Lista:

Liste di parole Liste di frasi

Cerca tra:

Monografie Periodici Musica

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:

Potrebbero interessarti anche i seguenti articoli

  • Emulare le immagini mappate con i CSSEmulare le immagini mappate con i CSS L'esempio La pagina di esempio, se visitata con un browser in grado di supportare i CSS, presenta una semplice immagine con quattro aree distinte. Ad ogni […]
  • Il ciclo della valutazioneIl ciclo della valutazione Nel processo di sviluppo di un’applicazione Web, è di fondamentale importanza pensare alla sua accessibilità in ogni fase del ciclo di vita ; in ogni […]
  • 4 – Le mappe cognitive4 – Le mappe cognitive Durante le tre fasi "umane" descritte in precedenza, ed in generale durante un qualsiasi processo di apprendimento, l’utente apprende il funzionamento dell’applicazione […]
  • L’uso dei Fogli di StileL’uso dei Fogli di Stile Uno dei principi base dell’accessibilità di un documento Web è che il contenuto e la sua struttura siano separati. Non importa che grandezza vogliamo dare ai titoli […]
  • Disabilità, diversità, accessibilità ed inclusione digitale Disabilità, diversità, accessibilità ed inclusione digitale Le Nazioni Unite nel 2006 hanno attivato un Forum da tenersi annualmente per un quinquennio, per allargare a tutti le discussioni sul futuro della rete attraverso un […]
Condividi:

Informazioni sull'autore

Maurizio Vittoria
Maurizio Vittoria
Sono nato e vivo a Venezia, dove svolgo attività di Webmaster presso la Biblioteca Nazionale Marciana. Qui ho potuto unire lo status di bibliotecario con la passione per l'informatica e Internet. Come bibliotecario non potevo non interessarmi alle enormi possibilità che la rete può offrire nel campo della catalogazione e nella ricerca bibliografica; mi sono perciò specializzato nella reperibilità delle risorse e nelle ricerche on line, per le quali tengo periodicamente dei corsi, oltre a quelli su Internet, HTML e catalogazione in rete. Sono un sostenitore del W3C, dei suoi standard e del suo "vedere lontano". A questo proposito ho prodotto vari manualini di tecnica e standard Web, tra cui una guida all’HTML e qualche traduzione di documenti del W3C stesso. Nel mio lavoro sono sempre stato sensibile alle problematiche dell'accessibilità e dell'usabilità del Web e sono entrato nel WCAG WG (Web Content Accessibility Guidelines Working Group), l'organismo del W3C che sta rivedendo le linee guida internazionali per l'accessibilità dei siti Web. Ho promosso il “Progetto CABI”,  della Biblioteca Nazionale Marciana, iniziato con la “Campagna per l’Accessibilità delle Biblioteche in rete” (http://marciana.venezia.sbn.it/CABI/), progetto che si è rivelato fruttuoso per la sensibilizzazione verso l’accessibilità del Web culturale e pubblico. Partecipo al Gruppo di Lavoro del progetto europeo “Minerva” che ha prodotto il “Manuale per la qualità dei siti Web pubblici culturali,   Criteri, linee guida e Raccomandazioni”  (http://www.minervaeurope.org/publications/qualitycriteria.htm), presentato a Parma il 21 novembre 2003. Sono membro IWA-HWG e mantengo altri interessi semiletterari e meno virtuali.

Commenti

Nessun commento

    Rispondi

    Link e informazioni