Validiscan
Menü

Sprache

Bilder müssen einen Alternativtext haben

Blinde und sehbehinderte Kundinnen und Kunden erfahren über ihren Screenreader, was ein Bild zeigt. Produktfotos, Banner und Logos ohne Alternativtext werden als Dateiname vorgelesen oder übersprungen. Sie können dann nicht erkennen, welche Farbe, welches Modell oder welches Angebot sie vor sich haben, und brechen den Kauf womöglich ab.

Kostenlosen Check anfordern
Regel-ID
image-alt
Quelle
axe-core 4.13.0
Auswirkung
Kritisch
Korrekturstufe
ASSISTED
auf Shopify, Shopware, WooCommerce und Magento
Status
wird ausgeführt

Was geprüft wird

Sicherstellen, dass <img>-Elemente einen Alternativtext oder die Rolle none bzw. presentation haben

Die Regel testet jedes <img>, das assistive Technologien erreichen können. Bilder, die mit display: none oder aria-hidden="true" am Bild selbst oder an einem übergeordneten Element verborgen sind, überspringt sie. Ein <img> mit einer anderen gültigen role wird ebenfalls übersprungen, es sei denn, diese Rolle verlangt einen zugänglichen Namen oder das Bild ist fokussierbar.

Ein Bild besteht mit einer dieser Angaben: einem alt-Attribut, auch einem leeren alt=""; einem nicht leeren aria-label; einem aria-labelledby, das auf ein Element mit Text verweist; einem title mit Text; oder der ermittelten Rolle none oder presentation. Diese Rolle wird ignoriert, wenn das Bild fokussierbar ist oder ein globales ARIA-Attribut wie aria-live trägt. Ein alt, das nur aus Leerraum besteht, gilt als Verstoß, sofern die Rolle nicht präsentational ist.

Standardmäßig führt der Scanner von Validiscan die Regel in einer Desktop- und einer Mobilgröße aus. Ein Bild, das in einer der beiden Größen mit display: none verborgen ist, wird deshalb nur in der anderen getestet. Die Regel prüft, ob es eine Textalternative gibt, nicht, wie sie formuliert ist. Ob ein Bild dekorativ ist oder ob sein Text zu ihm passt, entscheidet sie nicht.

So wird es behoben

Versehen Sie jedes <img> mit einem alt-Attribut. Beschreiben Sie bei informativen Bildern und Bildlinks, was das Bild zeigt oder bewirkt, etwa Produktname und Farbvariante; verwenden Sie alt="" nur für rein dekorative Bilder. Füllen Sie alt im Theme aus dem Alternativtext-Feld der Medien im Shop-Backend, mit dem Produkttitel als Ersatzwert.

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 -%}

Shopify: Rezept icon-accessible-name

Vorher und nachher anzeigen (2)
buttons Beispieldaten

locales/en.default.json Änderungen an locales/en.default.json: 3 hinzugefügt, 1 entfernt

