{"id":113,"date":"2026-02-09T15:18:39","date_gmt":"2026-02-09T13:18:39","guid":{"rendered":"https:\/\/www.conform-it.fr\/?p=113"},"modified":"2026-02-09T15:18:39","modified_gmt":"2026-02-09T13:18:39","slug":"chapitre-10-du-rgaa-presentation-de-linformation-separer-le-fond-et-la-forme","status":"publish","type":"post","link":"https:\/\/wp7.conform-it.fr\/index.php\/2026\/02\/09\/chapitre-10-du-rgaa-presentation-de-linformation-separer-le-fond-et-la-forme\/","title":{"rendered":"Chapitre 10 du RGAA : Pr\u00e9sentation de l\u2019information \u2013 s\u00e9parer le fond et la forme"},"content":{"rendered":"

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

Le chapitre 10 du RGAA porte sur la pr\u00e9sentation de l\u2019information, c\u2019est-\u00e0-dire la mani\u00e8re dont le contenu est affich\u00e9 visuellement : mise en page, styles, tailles de texte, espacements, positionnement, etc.<\/p>\n

L\u2019enjeu principal est de garantir que l\u2019information reste accessible quelles que soient les pr\u00e9f\u00e9rences d\u2019affichage de l\u2019utilisateur<\/strong>. Certaines personnes agrandissent le texte, modifient les contrastes ou utilisent des feuilles de style personnalis\u00e9es. Le contenu doit rester lisible et compr\u00e9hensible dans ces conditions.<\/p>\n

Ce chapitre repose sur un principe fondamental du web : s\u00e9parer le contenu (HTML) de sa pr\u00e9sentation (CSS).<\/p>\n

Pourquoi la pr\u00e9sentation peut poser probl\u00e8me<\/span><\/h2>\n

Une mauvaise gestion de l\u2019affichage peut entra\u00eener :<\/p>\n

    \n
  • \n

    Du texte qui se superpose lors du zoom<\/p>\n<\/li>\n

  • \n

    Des contenus coup\u00e9s ou invisibles<\/p>\n<\/li>\n

  • \n

    Des informations impossibles \u00e0 lire avec des styles personnalis\u00e9s<\/p>\n<\/li>\n

  • \n

    Des \u00e9l\u00e9ments qui deviennent inutilisables sur petits \u00e9crans<\/p>\n<\/li>\n<\/ul>\n

    Le RGAA impose donc que la mise en page reste robuste et adaptable.<\/p>\n

    Principe fondamental : le contenu doit rester compr\u00e9hensible sans mise en forme<\/span><\/h2>\n

    L\u2019information ne doit pas d\u00e9pendre uniquement de la position, de la taille ou de l\u2019apparence visuelle.<\/p>\n

    Par exemple, si l\u2019on supprime le CSS, le contenu doit rester lisible et structur\u00e9.<\/p>\n

    Exemple 1 : utiliser le CSS pour la pr\u00e9sentation<\/h4>\n

    Mauvaise pratique (pr\u00e9sentation dans le HTML)<\/h5>\n
    <p><font size=\"5\">Actualit\u00e9s importantes<\/font><\/p>\n<\/code><\/pre>\n
    Bonne pratique<\/h5>\n
    <h2 class=\"titre-actualites\">Actualit\u00e9s importantes<\/h2>\n<\/code><\/pre>\n
    .titre-actualites {\n  font-size: 2rem;\n}\n<\/code><\/pre>\n
    Le HTML garde le sens, le CSS g\u00e8re l\u2019apparence.<\/strong><\/p>\n
    Exemple 2 : contenu compr\u00e9hensible sans positionnement<\/h4>\n
    \u00c9viter de transmettre une information uniquement par la position visuelle.<\/p>\n
    Non conforme<\/h5>\n
    <p>Voir les informations \u00e0 droite.<\/p>\n<\/code><\/pre>\n
    Cela devient incompr\u00e9hensible si la mise en page change.<\/p>\n
    Conforme<\/h5>\n
    <p>Voir les informations dans la section \"Contact\".<\/p>\n<\/code><\/pre>\n
    L\u2019information reste claire ind\u00e9pendamment de l\u2019affichage.<\/p>\n
    Exemple 3 : adaptation au zoom<\/h4>\n
    Le texte doit rester lisible lorsqu\u2019on agrandit l\u2019affichage jusqu\u2019\u00e0 200 %.<\/p>\n
    Bonne pratique CSS<\/h5>\n
    body {\n  font-size: 1rem;\n}\n\n.container {\n  width: 100%;\n}\n<\/code><\/pre>\n
    Utiliser des unit\u00e9s relatives permet une meilleure adaptation.<\/p>\n
    Exemple 4 : masquer un \u00e9l\u00e9ment visuellement tout en le gardant accessible<\/h4>\n
    Parfois, un texte utile pour les lecteurs d\u2019\u00e9cran n\u2019est pas n\u00e9cessaire visuellement.<\/p>\n
    <span class=\"visually-hidden\">Champ obligatoire<\/span>\n<\/code><\/pre>\n
    .visually-hidden {\n  position: absolute;\n  left: -9999px;\n}\n<\/code><\/pre>\n
    Dans ce cas, ARIA peut aussi \u00eatre utilis\u00e9.<\/p>\n
    <input type=\"text\" aria-required=\"true\">\n<\/code><\/pre>\n
    Exemple 5 : pr\u00e9sentation contr\u00f4l\u00e9e par ARIA (cas sp\u00e9cifiques)<\/h4>\n
    ARIA peut compl\u00e9ter la pr\u00e9sentation lorsqu\u2019un \u00e9l\u00e9ment change d\u2019\u00e9tat visuel.<\/p>\n
    Onglet s\u00e9lectionn\u00e9<\/h5>\n
    <button role=\"tab\" aria-selected=\"true\">\n  Description\n<\/button>\n<\/code><\/pre>\n
    L\u2019attribut aria-selected<\/code> indique l\u2019\u00e9tat actif, m\u00eame si le style visuel change.<\/p>\n
    Bouton d\u00e9sactiv\u00e9<\/h5>\n
    <button aria-disabled=\"true\">\n  Envoyer\n<\/button>\n<\/code><\/pre>\n
    L\u2019\u00e9tat est communiqu\u00e9 au-del\u00e0 de l\u2019apparence visuelle.<\/p>\n
    Exemple 6 : contenu qui s\u2019adapte \u00e0 diff\u00e9rentes tailles d\u2019\u00e9cran<\/h4>\n
    La mise en page doit rester fonctionnelle sur mobile, tablette et ordinateur.<\/p>\n
    .container {\n  max-width: 1200px;\n  margin: auto;\n}\n<\/code><\/pre>\n
    L\u2019information ne doit pas dispara\u00eetre si l\u2019\u00e9cran est r\u00e9duit.<\/p>\n
    Le r\u00f4le d\u2019ARIA dans la pr\u00e9sentation<\/span><\/h2>\n
    ARIA ne sert pas \u00e0 g\u00e9rer l\u2019apparence visuelle, mais \u00e0 transmettre des informations qui peuvent \u00eatre indiqu\u00e9es visuellement par le style.<\/p>\n
    Par exemple :<\/p>\n
      \n
    • \n
      aria-selected<\/code> pour un onglet actif<\/p>\n<\/li>\n
    • \n
      aria-expanded<\/code> pour un bloc ouvert<\/p>\n<\/li>\n
    • \n
      aria-hidden<\/code> pour masquer un \u00e9l\u00e9ment aux technologies d\u2019assistance<\/p>\n<\/li>\n
    • \n
      aria-disabled<\/code> pour signaler un \u00e9tat inactif<\/p>\n<\/li>\n<\/ul>\n
      Ces attributs permettent de compl\u00e9ter ce que l\u2019utilisateur voit \u00e0 l\u2019\u00e9cran.<\/p>\n
      Les crit\u00e8res cl\u00e9s du RGAA pour la pr\u00e9sentation<\/span><\/h2>\n
      Le chapitre 10 v\u00e9rifie notamment que :<\/p>\n
        \n
      • \n
        Le contenu reste lisible sans CSS<\/p>\n<\/li>\n
      • \n
        Le texte peut \u00eatre agrandi sans perte d\u2019information<\/p>\n<\/li>\n
      • \n
        Les \u00e9l\u00e9ments s\u2019adaptent aux diff\u00e9rentes tailles d\u2019\u00e9cran<\/p>\n<\/li>\n
      • \n
        Les informations ne d\u00e9pendent pas uniquement de la position visuelle<\/p>\n<\/li>\n
      • \n
        Les espacements et tailles restent coh\u00e9rents<\/p>\n<\/li>\n<\/ul>\n
        Ces r\u00e8gles garantissent une meilleure adaptabilit\u00e9.<\/p>\n
        Erreurs fr\u00e9quentes observ\u00e9es en audit<\/span><\/h2>\n
        On retrouve souvent :<\/p>\n
          \n
        • \n
          Du contenu qui dispara\u00eet au zoom<\/p>\n<\/li>\n
        • \n
          Des textes coup\u00e9s dans des blocs fixes<\/p>\n<\/li>\n
        • \n
          Des \u00e9l\u00e9ments positionn\u00e9s de mani\u00e8re rigide<\/p>\n<\/li>\n
        • \n
          Des informations li\u00e9es uniquement \u00e0 la mise en page<\/p>\n<\/li>\n
        • \n
          Des \u00e9tats visibles non annonc\u00e9s aux lecteurs d\u2019\u00e9cran<\/p>\n<\/li>\n<\/ul>\n
          Ces probl\u00e8mes peuvent rendre une interface difficile \u00e0 utiliser.<\/p>\n
          Impact concret pour les utilisateurs<\/span><\/h2>\n
          Une personne malvoyante peut avoir besoin d\u2019agrandir fortement le texte.
          Si la mise en page n\u2019est pas adapt\u00e9e :<\/p>\n
            \n
          • \n
            Le contenu peut se superposer<\/p>\n<\/li>\n
          • \n
            Les boutons peuvent sortir de l\u2019\u00e9cran<\/p>\n<\/li>\n
          • \n
            La lecture devient p\u00e9nible<\/p>\n<\/li>\n<\/ul>\n
            Une pr\u00e9sentation souple am\u00e9liore l\u2019exp\u00e9rience pour tous.<\/p>\n
            Conclusion<\/span><\/h2>\n
            Le chapitre 10 du RGAA rappelle que la pr\u00e9sentation ne doit jamais emp\u00eacher l\u2019acc\u00e8s \u00e0 l\u2019information. Le contenu doit rester compr\u00e9hensible, adaptable et lisible, quelles que soient les conditions d\u2019affichage.<\/p>\n
            Le HTML porte le sens, le CSS g\u00e8re l\u2019apparence, et les attributs ARIA peuvent compl\u00e9ter certains \u00e9tats visuels pour les rendre accessibles. Cette s\u00e9paration claire permet de cr\u00e9er des interfaces robustes, flexibles et inclusives.<\/p>\n","protected":false},"excerpt":{"rendered":"
            Introduction Le chapitre 10 du RGAA porte sur la pr\u00e9sentation de l\u2019information, c\u2019est-\u00e0-dire la mani\u00e8re dont le contenu est affich\u00e9 […]<\/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-113","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\/113","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=113"}],"version-history":[{"count":0,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/posts\/113\/revisions"}],"wp:attachment":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/media?parent=113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/categories?post=113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/tags?post=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}