Pourquoi un iframe a-t-il besoin d'un titre ?

Un iframe embarque un document entier. Les personnes voyantes disposent du contexte visuel ; celles qui utilisent un lecteur d'écran n'ont rien, sauf si l'attribut `title` nomme ce que contient le cadre. Un iframe sans titre n'est donc annoncé que comme une zone inexpliquée.

Qu'est-ce qu'un bon titre d'iframe ?

Une description courte et précise de la finalité du cadre, nommant la vidéo, le lieu de la carte ou le module concerné. Évitez les valeurs génériques comme le mot iframe ou un nom de fichier brut.

Quelle règle WCAG couvre les titres d'iframe ?

Le critère de succès 4.1.2 (Nom, rôle et valeur), niveau A, qui appuie également le critère 2.4.1 (Contourner des blocs). axe-core le signale sous la règle `frame-title`.

Non-conformités fréquentes

Titres d'iframe manquants : nommer le contenu embarqué

Un <iframe> embarque un document entier à l'intérieur de la page courante : une vidéo YouTube, une carte, un formulaire de paiement, un module de messagerie. Les personnes voyantes disposent gratuitement du contexte visuel - la vignette de la vidéo, le repère sur la carte. Les personnes utilisant un lecteur d'écran n'en ont rien, à moins que le cadre lui-même ne soit nommé : sans attribut title, il est annoncé comme un simple « cadre », sans indication de son contenu.

Cela relève des critères de succès 4.1.2 (Nom, rôle et valeur) et 2.4.1 (Contourner des blocs) des WCAG : un iframe non étiqueté est à la fois non identifié et, puisqu'il s'agit souvent d'un bloc embarqué volumineux, un obstacle de navigation à part entière.

La correction

Ajoutez un attribut title décrivant ce qu'est réellement le contenu embarqué :

<!-- Avant -->
<iframe src="https://www.youtube.com/embed/xyz"></iframe>

<!-- Après -->
<iframe
  src="https://www.youtube.com/embed/xyz"
  title="Vidéo de démonstration : configurer votre première analyse"
></iframe>

Le titre doit décrire le contenu ou la finalité du cadre, et non reprendre une formule générique telle que « contenu embarqué » ou « iframe » : cela satisfait techniquement la lettre de la règle sans apporter le contexte que le critère existe précisément pour fournir.

<!-- A techniquement un titre, mais n'apprend rien -->
<iframe src="..." title="iframe"></iframe>

<!-- Réellement utile -->
<iframe src="..." title="Carte de localisation du magasin"></iframe>

Où l'oubli est facile

Les modules embarqués de tiers (cartes, prestataires de paiement, outils de messagerie ou de support, lecteurs vidéo) sont très souvent livrés sans titre dans leur code d'intégration d'exemple : l'extrait à copier-coller fourni par le prestataire est fréquemment la source réelle de la non-conformité, et non quelque chose rédigé en interne. Ajoutez ou remplacez systématiquement l'attribut title après avoir collé un extrait tiers, et revérifiez-le si le prestataire modifie son code lors d'une mise à jour.

Les iframes imbriqués et sans nom utilisés uniquement pour des astuces de mise en page (un ancien emplacement publicitaire, un contournement inter-domaines hérité) constituent l'autre source fréquente : si le cadre ne porte réellement aucun contenu utile pour quiconque, demandez-vous s'il peut être supprimé plutôt que simplement étiqueté.

Références officielles

Questions fréquentes

Pourquoi un iframe a-t-il besoin d'un titre ?: Un iframe embarque un document entier. Les personnes voyantes disposent du contexte visuel ; celles qui utilisent un lecteur d'écran n'ont rien, sauf si l'attribut `title` nomme ce que contient le cadre. Un iframe sans titre n'est donc annoncé que comme une zone inexpliquée.
Qu'est-ce qu'un bon titre d'iframe ?: Une description courte et précise de la finalité du cadre, nommant la vidéo, le lieu de la carte ou le module concerné. Évitez les valeurs génériques comme le mot iframe ou un nom de fichier brut.
Quelle règle WCAG couvre les titres d'iframe ?: Le critère de succès 4.1.2 (Nom, rôle et valeur), niveau A, qui appuie également le critère 2.4.1 (Contourner des blocs). axe-core le signale sous la règle `frame-title`.

Articles liés

Vous souhaitez connaître le score de votre propre site ?

Lancer un test d'accessibilité gratuit