Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Créer un formulaire accessible

Compatible HTML. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 25 juillet 2008

Nous allons voir à travers cet article, la création d’un formulaire respectant certaines règles de l’accessibilité.

Création de la structure HTML du formulaire

Le formulaire et ses objets

Nous allons insérer dans un premier temps le formulaire en utilisant l’élément form.

 <!-- Le formulaire -->
<form action="" method="post" id="formAccessible">
 
</form> 

Regrouper les champs de formulaire

Afin de regrouper thématiquement les objets du formulaire, nous allons utiliser l'élément HTML fieldset.

Le regroupement des champs de formulaire rend leur compréhension plus aisée aux utilisateurs, tout en facilitant la navigation par tabulation pour les agents utilisateurs visuels et la navigation vocale pour les agents utilisateurs vocaux. La bonne utilisation de cet élément rend les documents plus accessibles.

L’élément fieldset est restitué visuellement par un cadre contenant une légende. Dans notre cas, nous allons créer un premier regroupement dont la légende sera Identité, que nous définirons à travers l’élément legend.

 <form action="" method="post" id="formAccessible">
    	<fieldset>
        	<legend>Identité</legend>
        </fieldset>
    </form> 

Associer une étiquette (label) à un champ de formulaire

Quelques champs de formulaire ont des étiquettes qui leur sont automatiquement associés (les boutons) tandis que la plupart d'entre eux en sont dépourvus (les champs de texte, les cases à cocher et les boutons radio ainsi que les menus).

L’élément HTML label permet de regrouper un champ de formulaire et sa description afin d’améliorer l’accessibilité du formulaire. L’attribut for permettra de lier le label au contrôle de formulaire.

Nous souhaitons créer un champ de saisie pour le nom. Nous allons donc insérer un élément label qui contiendra la légende (Nom :) et un champ de saisie, un élément input avec l’attribut type valorisé à text.

Nous allons ensuite identifier l’objet du formulaire en lui précisant 2 attributs : name et id. Ces 2 attributs identifiant l’objet, nous allons leur donner la même valeur : txtNom.

 <!-- Le formulaire -->
    <form action="" method="post" id="formAccessible">
    	<fieldset>
        	<legend>Identité</legend>
            <!-- champs de saisie -->
            <label id="lblNom" for="txtNom">Nom : <input name="txtNom" type="text" id="txtNom" /></label><br />
        </fieldset>
    </form> 

Nous allons répéter l’opération pour le prénom, l’adresse, le code postal et la ville.

 <!-- Le formulaire -->
    <form action="" method="post" id="formAccessible">
    	<fieldset>
        	<legend>Identité</legend>
            <!-- champs de saisie -->
            <label id="lblNom" for="txtNom">Nom : <input name="txtNom" type="text" id="txtNom" /></label><br />
            <label id="lblPrenom" for="txtPrenom">Prénom : <input name="txtPrenom" type="text" id="txtPrenom" /></label><br />
            <label id="lblAdresse" for="txtAdresse">Adresse : <input name="txtAdresse" type="text" id="txtAdresse" /></label><br />
            <label id="lblCodePostal" for="txtCodePostal">Code postal : <input name="txtCodePostal" type="text" id="txtCodePostal" /></label><br />
            <label id="lblVille" for="txtVille">Ville : <input name="txtVille" type="text" id="txtVille" /></label>
        </fieldset>
    </form> 

Les champs de formulaires permettant de faire des choix

Nous allons créer un deuxième regroupement dans lequel nous demanderons des informations diverses à notre internaute.

 <!-- informations diverses -->
        <fieldset>
			<legend>Informations diverses</legend>
        </fieldset> 

Liste déroulante

Nous souhaitons connaître les moyens de transports utilisés par nos internautes et nous allons donc proposer des choix dans une liste à choix multiples. Nous allons utiliser l’élément select pour définir la liste. Cet élément sera lui aussi placé à l’intérieur d’un élément label.

