[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

Abschnitte der EN 301 549

Der Abschnitt der EN 301 549 zu jedem Kriterium, je Version der Norm
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)
Vorher und nachher Beispieldaten

sections/footer.liquid Änderungen an sections/footer.liquid: 1 hinzugefügt, 1 entfernt

Ä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

Ä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)
marks a seeded phone icon inside the hotline link decorative; image-alt stops firing there Beispieldaten

Resources/views/storefront/layout/footer/footer.html.twig Änderungen an Resources/views/storefront/layout/footer/footer.html.twig: 1 hinzugefügt, 1 entfernt

Ä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)
hides the logo mark inside the home link that has the shop name Beispieldaten

header.php Änderungen an header.php: 1 hinzugefügt, 1 entfernt

Ä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)
marks the promo tile image decorative and validates Beispieldaten

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

Ä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 anfordern

Oder 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

Nachricht an Validiscan

Für einen kostenlosen Check nennen Sie die Adresse Ihres Shops und seine Plattform.

Validiscan verwendet, was Sie senden, um Ihnen zu antworten. Datenschutzerklärung