Los elementos [role="img"] y [role="image"] deben tener texto alternativo

Los elementos con role="img", como las fotos de producto puestas como imagen de fondo, las fuentes de iconos o las estrellas de valoración, necesitan una alternativa textual. Sin ella, quienes usan un lector de pantalla no saben qué muestra la imagen, por ejemplo la valoración en estrellas de un producto o una muestra de color.

ID de la regla
role-img-alt
Origen
axe-core 4.13.0
Impacto
Grave
Nivel de corrección
ASSISTED
en Shopify, Shopware, WooCommerce y Magento
Estado
se ejecuta

Qué hace la comprobación

Comprueba que los elementos [role="img"] y [role="image"] tienen texto alternativo

La regla prueba los elementos cuyo atributo role es img o image, siempre que los productos de apoyo puedan llegar a ellos. Los elementos <img>, <area>, <input>, <object> y <svg>, y todo lo que esté dentro de un <svg>, quedan fuera de esta regla.

Un elemento supera la regla cuando una de estas tres fuentes le da texto:

  • un aria-label que contenga algo más que espacios en blanco
  • un aria-labelledby que apunte a un elemento con texto, aunque esté oculto
  • un atributo title con texto

No cuenta nada más. Un atributo alt en un <div> no supera la regla, y el texto que contiene el elemento no se lee. Un title vacío, o un aria-labelledby que nombre un id que no existe en la página, tampoco la supera.

De forma predeterminada, el escáner de Validiscan prueba cada página a 1440 × 900 y a 390 × 844 píxeles, de modo que un elemento oculto para los productos de apoyo en un tamaño se prueba solo en el otro. A la regla le basta con que exista una etiqueta. Para saber si sus palabras corresponden al gráfico, por ejemplo una valoración en estrellas, o si el elemento debería ser decorativo, hace falta una persona.

Cómo corregirlo

Añada aria-label o aria-labelledby a cada elemento con role="img" para describir lo que transmite, como aria-label="Valoración: 4,5 de 5". Si el elemento es puramente decorativo, quite role="img" y ocúltelo con aria-hidden="true".

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
1.1.1 9.1.1.1 9.1.1.1

Recetas que enumeran esta regla

Esta regla tiene el nivel ASSISTED. En un proyecto, un hallazgo de esta regla sigue la vía ASSISTED, y estas recetas no se le aplican.

Shopify: receta decorative-image-alt

Mostrar el antes y el después (1)
Antes y después Datos de ejemplo

sections/footer.liquid Cambios en sections/footer.liquid (líneas añadidas: 1; eliminadas: 1)