Nous allons ensuite définir les attributs name et id sur la valeur listTransports.

 <!-- informations diverses -->
        <fieldset>
			<legend>Informations diverses</legend>
            <!-- Liste déroulante -->
            <label id="lblTransports" for="listTransports" >
            	Transports : 
                <select name="listTransports" id="listTransports" >
            	</select>
            </label>
        </fieldset> 

La liste sera remplie avec 8 items : A pied, Vélo, Moto, Voiture, Bus, Train, Bateau, Avion. Nous utiliserons pour chaque item, un élément option.

 <!-- informations diverses -->
        <fieldset>
			<legend>Informations diverses</legend>
            <!-- Liste déroulante -->
            <label id="lblTransports" for="listTransports" >
            	Transports : 
                <select name="listTransports" id="listTransports" multiple="multiple" size="5">
                	<option value="1">A pied</option>
                    <option value="2">Vélo</option>
                    <option value="3">Moto</option>
                    <option value="4">Voiture</option>
                    <option value="5">Bus</option>
                    <option value="6">Train</option>
                    <option value="7">Bateau</option>
                    <option value="8">Avion</option>
            	</select>
            </label>
        </fieldset>

Afin de ne pas surcharger le formulaire, nous allons afficher les 5 premiers items en précisant l’attribut size de l’élément select.

Les autres items seront accessibles en utilisant la barre de défilement verticale de la liste. Nous autorisons aussi la sélection de plusieurs items en précisant l’attribut multiple de l’élément select.

 <select name="listTransports" id="listTransports" multiple="multiple" size="5"> 

Cases à cocher

Les cases à cocher sont aussi des champs de formulaires permettant de faire des choix multiples. Nous allons les utiliser pour demander les loisirs des internautes.

Nous allons dans un premier temps saisir le libellé de la demande : Loisirs.

A chaque case à cocher sera associé un élément label correspondant au texte qui sera placé à droite de la case à cocher.

Puis nous allons ensuite insérer la case à cocher en utilisant l’élément input avec l’attribut type valorisé à checkbox.

Nous allons ensuite définir les attributs name et id sur la valeur chkCinema.

 <!-- Cases à cocher -->
            Loisirs : <br />
            <label id="lblCinema" for="chkCinema"><input name="chkCinema" type="checkbox" id="chkCinema" /> Cinéma</label>

Nous allons répéter l’opération pour les entrées : Musique, Internet et Sports.

 <!-- Cases à cocher -->
            Loisirs : <br />
            <label id="lblCinema" for="chkCinema"><input name="chkCinema" type="checkbox" id="chkCinema" /> Cinéma</label><br />
            <label id="lblMusique" for="chkMusique"><input name="chkMusique" type="checkbox" id="chkMusique" />Musique</label><br />
            <label id="lblInternet" for="chkInternet"><input name="chkInternet" type="checkbox" id="chkInternet" />Internet</label><br />
            <label id="lblSports" for="chkSports"><input name="chkSports" type="checkbox" id="chkSports" />Sports</label> 

Case d’option

Dans le cas où le choix doit être unique, nous n’allons pas utiliser les cases à cocher mais les cases d’options (boutons radio). Nous allons les utiliser pour demander la tranche d’âge des internautes.

Nous allons dans un premier temps saisir le libellé de la demande : Tranche d’âges.

A chaque case d’option sera associé un élément label correspondant au texte qui sera placé à droite de la case d’option.

Puis nous allons insérer la case d’option en utilisant l’élément input avec l’attribut type valorisé à radiobutton.

Nous allons ensuite définir les attributs name et id sur la valeur coTranche1

 Tranche d'âges :<br />
            <label id="lblTranche1" for="coTranche1"><input name="coTranches" type="radio" id="coTranche1" value="coTranche1" checked="CHECKED" /> 

