{"id":108,"date":"2026-02-09T14:47:03","date_gmt":"2026-02-09T12:47:03","guid":{"rendered":"https:\/\/www.conform-it.fr\/?p=108"},"modified":"2026-02-09T14:47:03","modified_gmt":"2026-02-09T12:47:03","slug":"chapitre-5-du-rgaa-tableaux-structurer-les-donnees-pour-une-lecture-accessible","status":"publish","type":"post","link":"https:\/\/wp7.conform-it.fr\/index.php\/2026\/02\/09\/chapitre-5-du-rgaa-tableaux-structurer-les-donnees-pour-une-lecture-accessible\/","title":{"rendered":"Chapitre 5 du RGAA : Tableaux \u2013 structurer les donn\u00e9es pour une lecture accessible"},"content":{"rendered":"

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

Le chapitre 5 du RGAA concerne les tableaux de donn\u00e9es. Tr\u00e8s utilis\u00e9s pour pr\u00e9senter des informations chiffr\u00e9es, des comparatifs ou des plannings, les tableaux peuvent devenir difficiles \u00e0 comprendre pour les utilisateurs de technologies d\u2019assistance s\u2019ils ne sont pas correctement structur\u00e9s.<\/span><\/p>\n

L\u2019objectif de ce chapitre est de garantir que les relations entre les donn\u00e9es (lignes, colonnes, en-t\u00eates) soient clairement identifiables et compr\u00e9hensibles, notamment pour les personnes utilisant un lecteur d\u2019\u00e9cran.<\/span><\/p>\n

Deux types de tableaux \u00e0 distinguer<\/span><\/h2>\n

Le RGAA fait une distinction essentielle entre deux usages :<\/span><\/p>\n

    \n
  • \n

    Les tableaux de donn\u00e9es <\/strong>: utilis\u00e9s pour pr\u00e9senter des informations structur\u00e9es<\/span><\/p>\n<\/li>\n

  • \n

    Les tableaux de mise en page<\/strong> : utilis\u00e9s uniquement pour organiser visuellement du contenu (\u00e0 \u00e9viter autant que possible)<\/span><\/p>\n<\/li>\n<\/ul>\n

    Seuls les tableaux de donn\u00e9es doivent utiliser les balises sp\u00e9cifiques du HTML tabulaire.<\/span><\/p>\n

    Les r\u00e8gles fondamentales pour les tableaux de donn\u00e9es<\/span><\/h2>\n

    Pour \u00eatre accessible, un tableau doit :<\/p>\n

      \n
    • \n

      D\u00e9finir clairement ses en-t\u00eates de colonnes et\/ou de lignes<\/p>\n<\/li>\n

    • \n

      Permettre de comprendre la relation entre chaque cellule et son en-t\u00eate<\/p>\n<\/li>\n

    • \n

      Avoir un titre ou une l\u00e9gende si n\u00e9cessaire<\/p>\n<\/li>\n

    • \n

      \u00catre lisible m\u00eame lorsqu\u2019il est parcouru de mani\u00e8re lin\u00e9aire (lecture vocale)<\/p>\n<\/li>\n<\/ul>\n

      Ces \u00e9l\u00e9ments permettent aux lecteurs d\u2019\u00e9cran d\u2019annoncer correctement les informations.<\/p>\n

      Exemple 1 : tableau simple avec en-t\u00eates de colonnes<\/h4>\n
      <table>\n  <caption>Ventes trimestrielles 2024<\/caption>\n  <thead>\n    <tr>\n      <th scope=\"col\">Trimestre<\/th>\n      <th scope=\"col\">Produit A<\/th>\n      <th scope=\"col\">Produit B<\/th>\n    <\/tr>\n  <\/thead>\n  <tbody>\n    <tr>\n      <td>T1<\/td>\n      <td>120<\/td>\n      <td>95<\/td>\n    <\/tr>\n    <tr>\n      <td>T2<\/td>\n      <td>140<\/td>\n      <td>110<\/td>\n    <\/tr>\n  <\/tbody>\n<\/table>\n<\/code><\/pre>\n
      Bonnes pratiques :<\/p>\n
        \n
      • \n
        Utilisation de <th><\/code> pour les en-t\u00eates<\/p>\n<\/li>\n
      • \n
        Attribut scope=\"col\"<\/code> pour associer les colonnes<\/p>\n<\/li>\n
      • \n
        <caption><\/code> pour donner un titre au tableau<\/p>\n<\/li>\n<\/ul>\n
        Un lecteur d\u2019\u00e9cran pourra annoncer :
        \u00ab Produit A, 120 \u00bb en lisant la cellule correspondante.<\/p>\n
        Exemple 2 : tableau avec en-t\u00eates de lignes<\/h4>\n
        <table>\n  <caption>Population par r\u00e9gion<\/caption>\n  <tr>\n    <th scope=\"row\">\u00cele-de-France<\/th>\n    <td>12 000 000<\/td>\n  <\/tr>\n  <tr>\n    <th scope=\"row\">Occitanie<\/th>\n    <td>6 000 000<\/td>\n  <\/tr>\n<\/table>\n<\/code><\/pre>\n
        Ici, scope=\"row\"<\/code> permet d\u2019associer chaque donn\u00e9e \u00e0 son en-t\u00eate de ligne.<\/p>\n
        Exemple 3 : tableau complexe avec plusieurs niveaux d\u2019en-t\u00eates<\/h4>\n
        Dans certains cas, les en-t\u00eates sont imbriqu\u00e9s. On peut alors utiliser des identifiants pour relier les cellules.<\/p>\n
        <table>\n  <caption>R\u00e9sultats annuels par service<\/caption>\n  <tr>\n    <th id=\"annee\"><\/th>\n    <th id=\"ventes\">Ventes<\/th>\n    <th id=\"support\">Support<\/th>\n  <\/tr>\n  <tr>\n    <th id=\"2023\">2023<\/th>\n    <td headers=\"2023 ventes\">120<\/td>\n    <td headers=\"2023 support\">80<\/td>\n  <\/tr>\n<\/table>\n<\/code><\/pre>\n
        L\u2019attribut headers<\/code> permet de pr\u00e9ciser \u00e0 quels en-t\u00eates chaque cellule est li\u00e9e.<\/p>\n
        Exemple 4 : tableau avec description compl\u00e9mentaire<\/h4>\n
        <p id=\"desc-tableau\">\n  Ce tableau pr\u00e9sente l\u2019\u00e9volution des ventes sur deux ann\u00e9es cons\u00e9cutives.\n<\/p>\n\n<table aria-describedby=\"desc-tableau\">\n  <caption>Comparatif des ventes<\/caption>\n  ...\n<\/table>\n<\/code><\/pre>\n
        Ici, aria-describedby<\/code> apporte un contexte suppl\u00e9mentaire.<\/p>\n
        Utilisation d\u2019ARIA : quand est-ce utile ?<\/span><\/h2>\n
        Dans la majorit\u00e9 des cas, le HTML natif suffit largement si la structure est correcte. Les balises <table><\/code>, <th><\/code>, <td><\/code>, <caption><\/code> et les attributs scope<\/code> couvrent les besoins.<\/p>\n
        ARIA peut \u00eatre utile dans des cas sp\u00e9cifiques :<\/p>\n
        Ajouter un r\u00f4le explicite (rarement n\u00e9cessaire)<\/h4>\n
        <table role=\"table\">\n<\/code><\/pre>\n
        Ce cas concerne surtout des composants recr\u00e9\u00e9s en HTML non tabulaire.<\/p>\n
        Associer une description d\u00e9taill\u00e9e<\/h4>\n
        <table aria-label=\"Tableau des r\u00e9sultats financiers 2024\">\n<\/code><\/pre>\n
        Ou :<\/p>\n
        <table aria-describedby=\"explication\">\n<\/code><\/pre>\n
        Cela permet de donner un contexte global.<\/p>\n
        Exemple 5 : faux tableau cr\u00e9\u00e9 avec des div (\u00e0 \u00e9viter)<\/h4>\n
        <div role=\"table\">\n  <div role=\"row\">\n    <div role=\"columnheader\">Nom<\/div>\n    <div role=\"columnheader\">Score<\/div>\n  <\/div>\n<\/div>\n<\/code><\/pre>\n
        Ce type de structure est possible avec ARIA, mais fortement d\u00e9conseill\u00e9 si un vrai tableau peut \u00eatre utilis\u00e9.<\/p>\n
        Le principe RGAA reste :<\/p>\n
        \n
        Privil\u00e9gier le HTML natif plut\u00f4t que recr\u00e9er un tableau avec ARIA.<\/p>\n<\/blockquote>\n
        Les tableaux de mise en page : vigilance<\/h4>\n
        Si un tableau est utilis\u00e9 uniquement pour la mise en page :<\/p>\n
          \n
        • \n
          Il ne doit pas contenir de balises <th><\/code><\/p>\n<\/li>\n
        • \n
          Il ne doit pas induire une lecture erron\u00e9e<\/p>\n<\/li>\n
        • \n
          Il doit rester simple et lin\u00e9aire<\/p>\n<\/li>\n<\/ul>\n
          Cependant, cette pratique est aujourd\u2019hui d\u00e9conseill\u00e9e.<\/p>\n
          Erreurs fr\u00e9quentes observ\u00e9es en audit<\/span><\/h2>\n
          Parmi les probl\u00e8mes courants :<\/p>\n
            \n
          • \n
            Donn\u00e9es pr\u00e9sent\u00e9es sans en-t\u00eates<\/p>\n<\/li>\n
          • \n
            En-t\u00eates visuels non cod\u00e9s en <th><\/code><\/p>\n<\/li>\n
          • \n
            Absence de titre ou de l\u00e9gende<\/p>\n<\/li>\n
          • \n
            Tableaux complexes incompr\u00e9hensibles \u00e0 la lecture vocale<\/p>\n<\/li>\n
          • \n
            Utilisation excessive d\u2019ARIA pour compenser une mauvaise structure<\/p>\n<\/li>\n<\/ul>\n
            Ces erreurs rendent la compr\u00e9hension difficile pour les utilisateurs de lecteurs d\u2019\u00e9cran.<\/p>\n
            Impact concret pour les utilisateurs<\/span><\/h2>\n
            Un lecteur d\u2019\u00e9cran lit les tableaux cellule par cellule. Sans structure claire, l\u2019utilisateur entend uniquement une suite de chiffres ou de mots sans lien entre eux.<\/p>\n
            Avec une bonne structuration, chaque donn\u00e9e est annonc\u00e9e avec son contexte :<\/p>\n
              \n
            • \n
              Nom de la colonne<\/p>\n<\/li>\n
            • \n
              Nom de la ligne<\/p>\n<\/li>\n
            • \n
              Valeur<\/p>\n<\/li>\n<\/ul>\n
              Cela transforme totalement l\u2019exp\u00e9rience de lecture.<\/p>\n
              Conclusion<\/span><\/h2>\n
              Le chapitre 5 du RGAA insiste sur une structuration rigoureuse des tableaux de donn\u00e9es afin que les relations entre les informations soient clairement identifiables. L\u2019utilisation correcte des balises HTML d\u00e9di\u00e9es suffit dans la majorit\u00e9 des cas \u00e0 garantir une bonne accessibilit\u00e9.<\/p>\n
              Les attributs ARIA peuvent compl\u00e9ter certains cas complexes, mais ils ne doivent jamais remplacer une structure tabulaire correcte. Un tableau bien construit devient ainsi lisible, compr\u00e9hensible et exploitable pour tous les utilisateurs, quel que soit leur mode de navigation.<\/p>\n","protected":false},"excerpt":{"rendered":"
              Introduction Le chapitre 5 du RGAA concerne les tableaux de donn\u00e9es. Tr\u00e8s utilis\u00e9s pour pr\u00e9senter des informations chiffr\u00e9es, des comparatifs […]<\/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-108","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\/108","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=108"}],"version-history":[{"count":0,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/posts\/108\/revisions"}],"wp:attachment":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/media?parent=108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/categories?post=108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/tags?post=108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}