Änderungen an locales/en.default.json: 3 hinzugefügt, 1 entfernt
Zeile vorher Zeile nachher Änderung Code
34 34 "total_reviews": "{{ count }} reviews",
35 35 "link_messages": {
36 36 "new_window": "Opens in a new window."
37 Entfernt }
37 Hinzugefügt },
38 Hinzugefügt "accept_cookies": "Accept cookies",
39 Hinzugefügt "reject_cookies": "Reject cookies"
38 40 },
39 41 "sections": {
40 42 "header": {

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

Änderungen an sections/header.liquid: 1 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
40 40 <input class="search__input field__input" type="search" name="q" value="" placeholder="{{ 'general.search.placeholder' | t }}" tabindex="1">
41 41 <button type="submit" class="search__button">
42 42 {%- render 'icon', icon: 'search', size: 20 -%}
43 Hinzugefügt <span class="visually-hidden">{{ 'general.search.search' | t }}</span>
43 44 </button>
44 45 </form>
45 46 </div>

sections/main-product.liquid Änderungen an sections/main-product.liquid: 1 hinzugefügt, 1 entfernt

Änderungen an sections/main-product.liquid: 1 hinzugefügt, 1 entfernt
Zeile vorher Zeile nachher Änderung Code
88 88 <p class="form__label">{{ option.name | escape }}</p>
89 89 <div class="swatch-list swatch-list--compact">
90 90 {%- for swatch in option.swatches %}
91 Entfernt <button type="button" class="swatch swatch--button{% if swatch.selected %} swatch--active{% endif %}" style="--swatch-color: {{ swatch.color }};" data-option-index="{{ option_index }}" data-value="{{ swatch.value | escape }}"></button>
91 Hinzugefügt <button type="button" class="swatch swatch--button{% if swatch.selected %} swatch--active{% endif %}" style="--swatch-color: {{ swatch.color }};" data-option-index="{{ option_index }}" data-value="{{ swatch.value | escape }}"><span class="visually-hidden">{{ swatch.value | escape }}</span></button>
92 92 {%- endfor %}
93 93 </div>
94 94 </div>

sections/slideshow.liquid Änderungen an sections/slideshow.liquid: 2 hinzugefügt, 0 entfernt

Änderungen an sections/slideshow.liquid: 2 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
59 59 <div class="slideshow__controls">
60 60 <button type="button" class="slider-button slider-button--prev" name="previous" data-slide-prev>
61 61 {%- render 'icon', icon: 'chevron-left', size: 20 -%}
62 Hinzugefügt <span class="visually-hidden">{{ 'accessibility.previous_slide' | t }}</span>
62 63 </button>
63 64 <div class="slider-counter">
64 65 {%- for block in section.blocks %}
67 68 </div>
68 69 <button type="button" class="slider-button slider-button--next" name="next" data-slide-next>
69 70 {%- render 'icon', icon: 'chevron-right', size: 20 -%}
71 Hinzugefügt <span class="visually-hidden">{{ 'accessibility.next_slide' | t }}</span>
70 72 </button>
71 73 </div>
72 74 </slideshow-component>

snippets/cookie-banner.liquid Änderungen an snippets/cookie-banner.liquid: 2 hinzugefügt, 0 entfernt

Änderungen an snippets/cookie-banner.liquid: 2 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
23 23 <div class="cookie-banner__actions">
24 24 <button type="button" class="cookie-banner__icon-button cookie-banner__icon-button--accept" data-cookie-accept>
25 25 {%- render 'icon', icon: 'check', size: 20 -%}
26 Hinzugefügt <span class="visually-hidden">{{ 'accessibility.accept_cookies' | t }}</span>
26 27 </button>
27 28 <button type="button" class="cookie-banner__icon-button" data-cookie-reject>
28 29 {%- render 'icon', icon: 'close', size: 20 -%}
30 Hinzugefügt <span class="visually-hidden">{{ 'accessibility.reject_cookies' | t }}</span>
29 31 </button>
30 32 </div>
31 33 </div>

snippets/quantity-input.liquid Änderungen an snippets/quantity-input.liquid: 2 hinzugefügt, 0 entfernt

Änderungen an snippets/quantity-input.liquid: 2 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
9 9 {%- endcomment -%}
10 10 <div class="quantity quantity--compact" data-quantity{% if line %} data-line="{{ line }}"{% endif %}><button class="quantity__button" name="minus" type="button" data-quantity-minus>
11 11 {%- render 'icon', icon: 'minus', size: 12 -%}
12 Hinzugefügt <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product_title }}</span>
12 13 </button>
13 14 <input class="quantity__input" type="number" name="{{ input_name }}" id="{{ input_id }}" value="{{ value | default: 1 }}" min="{% if line %}0{% else %}1{% endif %}" data-quantity-input>
14 15 <button class="quantity__button" name="plus" type="button" data-quantity-plus>
15 16 {%- render 'icon', icon: 'plus', size: 12 -%}
17 Hinzugefügt <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product_title }}</span>
16 18 </button></div>
links Beispieldaten

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

Änderungen an sections/footer.liquid: 1 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
37 37 {%- for social in shop.social %}
38 38 <a href="{{ social.url }}" class="list-social__link link">
39 39 {%- render 'icon', icon: social.icon, size: 20 -%}
40 Hinzugefügt <span class="visually-hidden">{{ 'general.social.links.' | append: social.icon | t }}</span>
40 41 </a>
41 42 {%- endfor %}
42 43 </ul>

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

Änderungen an sections/header.liquid: 3 hinzugefügt, 1 entfernt
Zeile vorher Zeile nachher Änderung Code
22 22 </details>
23 23
24 24 {% if logo_is_heading %}<h1 class="header__heading">{% else %}<div class="header__heading">{% endif %}
25 Entfernt <a href="{{ routes.root_url }}" class="header__heading-link"><img src="{{ 'logo.svg' | asset_url }}" width="{{ settings.logo_width }}" height="32" class="header__heading-logo"></a>
25 Hinzugefügt <a href="{{ routes.root_url }}" class="header__heading-link"><img src="{{ 'logo.svg' | asset_url }}" width="{{ settings.logo_width }}" height="32" class="header__heading-logo" alt="{{ shop.name | escape }}"></a>
26 26 {% if logo_is_heading %}</h1>{% else %}</div>{% endif %}
27 27
28 28 <nav class="header__inline-menu">
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 -%}
53 Hinzugefügt <span class="visually-hidden">{{ 'sections.header.account' | t }}</span>
53 54 </a>
54 55 <a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link" id="cart-icon-bubble">
55 56 {%- render 'icon', icon: 'cart', size: icon_size -%}
57 58 <span class="cart-count-bubble" aria-hidden="true"><span data-cart-count>{{ cart.item_count }}</span></span>
58 59 {%- endif -%}
59 60
61 Hinzugefügt <span class="visually-hidden">{{ 'sections.header.cart' | t }}</span>
60 62 </a>
61 63 </div>
62 64 </header>

sections/main-cart.liquid Änderungen an sections/main-cart.liquid: 1 hinzugefügt, 0 entfernt

Änderungen an sections/main-cart.liquid: 1 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
26 26 {% render 'quantity-input', input_id: qty_id, input_name: 'updates[]', value: item.quantity, product_title: item.product.title, line: line %}
27 27 <a href="{{ routes.cart_change_url }}?line={{ line }}&amp;quantity=0" class="cart-item__remove cart-item__remove--compact" data-cart-remove>
28 28 {%- render 'icon', icon: 'trash', size: 16 -%}
29 Hinzugefügt <span class="visually-hidden">{{ 'sections.cart.remove' | t: title: item.product.title }}</span>
29 30 </a>
30 31 </div>
31 32 <div class="cart-item__totals">

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