L'accessibilité est essentielle pour permettre à tous les utilisateurs, y compris ceux ayant des handicaps, d'interagir avec vos formulaires.
1. Attributs ARIA :
Utilisation de aria-label et aria-describedby :
<input type="text" aria-label="Nom complet">
2. Groupement des champs :
Balises <fieldset> et <legend> :
<fieldset>
<legend>Informations personnelles</legend>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
</fieldset>
3. Gestion des erreurs :
Messages d'erreur personnalisés :
<input type="email" required>
<span class="error">Veuillez entrer une adresse email valide.</span>
4. Exemple pratique : Un formulaire de contact accessible :
<form action="/contact" method="post">
<fieldset>
<legend>Contactez-nous</legend>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required>
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<label for="message">Message :</label>
<textarea id="message" name="message" required></textarea>
</fieldset>
<button type="submit">Envoyer</button>
</form>
Retour à la liste
Richard Bonnegent
Commentaires (0)