Atelier - Construire un formulaire simple et accessible

Partie 4 - L'accessibilité

Construire un formulaire simple et accessible

Le balisage non accessible

Dans cet exemple, le formulaire est balisé avec des paragraphes et des éléments de présentation comme <br> et <strong>.

<form action="#" method="get">
	<p>
		<strong>Détails personnels</strong><br>
		Nom :
		<input type="text" name="details-nom" size="15">
		Téléphone du domicile :
		<input type="text" name="details-telephone" size="15">
	</p>
	<p>
		<strong>Choisissez les brochures que vous désirez</strong><br>
		<input type="checkbox" name="brochures" value="roses">
		Roses
		<input type="checkbox" name="brochures" value="jonquilles">
		Jonquilles
		<input type="checkbox" name="brochures" value="tulipes">
		Tulipes
	</p>
	</form>

Étape n°1 - grouper les informations en utilisants des jeux de champ (`fieldset`)

<form action="#" method="get">
	<fieldset>
		<strong>Détails personnels</strong><br>
		Nom :
		<input type="text" name="details-nom" size="15">
		Téléphone du domicile :
		<input type="text" name="details-telephone" size="15">
	</fieldset>
	<fieldset>
		<strong>Choisissez les brochures que vous désirez</strong><br>
		<input type="checkbox" name="brochures" value="roses">
		Roses
		<input type="checkbox" name="brochures" value="jonquilles">
		Jonquilles
		<input type="checkbox" name="brochures" value="tulipes">
		Tulipes
	</fieldset>
	</form>

Étape n°2 - étiquetter les groupes en utilisant des légendes (`legend`)

<form action="#" method="get">
	<fieldset>
		<legend>Détails personnels</legend>
		Nom :
		<input type="text" name="details-nom" size="15">
		Téléphone du domicile :
		<input type="text" name="details-telephone" size="15">
	</fieldset>
	<fieldset>
		<legend>Choisissez les brochures que vous désirez</legend>
		<input type="checkbox" name="brochures" value="roses">
		Roses
		<input type="checkbox" name="brochures" value="jonquilles">
		Jonquilles
		<input type="checkbox" name="brochures" value="tulipes">
		Tulipes
	</fieldset>
	</form>

Étape n°3 - saisir une étiquette textuelle à un champ spécifique en utilisant "`label for`" et un identificateur unique "`id`"

<form action="#" method="get">
	<fieldset>
		<legend>Détails personnels</legend>
		<label for="details-nom">Nom :</label>
		<input id="details-nom" type="text" name="details-nom" size="15">
		<label for="details-telephone">Téléphone du domicile :</label>
		<input id="details-telephone" type="text" name="details-telephone" size="15">
	</fieldset>
	<fieldset>
	<legend>Choisissez les brochures que vous désirez</legend>
		<input id="roses" type="checkbox" name="brochures" value="roses">
		<label for="roses">Roses</label>
		<input id="jonquilles" type="checkbox" name="brochures" value="jonquilles">
		<label for="jonquilles">Jonquilles</label>
		<input id="tulipes" type="checkbox" name="brochures" value="tulipes">
		<label for="tulipes">Tulipes</label>
	</fieldset>
	</form>

Étape n°4 - ajouter des titres

<form action="#" method="get">
	<fieldset>
		<legend>Détails personnels</legend>
		<label for="details-nom">Nom :</label>
		<input id="details-nom" type="text" title="saisissez votre nom" name="details-nom" size="15">
		<label for="details-telephone">Téléphone du domicile :</label>
		<input id="details-telephone" type="text" title="saisissez le numéro de téléphone de votre domicile" name="details-telephone" size="15">
	</fieldset>
	<fieldset>
		<legend>Choisissez les brochures que vous désirez</legend>
		<input id="roses" type="checkbox" title="brochure sur les roses" name="brochures" value="roses">
		<label for="roses">Roses</label> 
		<input id="jonquilles" type="checkbox" title="brochure sur les jonquilles" name="brochures" value="jonquilles">
		<label for="jonquilles">Jonquilles</label>
		<input id="tulipes" type="checkbox" title="brochure sur les tulipes" name="brochures" value="tulipes">
		<label for="tulipes">Tulipes</label>
	</fieldset>
	</form>

Étape n°5 - donner du style aux éléments accessibles