Les cadres doivent avoir un nom accessible

Les cadres intègrent des contenus comme des vidéos, des cartes, des formulaires de paiement et des fenêtres de chat. Sans nom, les lecteurs d’écran annoncent seulement « cadre » : les clients aveugles ne savent pas ce qu’il contient ni où se trouve le formulaire de paiement.

Identifiant de la règle
frame-title
Source
axe-core 4.13.0
Impact
Grave
Niveau de correction
AUTO
sur Shopify, Shopware, WooCommerce et Magento
Statut
exécutée

Ce que fait le contrôle

Vérifier que les éléments <iframe> et <frame> ont un nom accessible

Chaque élément <iframe> et <frame> entre dans le champ de la règle, sauf s’il est masqué aux lecteurs d’écran ou porte un tabindex négatif. Masqué signifie par exemple display: none ou aria-hidden="true" ; un cadre de 1 × 1 pixel ou entièrement transparent est quand même testé. La règle ne regarde pas à l’intérieur du cadre ; les contenus intégrés de tiers sont donc testés eux aussi, dès lors qu’ils figurent sur la page. Par défaut, le scanner de Validiscan bloque les hôtes connus de chat, d’avis clients, d’analyse d’audience et de publicité ; les cadres que leurs scripts ajouteraient n’apparaissent donc jamais.

Un cadre réussit avec un title, un aria-label ou un aria-labelledby qui produit du texte, ou avec un rôle de présentation. Des espaces seuls comptent comme vide, et le <title> du document contenu dans le cadre n’entre pas en jeu. role="none" ou role="presentation" ne compte que si le cadre n’a aucun attribut title, pas même vide, car les lecteurs d’écran traitent cette combinaison de façon incohérente.

La règle teste qu’un nom existe, pas ce qu’il dit. Les titres en double relèvent de frame-title-unique, dont axe-core rapporte les échecs comme « à examiner » ; le scanner de Validiscan n’en tire aucun constat.

Comment corriger

Ajoutez à chaque <iframe> un attribut title court et descriptif, par exemple title="Vidéo du produit", title="Plan d’accès au magasin" ou title="Paiement par carte". Pour les contenus intégrés par des applications ou des constructeurs de pages, définissez le titre dans le code d’intégration ou dans les paramètres de l’application.

Critères de succès WCAG

Clauses de la norme EN 301 549

La clause de la norme EN 301 549 pour chaque critère, selon la version de la norme
Critère WCAG Version 3.2.1 Version 4.1.1
4.1.2 9.4.1.2 9.4.1.2

Où une recette corrige le problème

Shopify : recette iframe-title

Afficher l’avant et l’après (1)
Avant et après Données d’exemple

locales/en.default.json Modifications apportées à locales/en.default.json (lignes ajoutées : 2, lignes supprimées : 1)

Modifications apportées à locales/en.default.json (lignes ajoutées : 2, lignes supprimées : 1)
Ligne avant Ligne après Modification Code
34 34 "total_reviews": "{{ count }} reviews",
35 35 "link_messages": {
36 36 "new_window": "Opens in a new window."
37 Supprimée }
37 Ajoutée },
38 Ajoutée "embed_map": "Map"
38 39 },
39 40 "sections": {
40 41 "header": {

sections/contact-form.liquid Modifications apportées à sections/contact-form.liquid (lignes ajoutées : 1, lignes supprimées : 1)

Modifications apportées à sections/contact-form.liquid (lignes ajoutées : 1, lignes supprimées : 1)
Ligne avant Ligne après Modification Code
8 8 {%- endcapture -%}
9 9 <div class="contact-section page-width page-width--narrow">
10 10 <h2 class="contact-section__heading">{{ section.settings.map_heading | escape }}</h2>
11 Supprimée <iframe class="store-map" srcdoc="{{ map_document | escape }}" width="600" height="360"></iframe>
11 Ajoutée <iframe class="store-map" srcdoc="{{ map_document | escape }}" width="600" height="360" title="{{ 'accessibility.embed_map' | t | escape }}"></iframe>
12 12
13 13 <h2 class="contact-section__heading">{{ 'templates.contact.form.title' | t }}</h2>
14 14 {%- form 'contact', id: 'ContactForm', class: 'contact__form' %}

Shopware : recette iframe-title

Afficher l’avant et l’après (1)
titles the contact map frame through the snippets; frame-title no longer fires Données d’exemple

Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Modifications apportées à Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (lignes ajoutées : 5, lignes supprimées : 0)

Modifications apportées à Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (lignes ajoutées : 5, lignes supprimées : 0)
Ligne avant Ligne après Modification Code
193 193 "notFoundText": "Die gesuchte Seite existiert nicht oder wurde verschoben.",
194 194 "backToHome": "Zurück zur Startseite",
195 195 "searchInstead": "Unsere Kaffees durchsuchen"
196 Ajoutée },
197 Ajoutée "a11y": {
198 Ajoutée "iframe": {
199 Ajoutée "map": "Karte"
200 Ajoutée }
196 201 }
197 202 }

Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Modifications apportées à Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (lignes ajoutées : 5, lignes supprimées : 0)

