Los marcos deben tener un nombre accesible
Los marcos incrustan contenidos como vídeos, mapas, formularios de pago y ventanas de chat. Sin nombre, los lectores de pantalla solo anuncian «marco», y los clientes ciegos no pueden saber qué contiene ni dónde está el formulario de pago.
- ID de la regla
- frame-title
- Origen
- axe-core 4.13.0
- Impacto
- Grave
- Nivel de corrección
- AUTO
- en Shopify, Shopware, WooCommerce y Magento
- Estado
- se ejecuta
Qué hace la comprobación
Comprueba que los elementos <iframe> y <frame> tienen un nombre accesible
Todo elemento <iframe> y <frame> está dentro del alcance salvo que esté oculto para los lectores de pantalla o tenga un tabindex negativo. Oculto significa, por ejemplo, display: none o aria-hidden="true"; un marco de 1 × 1 píxel o totalmente transparente se comprueba igualmente. La regla no mira dentro del marco, así que los contenidos incrustados de terceros también se comprueban en cuanto están en la página. De forma predeterminada, el escáner de Validiscan bloquea los hosts conocidos de chat, de opiniones, de analítica y de publicidad, de modo que los marcos que añadirían sus scripts nunca aparecen.
Un marco supera la prueba con un title, un aria-label o un aria-labelledby que produzca texto, o con un rol de presentación. Los espacios en blanco por sí solos cuentan como vacío, y el <title> del documento dentro del marco no interviene. role="none" o role="presentation" cuentan solo cuando el marco no tiene ningún atributo title, ni siquiera vacío, porque los lectores de pantalla tratan esa combinación de forma desigual.
La regla comprueba que exista un nombre, no lo que dice. Los títulos duplicados corresponden a frame-title-unique, cuyos fallos axe-core comunica como «pendiente de revisión»; el escáner de Validiscan no crea hallazgos a partir de ellos.
Cómo corregirlo
Añada un atributo title breve y descriptivo a cada <iframe>, por ejemplo title="Vídeo del producto", title="Mapa de la tienda" o title="Pago con tarjeta". En los elementos incrustados que añaden las aplicaciones o los creadores de páginas, defina el título en el código de inserción o en la configuración de la aplicación.
Criterios de conformidad de las WCAG
- 4.1.2 Name, Role, Value, nivel A
Apartados de la norma EN 301 549
| Criterio de las WCAG | Versión 3.2.1 | Versión 4.1.1 |
|---|---|---|
| 4.1.2 | 9.4.1.2 | 9.4.1.2 |
Dónde lo corrige una receta
Shopify: receta iframe-title
Mostrar el antes y el después (1)
locales/en.default.json Cambios en locales/en.default.json (líneas añadidas: 2; eliminadas: 1)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 34 | 34 | "total_reviews": "{{ count }} reviews", | |
| 35 | 35 | "link_messages": { | |
| 36 | 36 | "new_window": "Opens in a new window." | |
| 37 | Eliminada | } | |
| 37 | Añadida | }, | |
| 38 | Añadida | "embed_map": "Map" | |
| 38 | 39 | }, | |
| 39 | 40 | "sections": { | |
| 40 | 41 | "header": { |
sections/contact-form.liquid Cambios en sections/contact-form.liquid (líneas añadidas: 1; eliminadas: 1)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 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 | Eliminada | <iframe class="store-map" srcdoc="{{ map_document | escape }}" width="600" height="360"></iframe> | |
| 11 | Añadida | <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: receta iframe-title
Mostrar el antes y el después (1)
Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Cambios en Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (líneas añadidas: 5; eliminadas: 0)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 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 | Añadida | }, | |
| 197 | Añadida | "a11y": { | |
| 198 | Añadida | "iframe": { | |
| 199 | Añadida | "map": "Karte" | |
| 200 | Añadida | } | |
| 196 | 201 | } | |
| 197 | 202 | } |
Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Cambios en Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (líneas añadidas: 5; eliminadas: 0)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 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 | Añadida | }, | |
| 197 | Añadida | "a11y": { | |
| 198 | Añadida | "iframe": { | |
| 199 | Añadida | "map": "Map" | |
| 200 | Añadida | } | |
| 196 | 201 | } | |
| 197 | 202 | } |
Resources/views/storefront/block/cms-block-map.html.twig Cambios en Resources/views/storefront/block/cms-block-map.html.twig (líneas añadidas: 2; eliminadas: 1)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 11 | 11 | <iframe class="cms-map-frame" | |
| 12 | 12 | src="{{ url('/widgets/cms/map') }}" | |
| 13 | 13 | width="1280" | |
| 14 | Eliminada | height="360"></iframe> | |
| 14 | Añadida | height="360" | |
| 15 | Añadida | 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: receta iframe-title
Mostrar el antes y el después (1)
page-contact.php Cambios en page-contact.php (líneas añadidas: 1; eliminadas: 1)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 81 | 81 | ||
| 82 | 82 | <div class="kb-store-map"> | |
| 83 | 83 | <?php // VALIDISCAN-SEED frame-title: the map iframe has no title. ?> | |
| 84 | Eliminada | <iframe src="<?php echo esc_url( get_stylesheet_directory_uri() . '/assets/embeds/store-map.html' ); ?>" width="600" height="320" loading="lazy"></iframe> | |
| 84 | Añadida | <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: receta iframe-title
Mostrar el antes y el después (1)
app/design/frontend/Validiscan/fixture/Magento_Contact/templates/form.phtml Cambios en app/design/frontend/Validiscan/fixture/Magento_Contact/templates/form.phtml (líneas añadidas: 1; eliminadas: 1)
| Línea anterior | Línea nueva | Cambio | Código |
|---|---|---|---|
| 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 | Eliminada | <iframe src="<?= $escaper->escapeUrl($block->getBaseUrl() . 'media/wysiwyg/store-map.html') ?>" width="480" height="260" loading="lazy"></iframe> | |
| 51 | Añadida | <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> |
Empiece con una revisión gratuita de su tienda.
Envíe la dirección de su tienda. Validiscan la escanea y le responde con cada fallo que el escaneo pueda demostrar, con la página y el código.
Solicitar revisión gratuitaO escriba a info@validiscan.com.
Qué cubre la revisión gratuita y qué deja fuera- Usted envía
- la dirección de su tienda
- Páginas escaneadas
- hasta 15
- Usted recibe
- todos los fallos que el escaneo puede demostrar, con la página y el código
- En su tienda
- solo páginas públicas; sin inicio de sesión, nada comprado, ningún formulario enviado
- Lo que no es
- una auditoría completa