What is this? From this page you can use the Social Web links to save Accessibilità  ed usabilità  nelle form to a social bookmarking site, or the E-mail form to send a link via e-mail.

Social Web

E-mail

E-mail It
March 30, 2007

Accessibilità  ed usabilità  nelle form

Posted in: Design

Dopo aver visto come creare e far funzionare un semplice motore di ricerca, ora vedremo, usando pochi accorgimenti, come renderlo accessibile via codice HTML.

Form iniziale:

PLAIN TEXT
HTML:
  1. <form method="get" action="/search.asp">
  3.     <label for="s">cerca:</label>
  4.     <input name="s" id="s" type="text" />
  5.     <input value="invia" type="submit" />
  6.   </fieldset>
  7. </form>

Il fatto di usare solo elementi strutturali usando l'elemento "fieldset" aiuta sicuramente l'interpretazione della pagina da parte dei browser testuali e tecnologie assistive. L'elemento "legend" servirà  a dare un nome ai vari gruppi della form. Nel caso specifico avremo bisogno di un solo "legend".

PLAIN TEXT
HTML:
  2.   <legend>Modulo di Ricerca</legend>
  3. </fieldset>

Occorre associare delle etichette (label) significative ai relativi input e legarle con l'attributo "for" al corrispettivo "id" dell'input.

PLAIN TEXT
HTML:
  1. <label for="s">cerca:</label>
  2.   <input name="s" id="s" type="text" />

Occorre controllare, soprattutto in caso di form molto complesse, che vi sia un ordine logico e che questo possa essere seguito anche attraverso la navigazione da tastiera spostando il focus delle azioni con il tasto "tab". Per far questo useremo l'attributo "tabindex".

PLAIN TEXT
HTML:
  1. <input name="s" id="s" tabindex="1" type="text" />
  2.   <input value="invia" tabindex="2" type="submit" />

Per far si che le "input" siano accessibili anche usando le combinazioni dei tasti di scelta rapida, daremo loro l'attributo "accesskey" indicando nel label corrispettivo la lettera tra parentesi quadre.

PLAIN TEXT
HTML:
  1. <label for="s">[c] cerca:</label>
  2.   <input name="s" id="s" tabindex="1" accesskey="c" type="text" />

NB: IE: tasto ALT + numero o lettera tra parentesi + INVIO. FF: ALT + SHIFT + numero o lettera tra parentesi. Apple: componendo la combinazione del tasto CMD ("tasto mela") + numero o lettera tra parentesi.

Quindi il risultato finale del nostro semplice form sarà :

PLAIN TEXT
HTML:
  1. <form method="get" action="/search.asp"> 
  3.     <legend>Modulo di Ricerca</legend>
  4.     <label for="s">[c] cerca:</label>
  5.     <input name="s" id="s" tabindex="1" accesskey="c" type="text" />
  6.     <input value="invia" accesskey="s" tabindex="2" type="submit" />
  7.   </fieldset>
  8. </form>

Modulo di Ricerca

Per approfondire:

Return to: Accessibilità  ed usabilità  nelle form