Erreur "Les éléments frame ou iframe n'ont pas de titre" solution ♿

✍️ Christine Siembida | 📅 Dernière mise à jour le 15 mai 2025

Comment résoudre le problème d'accessibilité Web "les éléments frame ou iframe n'ont pas de titre" ou "frame or iframe elements do not have a title" ? C'est le sujet de l'article d'aujourd'hui.

Vous avez fait un test d'accessibilité Web, par exemple en utilisant PageSpeed Insights et vous rencontrez cette erreur ? Vous vous demandez de quoi il s'agit et aussi s'il existe une solution facile pour y remédier ?

Tout d'abord, vous devez savoir que bien souvent, l'erreur ne vient pas des éléments <frame>. Mais, qu'elle vient plutôt des <iframe> que vous avez intégrés sur votre site WordPress.

Dans cet article, vous découvrirez donc :

• En bref, ce qu'est un iframe
• Pourquoi un titre est indispensable pour un iframe en accessibilité
• Comment ajouter un titre à un iframe ou modifier un titre non accessible déjà présent

Qu'est-ce qu'un iframe ?

Alors, en bref, un <iframe> signifie inline frame ou cadre en ligne. Il s'agit d'un élément HTML qui permet d'intégrer le contenu d'un autre site Web sur votre site.

L'avantage de l'iframe est qu'il permet à vos visiteurs d’interagir avec un contenu externe sans avoir à quitter votre site.

Avec un iframe, vous pouvez par exemple :

• insérer des vidéos provenant de YouTube, de Vimeo ou autres plateformes
• intégrer des podcasts provenant d'Ausha, Spotify, Spreaker ou autres
• charger des contenus externes tels que les flux d’actualités ou des publications issues des réseaux sociaux.
• afficher des publicités
• embarquer des applications tierces comme une carte Google Maps, etc

Pour intégrer un contenu externe dans votre site WordPress, il suffit de copier le code d'intégration fourni par la plateforme et de le coller dans un bloc HTML.

De toute évidence, c'est ce que vous avez fait puisque l'erreur d'accessibilité "les éléments <frame> ou <iframe> n'ont pas de titre" s'affiche. 😉

Pourquoi faut-il indiquer un titre pour un iframe en accessibilité ?

Les lecteurs d'écran, les standards de l'accessibilité Web et l'iframe

En premier lieu, rappelez-vous que certaines personnes qui naviguent sur le Web ont des handicaps ou bien des problèmes physiques, cognitifs ou sensoriels. De ce fait, pour accéder aux contenus et fonctionnalités d'un site Web, ils ont besoin d'aide.

Par exemple, pour parcourir un site, les aveugles, malvoyants ou autres utilisent un lecteur d'écran. Il s'agit en fait d'un logiciel d'assistance technique qui sert à retranscrire les contenus qui sont affichés sur un site Web par synthèse vocale.

Mais le problème est que ce logiciel ne peut vraiment aider son utilisateur que si le site est correctement optimisé pour l'accessibilité Web.

C'est la raison pour laquelle il existe des standards de l'accessibilité Web, des règles à respecter lorsque vous créez un site.

En France, il s'agit du RGAA (Référentiel Général d’Amélioration de l’Accessibilité) qui s'appuie sur le WCAG (Web Content Accessibility Guidelines), les règles internationales pour l'accessibilité Web. En bref, pour être accessible, votre contenu doit respecter quatre principes fondamentaux. Il doit être : perceptible, utilisable, compréhensible et robuste.

Pour qu'un iframe soit accessible, il faut donc vous conformer au principe 4 de robustesse des WCAG :
"Le contenu doit être suffisamment robuste pour pouvoir être interprété de manière fiable par une grande variété d’agents utilisateurs, y compris les technologies d’assistance."

Et plus précisément, faire de sorte que le critère 4.1.2 "Nom, rôle et valeur" soit respecté en ajoutant un attribut title pour décrire le contenu de chaque <iframe>.

Pour conclure, "Les éléments <frame> ou <iframe> n'ont pas de titre" indique que vous avez échoué au critère de succès 4.1.2 des WCAG et également au critère 2 du RGAA.

Pourquoi un titre est-il indispensable dans un iframe pour les lecteurs d'écrans ?

Pour que vous compreniez mieux pourquoi un titre unique et descriptif est obligatoire dans un iframe, je vais prendre un exemple.

Imaginons que votre site utilise une vidéo intégrée pour présenter les fonctionnalités d'un de vos produits. Pour l'afficher, votre lecteur vidéo utilise un iframe, mais vous avez omis d'indiquer un titre descriptif.

Il en résulte qu'une personne utilisant un lecteur d'écran entendra "iframe", le nom du fichier, le chemin de l'iframe ou encore "JavaScript" lors de l'accès à la vidéo.

En d'autres termes, en l'absence d'un titre pertinent pour l'iframe, les utilisateurs ne savent pas à quel type de contenu, ils vont accéder. S'agit-il d'une application cartographique, d'une vidéo ou d'un flux de médias sociaux ?

Donner un titre à un iframe permet donc de fournir aux utilisateurs des informations sur son contenu visuel. Ainsi, ils peuvent décider s'ils souhaitent ou non interagir avec ce contenu.

