{"id":104,"date":"2026-02-09T10:04:13","date_gmt":"2026-02-09T08:04:13","guid":{"rendered":"https:\/\/www.conform-it.fr\/?p=104"},"modified":"2026-02-09T10:04:13","modified_gmt":"2026-02-09T08:04:13","slug":"chapitre-1-du-rgaa-rendre-les-images-accessibles-a-tous","status":"publish","type":"post","link":"https:\/\/wp7.conform-it.fr\/index.php\/2026\/02\/09\/chapitre-1-du-rgaa-rendre-les-images-accessibles-a-tous\/","title":{"rendered":"Chapitre 1 du RGAA : rendre les images accessibles \u00e0 tous"},"content":{"rendered":"

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

Le premier chapitre du RGAA est consacr\u00e9 aux images. Ce positionnement n\u2019est pas anodin : les images sont omnipr\u00e9sentes sur le web et constituent souvent un point de blocage majeur pour les personnes utilisant des technologies d\u2019assistance, notamment les lecteurs d\u2019\u00e9cran.<\/p>\n

L\u2019objectif de ce chapitre est simple : s\u2019assurer que toute information transmise par une image soit \u00e9galement accessible sous une forme alternative.<\/p>\n

Pourquoi l\u2019accessibilit\u00e9 des images est essentielle<\/span><\/h2>\n

Une image peut servir \u00e0 illustrer, informer, expliquer ou guider la navigation. Mais pour une personne non voyante ou malvoyante, une image seule ne transmet aucune information si elle n\u2019est pas correctement d\u00e9crite.<\/p>\n

Le chapitre 1 du RGAA vise donc \u00e0 garantir que :<\/p>\n

    \n
  • \n

    Les images informatives soient compr\u00e9hensibles sans perception visuelle<\/p>\n<\/li>\n

  • \n

    Les images d\u00e9coratives ne perturbent pas la navigation<\/p>\n<\/li>\n

  • \n

    Les contenus complexes soient expliqu\u00e9s de mani\u00e8re adapt\u00e9e<\/p>\n<\/li>\n<\/ul>\n

    Il s\u2019agit de restituer l\u2019intention de l\u2019image, pas simplement son apparence.<\/p>\n

    Les diff\u00e9rents types d\u2019images<\/span><\/h2>\n

    Le RGAA distingue plusieurs cat\u00e9gories d\u2019images, car toutes ne doivent pas \u00eatre trait\u00e9es de la m\u00eame mani\u00e8re.<\/p>\n

    Les images informatives<\/h4>\n

    Une image est dite informative lorsqu\u2019elle apporte un contenu utile \u00e0 la compr\u00e9hension.<\/p>\n

    Exemples :<\/p>\n

      \n
    • \n

      Photo illustrant un article<\/p>\n<\/li>\n

    • \n

      Ic\u00f4ne accompagnant un bouton<\/p>\n<\/li>\n

    • \n

      Sch\u00e9ma explicatif<\/p>\n<\/li>\n

    • \n

      Image contenant du texte<\/p>\n<\/li>\n<\/ul>\n

      Dans ce cas, une alternative textuelle pertinente est obligatoire<\/strong>. Elle doit transmettre l\u2019information essentielle port\u00e9e par l\u2019image.<\/p>\n

      Exemple<\/span> : Une image qui apporte une information utile doit avoir un texte alternatif pertinent.<\/p>\n

      <img src=\"reunion-equipe.jpg\" \nalt=\"R\u00e9union d\u2019\u00e9quipe autour d\u2019une table avec des ordinateurs portables\">\n<\/code><\/pre>\n
      Exemple<\/span> : Si l\u2019image d\u00e9clenche une action, l\u2019alternative doit d\u00e9crire la fonction, pas l\u2019apparence.<\/p>\n
      <button type=\"submit\" aria-label=\"Rechercher\">\n  <img src=\"icone-recherche.svg\" alt=\"\">\n<\/button><\/code><\/pre>\n
      Les images d\u00e9coratives<\/h4>\n
      Certaines images ne servent qu\u2019\u00e0 l\u2019habillage visuel : motifs, arri\u00e8re-plans, illustrations sans valeur informative.<\/p>\n
      Dans ce cas, elles doivent \u00eatre ignor\u00e9es par les technologies d\u2019assistance<\/strong> afin de ne pas alourdir la lecture. Cela implique g\u00e9n\u00e9ralement une alternative vide<\/strong>.<\/p>\n
      Exemple<\/span> : Une image purement visuelle doit \u00eatre ignor\u00e9e par les technologies d\u2019assistance.<\/p>\n
      <img src=\"decoration.svg\" alt=\"\" aria-hidden=\"true\"><\/code><\/pre>\n
      Exemple<\/span> : Quand une ic\u00f4ne est utilis\u00e9e seule, il faut donner un nom accessible.<\/p>\n
      <button aria-label=\"Fermer\">\n  <svg aria-hidden=\"true\">\n    ...\n  <\/svg>\n<\/button><\/code><\/pre>\n
      Les images porteuses d\u2019information complexe<\/h4>\n
      Certaines images contiennent beaucoup de donn\u00e9es :<\/p>\n
        \n
      • \n
        Graphiques<\/p>\n<\/li>\n
      • \n
        Diagrammes<\/p>\n<\/li>\n
      • \n
        Cartes<\/p>\n<\/li>\n
      • \n
        Infographies<\/p>\n<\/li>\n<\/ul>\n
        Une simple alternative courte ne suffit pas. Il faut alors proposer une description d\u00e9taill\u00e9e, soit \u00e0 proximit\u00e9 de l\u2019image, soit via un contenu associ\u00e9.<\/p>\n
        Exemple<\/span> : Une description courte dans alt<\/code>, et une description longue ailleurs.<\/p>\n
        <img \n  src=\"graphique-ventes.png\"\n  alt=\"Graphique montrant une hausse des ventes en 2024\"\n  aria-describedby=\"desc-graphique\">\n\n<p id=\"desc-graphique\">\n  Les ventes augmentent r\u00e9guli\u00e8rement de janvier \u00e0 juin,\n  avec un pic en mai.\n<\/p><\/code><\/pre>\n
        Exemple : Le texte dans l\u2019image doit \u00eatre restitu\u00e9 dans l\u2019alternative.<\/p>\n
        <img src=\"promo.png\" \nalt=\"Promotion : -30 % sur tout le site jusqu\u2019\u00e0 dimanche\"><\/code><\/pre>\n
        Exemple<\/span> : L\u2019alternative doit d\u00e9crire la destination.<\/p>\n
        <a href=\"\/contact\" aria-label=\"Contacter le service client\">\n  <img src=\"icone-mail.svg\" alt=\"\">\n<\/a><\/code><\/pre>\n
        Exemple<\/span> : Utilisation de role=\"img\"<\/code> avec ARIA.<\/p>\n
        <div role=\"img\" aria-label=\"Suite de logos des partenaires du projet\">\n  <img src=\"logo1.png\" alt=\"\">\n  <img src=\"logo2.png\" alt=\"\">\n  <img src=\"logo3.png\" alt=\"\">\n<\/div><\/code><\/pre>\n
        Exemple<\/span> : Informer les lecteurs d\u2019\u00e9cran d\u2019un changement.<\/p>\n
        <div aria-live=\"polite\">\n  <img src=\"meteo-soleil.png\" alt=\"M\u00e9t\u00e9o : ensoleill\u00e9\">\n<\/div><\/code><\/pre>\n
        R\u00e8gle fondamentale RGAA \u00e0 retenir<\/span><\/h1>\n
        Ordre de priorit\u00e9 :<\/p>\n
          \n
        1. \n
          HTML s\u00e9mantique correct<\/p>\n<\/li>\n
        2. \n
          Attribut alt<\/code> pertinent<\/p>\n<\/li>\n
        3. \n
          ARIA seulement si n\u00e9cessaire<\/p>\n<\/li>\n<\/ol>\n
          \u00c0 \u00e9viter : Mauvaise pratique si un simple img alt=\"\"<\/code> suffit.<\/p>\n
          <div role=\"img\" aria-label=\"Image d\u00e9corative\"><\/code><\/pre>\n
          Les crit\u00e8res principaux du chapitre Images<\/span><\/h2>\n
          Le chapitre 1 s\u2019articule autour de plusieurs exigences fondamentales, chacune v\u00e9rifi\u00e9e par des tests pr\u00e9cis lors d\u2019un audit.<\/p>\n
          Parmi les points majeurs :<\/p>\n
            \n
          • \n
            Chaque image informative doit poss\u00e9der une alternative textuelle<\/p>\n<\/li>\n
          • \n
            L\u2019alternative doit \u00eatre pertinente et utile<\/p>\n<\/li>\n
          • \n
            Les images d\u00e9coratives doivent \u00eatre correctement ignor\u00e9es<\/p>\n<\/li>\n
          • \n
            Les images contenant du texte doivent \u00eatre compr\u00e9hensibles sans l\u2019image<\/p>\n<\/li>\n
          • \n
            Les images complexes doivent proposer une description d\u00e9taill\u00e9e<\/p>\n<\/li>\n<\/ul>\n
            Ces crit\u00e8res visent \u00e0 garantir l\u2019\u00e9quivalence d\u2019acc\u00e8s \u00e0 l\u2019information.<\/p>\n
            La notion d\u2019alternative textuelle pertinente<\/span><\/h2>\n
            Le point central de ce chapitre est la qualit\u00e9 de l\u2019alternative textuelle. Une description n\u2019est pas seulement une formalit\u00e9 technique : elle doit \u00eatre pens\u00e9e pour l\u2019utilisateur.<\/p>\n
            Une bonne alternative :<\/p>\n
              \n
            • \n
              Va \u00e0 l\u2019essentiel<\/p>\n<\/li>\n
            • \n
              D\u00e9crit la fonction de l\u2019image<\/p>\n<\/li>\n
            • \n
              S\u2019adapte au contexte<\/p>\n<\/li>\n<\/ul>\n
              Par exemple, pour une ic\u00f4ne de loupe servant \u00e0 lancer une recherche, l\u2019alternative pertinente n\u2019est pas \u00ab loupe \u00bb, mais \u00ab Rechercher \u00bb.<\/p>\n
              Les images de texte : un cas particulier<\/span><\/h2>\n
              Le RGAA attire une attention particuli\u00e8re sur les images contenant du texte.<\/p>\n
              Lorsque le texte est int\u00e9gr\u00e9 dans une image :<\/p>\n
                \n
              • \n
                Il doit rester lisible<\/p>\n<\/li>\n
              • \n
                Une alternative doit reprendre fid\u00e8lement le contenu<\/p>\n<\/li>\n
              • \n
                Il est pr\u00e9f\u00e9rable d\u2019\u00e9viter cette pratique lorsque le texte peut \u00eatre affich\u00e9 en HTML<\/p>\n<\/li>\n<\/ul>\n
                Le texte sous forme d\u2019image est souvent moins adaptable (zoom, contraste, personnalisation), ce qui peut nuire \u00e0 l\u2019accessibilit\u00e9.<\/p>\n
                Les tests r\u00e9alis\u00e9s lors d\u2019un audit<\/span><\/h2>\n
                Pour v\u00e9rifier la conformit\u00e9, les auditeurs appliquent plusieurs types de contr\u00f4les :<\/p>\n
                  \n
                • \n
                  V\u00e9rification de la pr\u00e9sence d\u2019attributs alternatifs<\/p>\n<\/li>\n
                • \n
                  \u00c9valuation de la pertinence des descriptions<\/p>\n<\/li>\n
                • \n
                  Identification des images d\u00e9coratives mal g\u00e9r\u00e9es<\/p>\n<\/li>\n
                • \n
                  Contr\u00f4le des images complexes et de leurs descriptions associ\u00e9es<\/p>\n<\/li>\n<\/ul>\n
                  Ces tests sont r\u00e9alis\u00e9s sur un \u00e9chantillon repr\u00e9sentatif de pages.<\/p>\n
                  Les erreurs fr\u00e9quentes<\/span><\/h2>\n
                  Certaines pratiques reviennent souvent dans les non-conformit\u00e9s :<\/p>\n
                    \n
                  • \n
                    Alternatives absentes ou g\u00e9n\u00e9riques (\u00ab image \u00bb, \u00ab photo \u00bb, \u00ab ic\u00f4ne \u00bb)<\/p>\n<\/li>\n
                  • \n
                    Descriptions trop longues ou trop vagues<\/p>\n<\/li>\n
                  • \n
                    Images d\u00e9coratives inutilement annonc\u00e9es<\/p>\n<\/li>\n
                  • \n
                    Images de texte non retranscrites<\/p>\n<\/li>\n<\/ul>\n
                    Ces erreurs peuvent sembler mineures, mais elles d\u00e9gradent fortement l\u2019exp\u00e9rience des utilisateurs de lecteurs d\u2019\u00e9cran.<\/p>\n
                    Un enjeu pour plusieurs m\u00e9tiers<\/span><\/h2>\n
                    L\u2019accessibilit\u00e9 des images ne concerne pas uniquement les d\u00e9veloppeurs.<\/p>\n
                    Elle implique :<\/p>\n
                      \n
                    • \n
                      Les r\u00e9dacteurs, qui d\u00e9finissent le sens des visuels<\/p>\n<\/li>\n
                    • \n
                      Les designers, qui choisissent d\u2019utiliser ou non des images de texte<\/p>\n<\/li>\n
                    • \n
                      Les int\u00e9grateurs, qui impl\u00e9mentent les alternatives<\/p>\n<\/li>\n
                    • \n
                      Les chefs de projet, qui cadrent les bonnes pratiques<\/p>\n<\/li>\n<\/ul>\n
                      C\u2019est un travail collectif qui commence d\u00e8s la conception.<\/p>\n
                      Conclusion<\/span><\/h2>\n
                      Le chapitre 1 du RGAA pose une base essentielle : toute information port\u00e9e par une image doit \u00eatre accessible autrement. \u00c0 travers des crit\u00e8res pr\u00e9cis et des tests concrets, il encadre la mani\u00e8re de d\u00e9crire, structurer et utiliser les images dans un service num\u00e9rique.<\/p>\n
                      Bien appliqu\u00e9, ce chapitre am\u00e9liore significativement l\u2019acc\u00e8s \u00e0 l\u2019information pour les personnes utilisant des technologies d\u2019assistance, tout en contribuant \u00e0 une meilleure qualit\u00e9 globale des contenus.<\/p>\n","protected":false},"excerpt":{"rendered":"
                      Introduction Le premier chapitre du RGAA est consacr\u00e9 aux images. Ce positionnement n\u2019est pas anodin : les images sont omnipr\u00e9sentes […]<\/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-104","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\/104","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=104"}],"version-history":[{"count":0,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/posts\/104\/revisions"}],"wp:attachment":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/media?parent=104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/categories?post=104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/tags?post=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}