Cambios en sections/footer.liquid (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
12 12 <input type="hidden" name="contact[tags]" value="newsletter">
13 13 <div class="newsletter-form__field-wrapper">
14 14 <input type="email" name="contact[email]" class="field__input" placeholder="{{ 'newsletter.label' | t }}" autocorrect="off" autocapitalize="off">
15 Eliminada <button type="submit" class="button newsletter-form__button" name="commit"><img src="{{ 'logo.svg' | asset_url }}" class="newsletter-form__icon" width="16" height="16">{{ 'newsletter.button' | t }}</button>
15 Añadida <button type="submit" class="button newsletter-form__button" name="commit"><img src="{{ 'logo.svg' | asset_url }}" class="newsletter-form__icon" width="16" height="16" alt="">{{ 'newsletter.button' | t }}</button>
16 16 </div>
17 17 {%- endform -%}
18 18 </div>

sections/header.liquid Cambios en sections/header.liquid (líneas añadidas: 1; eliminadas: 1)

Cambios en sections/header.liquid (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
46 46
47 47 <div class="header__icons">
48 48 {%- if section.settings.show_help_link %}
49 Eliminada <a href="{{ section.settings.help_link_url }}" class="header__utility-link link"><svg class="header__utility-icon" role="img" viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="9"/></svg>{{ section.settings.help_link_label | escape }}</a>
49 Añadida <a href="{{ section.settings.help_link_url }}" class="header__utility-link link"><svg class="header__utility-icon" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/></svg>{{ section.settings.help_link_label | escape }}</a>
50 50 {%- endif %}
51 51 <a href="{{ routes.account_login_url }}" class="header__icon header__icon--account link">
52 52 {%- render 'icon', icon: 'account', size: icon_size -%}

Shopware: receta decorative-image-alt

Mostrar el antes y el después (1)
marks a seeded phone icon inside the hotline link decorative; image-alt stops firing there Datos de ejemplo

Resources/views/storefront/layout/footer/footer.html.twig Cambios en Resources/views/storefront/layout/footer/footer.html.twig (líneas añadidas: 1; eliminadas: 1)

Cambios en Resources/views/storefront/layout/footer/footer.html.twig (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
9 9 <div class="footer-column-content">
10 10 <p class="footer-contact-hotline">
11 11 {{ 'footer.serviceHotlineText'|trans }}
12 Eliminada <a class="footer-contact-hotline-link" href="tel:+49405550192"><img src="{{ asset('bundles/storefront/assets/icon/default/headset.svg') }}" class="footer-contact-hotline-icon" width="16" height="16"> {{ shop.company.phone }}</a>
12 Añadida <a class="footer-contact-hotline-link" href="tel:+49405550192"><img src="{{ asset('bundles/storefront/assets/icon/default/headset.svg') }}" class="footer-contact-hotline-icon" width="16" height="16" alt=""> {{ shop.company.phone }}</a>
13 13 </p>
14 14 <p class="footer-contact-hours">{{ 'footer.serviceHours'|trans }}</p>
15 15 <p class="footer-contact-form">

WooCommerce: receta decorative-image-alt

Mostrar el antes y el después (1)
hides the logo mark inside the home link that has the shop name Datos de ejemplo

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

Cambios en header.php (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
39 39 <div class="site-branding">
40 40 <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="custom-logo-link" rel="home">
41 41 <?php // VALIDISCAN-SEED svg-img-alt: the logo mark is role="img" without a title or aria-label. ?>
42 Eliminada <svg class="kb-logo-mark" role="img" width="40" height="40" viewBox="0 0 40 40"><path d="M3 30c6-11 15-17 29-18-7 3-10 8-11 13 6-4 11-5 17-4-9 2-15 8-19 15L3 30Z" fill="#1d3b53"/></svg>
42 Añadida <svg class="kb-logo-mark" width="40" height="40" viewBox="0 0 40 40" aria-hidden="true" focusable="false"><path d="M3 30c6-11 15-17 29-18-7 3-10 8-11 13 6-4 11-5 17-4-9 2-15 8-19 15L3 30Z" fill="#1d3b53"/></svg>
43 43 <span class="kb-logo-text"><?php bloginfo( 'name' ); ?></span>
44 44 </a>
45 45 </div>

Magento: receta decorative-image-alt

Mostrar el antes y el después (1)
marks the promo tile image decorative and validates Datos de ejemplo

app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html Cambios en app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html (líneas añadidas: 1; eliminadas: 1)

Cambios en app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
111 111 <div class="block-promo-wrapper block-promo-hp">
112 112 <!-- VALIDISCAN-SEEDED image-alt: promo image without an alt attribute -->
113 113 <a class="block-promo home-main" href="/magento/women/tops-women/jackets-women.html">
114 Eliminada <img src="/magento/media/wysiwyg/home/home-main.svg" width="400" height="240" />
114 Añadida <img src="/magento/media/wysiwyg/home/home-main.svg" width="400" height="240" alt="" />
115 115 <span class="content"
116 116 ><!-- VALIDISCAN-SEEDED color-contrast: .info text is #929292 on white (3.1:1) --><span
117 117 class="info"

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