{"id":114,"date":"2026-02-09T15:22:26","date_gmt":"2026-02-09T13:22:26","guid":{"rendered":"https:\/\/www.conform-it.fr\/?p=114"},"modified":"2026-02-09T15:22:26","modified_gmt":"2026-02-09T13:22:26","slug":"chapitre-11-du-rgaa-formulaires-rendre-la-saisie-accessible-et-comprehensible","status":"publish","type":"post","link":"https:\/\/wp7.conform-it.fr\/index.php\/2026\/02\/09\/chapitre-11-du-rgaa-formulaires-rendre-la-saisie-accessible-et-comprehensible\/","title":{"rendered":"Chapitre 11 du RGAA : Formulaires \u2013 rendre la saisie accessible et compr\u00e9hensible"},"content":{"rendered":"

Introduction<\/span><\/h2>\n

Le chapitre 11 du RGAA est consacr\u00e9 aux formulaires, \u00e9l\u00e9ments centraux de nombreux services num\u00e9riques : cr\u00e9ation de compte, d\u00e9marches administratives, recherches, paiements, demandes de contact, etc.<\/p>\n

Les formulaires repr\u00e9sentent souvent un point critique en accessibilit\u00e9.<\/strong> Une mauvaise conception peut emp\u00eacher un utilisateur de comprendre les champs \u00e0 remplir, de corriger ses erreurs ou m\u00eame de finaliser une action.<\/p>\n

L\u2019objectif de ce chapitre est de garantir que chaque utilisateur puisse identifier les champs, comprendre ce qui est attendu et recevoir un retour clair lors de la saisie.<\/p>\n

Les enjeux d\u2019accessibilit\u00e9 des formulaires<\/span><\/h2>\n

Un formulaire accessible doit permettre :<\/p>\n

    \n
  • \n

    D\u2019identifier clairement chaque champ<\/p>\n<\/li>\n

  • \n

    De comprendre quelles informations sont attendues<\/p>\n<\/li>\n

  • \n

    De rep\u00e9rer les champs obligatoires<\/p>\n<\/li>\n

  • \n

    De recevoir des messages d\u2019erreur explicites<\/p>\n<\/li>\n

  • \n

    De naviguer facilement au clavier<\/p>\n<\/li>\n<\/ul>\n

    Les technologies d\u2019assistance s\u2019appuient fortement sur la structure HTML et sur certains attributs ARIA pour restituer ces informations.<\/p>\n

    Principe fondamental : chaque champ doit avoir une \u00e9tiquette<\/span><\/h2>\n

    L\u2019\u00e9tiquette (label) est l\u2019\u00e9l\u00e9ment qui d\u00e9crit le r\u00f4le du champ.<\/p>\n

    Exemple conforme<\/h4>\n
    <label for=\"email\">Adresse email<\/label>\n<input type=\"email\" id=\"email\" name=\"email\">\n<\/code><\/pre>\n
    Le lecteur d\u2019\u00e9cran annoncera :
    \u00ab Adresse email, champ de saisie \u00bb.<\/p>\n
    Exemple non conforme<\/h4>\n
    <input type=\"email\" placeholder=\"Adresse email\">\n<\/code><\/pre>\n
    Le placeholder ne remplace pas un label. Il dispara\u00eet d\u00e8s que l\u2019utilisateur commence \u00e0 \u00e9crire.<\/p>\n
    Exemple 2 : champ obligatoire<\/h4>\n
    Un champ requis doit \u00eatre clairement identifi\u00e9.<\/p>\n
    <label for=\"nom\">\n  Nom <span aria-hidden=\"true\">*<\/span>\n<\/label>\n<input \n  type=\"text\" \n  id=\"nom\" \n  name=\"nom\" \n  required \n  aria-required=\"true\">\n<\/code><\/pre>\n
    Bonnes pratiques :<\/p>\n
      \n
    • \n
      required<\/code> pour le navigateur<\/p>\n<\/li>\n
    • \n
      aria-required=\"true\"<\/code> pour les technologies d\u2019assistance<\/p>\n<\/li>\n
    • \n
      L\u2019ast\u00e9risque visible compl\u00e8te l\u2019information<\/p>\n<\/li>\n<\/ul>\n
      Exemple 3 : aide \u00e0 la saisie<\/h4>\n
      On peut associer une instruction \u00e0 un champ.<\/p>\n
      <label for=\"mdp\">Mot de passe<\/label>\n<input \n  type=\"password\" \n  id=\"mdp\" \n  aria-describedby=\"aide-mdp\">\n\n<p id=\"aide-mdp\">\n  Le mot de passe doit contenir au moins 8 caract\u00e8res.\n<\/p>\n<\/code><\/pre>\n
      aria-describedby<\/code> permet au lecteur d\u2019\u00e9cran de lire l\u2019aide automatiquement.<\/p>\n
      Exemple 4 : message d\u2019erreur li\u00e9 \u00e0 un champ<\/h4>\n
      Lorsqu\u2019une erreur appara\u00eet, elle doit \u00eatre compr\u00e9hensible et associ\u00e9e au bon champ.<\/p>\n
      <label for=\"email\">Adresse email<\/label>\n<input \n  type=\"email\" \n  id=\"email\" \n  aria-describedby=\"erreur-email\">\n\n<p id=\"erreur-email\" role=\"alert\">\n  L\u2019adresse email saisie n\u2019est pas valide.\n<\/p>\n<\/code><\/pre>\n
      role=\"alert\"<\/code> annonce imm\u00e9diatement l\u2019erreur.<\/p>\n
      Exemple 5 : groupe de champs li\u00e9s<\/h4>\n
      Pour des choix multiples, il faut regrouper les \u00e9l\u00e9ments.<\/p>\n
      <fieldset>\n  <legend>Mode de contact pr\u00e9f\u00e9r\u00e9<\/legend>\n\n  <label>\n    <input type=\"radio\" name=\"contact\" value=\"email\">\n    Email\n  <\/label>\n\n  <label>\n    <input type=\"radio\" name=\"contact\" value=\"telephone\">\n    T\u00e9l\u00e9phone\n  <\/label>\n<\/fieldset>\n<\/code><\/pre>\n
      Le <legend><\/code> donne un contexte au groupe.<\/p>\n
      Exemple 6 : champ avec ic\u00f4ne seule<\/h4>\n
      Si un bouton n\u2019a pas de texte visible, il doit \u00eatre nomm\u00e9.<\/p>\n
      <button aria-label=\"Lancer la recherche\">\n  \ud83d\udd0d\n<\/button>\n<\/code><\/pre>\n
      ARIA donne un nom accessible.<\/p>\n
      Exemple 7 : \u00e9tat invalide d\u2019un champ<\/h4>\n
      ARIA peut signaler qu\u2019un champ contient une erreur.<\/p>\n
      <label for=\"code\">Code postal<\/label>\n<input \n  type=\"text\" \n  id=\"code\"\n  aria-invalid=\"true\">\n<\/code><\/pre>\n
      Le lecteur d\u2019\u00e9cran annonce que la valeur est incorrecte.<\/p>\n
      Exemple 8 : d\u00e9sactiver temporairement un champ<\/h4>\n
      <input \n  type=\"text\" \n  aria-disabled=\"true\">\n<\/code><\/pre>\n
      Cela indique que le champ n\u2019est pas utilisable, m\u00eame si l\u2019apparence le sugg\u00e8re d\u00e9j\u00e0.<\/p>\n
      Le r\u00f4le d\u2019ARIA dans les formulaires<\/span><\/h2>\n
      ARIA compl\u00e8te le HTML pour am\u00e9liorer la compr\u00e9hension :<\/p>\n
        \n
      • \n
        aria-required=\"true\"<\/code> : champ obligatoire<\/p>\n<\/li>\n
      • \n
        aria-describedby<\/code> : aide ou message associ\u00e9<\/p>\n<\/li>\n
      • \n
        aria-invalid=\"true\"<\/code> : erreur d\u00e9tect\u00e9e<\/p>\n<\/li>\n
      • \n
        role=\"alert\"<\/code> : annonce imm\u00e9diate d\u2019un message<\/p>\n<\/li>\n
      • \n
        aria-label<\/code> : nom accessible sans texte visible<\/p>\n<\/li>\n<\/ul>\n
        Mais le HTML natif reste la base indispensable.<\/p>\n
        Les crit\u00e8res cl\u00e9s du RGAA pour les formulaires<\/span><\/h2>\n
        Le chapitre 11 v\u00e9rifie notamment que :<\/p>\n
          \n
        • \n
          Chaque champ poss\u00e8de un label<\/p>\n<\/li>\n
        • \n
          Les champs obligatoires sont identifi\u00e9s<\/p>\n<\/li>\n
        • \n
          Les messages d\u2019erreur sont clairs<\/p>\n<\/li>\n
        • \n
          Les aides \u00e0 la saisie sont accessibles<\/p>\n<\/li>\n
        • \n
          Les groupes de champs sont structur\u00e9s<\/p>\n<\/li>\n<\/ul>\n
          Ces \u00e9l\u00e9ments rendent l\u2019interaction plus simple et plus fiable.<\/p>\n
          Erreurs fr\u00e9quentes observ\u00e9es en audit<\/span><\/h2>\n
          On retrouve souvent :<\/p>\n
            \n
          • \n
            Des champs sans \u00e9tiquette<\/p>\n<\/li>\n
          • \n
            Des instructions uniquement en placeholder<\/p>\n<\/li>\n
          • \n
            Des erreurs non associ\u00e9es aux champs<\/p>\n<\/li>\n
          • \n
            Des formulaires difficiles \u00e0 utiliser au clavier<\/p>\n<\/li>\n
          • \n
            Des messages affich\u00e9s mais non annonc\u00e9s<\/p>\n<\/li>\n<\/ul>\n
            Ces probl\u00e8mes peuvent bloquer compl\u00e8tement un utilisateur.<\/p>\n
            Impact concret pour les utilisateurs<\/span><\/h2>\n
            Une personne utilisant un lecteur d\u2019\u00e9cran peut ne pas savoir :<\/p>\n
              \n
            • \n
              Quel champ elle remplit<\/p>\n<\/li>\n
            • \n
              Ce qui est attendu<\/p>\n<\/li>\n
            • \n
              O\u00f9 se trouve l\u2019erreur<\/p>\n<\/li>\n
            • \n
              Comment corriger la saisie<\/p>\n<\/li>\n<\/ul>\n
              Une bonne structuration transforme l\u2019exp\u00e9rience : le formulaire devient clair, guid\u00e9 et compr\u00e9hensible.<\/p>\n
              Conclusion<\/span><\/h2>\n
              Le chapitre 11 du RGAA encadre la conception de formulaires accessibles, en insistant sur la clart\u00e9 des \u00e9tiquettes, la gestion des erreurs et l\u2019accompagnement de l\u2019utilisateur lors de la saisie.<\/p>\n
              Les balises HTML structurent les champs et les groupes, tandis que les attributs ARIA viennent enrichir les informations transmises aux technologies d\u2019assistance. Ensemble, ils permettent de cr\u00e9er des formulaires inclusifs, compr\u00e9hensibles et utilisables par tous.<\/p>\n","protected":false},"excerpt":{"rendered":"
              Introduction Le chapitre 11 du RGAA est consacr\u00e9 aux formulaires, \u00e9l\u00e9ments centraux de nombreux services num\u00e9riques : cr\u00e9ation de compte, […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[7],"tags":[],"class_list":["post-114","post","type-post","status-publish","format-standard","hentry","category-comprendre-le-rgaa"],"_links":{"self":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/posts\/114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/comments?post=114"}],"version-history":[{"count":0,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/posts\/114\/revisions"}],"wp:attachment":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/media?parent=114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/categories?post=114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/tags?post=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}