Nous allons répéter l’opération pour les entrées : 21 - 40 ans, 41 - 60 ans et 61 ans et plus.

 Tranche d'âges :<br />
            <label id="lblTranche1" for="coTranche1"><input name="coTranches" type="radio" id="coTranche1" value="coTranche1" checked="CHECKED" />
        0 - 20 ans</label><br />
            <label id="lblTranche2" for="coTranche2"><input name="coTranches" type="radio" id="coTranche2" value="coTranche2" />
        21 - 40 ans</label><br />
            <label id="lblTranche3" for="coTranche3"><input name="coTranches" type="radio" id="coTranche3" value="coTranche3" />
        41 - 60 ans</label><br />
            <label id="lblTranche4" for="coTranche4"><input name="coTranches" type="radio" id="coTranche4" value="coTranche4" />
        61 ans et plus</label> 

Les boutons

Nous insérons un bouton qui permet d’envoyer les informations vers un script serveur défini dans les propriétés du formulaire grâce à l’élément input dont l’attribut type sera valorisé à submit.

 <!-- Boutons d'envoi et de réinitialisation -->
			<input name="Submit1" type="submit" value="soumettre" />&nbsp;<input name="Reset1" type="reset" value="rétablir" /> 

Le code complet

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
<body>
    <!-- Le formulaire -->
    <form action="" method="post" id="formAccessible">
    	<!-- identité -->
    	<fieldset>
        	<legend>Identité</legend>
            <!-- champ de saisies -->
            <label id="lblNom" for="txtNom">Nom : <input name="txtNom" type="text" id="txtNom" /></label><br />
            <label id="lblPrenom" for="txtPrenom">Prénom : <input name="txtPrenom" type="text" id="txtPrenom" /></label><br />
            <label id="lblAdresse" for="txtAdresse">Adresse : <input name="txtAdresse" type="text" id="txtAdresse" /></label><br />
            <label id="lblCodePostal" for="txtCodePostal">Code postal : <input name="txtCodePostal" type="text" id="txtCodePostal" /></label><br />
            <label id="lblVille" for="txtVille">Ville : <input name="txtVille" type="text" id="txtVille" /></label>
        </fieldset>
 
        <!-- informations diverses -->
        <fieldset>
			<legend>Informations diverses</legend>
            <!-- Liste déroulante -->
            <label id="lblTransports" for="listTransports">
            	Transports : 
                <select name="listTransports" id="listTransports" multiple="multiple" size="5">
                	<option value="1">A pied</option>
                    <option value="2">Vélo</option>
                    <option value="3">Moto</option>
                    <option value="4">Voiture</option>
                    <option value="5">Bus</option>
                    <option value="6">Train</option>
                    <option value="7">Bateau</option>
                    <option value="8">Avion</option>
            	</select>
            </label>
            <br />
            <!-- Cases à cocher -->
            Loisirs : <br />
            <label id="lblCinema" for="chkCinema"><input name="chkCinema" type="checkbox" id="chkCinema" /> Cinéma</label><br />
            <label id="lblMusique" for="chkMusique"><input name="chkMusique" type="checkbox" id="chkMusique" />Musique</label><br />
            <label id="lblInternet" for="chkInternet"><input name="chkInternet" type="checkbox" id="chkInternet" />Internet</label><br />
            <label id="lblSports" for="chkSports"><input name="chkSports" type="checkbox" id="chkSports" />Sports</label>
            <br />
            <!-- Cases d'options -->
            Tranche d'âges :<br />
            <label id="lblTranche1" for="coTranche1"><input name="coTranches" type="radio" id="coTranche1" value="coTranche1" checked="CHECKED" />
        0 - 20 ans</label><br />
            <label id="lblTranche2" for="coTranche2"><input name="coTranches" type="radio" id="coTranche2" value="coTranche2" />
        21 - 40 ans</label><br />
            <label id="lblTranche3" for="coTranche3"><input name="coTranches" type="radio" id="coTranche3" value="coTranche3" />
        41 - 60 ans</label><br />
            <label id="lblTranche4" for="coTranche4"><input name="coTranches" type="radio" id="coTranche4" value="coTranche4" />
        61 ans et plus</label>
			<br />
			<!-- Boutons d'envoi et de réinitialisation -->
			<input name="Submit1" type="submit" value="soumettre" />&nbsp;<input name="Reset1" type="reset" value="rétablir" />
        </fieldset>
 
    </form>
</body>
</html> 

En savoir plus