Rammer skal have et tilgængeligt navn
Rammer indlejrer indhold som videoer, kort, betalingsformularer og chatvinduer. Uden et navn siger skærmlæsere kun »ramme«, så blinde kunder ikke kan vide, hvad den indeholder, eller hvor betalingsformularen er.
- Regel-id
- frame-title
- Kilde
- axe-core 4.13.0
- Alvorlighed
- Alvorlig
- Rettelsesniveau
- AUTO
- på Shopify, Shopware, WooCommerce og Magento
- Status
- køres
Hvad kontrollen gør
Sørg for, at <iframe>- og <frame>-elementer har et tilgængeligt navn
Hvert <iframe>- og <frame>-element er omfattet, medmindre det er skjult for skærmlæsere eller har et negativt tabindex. Skjult betyder for eksempel display: none eller aria-hidden="true"; en ramme på 1 × 1 pixel eller en helt gennemsigtig ramme testes stadig. Reglen kigger ikke ind i rammen, så indlejringer fra tredjepart testes også, når de først er på siden. Som standard blokerer Validiscans scanner kendte værter for chat, anmeldelser, analyse og annoncer, så rammer, som deres scripts ville tilføje, dukker aldrig op.
En ramme består, hvis den har en title, en aria-label eller en aria-labelledby, der giver tekst, eller en præsentationsrolle. Blanktegn alene regnes som tomt, og <title>-elementet i dokumentet inde i rammen spiller ingen rolle. role="none" eller role="presentation" tæller kun, når rammen slet ikke har nogen title-attribut, heller ikke en tom, fordi skærmlæsere håndterer den kombination uensartet.
Reglen tester, om der findes et navn, ikke hvad det siger. Gentagne titler hører under frame-title-unique, hvis fejl axe-core rapporterer som »kræver gennemgang«; dem gør Validiscans scanner ikke til fund.
Sådan retter du det
Tilføj en kort, beskrivende title-attribut til hver <iframe>, for eksempel title="Produktvideo", title="Kort over butikkens placering" eller title="Betaling med kort". For indlejringer, som apps eller sidebyggere tilføjer, så sæt titlen i indlejringskoden eller i appens indstillinger.
WCAG-succeskriterier
- 4.1.2 Name, Role, Value, niveau A
Afsnit i EN 301 549
| WCAG-kriterium | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 4.1.2 | 9.4.1.2 | 9.4.1.2 |
Hvor en opskrift retter det
Shopify: opskrift iframe-title
Vis før og efter (1)
locales/en.default.json Ændringer i locales/en.default.json: 2 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 34 | 34 | "total_reviews": "{{ count }} reviews", | |
| 35 | 35 | "link_messages": { | |
| 36 | 36 | "new_window": "Opens in a new window." | |
| 37 | Fjernet | } | |
| 37 | Tilføjet | }, | |
| 38 | Tilføjet | "embed_map": "Map" | |
| 38 | 39 | }, | |
| 39 | 40 | "sections": { | |
| 40 | 41 | "header": { |
sections/contact-form.liquid Ændringer i sections/contact-form.liquid: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 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 | Fjernet | <iframe class="store-map" srcdoc="{{ map_document | escape }}" width="600" height="360"></iframe> | |
| 11 | Tilføjet | <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: opskrift iframe-title
Vis før og efter (1)
Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Ændringer i Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json: 5 tilføjet, 0 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 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 | Tilføjet | }, | |
| 197 | Tilføjet | "a11y": { | |
| 198 | Tilføjet | "iframe": { | |
| 199 | Tilføjet | "map": "Karte" | |
| 200 | Tilføjet | } | |
| 196 | 201 | } | |
| 197 | 202 | } |
Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Ændringer i Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json: 5 tilføjet, 0 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 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 | Tilføjet | }, | |
| 197 | Tilføjet | "a11y": { | |
| 198 | Tilføjet | "iframe": { | |
| 199 | Tilføjet | "map": "Map" | |
| 200 | Tilføjet | } | |
| 196 | 201 | } | |
| 197 | 202 | } |
Resources/views/storefront/block/cms-block-map.html.twig Ændringer i Resources/views/storefront/block/cms-block-map.html.twig: 2 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 11 | 11 | <iframe class="cms-map-frame" | |
| 12 | 12 | src="{{ url('/widgets/cms/map') }}" | |
| 13 | 13 | width="1280" | |
| 14 | Fjernet | height="360"></iframe> | |
| 14 | Tilføjet | height="360" | |
| 15 | Tilføjet | 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: opskrift iframe-title
Vis før og efter (1)
page-contact.php Ændringer i page-contact.php: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 81 | 81 | ||
| 82 | 82 | <div class="kb-store-map"> | |
| 83 | 83 | <?php // VALIDISCAN-SEED frame-title: the map iframe has no title. ?> | |
| 84 | Fjernet | <iframe src="<?php echo esc_url( get_stylesheet_directory_uri() . '/assets/embeds/store-map.html' ); ?>" width="600" height="320" loading="lazy"></iframe> | |
| 84 | Tilføjet | <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: opskrift iframe-title
Vis før og efter (1)
app/design/frontend/Validiscan/fixture/Magento_Contact/templates/form.phtml Ændringer i app/design/frontend/Validiscan/fixture/Magento_Contact/templates/form.phtml: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 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 | Fjernet | <iframe src="<?= $escaper->escapeUrl($block->getBaseUrl() . 'media/wysiwyg/store-map.html') ?>" width="480" height="260" loading="lazy"></iframe> | |
| 51 | Tilføjet | <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> |
Begynd med et gratis tjek af din webshop.
Send din webshops adresse. Validiscan scanner den og svarer med hver fejl, scanningen kan påvise, med siden og koden.
Bestil et gratis tjekEller skriv til info@validiscan.com.
Hvad det gratis tjek omfatter, og hvad det udelader- Du sender
- din webshops adresse
- Sider, der scannes
- op til 15
- Du får
- hver fejl, scanningen kan påvise, med siden og koden
- På din webshop
- kun offentlige sider; intet login, intet købt, ingen formularer sendt
- Hvad det ikke er
- et fuldt audit