Outil gratuit

Générateur Fieldset/Legend

Créez des groupes de champs accessibles avec <fieldset> et <legend> (RGAA 11.5, 11.6).

Guide 11.5 Guide 11.6

Configuration

1
2
3

Prévisualisation

Adresse de livraison
HTML - Groupe de champs accessible
<fieldset>
  <legend>Adresse de livraison</legend>

  <label for="rue">Rue</label>
  <input type="text" id="rue" name="rue" />

  <label for="cp">Code postal</label>
  <input type="text" id="cp" name="cp" />

  <label for="ville">Ville</label>
  <input type="text" id="ville" name="ville" />
</fieldset>

Au-delà du fieldset : la checklist du formulaire accessible

Règles adaptées de la checklist formulaires de DesignGouv (nouvelle fenêtre) (DINUM, licence etalab-2.0, nouvelle fenêtre).

  • Un libellé visible pour chaque champ : jamais un simple placeholder, peu lisible, non restitué par les lecteurs d'écran et qui disparaît à la saisie (critère RGAA 11.1).
  • Éviter les infobulles pour l'aide à la saisie : une aide toujours visible sert tout le monde, y compris au clavier et sur mobile.
  • Signaler les champs obligatoires (mention explicite ou astérisque expliqué en début de formulaire) et annoncer les formats attendus avant la saisie (critère RGAA 11.10).
  • Regrouper les champs de même nature (identité, coordonnées…) : c'est le rôle du fieldset généré ci-dessus (critères RGAA 11.5 à 11.7).
  • Ne demander que les informations nécessaires : chaque champ superflu allonge le formulaire et augmente la charge cognitive.
  • Des messages d'erreur qui identifient le champ concerné et suggèrent une correction (critère RGAA 11.11).
  • Autoriser le copier-coller et le remplissage automatique (attribut autocomplete, critère RGAA 11.13).
  • Ajuster la largeur des champs à la valeur attendue : un code postal n'a pas besoin de la largeur d'une adresse.
  • Afficher un récapitulatif avant soumission pour les formulaires longs ou en plusieurs étapes.
  • Rester cohérent : mêmes termes et mêmes formulations pour une même information, dans le formulaire et en dehors.

Allez plus loin dans l'accessibilité

Votre site respecte-t-il les 106 critères du RGAA ? Lancez un audit complet gratuit pour découvrir les problèmes d'accessibilité et comment les corriger.

Scanner mon site gratuitement