[role="img"]- und [role="image"]-Elemente müssen einen Alternativtext haben
Elemente mit role="img", etwa Produktfotos als Hintergrundbild, Icon-Fonts oder Bewertungssterne, brauchen eine Textalternative. Ohne sie wissen Kundinnen und Kunden mit Screenreader nicht, was das Bild zeigt, zum Beispiel die Sternebewertung eines Produkts oder ein Farbfeld.
- Regel-ID
- role-img-alt
- Quelle
- axe-core 4.13.0
- Auswirkung
- Schwerwiegend
- Korrekturstufe
- ASSISTED
- auf Shopify, Shopware, WooCommerce und Magento
- Status
- wird ausgeführt
Was geprüft wird
Sicherstellen, dass [role="img"]- und [role="image"]-Elemente einen Alternativtext haben
Die Regel testet Elemente, deren role-Attribut img oder image lautet, sofern assistive Technologien sie erreichen können. <img>-, <area>-, <input>-, <object>- und <svg>-Elemente sowie alles innerhalb eines <svg> fallen nicht unter diese Regel.
Ein Element besteht, wenn eine von drei Quellen ihm Text gibt:
- ein
aria-label, das mehr als Leerraum enthält - ein
aria-labelledby, das auf ein Element mit Text verweist, auch auf ein verborgenes - ein
title-Attribut mit Text
Andere Quellen zählen nicht. Ein alt-Attribut an einem <div> reicht nicht aus: Das Element gilt als Verstoß. Text innerhalb des Elements wird nicht gelesen. Auch ein leeres title-Attribut oder ein aria-labelledby, das eine id nennt, die es auf der Seite nicht gibt, führt zum Verstoß.
Standardmäßig testet der Scanner von Validiscan jede Seite in 1440 × 900 und in 390 × 844 Pixeln. Ein Element, das in einer der beiden Größen vor assistiven Technologien verborgen ist, wird deshalb nur in der anderen getestet. Die Regel verlangt nur, dass eine Beschriftung vorhanden ist. Ob deren Worte zur Grafik passen, etwa zu einer Sternebewertung, oder ob das Element stattdessen dekorativ sein sollte, muss ein Mensch beurteilen.
So wird es behoben
Versehen Sie jedes Element mit role="img" mit aria-label oder aria-labelledby, das beschreibt, was es vermittelt, etwa aria-label="Bewertet mit 4,5 von 5 Sternen". Ist das Element rein dekorativ, entfernen Sie role="img" und blenden Sie es mit aria-hidden="true" aus.
WCAG-Erfolgskriterien
- 1.1.1 Non-text Content, Stufe A
Abschnitte der EN 301 549
| WCAG-Kriterium | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 1.1.1 | 9.1.1.1 | 9.1.1.1 |
Rezepte, die diese Regel aufführen
Diese Regel hat die Korrekturstufe ASSISTED. In einem Projekt geht ein Befund dieser Regel den Weg ASSISTED, und diese Rezepte werden darauf nicht angewendet.
Shopify: Rezept decorative-image-alt
Vorher und nachher anzeigen (1)
sections/footer.liquid Änderungen an sections/footer.liquid: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 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 | Entfernt | <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 | Hinzugefügt | <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 Änderungen an sections/header.liquid: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 46 | 46 | ||
| 47 | 47 | <div class="header__icons"> | |
| 48 | 48 | {%- if section.settings.show_help_link %} | |
| 49 | Entfernt | <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 | Hinzugefügt | <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: Rezept decorative-image-alt
Vorher und nachher anzeigen (1)
Resources/views/storefront/layout/footer/footer.html.twig Änderungen an Resources/views/storefront/layout/footer/footer.html.twig: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 9 | 9 | <div class="footer-column-content"> | |
| 10 | 10 | <p class="footer-contact-hotline"> | |
| 11 | 11 | {{ 'footer.serviceHotlineText'|trans }} | |
| 12 | Entfernt | <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 | Hinzugefügt | <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: Rezept decorative-image-alt
Vorher und nachher anzeigen (1)
header.php Änderungen an header.php: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 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 | Entfernt | <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 | Hinzugefügt | <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: Rezept decorative-image-alt
Vorher und nachher anzeigen (1)
app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html Änderungen an app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html: 1 hinzugefügt, 1 entfernt
| Zeile vorher | Zeile nachher | Änderung | Code |
|---|---|---|---|
| 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 | Entfernt | <img src="/magento/media/wysiwyg/home/home-main.svg" width="400" height="240" /> | |
| 114 | Hinzugefügt | <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" |
Beginnen Sie mit einem kostenlosen Check Ihres Shops.
Senden Sie die Adresse Ihres Shops. Validiscan scannt ihn und antwortet mit jedem Fehler, den der Scan nachweisen kann, jeweils mit der Seite und dem Code.
Kostenlosen Check anfordernOder schreiben Sie an info@validiscan.com.
Was der kostenlose Check umfasst und was nicht- Sie senden
- die Adresse Ihres Shops
- Gescannte Seiten
- bis zu 15
- Sie erhalten
- jeden Fehler, den der Scan nachweisen kann, mit Seite und Code
- In Ihrem Shop
- nur öffentliche Seiten; keine Anmeldung, nichts gekauft, kein Formular abgeschickt
- Was er nicht ist
- ein vollständiges Audit