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
- 4.1.2 Name, Role, Value, niveau A
Clauses de la norme EN 301 549
| 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)
locales/en.default.json 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)
| 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)
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)
| 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)
| 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)
| 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)
page-contact.php 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)
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)
| 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 gratuiteOu é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