Aller au contenu principal
Mynto
AccessibiliteRGAA 2.1Niveau ACadres

Iframe sans titre accessible (attribut title manquant)

Chaque balise `<iframe>` doit porter un attribut `title` qui décrit son contenu. C'est le critère RGAA 2.1, niveau A. Sans lui, un lecteur d'écran annonce "cadre" à l'entrée du cadre, sans donner le moindre contexte à l'utilisateur.

C'est quoi

Un <iframe> intègre un document externe dans la page : vidéo YouTube, carte, formulaire de réservation, widget de chat ou de calendrier. Le lecteur d'écran traite chaque cadre comme une zone autonome. Quand l'utilisateur y entre, il annonce le nom du cadre. Ce nom vient de l'attribut title. Sans title, le nom est absent ou aléatoire (URL de la source, numéro auto-généré). L'utilisateur ne sait pas ce qu'il va trouver. L'attribut title fournit ce nom : une courte description du contenu du cadre, dans la langue de la page. Il doit être unique si la page contient plusieurs cadres.

Qui est touché

  • Les personnes aveugles ou malvoyantes : le lecteur d'écran annonce le title à l'entrée du cadre. Sans lui, la navigation dans le cadre est désorientante.
  • Les personnes naviguant au clavier : elles peuvent lister les cadres de la page pour s'y déplacer directement. Un title absent rend cette liste inutile.

Impact business

L'erreur est fréquente sur les pages intégrant des widgets tiers : cartes, vidéos, formulaires de contact, lecteurs audio.

L'utilisateur de lecteur d'écran se retrouve dans un cadre anonyme. Il doit explorer son contenu à l'aveugle ou le quitter sans avoir pu l'identifier.

C'est un critère de niveau A : il fait partie des exigences de base du RGAA et de l'European Accessibility Act.

Sources des chiffres

Comment le détecter

  • Audit Mynto : le scan détecte les <iframe> sans attribut title ou avec un title vide.
  • Manuel : ouvre l'inspecteur du navigateur (F12), cherche toutes les balises <iframe> et vérifie la présence et la pertinence de l'attribut title.
  • Attention aux iframes injectés par des scripts tiers (Google Maps, YouTube, Calendly) : le title doit être ajouté côté intégration.

Comment corriger

Avant - HTML
<!-- Iframe sans titre : le lecteur d'écran dit "cadre" sans contexte -->
<iframe src="https://maps.google.com/?q=Paris" width="600" height="400">
</iframe>
Après - HTML
<!-- Iframe avec titre explicite -->
<iframe
  src="https://maps.google.com/?q=Paris"
  title="Carte de localisation de notre agence - Paris"
  width="600"
  height="400">
</iframe>

Ajoute l'attribut title sur chaque <iframe> avec une description courte du contenu du cadre. Choisis un texte unique si plusieurs cadres sont présents sur la même page.

Sur WordPress, les blocs et widgets qui génèrent des iframes (bloc Vidéo, plugins de carte, formulaires Gravity Forms) exposent souvent un champ "Titre" ou "Description" dans l'éditeur. C'est ce champ qui alimente le title. Si le bloc ne le propose pas, utilise un filtre PHP ou un script JavaScript qui ajoute l'attribut après l'insertion dans le DOM.

Questions fréquentes

Le title doit-il être identique au titre de la section qui entoure le cadre ?

Non. Le title décrit le contenu du cadre, pas la section qui l'entoure. "Carte de localisation - Paris" est plus utile que "Notre adresse".

Un iframe masqué avec display none doit-il avoir un title ?

Un iframe masqué avec display:none ou visibility:hidden est ignoré par les lecteurs d'écran. Le title n'est pas obligatoire dans ce cas. En revanche, un iframe positionné hors écran (coordonnées négatives) reste accessible et doit avoir son title.

Que faire pour les iframes publicitaires sans contenu interactif ?

Si l'iframe est purement décorative et sans interaction, tu peux lui ajouter aria-hidden="true" pour la masquer aux lecteurs d'écran. Sinon, un title descriptif reste requis.

À lire aussi

Cette erreur est-elle sur ton site ?

Lance un audit Mynto gratuit. Tu sauras en quelques minutes si ton site est concerné, sur quelles pages, et avec quel impact.