{"id":107,"date":"2026-02-09T14:35:03","date_gmt":"2026-02-09T12:35:03","guid":{"rendered":"https:\/\/www.conform-it.fr\/?p=107"},"modified":"2026-02-09T14:35:03","modified_gmt":"2026-02-09T12:35:03","slug":"chapitre-4-du-rgaa-multimedia-rendre-les-contenus-audio-et-video-accessibles","status":"publish","type":"post","link":"https:\/\/wp7.conform-it.fr\/index.php\/2026\/02\/09\/chapitre-4-du-rgaa-multimedia-rendre-les-contenus-audio-et-video-accessibles\/","title":{"rendered":"Chapitre 4 du RGAA : Multim\u00e9dia \u2013 rendre les contenus audio et vid\u00e9o accessibles"},"content":{"rendered":"

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

Le chapitre 4 du RGAA est consacr\u00e9 aux contenus multim\u00e9dias<\/strong> : vid\u00e9os, fichiers audio, animations synchronis\u00e9es ou tout m\u00e9dia combinant image et son. Ces contenus sont tr\u00e8s pr\u00e9sents sur les sites web modernes, mais ils peuvent constituer des obstacles importants pour de nombreux utilisateurs si aucune alternative n\u2019est pr\u00e9vue.<\/p>\n

L\u2019objectif de ce chapitre est de garantir que chacun puisse acc\u00e9der \u00e0 l\u2019information transmise par ces m\u00e9dias, quelles que soient ses capacit\u00e9s sensorielles ou son mode de navigation.<\/p>\n

Les enjeux d\u2019accessibilit\u00e9 du multim\u00e9dia<\/span><\/h2>\n

Un contenu vid\u00e9o peut poser plusieurs difficult\u00e9s selon le profil de l\u2019utilisateur :<\/p>\n

    \n
  • \n

    Une personne sourde ne per\u00e7oit pas le son<\/p>\n<\/li>\n

  • \n

    Une personne aveugle ne voit pas les informations visuelles<\/p>\n<\/li>\n

  • \n

    Un utilisateur ayant des difficult\u00e9s cognitives peut avoir besoin de supports textuels<\/p>\n<\/li>\n

  • \n

    Une personne naviguant au clavier doit pouvoir contr\u00f4ler la lecture<\/p>\n<\/li>\n<\/ul>\n

    Le chapitre 4 vise donc \u00e0 proposer des alternatives adapt\u00e9es \u00e0 chaque situation.<\/strong><\/p>\n

    Les exigences principales du RGAA<\/span><\/h2>\n

    Plusieurs obligations structurent ce chapitre :<\/p>\n

      \n
    • \n

      Les vid\u00e9os doivent proposer des sous-titres synchronis\u00e9s<\/p>\n<\/li>\n

    • \n

      Les contenus audio doivent avoir une transcription textuelle<\/p>\n<\/li>\n

    • \n

      Les vid\u00e9os contenant des informations visuelles importantes doivent proposer une audiodescription<\/p>\n<\/li>\n

    • \n

      Les lecteurs multim\u00e9dias doivent \u00eatre utilisables au clavier<\/p>\n<\/li>\n

    • \n

      Les m\u00e9dias qui d\u00e9marrent automatiquement doivent pouvoir \u00eatre arr\u00eat\u00e9s facilement<\/p>\n<\/li>\n<\/ul>\n

      Ces exigences permettent un acc\u00e8s \u00e9quivalent \u00e0 l\u2019information.<\/p>\n

      Exemple 1 : vid\u00e9o avec sous-titres<\/h4>\n

      L\u2019ajout de sous-titres est essentiel pour les personnes sourdes ou malentendantes.<\/p>\n

      <video controls>\n  <source src=\"presentation.mp4\" type=\"video\/mp4\">\n  <track \n    kind=\"subtitles\" \n    src=\"sous-titres-fr.vtt\" \n    srclang=\"fr\" \n    label=\"Fran\u00e7ais\">\n<\/video><\/code><\/pre>\n
      Bon usage :<\/p>\n
        \n
      • \n
        La balise <track><\/code> permet d\u2019ajouter des sous-titres synchronis\u00e9s<\/p>\n<\/li>\n
      • \n
        Le lecteur natif reste accessible dans la plupart des cas<\/p>\n<\/li>\n<\/ul>\n
        Exemple 2 : audio avec transcription<\/h4>\n
        Un fichier audio doit \u00eatre accompagn\u00e9 d\u2019un \u00e9quivalent textuel.<\/p>\n
        <audio controls>\n  <source src=\"podcast.mp3\" type=\"audio\/mpeg\">\n<\/audio>\n\n<p>\n  <strong>Transcription :<\/strong>\n  Pr\u00e9sentation du service et explication des principales fonctionnalit\u00e9s...\n<\/p><\/code><\/pre>\n
        La transcription permet aux personnes sourdes d\u2019acc\u00e9der au contenu.<\/p>\n
        Exemple 3 : vid\u00e9o n\u00e9cessitant une audiodescription<\/h4>\n
        Si des informations importantes sont transmises uniquement par l\u2019image (gestes, textes affich\u00e9s \u00e0 l\u2019\u00e9cran, actions), une audiodescription est n\u00e9cessaire.<\/p>\n
        <video controls aria-describedby=\"desc-video\">\n  <source src=\"tutoriel.mp4\" type=\"video\/mp4\">\n<\/video>\n\n<p id=\"desc-video\">\n  Une version avec audiodescription est disponible pour d\u00e9crire les actions \u00e0 l\u2019\u00e9cran.\n<\/p><\/code><\/pre>\n
        Ici, aria-describedby<\/code> informe l\u2019utilisateur qu\u2019une description compl\u00e9mentaire existe.<\/p>\n
        Exemple 4 : lecteur multim\u00e9dia accessible au clavier<\/h4>\n
        Les lecteurs doivent permettre :<\/p>\n
          \n
        • \n
          Lecture \/ pause<\/p>\n<\/li>\n
        • \n
          R\u00e9glage du volume<\/p>\n<\/li>\n
        • \n
          Navigation dans la timeline<\/p>\n<\/li>\n<\/ul>\n
          Les lecteurs HTML natifs sont g\u00e9n\u00e9ralement conformes :<\/p>\n
          <video controls>\n  <source src=\"film.mp4\" type=\"video\/mp4\">\n<\/video><\/code><\/pre>\n
          Le simple attribut controls<\/code> active une interface accessible dans la plupart des navigateurs.<\/p>\n
          Exemple 5 : vid\u00e9o int\u00e9gr\u00e9e avec un titre accessible<\/h4>\n
          Lorsqu\u2019un m\u00e9dia est int\u00e9gr\u00e9 via un lecteur externe ou un composant complexe, il peut \u00eatre utile de fournir un nom accessible.<\/p>\n
          <video \n  controls\n  aria-label=\"Vid\u00e9o de d\u00e9monstration du formulaire de contact\">\n  <source src=\"demo.mp4\" type=\"video\/mp4\">\n<\/video><\/code><\/pre>\n
          aria-label<\/code> permet d\u2019annoncer clairement le contenu \u00e0 l\u2019utilisateur.<\/p>\n
          Exemple 6 : m\u00e9dia qui d\u00e9marre automatiquement<\/h4>\n
          Les m\u00e9dias qui se lancent seuls peuvent perturber la navigation, en particulier avec un lecteur d\u2019\u00e9cran.<\/p>\n
          Une solution consiste \u00e0 offrir un contr\u00f4le rapide :<\/p>\n
          <button aria-controls=\"video1\" aria-label=\"Mettre en pause la vid\u00e9o\">\n  Pause\n<\/button>\n\n<video id=\"video1\" autoplay>\n  <source src=\"intro.mp4\" type=\"video\/mp4\">\n<\/video><\/code><\/pre>\n
          Les attributs ARIA permettent d\u2019associer le bouton au m\u00e9dia.<\/p>\n
          Le r\u00f4le d\u2019ARIA dans l\u2019accessibilit\u00e9 multim\u00e9dia<\/span><\/h2>\n
          ARIA ne remplace pas les fonctionnalit\u00e9s natives du HTML, mais peut aider \u00e0 :<\/p>\n
            \n
          • \n
            Nommer un lecteur multim\u00e9dia (aria-label<\/code>)<\/p>\n<\/li>\n
          • \n
            Relier une description \u00e0 un m\u00e9dia (aria-describedby<\/code>)<\/p>\n<\/li>\n
          • \n
            Associer des contr\u00f4les personnalis\u00e9s (aria-controls<\/code>)<\/p>\n<\/li>\n
          • \n
            Signaler des changements dynamiques (aria-live<\/code>)<\/p>\n<\/li>\n<\/ul>\n
            Cependant, il est pr\u00e9f\u00e9rable d\u2019utiliser en priorit\u00e9 les balises HTML pr\u00e9vues pour le multim\u00e9dia.<\/strong><\/p>\n
            Erreurs fr\u00e9quentes observ\u00e9es en audit<\/span><\/h2>\n
            On retrouve r\u00e9guli\u00e8rement :<\/p>\n
              \n
            • \n
              Vid\u00e9os sans sous-titres<\/p>\n<\/li>\n
            • \n
              Audios sans transcription<\/p>\n<\/li>\n
            • \n
              Informations importantes visibles mais non d\u00e9crites<\/p>\n<\/li>\n
            • \n
              Lecteurs impossibles \u00e0 utiliser au clavier<\/p>\n<\/li>\n
            • \n
              M\u00e9dias qui se lancent automatiquement sans contr\u00f4le<\/p>\n<\/li>\n<\/ul>\n
              Ces situations rendent le contenu inaccessible \u00e0 une partie des utilisateurs.<\/p>\n
              Impact concret pour les utilisateurs<\/span><\/h2>\n
              Sans sous-titres, une personne sourde ne peut pas suivre une vid\u00e9o.
              Sans audiodescription, une personne aveugle peut manquer des informations essentielles.
              Sans contr\u00f4le clavier, un utilisateur peut \u00eatre bloqu\u00e9 dans le lecteur.<\/p>\n
              Le multim\u00e9dia doit donc \u00eatre pens\u00e9 comme un contenu \u00e0 part enti\u00e8re, avec ses propres r\u00e8gles d\u2019accessibilit\u00e9.<\/p>\n
              Conclusion<\/span><\/h2>\n
              Le chapitre 4 du RGAA encadre l\u2019accessibilit\u00e9 des contenus audio et vid\u00e9o afin que l\u2019information soit disponible sous plusieurs formes : visuelle, sonore et textuelle. Les sous-titres, les transcriptions et l\u2019audiodescription constituent les piliers de cette accessibilit\u00e9.<\/p>\n
              Les attributs ARIA peuvent venir compl\u00e9ter certains dispositifs, notamment pour nommer les lecteurs ou associer des descriptions, mais l\u2019essentiel repose sur l\u2019usage correct des balises HTML d\u00e9di\u00e9es au multim\u00e9dia. Une mise en \u0153uvre soign\u00e9e garantit que chacun puisse acc\u00e9der aux contenus, quel que soit son mode de perception.<\/p>\n","protected":false},"excerpt":{"rendered":"
              Introduction Le chapitre 4 du RGAA est consacr\u00e9 aux contenus multim\u00e9dias : vid\u00e9os, fichiers audio, animations synchronis\u00e9es ou tout m\u00e9dia […]<\/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-107","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\/107","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=107"}],"version-history":[{"count":0,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/posts\/107\/revisions"}],"wp:attachment":[{"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp7.conform-it.fr\/index.php\/wp-json\/wp\/v2\/tags?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}