I form sono un elemento critico per quanto riguarda l'accessibilità di un sito, in particolare per quanto riguarda persone ipovedenti che si affidano a browser uditivi per navigare in rete. La ragione di questo fatto è che il form, per sua natura, richiede un'elevata interazione con l'utente, il quale deve identificare correttamente il significato dei diversi elementi (ad esempio <input>) e sapere che tipo di dati deve fornire.

Occorre anche tener presente che ci sono utenti che, per varie ragioni, navigano senza utilizzare il  mouse. Bisogna dunque anche prevedere un modo semplice per spostarsi da un campo dati al successivo per esempio usando il tasto tab della tastiera.

Abbiamo detto precedentemente che gli elementi interni a un form (es. <input>) devono essere racchiusi in un contenitore e non possono essere messi direttamente nel form (altrimenti la validazione fornisce errori nella sintassi HTML). Negli esempi fatti finora abbiamo sempre usato un paragrafo <p> generico come contenitore (o, in alternativa, un elemento <div>).

Esiste tuttavia un elemento contenitore espressamente creato per i <form>. Si tratta dell'elemento <fieldset> che, insieme all'elemento <legend>, permette di creare form ad elevata accessibilità. Si consideri l'esempio seguente:

Si osservi che l'elemento <fieldset> serve per raggruppare insieme gruppi omogenei di campi (cioè per esempio le caselle di input per inserire nome e cognome, raggruppate insieme nel primo fieldset). L'elemento <fieldset> viene visualizzato con una cornice che racchiude i campi di input, come nell'esempio qui sotto:

Il tag <legend> serve invece per specificare una legenda, cioè una spiegazione testuale del contenuto del <fieldset> (particolarmente utile per chi non può vedere lo schermo).

Per coloro che non possono vedere può essere difficile capire quale tipo di dato bisogna inserire all'interno di un determinato campo.

L'elemento <label> permette di associare strettamente un dato campo con il testo che lo accompagna. Si consideri l'esempio seguente:

Si osservi che è stato aggiunto un id alla casella di input. Il nome dell'id coincide con quello indicato nella <label> e serve per specificare che il contenuto della label (cioè Nome e cognome) si riferisce proprio a quell'elemento <input>. Si osservi che per identificare l'elemento <input> bisogna usare un attributo id, non l'attributo name (che serve per altri scopi).

Un modo alternativo per usare label è il seguente:

In questo secondo caso <label> racchiude al proprio interno l'intero elemento <input>

L'elemento label può anche essere usato in associazione con un elemento select, come mostrato nell'esempio qui sotto:

Con l'attributo tabindex è possibile specificare l'ordine (la sequenza) con cui le successive pressioni del tasto tab selezionano i diversi campi di un form. La sequenza viene indicata con numeri interi crescenti (dal primo elemento all'ultimo che viene selezionato). Di solito si usano valori che aumentano di 10 in 10 in modo da non dover ricreare daccapo tutta la numerazione nel caso si vogliano aggiungere altri campi al form. Si osservi l'esempio seguente:

I valori di tabindex indicano che il campo cognome viene selezionato dopo il campo nome, premendo il tasto tab.

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it

Segui @ElePrograMania