{"id":105,"date":"2026-02-09T10:28:51","date_gmt":"2026-02-09T08:28:51","guid":{"rendered":"https:\/\/www.conform-it.fr\/?p=105"},"modified":"2026-02-09T10:28:51","modified_gmt":"2026-02-09T08:28:51","slug":"chapitre-2-du-rgaa-cadres-frames-comprendre-et-rendre-accessibles-les-contenus-integres","status":"publish","type":"post","link":"https:\/\/wp7.conform-it.fr\/index.php\/2026\/02\/09\/chapitre-2-du-rgaa-cadres-frames-comprendre-et-rendre-accessibles-les-contenus-integres\/","title":{"rendered":"Chapitre 2 du RGAA : Cadres (frames) \u2013 comprendre et rendre accessibles les contenus int\u00e9gr\u00e9s"},"content":{"rendered":"

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

Le chapitre 2 du RGAA est consacr\u00e9 aux cadres, plus commun\u00e9ment appel\u00e9s frames<\/em> et iframes<\/em>. M\u00eame si leur usage est aujourd\u2019hui plus encadr\u00e9 qu\u2019\u00e0 l\u2019\u00e9poque des framesets, ils restent tr\u00e8s pr\u00e9sents dans les sites web modernes : vid\u00e9os embarqu\u00e9es, cartes interactives, contenus tiers, modules externes, etc.<\/p>\n

L\u2019objectif de ce chapitre est de garantir que ces contenus int\u00e9gr\u00e9s soient identifiables, compr\u00e9hensibles et utilisables par tous les utilisateurs, notamment ceux qui naviguent avec un lecteur d\u2019\u00e9cran.<\/p>\n

Qu\u2019est-ce qu\u2019un cadre (frame) ?<\/span><\/h2>\n

Un cadre est une zone d\u2019une page web qui affiche un autre document HTML. Aujourd\u2019hui, cela se traduit presque exclusivement par l\u2019utilisation de la balise :<\/p>\n

<iframe><\/code><\/pre>\n
On la retrouve notamment pour int\u00e9grer :<\/p>\n
    \n
  • \n
    Une vid\u00e9o YouTube<\/p>\n<\/li>\n
  • \n
    Une carte interactive<\/p>\n<\/li>\n
  • \n
    Un module de paiement<\/p>\n<\/li>\n
  • \n
    Un formulaire externe<\/p>\n<\/li>\n
  • \n
    Un contenu provenant d\u2019un autre site<\/p>\n<\/li>\n<\/ul>\n
    Pour un utilisateur de lecteur d\u2019\u00e9cran, chaque iframe est per\u00e7ue comme une page dans la page. Sans identification claire, la navigation devient confuse.<\/strong><\/p>\n
    L\u2019exigence principale du RGAA<\/span><\/h2>\n
    Le principe central du chapitre 2 est simple :<\/p>\n
    \n
    Chaque cadre doit avoir un titre pertinent.<\/p>\n<\/blockquote>\n
    Ce titre permet aux technologies d\u2019assistance d\u2019annoncer clairement \u00e0 l\u2019utilisateur ce que contient la zone int\u00e9gr\u00e9e.<\/p>\n
    Exemple 1 : iframe sans titre (non conforme)<\/h4>\n
    <iframe src=\"https:\/\/www.youtube.com\/embed\/abc123\">\n<\/iframe><\/code><\/pre>\n
    Probl\u00e8me :<\/p>\n
      \n
    • \n
      Le lecteur d\u2019\u00e9cran annonce seulement \u00ab cadre \u00bb<\/p>\n<\/li>\n
    • \n
      Impossible de savoir ce qu\u2019il contient<\/p>\n<\/li>\n<\/ul>\n
      Exemple 2 : iframe avec titre pertinent (conforme)<\/h4>\n
      <iframe src=\"https:\/\/www.youtube.com\/embed\/abc123\" \n    title=\"Vid\u00e9o de pr\u00e9sentation du service\"> \n<\/iframe><\/code><\/pre>\n
      Bon usage :<\/p>\n
        \n
      • \n
        L\u2019attribut title<\/code> d\u00e9crit clairement le contenu<\/p>\n<\/li>\n
      • \n
        L\u2019utilisateur comprend imm\u00e9diatement ce qu\u2019il va trouver<\/p>\n<\/li>\n<\/ul>\n
        Bonnes pratiques pour r\u00e9diger le titre<\/h4>\n
        Le titre doit d\u00e9crire la fonction du contenu int\u00e9gr\u00e9, pas seulement sa nature.<\/p>\n
        Exemples pertinents :<\/p>\n
          \n
        • \n
          title=\"Carte indiquant l\u2019emplacement de nos agences\"<\/code><\/p>\n<\/li>\n
        • \n
          title=\"Formulaire de contact\"<\/code><\/p>\n<\/li>\n
        • \n
          title=\"Module de paiement s\u00e9curis\u00e9\"<\/code><\/p>\n<\/li>\n
        • \n
          title=\"Vid\u00e9o explicative sur l\u2019accessibilit\u00e9\"<\/code><\/p>\n<\/li>\n<\/ul>\n
          \u00c0 \u00e9viter :<\/p>\n
            \n
          • \n
            title=\"iframe\"<\/code><\/p>\n<\/li>\n
          • \n
            title=\"cadre\"<\/code><\/p>\n<\/li>\n
          • \n
            title=\"contenu\"<\/code><\/p>\n<\/li>\n<\/ul>\n
            Exemple 3 : int\u00e9gration d\u2019une carte interactive<\/h4>\n
            <iframe src=\"https:\/\/maps.google.com\/...\" \n    title=\"Carte montrant l\u2019adresse du si\u00e8ge social\"> \n<\/iframe><\/code><\/pre>\n
            Ici, le titre permet \u00e0 l\u2019utilisateur de comprendre qu\u2019il s\u2019agit d\u2019une carte et \u00e0 quoi elle sert.<\/p>\n
            Exemple 4 : int\u00e9gration d\u2019un service tiers<\/h4>\n
            <iframe src=\"https:\/\/paiement.externe.com\" \n    title=\"Interface de paiement s\u00e9curis\u00e9\"> \n<\/iframe><\/code><\/pre>\n
            Le titre rassure et informe sur la nature du contenu externe.<\/p>\n
            ARIA : est-ce n\u00e9cessaire pour les cadres ?<\/span><\/h2>\n
            Dans la majorit\u00e9 des cas, l\u2019attribut title<\/code> suffit. C\u2019est la m\u00e9thode recommand\u00e9e et la plus robuste.<\/p>\n
            ARIA devient utile seulement dans des cas particuliers.<\/p>\n
            Cas 1 : donner un nom accessible plus pr\u00e9cis<\/h4>\n
            <iframe src=\"\/statistiques.html\" \n   title=\"Tableau de bord\" \n   aria-label=\"Tableau de bord des statistiques de fr\u00e9quentation\"> \n<\/iframe><\/code><\/pre>\n
            Ici :<\/p>\n
              \n
            • \n
              title<\/code> reste obligatoire<\/p>\n<\/li>\n
            • \n
              aria-label<\/code> peut apporter un compl\u00e9ment d\u2019information<\/p>\n<\/li>\n<\/ul>\n
              Cas 2 : associer une description plus d\u00e9taill\u00e9e<\/h4>\n
              <p id=\"desc-carte\"> Cette carte permet de localiser nos agences en France et d\u2019obtenir un itin\u00e9raire. <\/p> \n<iframe src=\"https:\/\/maps.google.com\/...\" \n   title=\"Carte des agences\" \n   aria-describedby=\"desc-carte\"> \n<\/iframe><\/code><\/pre>\n
              L\u2019utilisateur dispose alors :<\/p>\n
                \n
              • \n
                D\u2019un titre court<\/p>\n<\/li>\n
              • \n
                D\u2019une description plus compl\u00e8te<\/p>\n<\/li>\n<\/ul>\n
                Navigation et accessibilit\u00e9 des contenus int\u00e9gr\u00e9s<\/span><\/h2>\n
                Le RGAA ne se limite pas au titre du cadre. Il encourage aussi \u00e0 v\u00e9rifier que :<\/p>\n
                  \n
                • \n
                  Le contenu int\u00e9gr\u00e9 est lui-m\u00eame accessible<\/p>\n<\/li>\n
                • \n
                  La navigation au clavier fonctionne \u00e0 l\u2019int\u00e9rieur du cadre<\/p>\n<\/li>\n
                • \n
                  Le focus n\u2019est pas pi\u00e9g\u00e9<\/p>\n<\/li>\n<\/ul>\n
                  En pratique, cela d\u00e9pend souvent du service tiers int\u00e9gr\u00e9. Il est donc important de choisir des solutions accessibles lorsque c\u2019est possible.<\/p>\n
                  Cas particulier : iframe d\u00e9corative<\/h4>\n
                  Si un iframe ne transmet aucune information utile (cas rare), il peut \u00eatre masqu\u00e9 aux technologies d\u2019assistance :<\/p>\n
                  <iframe src=\"animation-decorative.html\" \n   title=\"\" \n   aria-hidden=\"true\"> \n<\/iframe><\/code><\/pre>\n
                  Mais cette situation doit rester exceptionnelle.<\/p>\n
                  Erreurs fr\u00e9quentes observ\u00e9es en audit<\/span><\/h2>\n
                  Parmi les non-conformit\u00e9s courantes :<\/p>\n
                    \n
                  • \n
                    Absence totale d\u2019attribut title<\/code><\/p>\n<\/li>\n
                  • \n
                    Titres trop vagues<\/p>\n<\/li>\n
                  • \n
                    Multiples iframes avec le m\u00eame intitul\u00e9<\/p>\n<\/li>\n
                  • \n
                    Titres techniques incompr\u00e9hensibles<\/p>\n<\/li>\n
                  • \n
                    Contenus tiers impossibles \u00e0 utiliser au clavier<\/p>\n<\/li>\n<\/ul>\n
                    Ces probl\u00e8mes rendent la navigation difficile et d\u00e9sorientent les utilisateurs de lecteurs d\u2019\u00e9cran.<\/p>\n
                    Impact pour les utilisateurs<\/h2>\n
                    Sans titre clair, un utilisateur aveugle peut entendre une suite d\u2019annonces comme :<\/p>\n
                      \n
                    • \n
                      \u00ab Cadre \u00bb<\/p>\n<\/li>\n
                    • \n
                      \u00ab Cadre \u00bb<\/p>\n<\/li>\n
                    • \n
                      \u00ab Cadre \u00bb<\/p>\n<\/li>\n<\/ul>\n
                      Impossible alors de savoir o\u00f9 se trouve une vid\u00e9o, un formulaire ou une carte.<\/p>\n
                      Un simple titre descriptif transforme compl\u00e8tement l\u2019exp\u00e9rience de navigation.<\/p>\n
                      Conclusion<\/span><\/h2>\n
                      Le chapitre 2 du RGAA repose sur une r\u00e8gle simple mais essentielle : chaque cadre doit \u00eatre identifiable et compr\u00e9hensible. L\u2019attribut title<\/code> constitue la solution principale pour nommer correctement les iframes et permettre aux technologies d\u2019assistance d\u2019annoncer leur contenu.<\/p>\n
                      Les attributs ARIA peuvent venir en compl\u00e9ment pour enrichir l\u2019information, mais ne remplacent jamais ce titre obligatoire. Bien appliqu\u00e9es, ces bonnes pratiques garantissent une navigation plus claire et \u00e9vitent que les contenus int\u00e9gr\u00e9s deviennent des zones opaques pour certains utilisateurs.<\/p>\n","protected":false},"excerpt":{"rendered":"
                      Introduction Le chapitre 2 du RGAA est consacr\u00e9 aux cadres, plus commun\u00e9ment appel\u00e9s frames et iframes. M\u00eame si leur usage […]<\/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-105","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\/105","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=105"}],"version-history":[{"count":0,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/posts\/105\/revisions"}],"wp:attachment":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/media?parent=105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/categories?post=105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/tags?post=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}