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.

Afficher un site en remplacant toutes les couleurs par un certain contraste de gris permet ainsi une tout autre vision de celui-ci et est particulièrement intéressante dans une démarche d’accessibilité.

Le site GrayBit va donc vous afficher, via un simple formulaire où vous allez saisir l’url de votre site, votre page web avec des simples niveaux de gris, retirant ainsi toute couleur.

Deux intérêts à cette démarche :

• une prise de conscience des déficiences visuels (notamment donc dans la distinction des couleurs)
• une meilleure perception des contraste de couleurs, et d’équilibre des blocs.

GrayBit convertit en ligne un site en niveaux de gris pour estimer le contraste perçu.

Voici donc la comparaison du site devzone avec et sans couleurs

Lien :

• graybit.com

Accessibilité :

L’accessibilité du Web est la problématique de l’accès aux services et contenus en ligne pour les handicapés et les seniors.

Source : Wikipédia.

Voici ci-dessous une liste (certes succincte) de quelques règles de bonnes pratiques de développement web permettant de réaliser des sites web « accessibles ».

• Utiliser la propriété alt (alternative textuelle) sur les images (surtout sur les images porteuse d’information),
• Utiliser la propriété tabindex (sur les liens mais surtout sur les éléments de formulaire) afin de permettre une navigation contrôlable par le clavier. Et ceci respectant un ordre « logique »,
• Permettre le redimensionnement du texte en utilisant des unités relatives (em),
• Le contenu de vos pages web restent-elles présentes lorsque l’on désactive les feuilles de style CSS ?,
• …

Cette liste est bien sur non exhaustive. Je vous invite à consulter le site d’accessiweb et notamment ses fiches pratiques.

Liens :

• accessiweb.org,
• Guide accessiweb.