Frames müssen einen zugänglichen Namen haben
Frames betten Inhalte wie Videos, Karten, Zahlungsformulare und Chatfenster ein. Ohne Namen sagen Screenreader nur „Frame“ an, sodass blinde Kundinnen und Kunden nicht erkennen, was darin steckt oder wo sich das Zahlungsformular befindet.
- Regel-ID
- frame-title
- Quelle
- axe-core 4.13.0
- Auswirkung
- Schwerwiegend
- Korrekturstufe
- AUTO
- auf Shopify, Shopware, WooCommerce und Magento
- Status
- wird ausgeführt
Was geprüft wird
Sicherstellen, dass <iframe>- und <frame>-Elemente einen zugänglichen Namen haben
Geprüft wird jedes <iframe>- und <frame>-Element, sofern es nicht vor Screenreadern verborgen ist und keinen negativen tabindex hat. Verborgen heißt zum Beispiel display: none oder aria-hidden="true"; ein Frame mit 1 × 1 Pixel oder ein vollständig transparenter Frame wird trotzdem getestet. Die Regel schaut nicht in den Frame hinein, deshalb werden auch Einbettungen von Drittanbietern getestet, sobald sie auf der Seite sind. Standardmäßig blockiert der Scanner von Validiscan bekannte Hosts für Chat, Bewertungen, Analyse und Werbung, sodass Frames, die deren Skripte einfügen würden, gar nicht erst erscheinen.
Ein Frame besteht mit einem title, einem aria-label oder einem aria-labelledby, das Text ergibt, oder mit einer präsentationalen Rolle. Reiner Leerraum gilt als leer, und das <title>-Element des Dokuments im Frame spielt keine Rolle. role="none" oder role="presentation" zählt nur, wenn der Frame überhaupt kein title-Attribut hat, auch kein leeres, denn Screenreader gehen mit dieser Kombination uneinheitlich um.
Die Regel testet, ob ein Name vorhanden ist, nicht, was er aussagt. Für doppelte Titel ist frame-title-unique zuständig. Verstöße gegen diese Regel meldet axe-core als „zu prüfen“, und der Scanner von Validiscan macht daraus keine Befunde.
So wird es behoben
Ergänzen Sie jedes <iframe> um ein kurzes, aussagekräftiges title-Attribut, zum Beispiel title="Produktvideo", title="Karte mit Filialstandort" oder title="Kartenzahlung". Bei Einbettungen, die von Apps oder Page Buildern stammen, setzen Sie den Titel im Einbettungscode oder in den Einstellungen der App.
WCAG-Erfolgskriterien
- 4.1.2 Name, Role, Value, Stufe A
Abschnitte der EN 301 549
| WCAG-Kriterium | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 4.1.2 | 9.4.1.2 | 9.4.1.2 |
Wo ein Rezept es behebt
Shopify: Rezept iframe-title
Vorher und nachher anzeigen (1)
locales/en.default.json Änderungen an locales/en.default.json: 2 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 34 | 34 | "total_reviews": "{{ count }} reviews", | |
| 35 | 35 | "link_messages": { | |
| 36 | 36 | "new_window": "Opens in a new window." | |
| 37 | Entfernt | } | |
| 37 | Hinzugefügt | }, | |
| 38 | Hinzugefügt | "embed_map": "Map" | |
| 38 | 39 | }, | |
| 39 | 40 | "sections": { | |
| 40 | 41 | "header": { |
sections/contact-form.liquid Änderungen an sections/contact-form.liquid: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | 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 | Entfernt | <iframe class="store-map" srcdoc="{{ map_document | escape }}" width="600" height="360"></iframe> | |
| 11 | Hinzugefügt | <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: Rezept iframe-title
Vorher und nachher anzeigen (1)
Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Änderungen an Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json: 5 hinzugefügt, 0 entfernt
| Zeile vorher | Zeile nachher | Änderung | 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 | Hinzugefügt | }, | |
| 197 | Hinzugefügt | "a11y": { | |
| 198 | Hinzugefügt | "iframe": { | |
| 199 | Hinzugefügt | "map": "Karte" | |
| 200 | Hinzugefügt | } | |
| 196 | 201 | } | |
| 197 | 202 | } |
Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Änderungen an Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json: 5 hinzugefügt, 0 entfernt
| Zeile vorher | Zeile nachher | Änderung | 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 | Hinzugefügt | }, | |
| 197 | Hinzugefügt | "a11y": { | |
| 198 | Hinzugefügt | "iframe": { | |
| 199 | Hinzugefügt | "map": "Map" | |
| 200 | Hinzugefügt | } | |
| 196 | 201 | } | |
| 197 | 202 | } |
Resources/views/storefront/block/cms-block-map.html.twig Änderungen an Resources/views/storefront/block/cms-block-map.html.twig: 2 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 11 | 11 | <iframe class="cms-map-frame" | |
| 12 | 12 | src="{{ url('/widgets/cms/map') }}" | |
| 13 | 13 | width="1280" | |
| 14 | Entfernt | height="360"></iframe> | |
| 14 | Hinzugefügt | height="360" | |
| 15 | Hinzugefügt | 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: Rezept iframe-title
Vorher und nachher anzeigen (1)
page-contact.php Änderungen an page-contact.php: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 81 | 81 | ||
| 82 | 82 | <div class="kb-store-map"> | |
| 83 | 83 | <?php // VALIDISCAN-SEED frame-title: the map iframe has no title. ?> | |
| 84 | Entfernt | <iframe src="<?php echo esc_url( get_stylesheet_directory_uri() . '/assets/embeds/store-map.html' ); ?>" width="600" height="320" loading="lazy"></iframe> | |
| 84 | Hinzugefügt | <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: Rezept iframe-title
Vorher und nachher anzeigen (1)
app/design/frontend/Validiscan/fixture/Magento_Contact/templates/form.phtml Änderungen an app/design/frontend/Validiscan/fixture/Magento_Contact/templates/form.phtml: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | 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 | Entfernt | <iframe src="<?= $escaper->escapeUrl($block->getBaseUrl() . 'media/wysiwyg/store-map.html') ?>" width="480" height="260" loading="lazy"></iframe> | |
| 51 | Hinzugefügt | <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> |
Beginnen Sie mit einem kostenlosen Check Ihres Shops.
Senden Sie die Adresse Ihres Shops. Validiscan scannt ihn und antwortet mit jedem Fehler, den der Scan nachweisen kann, jeweils mit der Seite und dem Code.
Kostenlosen Check anfordernOder schreiben Sie an info@validiscan.com.
Was der kostenlose Check umfasst und was nicht- Sie senden
- die Adresse Ihres Shops
- Gescannte Seiten
- bis zu 15
- Sie erhalten
- jeden Fehler, den der Scan nachweisen kann, mit Seite und Code
- In Ihrem Shop
- nur öffentliche Seiten; keine Anmeldung, nichts gekauft, kein Formular abgeschickt
- Was er nicht ist
- ein vollständiges Audit