Modifications apportées à Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (lignes ajoutées : 5, lignes supprimées : 0)
Ligne avant Ligne après Modification Code
193 193 "notFoundText": "The page you are looking for does not exist or has moved.",
194 194 "backToHome": "Back to the homepage",
195 195 "searchInstead": "Search our coffees"
196 Ajoutée },
197 Ajoutée "a11y": {
198 Ajoutée "iframe": {
199 Ajoutée "map": "Map"
200 Ajoutée }
196 201 }
197 202 }

Resources/views/storefront/block/cms-block-map.html.twig Modifications apportées à Resources/views/storefront/block/cms-block-map.html.twig (lignes ajoutées : 2, lignes supprimées : 1)

Modifications apportées à Resources/views/storefront/block/cms-block-map.html.twig (lignes ajoutées : 2, lignes supprimées : 1)
Ligne avant Ligne après Modification Code
11 11 <iframe class="cms-map-frame"
12 12 src="{{ url('/widgets/cms/map') }}"
13 13 width="1280"
14 Supprimée height="360"></iframe>
14 Ajoutée height="360"
15 Ajoutée title="{{ 'a11y.iframe.map'|trans|striptags }}"></iframe>
15 16 </div>
16 17 <p class="cms-map-address">{{ shop.company.street }}, {{ shop.company.zip }} {{ shop.company.city }}</p>
17 18 </div>

WooCommerce : recette iframe-title

Afficher l’avant et l’après (1)
titles the store map iframe of the contact page from the embedded document Données d’exemple

page-contact.php Modifications apportées à page-contact.php (lignes ajoutées : 1, lignes supprimées : 1)

Modifications apportées à page-contact.php (lignes ajoutées : 1, lignes supprimées : 1)
Ligne avant Ligne après Modification Code
81 81
82 82 <div class="kb-store-map">
83 83 <?php // VALIDISCAN-SEED frame-title: the map iframe has no title. ?>
84 Supprimée <iframe src="<?php echo esc_url( get_stylesheet_directory_uri() . '/assets/embeds/store-map.html' ); ?>" width="600" height="320" loading="lazy"></iframe>
84 Ajoutée <iframe src="<?php echo esc_url( get_stylesheet_directory_uri() . '/assets/embeds/store-map.html' ); ?>" width="600" height="320" loading="lazy" title="<?php esc_attr_e( 'Map: Kestrel & Birch workshop, Hamburg', 'kestrel-birch' ); ?>"></iframe>
85 85 </div>
86 86 </div>
87 87 </article>

Magento : recette iframe-title

Afficher l’avant et l’après (1)
titles the store map on the contact page and validates Données d’exemple

app/design/frontend/Validiscan/fixture/Magento_Contact/templates/form.phtml Modifications apportées à app/design/frontend/Validiscan/fixture/Magento_Contact/templates/form.phtml (lignes ajoutées : 1, lignes supprimées : 1)

Modifications apportées à app/design/frontend/Validiscan/fixture/Magento_Contact/templates/form.phtml (lignes ajoutées : 1, lignes supprimées : 1)
Ligne avant Ligne après Modification Code
48 48 <p>Nordwind Outfitters (fixture)<br>Musterstraße 12<br>10115 Berlin, Germany</p>
49 49 <p><?= $escaper->escapeHtml(__('Monday to Saturday, 10:00 to 19:00')) ?></p>
50 50 <!-- VALIDISCAN-SEEDED frame-title: the store map iframe has no title -->
51 Supprimée <iframe src="<?= $escaper->escapeUrl($block->getBaseUrl() . 'media/wysiwyg/store-map.html') ?>" width="480" height="260" loading="lazy"></iframe>
51 Ajoutée <iframe src="<?= $escaper->escapeUrl($block->getBaseUrl() . 'media/wysiwyg/store-map.html') ?>" width="480" height="260" loading="lazy" title="<?= $escaper->escapeHtmlAttr(__('Store location map')) ?>"></iframe>
52 52 </div>
53 53 </div>

Commencez par une vérification gratuite de votre boutique.

Envoyez l’adresse de votre boutique. Validiscan la scanne et vous envoie chaque échec que le scan peut prouver, avec sa page et son code.

Demander une vérification gratuite

Ou écrivez à info@validiscan.com.

Ce que couvre la vérification gratuite, et ce qu’elle laisse de côté
Vous envoyez
l’adresse de votre boutique
Pages scannées
jusqu’à 15
Vous recevez
chaque échec que le scan peut prouver, avec la page et le code
Sur votre boutique
pages publiques uniquement ; aucune connexion, aucun achat, aucun formulaire envoyé
Ce qu’elle n’est pas
un audit complet

Écrire à Validiscan

Pour une vérification gratuite, indiquez l’adresse de votre boutique et sa plateforme.

Validiscan utilise ce que vous envoyez pour vous répondre. Politique de confidentialité