RGAA 2.1 — Chaque cadre a-t-il un titre de cadre ?

Cadres iframe sans titre

Le problème

L'absence de titre sur les éléments <iframe> signifie que les cadres intégrés n'ont pas d'attribut title décrivant leur contenu ou leur fonction. Le critère RGAA 2.1 (correspondant au WCAG 4.1.2, niveau A) exige que chaque cadre (iframe) ait un titre de cadre pertinent qui décrit son contenu.

Les iframes sont omniprésents sur le web : vidéos YouTube et Vimeo intégrées, cartes Google Maps, formulaires de paiement (Stripe, PayPal), widgets de réseaux sociaux, lecteurs de podcast, chatbots, bannières publicitaires, et outils d'analyse. Chacun de ces iframes crée un document imbriqué que les lecteurs d'écran doivent annoncer.

Sans attribut title, le lecteur d'écran annonce « cadre » ou lit l'URL source de l'iframe (souvent une URL longue et incompréhensible). L'utilisateur ne sait pas s'il s'agit d'une vidéo, d'une carte, d'un formulaire de paiement ou d'une publicité. Il doit entrer dans le cadre et explorer son contenu pour comprendre sa nature, ce qui est inefficace et frustrant.

Impact sur les utilisateurs

Pour les utilisateurs de lecteurs d'écran, les iframes sans titre sont des boîtes noires. NVDA et JAWS listent les cadres d'une page et permettent de naviguer entre eux. Sans titre, cette liste affiche « cadre, cadre, cadre » -- inutilisable. L'utilisateur doit entrer dans chaque cadre pour en comprendre le contenu.

Sur une page avec une vidéo YouTube, une carte Google Maps et un formulaire de newsletter intégré en iframes, l'utilisateur de lecteur d'écran ne peut pas distinguer les trois cadres. Il entre dans le premier, découvre que c'est la publicité, sort, entre dans le deuxième, découvre que c'est la carte, et ainsi de suite.

Les utilisateurs de clavier sont aussi affectés : quand ils tabulaient dans un iframe, le navigateur annonce le cadre par son titre. Sans titre, ils ne savent pas dans quel contexte ils naviguent et risquent de se perdre, surtout si l'iframe contient ses propres éléments interactifs.

Votre site a-t-il ce problème ?

106 critères RGAA analysés en 5 minutes par notre IA.

Testez votre site gratuitement

Exemple de code

Avant (non conforme)

<!-- Vidéo YouTube sans titre -->
<iframe src="https://youtube.com/embed/xyz123"
  allowfullscreen></iframe>

<!-- Carte Google Maps sans titre -->
<iframe src="https://maps.google.com/embed?q=Paris"
  width="600" height="400"></iframe>

<!-- Formulaire de paiement sans titre -->
<iframe src="https://checkout.stripe.com/embed/form">
</iframe>

<!-- Widget de chat sans titre -->
<iframe src="https://chat-widget.com/embed"></iframe>

Après (conforme)

<!-- Vidéo YouTube avec titre -->
<iframe src="https://youtube.com/embed/xyz123"
  title="Vidéo de présentation de Scrutia"
  allowfullscreen></iframe>

<!-- Carte Google Maps avec titre -->
<iframe src="https://maps.google.com/embed?q=Paris"
  title="Carte de localisation de nos bureaux à Paris"
  width="600" height="400"></iframe>

<!-- Formulaire de paiement avec titre -->
<iframe src="https://checkout.stripe.com/embed/form"
  title="Formulaire de paiement sécurisé Stripe">
</iframe>

<!-- Widget de chat avec titre -->
<iframe src="https://chat-widget.com/embed"
  title="Chat d'assistance en ligne"></iframe>

Comment Scrutia détecte ce problème

Scrutia détecte chaque élément <iframe> sur vos pages et vérifie la présence d'un attribut title non vide et pertinent. Il signale les iframes sans title, les iframes avec un title vide ou générique (« iframe », « cadre »), et les iframes dont le title ne décrit pas le contenu. Le rapport identifie la source de chaque iframe et propose un titre descriptif adapté.

Questions fréquentes

Les iframes masqués (display: none, hidden) sont-ils concernés ?

Si l'iframe est masqué et n'est jamais rendu visible, il n'est pas concerné. Cependant, beaucoup d'iframes de tracking ou d'analytics sont masqués visuellement mais restent dans le DOM. Pour ces cas, ajoutez un title descriptif et aria-hidden='true' pour les exclure de l'arbre d'accessibilité.

Faut-il utiliser title ou aria-label ?

Pour les iframes, l'attribut title est le mécanisme standard et le mieux supporté par les technologies d'assistance. aria-label fonctionne aussi, mais title est la recommandation du RGAA et du WCAG pour les cadres.

Comment formuler un bon titre d'iframe ?

Le titre doit décrire le contenu ou la fonction de l'iframe, pas sa source technique. « Vidéo de présentation du produit » est bon. « iframe YouTube » ou « https://youtube.com/embed/xyz » ne l'est pas. Soyez concis et descriptif.

Les iframes publicitaires sont-ils concernés ?

Oui. Les iframes publicitaires doivent aussi avoir un titre. « Publicité » ou « Contenu sponsorisé » sont des titres acceptables. Cela permet aux utilisateurs de lecteurs d'écran de savoir qu'il s'agit d'une publicité et de la sauter rapidement.

Votre site a-t-il ce problème ?

Scrutia audite votre site sur 106 critères RGAA en 5 minutes. Navigation clavier, composants ARIA, focus visible, contrastes, et bien plus.

Lancer un audit gratuit