Accessibilité multimédia avec le RGAA
Les critères du référentiel général d'amélioration de l'accessibilité
Les éléments multimédias sont une partie importante du contenu de certains sites web. Afin de respecter les critères du Référentiel général d’amélioration de l’accessibilité, vous devez vous assurer de rendre l’ensemble de vos médias accessibles aux internautes en situation de handicap ou de fracture numérique. Voici les éléments à prendre en considération, et les solutions pour proposer un contenu multimédia accessible.
Introduction : les différents types de médias
Avant de maîtriser les différents critères à prendre en compte dans la thématique Multimédia, vous devez assimiler le jargon utilisé par le RGAA. Voici les termes essentiels à connaître :
Les média temporels
Ce terme un peu technique désigne en réalité les médias linéaires, avec un contenu qui demande un certain temps pour être consommé. Les médias temporels les plus connus sont les contenus sonores (chansons ou podcasts) ou les vidéos, avec ou sans son (reportage, film ou animation). Les médias temporels synchronisés associent un flux audio ou vidéo avec un autre format qui présente de l’information et/ou comportent des composants temporels interactifs : une vidéo avec l’ajout d’un sous-titrage qui n’est pas incrusté dans l’image elle-même est un exemple de média temporel synchronisé.
Un média temporel peut être diffusé en temps réel ou lu de manière asynchrone : on parle alors dans cette seconde situation de média pré-enregistré.
Les média non temporels
Un média non temporel est un contenu qui ne repose pas sur un déroulement dans le temps pour être compris ou consulté. Il peut s’agir, par exemple, d’une carte, d’un module interactif, ou encore d’un diaporama que l’utilisateur fait défiler à son rythme. Notez qu’un média non temporel peut contenir des médias temporels : c’est par exemple le cas d’un module interactif qui permet d’écouter les sons émis par différents animaux.
Tous les médias, qu’ils soient temporels ou non temporels, doivent être clairement identifiables pour répondre aux attentes du RGAA. Un titre, une phrase ou un paragraphe précédant ou suivant immédiatement le média temporel, permettent de l’identifier. Cet élément doit être à l’extérieur en cas de contenu au format Flash.
Le contenu peut être intégré localement avec :
- Un élément
<video>(par exemple une vidéo) ; - Un élément
<audio>(par exemple un podcast ou une chanson) ; - Un élément
<svg>(par exemple une animation vectorielle) ; - Un élément
<canvas>(par exemple un dessin animé en image bitmap) ; - Un élément
<bgsound>(par exemple un arrière-plan sonore, aujourd’hui obsolète).
Le contenu peut être intégré grâce à une source externe à la page web :
- Un élément intégré via
<iframe>(par exemple une vidéo YouTube ou un podcast Spotify) ; - Un élément intégré via un widget ou un script.
- Un fichier à télécharger et à consulter avec un logiciel externe (fichier .wav, Mp3…).
Historiquement, les médias non temporels étaient accessibles part l’intermédiaires de plugins Flash, Java ou Silverlight.
Ce type de média est aujourd’hui principalement consultable nativement par le navigateur grâce aux progrès permis par le standard HTML5 :
- Les éléments
<svg>(pour les graphiques vectoriels et schémas) - L’élément
<canvas>(utilisé par JavaScript pour le dessin dynamique, la manipulation d’images et les visualisations interactives) - Les documents intégrés via la balise
<iframe>ou lus directement par le navigateur (, , etc.)
Une carte interactive peut par exemple être réalisée avec JavaScript et <canvas> ou SVG, tandis qu’une application web interactive, comme un widget d’agenda ou un sélecteur complexe, peut être développée en JavaScript.
Les images, introduites par les balises <picture> et <img>, sont des formats de médias non temporels qui font l’objet d’un traitement spécifique dans le RGAA (Thématique Images).
1. Les critères associés aux médias temporels pré-enregistrés
Un média temporel enregistré partage un contenu basé sur l’image et/ou le son : un podcast est basé uniquement sur le son, tandis qu’une vidéo associe le son et l’image. Le Référentiel général pour l’amélioration de l’accessibilité s’assure que ce contenu peut être accessible à différentes formes de handicap :
- Un utilisateur malentendant doit bénéficier d’une transcription textuelle ;
- Un utilisateur malvoyant doit bénéficier d’une transcription audio.
Le RGAA s’assure également de la pertinence des transcriptions textuelles ou audio : elles doivent correspondre au contenu original ou proposer une version équivalente.
Recherchez les éléments les éléments <video> ou <object> et vérifiez qu’ils proposent au moins l’une de ces solutions :
- Une version alternative uniquement audio, à laquelle on accède par un lien ou un bouton adjacent au média, ou directement présente à côté de la vidéo ;
- Une version alternativement uniquement textuelle, adjacente ou accessible par un lien ou un bouton facilement identifiable ;
- Une audiodescription synchronisée, dans la vidéo ou adjacente (exemple : sous-titres automatiques dans une vidéo YouTube).
Mon conseil : choisissez la solution la plus adaptée à votre vidéo. Une vidéo qui contient beaucoup de textes et une musique d’ambiance en fond doit avoir une transcription audio, alors qu’une vidéo avec voix off privilégie évidemment la transcription textuelle.
Proposer une transcription textuelle ou une audiodescription, qu’elle soit synchronisée ou non, est une première étape essentielle. Mais la qualité de cette alternative est tout aussi importante dans le cadre du RGAA !
Toutes les informations présentes dans le média (vidéo ou podcast) doivent être retranscrites, même si le texte écrit ou oral diffère légèrement. Vous pouvez prendre l’exemple des sous-titres d’un film : affichez-les dans la même langue que l’audio, et vous constaterez de légères différences qui n’altèrent ni le sens, ni l’information.
Astuces et tutoriels sur l'accessibilité Web
2. Les critères associés aux médias non temporels
Les médias non temporels reposent sur une dimension interactive. L’internaute doit interagir avec le contenu (manipuler un graphique, utiliser un simulateur ou cliquer sur des éléments) pour accéder à l’information ou à la fonctionnalité qu’il propose. Ce type de contenu multimédia doit également proposer une alternative accessible aux utilisateurs en situation de handicap ou de fracture numérique.
L’alternative peut être directement intégrée sur la même page web, ou proposée sur une page web différente.
Dans les deux cas, vous devez retrouver un bouton ou un lien, adjacent au média non temporel et facilement identifiable, qui mène à cette alternative.
L’alternative doit être pertinente et accessible :
- Elle offre les mêmes fonctionnalités et informations que le contenu multimédia d’origine ;
- Elle est accessible aux technologies d’assistance (lecteurs d’écran) et aux autres critères d’accessibilité (taille de police, contraste, etc.).
Un site web propose un simulateur de prêt immobilier interactif sous la forme d’un widget développé en JavaScript. Cette version présente une dimension esthétique certaine et de jolies animations.
Un lien adjacent intitulé « Version accessible » renvoie vers une nouvelle page où le simulateur est remplacé par un formulaire classique, conforme aux standards HTML5 et aux critères du RGAA. Celui-ci intègre tous les éléments pour être accessible (attributs title, balise label, etc.).
Il contient les mêmes informations et remplit les mêmes objectifs, mais est en plus totalement accessible.
3. Sons déclenchés automatiquement
<object>, <video>, <audio>, <embed>, <bgsound> ou d’un code JavaScript doivent remplir l’une de ces conditions :
- S’arrêter au bout de 3 secondes maximum ;
- Être facilement stoppé par l’utilisateur ;
- Proposer un contrôle du volume sonore par l’utilisateur qui ne passe pas par le contrôle de volume de l’ordinateur ou du smartphone.
3. Multimédia et RGAA : cas particuliers
Comme souvent avec le RGAA, une règle ne vaut que lorsqu’elle s’accompagne d’exceptions. Certains cas particuliers vous exonèrent de la présence d’alternatives accessibles :
- Les médias décoratifs, qui n’apportent aucune information utile, n’ont pas besoin d’être identifiables et compatibles avec les critères d’accessibilité du RGAA ;
- L’alternative est évidemment inutile si le média temporel ou non temporel est lui-même accessible.
<object>, <video>, <audio>, <embed>, <bgsound> ou d’un code JavaScript. Je vous présentais en exemple, un peu plus haut, le code source d’une balise <iframe> de YouTube :
Vous affichez le code source et vous vérifiez tout simplement la présence de l’attribut title dans la balise <iframe>
Voici le code HTML pour intégrer une vidéo YouTube de la chaîne Google Workspace. Vous pouvez constater la présence d’un attribut title que j’ai souligné pour plus de lisibilité.
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/NUKY6_SM8mc?si=RBY_JoZkbvGk9Uvs” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” referrerpolicy=”strict-origin-when-cross-origin” allowfullscreen></iframe>
Cette <iframe> présente bien un attribut title non vide. C’est bien, mais remplit-on réellement tous les critères d’accessibilité du RGAA pour les cadres ? Je suis réservé sur l’intitulé : YouTube video player est trop générique, et ne renseigne pas sur la nature de la vidéo. Reprendre le titre de la vidéo aurait été plus conforme aux règles du WCAG et du RGAA, avec un texte du type “YouTube video player: Nebraska – Morgan Ranch: Gemini in Gmail”