Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Créer un formulaire accessible avec Expression Web

Par tannoy (Antony Chauviré), le 03 juin 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 utiliser le panneau Boîte à Outils accessible depuis le menu Volet des tâches.

Le panneau Boîte à Outils regroupe dans la catégorie Contrôles de formulaire, tous les objets utilisables dans un formulaire.

Nous allons insérer dans un premier temps le formulaire en double-cliquant sur l’objet Formulaire.

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.

Nous allons insérer cet élément fieldset en double-cliquant sur l’objet Zone de groupe.

L’élément fieldset est restitué visuellement par un cadre contenant une légende. Dans notre cas, nous allons créer un premier regroupement en modifiant le texte zone de groupe par Identité.

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, représenté dans Expression Web par le contrôle de formulaire Etiquette, permet de regrouper un champ de formulaire et sa description afin d’améliorer l’accessibilité du formulaire.

Nous souhaitons créer un champ de saisie pour le nom. Nous allons double-cliquer sur l’objet Etiquette, puis nous allons saisir Nom : et nous allons ensuite double-cliquer sur l’objet Entrée(texte) pour insérer un champ de saisie sur une seule ligne.

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.

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

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.

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 double-cliquer sur l’objet de formulaire Etiquette, saisir le texte Transports : puis double-cliquer sur l’objet de formulaire Liste déroulante.

Nous allons ensuite définir les attributs name et id sur la valeur listTransports. En double-cliquant sur la liste dans le formulaire, nous allons modifier ses propriétés.

Le bouton ajouter va nous permettre de remplir la liste.

La liste sera remplie avec 8 items : A pied, Vélo, Moto, Voiture, Bus, Train, Bateau, Avion. Afin de ne pas surcharger le formulaire, nous allons afficher les 5 premiers items en définissant la hauteur sur 5. 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.

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.

A chaque case à cocher sera associé un objet de formulaire Etiquette correspondant au texte qui sera placé à droite de la case à cocher.

Nous allons dans un premier temps saisir le libellé de la demande : Loisirs. Puis nous allons double-cliquer sur l’objet de formulaire Etiquette et de nouveau double-cliquer mais cette fois sur l’objet de formulaire Entrée (case à cocher), enfin nous saisirons le texte Cinéma.

Nous allons ensuite définir les attributs name et id sur la valeur chkCinema en sélectionnant la case à cocher.

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

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. Nous allons les utiliser pour demander la tranche d’âge des internautes.

A chaque case d’option sera associé un objet de formulaire Etiquette correspondant au texte qui sera placé à droite de la case d’option.

Nous allons dans un premier temps saisir le libellé de la demande : Tranche d’âges. Puis nous allons double-cliquer sur l’objet de formulaire Etiquette et de nouveau double-cliquer mais cette fois sur l’objet de formulaire Entrée (case d’option), enfin nous saisirons le texte 0 - 20 ans.

Nous allons ensuite définir les attributs name et id sur la valeur coTranche1 en sélectionnant la case d’option.

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

Les boutons

Il est possible de définir 2 types de boutons dans le formulaire, 1 bouton d’envoi et 1 bouton de remise à zéro des champs.

En double-cliquant sur l’objet de formulaire Entrée (soumettre), nous insérons un bouton qui permet d’envoyer les informations vers un script serveur défini dans les propriétés du formulaire.

En double-cliquant sur l’objet de formulaire Entrée (rétablir), nous insérons un bouton qui permet de remettre à zéro les champs déjà renseignés.

Le code complet

<form method="post" action="">
    <fieldset name="Group1">
        <legend>Identité</legend>
        <label id="lblNom">Nom : <input name="txtNom" type="text" id="txtNom" /></label><br />
        <label id="lblPrenom">Prénom :          <input name="txtPrenom" type="text" id="txtPrenom" /></label><br />
        <label id="lblAdresse">Adresse :          <input name="txtAdresse" type="text" id="txtAdresse" /></label><br />
        <label id="lblCodePostal">Code postal :          <input name="txtCodePostal" type="text" id="txtCodePostal" /></label><br />
        <label id="lblVille">Ville :          <input name="txtVille" type="text" id="txtVille" /></label>
    </fieldset><fieldset name="Group1">
        <legend>Informations diverses</legend>
        <label id="lblTransports">Transports :
            <select name="listTransports" id="listTransports" multiple="multiple" size="5">
                <option>A pied</option>
                <option>Vélo</option>
                <option>Moto</option>
                <option>Voiture</option>
                <option>Bus</option>
                <option>Train</option>
                <option>Bateau</option>
                <option>Avion</option>
            </select>
        </label><br />Loisirs : <br />
        <label id="lblCinema"><input name="chkCinema" type="checkbox" id="chkCinema" /> Cinéma</label><br />
        <label id="lblMusique"><input name="chkMusique" type="checkbox" id="chkMusique" />Musique</label><br />
        <label id="lblInternet"><input name="chkInternet" type="checkbox" id="chkInternet" />Internet</label><br />
        <label id="lblSports"><input name="chkSports" type="checkbox" id="chkSports" />Sports</label>
        <br />
        Tranche d'âges :<br />
        <label id="lblTranche1"><input name="coTranche1" type="radio" checked="checked" id="coTranche1" />0 - 20 ans</label><br />
        <label id="lblTranche2"><input name="coTranche2" type="radio" checked="checked" id="coTranche2" />21 - 40 ans</label><br />
        <label id="lblTranche3"><input name="coTranche3" type="radio" checked="checked" id="coTranche3" />41 - 60 ans</label><br />
        <label id="lblTranche4"><input name="coTranche4" type="radio" checked="checked" id="coTranche4" />61 ans et plus</label>
        <br />
 
        <input name="Submit1" type="submit" value="soumettre" /> <input name="Reset1" type="reset" value="rétablir" /></fieldset>
</form>