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:

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:

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:

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:

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:

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:

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:

Risultato:

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

Risultato menu con termini non raggruppati (aprire il menu per vedere):

Esempio 2: Termini raggruppati

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:

Risultato:

2.8  E’ consigliabile sempre mettere i “title ” in ogni input.

Esempio:

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:

Risultato:

Risultato: