DevZone – Zone de développement web

Mon introduction à l’accessibilité préconisait l’utilisation de la propriété tabindex sur les formulaires.
Allons ici un peut plus loin en voyant de A à Z la mise en place d’un formulaire « accessible » et « contrôlé ».

Un formulaire commence tout d’abord par sa structure XHTML.

Les différentes points importants à noter ici sont :

• la propriété tabindex sur les différents éléments de saisie qui permet une navigation contrôlable par le clavier et ceci respectant un ordre « logique »,
• voir même la propriété accesskey sur le premier élément afin de favoriser une navigation par clavier.
• la propriété for sur les labels qui permet de donner un intitulé sur l’élément de saisie dont il fait référence avec en plus l’interaction suivante : un clic sur le label donne le focus sur l’élément en question.
• n’hésitez pas à utiliser la balise fieldset afin de regrouper une partie des éléments formulaire pour une meilleure compréhension de celui-ci

Ce qui donne :

<form action="" id="form-id" method="post">
    <fieldset>
        <legend>Informations</legend>
        <p>
            <label for="nom" accesskey="n">Nom <sup>(obligatoire)</sup> :</label>
            <input class="text" id="nom" name="nom" tabindex="1" type="text" value="" />
        </p>
        <p>
            <label for="prenom">Prénom <sup>(obligatoire)</sup> :</label>
            <input class="text" id="prenom" name="prenom" tabindex="2" type="text" value="" />
        </p>
        <p>
            <label for="email">Email :</label>
            <input class="text" id="email" name="email" tabindex="3" type="text" value="" />
        </p>
    </fieldset>

    <fieldset>
        <legend>Message</legend>
        <p>
            <label for="message">Message <sup>(obligatoire)</sup> :</label>
            <textarea cols="20" id="message" name="message" rows="5" tabindex="4"></textarea>
        </p>
    </fieldset>

    <div>
        <input class="submit" tabindex="5" type="submit" value="Valider" />
    </div>
</form>

Nos zones de saisie sont donc correctement liées à nos labels. Et Il est possible d’accéder au premier élément du formulaire à l’aide de la touche « n » du clavier et de naviger par la suite grâce aux différents tabindex.

Cependant, attention à l’écriture des balises !

Par exemple pour un élement de type radio sur lequel vous voulez qu’elle soit coché par défaut, préféré l’écriture :

<input checked="checked" name="choix" type="radio" value="1" />

à

<input checked name="choix" type="radio" value="1" />

Un formulaire accessible de par son traitement

Un bon formulaire est un formulaire vérifié 2 fois

L’explication la voici :

Le formulaire est bien évidemment vérifié côté serveur (en PHP) :

if( isset( $_POST["nom"] ) && isset( $_POST["prenom"] ) && isset( $_POST["email"] ) && isset( $_POST["message"] ) )
{
    // ok les 3 élements de formulaire ont été envoyé

    $nom = trim($_POST["nom"]);
    $prenom = trim($_POST["prenom"]);
    $email = trim($_POST["email"]);
    $message = trim($_POST["message"]);

    if( !empty( $nom ) && !empty( $prenom ) && !empty( $message) )
    {
        // ok les champs obligatoires ont été remplis
        // ...
    }
}

Mais il devrait également être vérifié côté client (autrement dit en javascript)

Pour ce faire, je vous renvoi ici à l’article Vérification de formulaire avec jQuery.