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

Apartados de la norma EN 301 549

El apartado de la norma EN 301 549 que corresponde a cada criterio, por versión de la norma
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)
Antes y después Datos de ejemplo

locales/en.default.json Cambios en locales/en.default.json (líneas añadidas: 2; eliminadas: 1)

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)

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)
titles the contact map frame through the snippets; frame-title no longer fires Datos de ejemplo

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)

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)

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)

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)
titles the store map iframe of the contact page from the embedded document Datos de ejemplo

page-contact.php Cambios en page-contact.php (líneas añadidas: 1; eliminadas: 1)

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)
titles the store map on the contact page and validates Datos de ejemplo

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)

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 gratuita

O 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

Escribir a Validiscan

Para una revisión gratuita, indique la dirección web de su tienda y su plataforma.

Validiscan utiliza lo que usted envía para responderle. Política de privacidad