Los elementos <svg> con rol img o image deben tener texto alternativo
Las imágenes SVG insertadas en la página con rol de imagen, como logotipos, iconos de medios de pago, distintivos o estrellas de valoración, necesitan una alternativa textual. Sin ella, quienes usan un lector de pantalla no oyen el nombre de la tienda en el logotipo, los medios de pago aceptados ni la valoración de un producto.
- ID de la regla
- svg-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 <svg> con rol img, image, graphics-document o graphics-symbol tienen texto accesible
La regla prueba un <svg>, o un elemento dentro de uno, que lleve role="img", role="image" o role="graphics-symbol", y un <svg> con role="graphics-document". Un <svg> sin ninguno de estos roles no se prueba, y un <div role="img"> corresponde a la regla role-img-alt. Los elementos ocultos para los productos de apoyo, como un icono con aria-hidden="true", se omiten.
Cualquiera de estas cuatro fuentes hace que el elemento supere la regla:
- un
<title>que sea hijo directo y contenga texto - un
aria-labelcon algo más que espacios en blanco - un
aria-labelledbyque apunte a elementos cuyo texto no esté vacío - un atributo
titlecon algo más que espacios en blanco
Un <title> anidado a más profundidad, por ejemplo dentro de un <circle> o de <metadata>, no da nombre al <svg> exterior. No cuentan ni un elemento <desc> ni un <text> dibujado dentro del gráfico, y un aria-labelledby que apunte a un id inexistente tampoco cuenta.
La regla solo prueba que exista un nombre. No juzga si el nombre describe el logotipo, el medio de pago o la valoración que representa.
Cómo corregirlo
Dé a cada <svg role="img"> un nombre accesible con un elemento <title> como primer hijo, con aria-label o con aria-labelledby, como aria-label="Visa". Los SVG decorativos deberían llevar aria-hidden="true" y ningún rol img.
Criterios de conformidad de las WCAG
- 1.1.1 Non-text Content, nivel A
Apartados de la norma EN 301 549
| 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)
sections/footer.liquid 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)
| 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)
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)
| 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)
header.php 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)
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)
| 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 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