📘 Chapitre 4 – Validation et accessibilité

1. 🎯 Objectif pédagogique

Savoir mettre en place la validation de base des formulaires HTML (via attributs natifs) et appliquer des principes d’accessibilité pour rendre les formulaires utilisables par tous, y compris les personnes utilisant des lecteurs d’écran.

2. 📚 Concepts abordés

  • Attributs de validation HTML5 : required, pattern, min, max, type
  • Messages d’erreur natifs et personnalisés (title)
  • Attributs d’accessibilité : aria-label, aria-required
  • Utilisation des balises label et fieldset pour la navigation assistée
  • Bonnes pratiques pour l’accessibilité et la sémantique

3. 🧠 Explication théorique

La validation HTML5 permet de contrôler les données avant l’envoi du formulaire, sans utiliser JavaScript. Par exemple :

<input type="email" name="email" required>

L’attribut required empêche l’envoi du formulaire si le champ est vide.

Pour les lecteurs d’écran, il est essentiel d’associer correctement les champs et labels, et d’utiliser des attributs ARIA (Accessible Rich Internet Applications), par exemple :

<input type="text" id="nom" aria-label="Votre nom complet" required>

Exemple d’un champ avec validation : 

<label for="tel">Téléphone :</label>
<input type="tel" id="tel" name="tel" pattern="[0-9]{10}" title="10 chiffres attendus" required>

4. 🛠 Tutoriel pratique

Résumé du travail : Créer un formulaire de contact avec nom, e-mail, téléphone, message et un bouton d’envoi, en intégrant des validations de base et des attributs ARIA.

Arborescence du projet :

mon_projet/
└── index.html

Étape 1 : Structure du formulaire 

<form action="#" method="post">
  <fieldset>
    <legend>Contactez-nous</legend>
  </fieldset>
</form>

Étape 2 : Champs avec validations 

<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" aria-label="Nom complet" required>

<label for="email">E-mail :</label>
<input type="email" id="email" name="email" aria-label="Adresse e-mail" required>

<label for="tel">Téléphone :</label>
<input type="tel" id="tel" name="tel" pattern="[0-9]{10}" title="10 chiffres attendus" aria-label="Numéro de téléphone">

Étape 3 : Champ message et bouton 

<label for="message">Message :</label>
<textarea id="message" name="message" rows="5" required></textarea>

<button type="submit">Envoyer</button>

5. 🧾 Résumé et points-clés

  • Utiliser required, pattern et type pour la validation native.
  • Les attributs ARIA améliorent la compréhension des champs pour les lecteurs d’écran.
  • Les formulaires doivent rester clairs, lisibles et accessibles à tous.