Pour reprendre mon exemple, en ajoutant un titre à votre iframe, la personne utilisant un lecteur d'écran sait qu'elle est sur le point de visionner une vidéo de votre produit. De ce fait, si le contenu ne l'intéresse pas, elle peut décider de ne pas le regarder en toute connaissance de cause.

Comment résoudre le problème d'accessibilité "les éléments <frame> ou <iframe> n'ont pas de titre" ?

Tout d'abord, rassurez-vous, le problème initial ne vient pas de vous. En fait, ce sont les codes d'intégration fournis par certaines plateformes qui ne sont pas conformes aux normes d'accessibilité Web.

En effet, certains codes n'incluent aucun attribut title (Spotify, Spreaker, Google Maps...).

Tandis que d'autres incluent seulement un titre générique (YouTube, Vimeo, Ausha...).

Pour que vous compreniez mieux le problème d'accessibilité du titre générique dans un iframe, je vais prendre l'exemple de YouTube. Lorsque YouTube génère le code d'intégration d'une vidéo, une balise title est automatiquement ajoutée. Vous pourriez croire que vous êtes en règle en termes d'accessibilité. Eh bien, pas du tout !

En effet, YouTube génère la même balise de titre générique pour chaque vidéo : title="YouTube video player". Le lecteur d'écran indique donc qu'il s'agit d'une vidéo provenant de YouTube, mais pas le sujet de la vidéo.

Alors, imaginez que vous intégriez plusieurs vidéos de YouTube sur une même page. Eh bien, toutes auront le même titre ! 😨

En résumé, un titre générique n'a pas de valeur descriptive pour les personnes qui utilisent des lecteurs d'écran. C'est la raison pour laquelle, l'iframe de YouTube sera répertorié dans votre rapport d'accessibilité comme une erreur.

Pour résoudre le problème d'accessibilité "les éléments <frame> ou <iframe> n'ont pas de titre", vous devez donc vérifier si le code d'intégration de la source tierce contient un titre. Et dans l'affirmative, si ce titre possède une valeur unique et descriptive.

Si ce n'est pas le cas, il suffit d'ajouter un titre qui permet d'identifier le contenu de l'<iframe> à l'aide de la balise title ou de modifier le titre générique.

Comment ajouter un titre à un <iframe> dans un code d'intégration sans titre

Commençons par un exemple de code d'intégration pour un <iframe> sans balise title. Celui-ci est généré par Spotify. Ici, il s'agit d'un podcast de Marketing Square : "Comment sortir (enfin) de l’opérationnel". Vous remarquez qu'aucun titre n'est présent.

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/episode/0BREez82xNkebHp8mobAA9/video?utm_source=generator" width="624" height="351" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

Voici comment ajouter un titre à l'<iframe> et le rendre accessible :

<iframe title="Podcast comment sortir de l’opérationnel" style="border-radius:12px" src="https://open.spotify.com/embed/episode/0BREez82xNkebHp8mobAA9/video?utm_source=generator" width="624" height="351" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

Comment modifier le titre d'un <iframe> dans un code d'intégration avec un titre générique pour le rendre accessible

À présent, voici comment modifier un titre générique dans un <iframe> pour le rendre accessible. Ici, je vais prendre un code d'intégration de YouTube. Mais j'aurais très bien pu en prendre un de Vimeo ou encore d'Ausha.

Pour résoudre ce problème, vous devez remplacer le texte générique de la balise title " YouTube video player" par un texte plus explicite et unique.

Pour illustrer mon exemple, je vais prendre une vieille vidéo de présentation que j'avais faite sous mon ancien nom de domaine Digital Pen. Et vous n'avez pas le droit de vous moquer !🤣.

Voici donc le code d'intégration <iframe> généré par YouTube avec le titre générique ajouté automatiquement :

<iframe width="560" height="315" src="https://www.youtube.com/embed/YF2BmmVGELw?si=9b1Xf3U-4543F_di" 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>

Voilà à présent le même code d'intégration <iframe> de YouTube après avoir ajouté un titre pertinent :

<iframe width="560" height="315" src="https://www.youtube.com/embed/YF2BmmVGELw?si=9b1Xf3U-4543F_di" title="Vidéo de présentation de Digital Pen" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

L'accessibilité Web ne se résume pas à corriger l'erreur "Les éléments <frame> ou <iframe> n'ont pas de titre"

Désormais, vous êtes à même de corriger l'erreur d'accessibilité "Les éléments <frame> ou <iframe> n'ont pas de titre".

Mais, savez-vous que certaines erreurs d'accessibilité courantes peuvent également être corrigées facilement ?

Par exemple, pour l'erreur d'accessibilité "Les couleurs d'arrière-plan et de premier plan n'ont pas un rapport de contraste suffisant". Utilisez l'un des 16 outils de tests pour le contraste des couleurs et accessibilité afin d'y remédier.

Et puis, si l'erreur d'accessibilité concerne  "l'attribut [user-scalable="no"] est utilisé dans l'élément <meta name="viewport"> ou l'attribut [maximum-scale] est inférieur à 5". Alors, la solution se trouve dans mon article : Accessibilité viewport [user-scalable="no"] et [maximum-scale]. N'hésitez pas à le consulter.

Pour conclure, pensez toujours à faire des tests concernant l'accessibilité Web de votre site. Et s'il y a des erreurs, faites en sorte de les faire disparaitre. 😉