Elementer med [role="img"] og [role="image"] skal have alternativ tekst

Elementer med role="img", for eksempel produktfotos vist som baggrundsbilleder, ikonskrifttyper eller bedømmelsesstjerner, skal have et tekstalternativ. Uden et tekstalternativ ved skærmlæserbrugere ikke, hvad billedet viser, for eksempel et produkts stjernebedømmelse eller en farveprøve.

Regel-id
role-img-alt
Kilde
axe-core 4.13.0
Alvorlighed
Alvorlig
Rettelsesniveau
ASSISTED
på Shopify, Shopware, WooCommerce og Magento
Status
køres

Hvad kontrollen gør

Sørg for, at elementer med [role="img"] og [role="image"] har alternativ tekst

Reglen tester elementer, hvis role-attribut er img eller image, så længe hjælpemidler kan nå dem. Elementerne <img>, <area>, <input>, <object> og <svg> samt alt inde i et <svg> ligger uden for denne regel.

Et element består, når en af tre kilder giver det tekst:

  • en aria-label, der indeholder andet end blanktegn
  • en aria-labelledby, der peger på et element med tekst, også et skjult
  • en title-attribut med tekst

Intet andet tæller. En <div> med en alt-attribut består ikke, og tekst inde i elementet læses ikke. En tom title eller en aria-labelledby, der nævner et id, siden ikke har, består heller ikke.

Som standard tester Validiscans scanner hver side i 1440 × 900 og 390 × 844 pixels, så et element, der er skjult for hjælpemidler i den ene størrelse, testes kun i den anden. Reglen kræver blot, at der findes en etiket. Det kræver et menneske at afgøre, om etikettens ord passer til grafikken, for eksempel en stjernebedømmelse, eller om elementet i stedet burde være dekorativt.

Sådan retter du det

Tilføj aria-label eller aria-labelledby til hvert element med role="img", og beskriv, hvad det formidler, for eksempel aria-label="Bedømt 4,5 ud af 5". Hvis elementet er rent dekorativt, så fjern role="img", og skjul det med aria-hidden="true".

WCAG-succeskriterier

Afsnit i EN 301 549

Afsnittet i EN 301 549 for hvert kriterium, fordelt på versioner af standarden
WCAG-kriterium Version 3.2.1 Version 4.1.1
1.1.1 9.1.1.1 9.1.1.1

Opskrifter, der angiver denne regel

Reglen har niveau ASSISTED. I et projekt følger et fund af reglen ASSISTED-forløbet, og disse opskrifter anvendes ikke på det.

Shopify: opskrift decorative-image-alt

Vis før og efter (1)
Før og efter Eksempeldata

sections/footer.liquid Ændringer i sections/footer.liquid: 1 tilføjet, 1 fjernet

Ændringer i sections/footer.liquid: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
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 Fjernet <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 Tilføjet <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 Ændringer i sections/header.liquid: 1 tilføjet, 1 fjernet

Ændringer i sections/header.liquid: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
46 46
47 47 <div class="header__icons">
48 48 {%- if section.settings.show_help_link %}
49 Fjernet <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 Tilføjet <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: opskrift decorative-image-alt

Vis før og efter (1)
marks a seeded phone icon inside the hotline link decorative; image-alt stops firing there Eksempeldata

Resources/views/storefront/layout/footer/footer.html.twig Ændringer i Resources/views/storefront/layout/footer/footer.html.twig: 1 tilføjet, 1 fjernet

Ændringer i Resources/views/storefront/layout/footer/footer.html.twig: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
9 9 <div class="footer-column-content">
10 10 <p class="footer-contact-hotline">
11 11 {{ 'footer.serviceHotlineText'|trans }}
12 Fjernet <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 Tilføjet <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: opskrift decorative-image-alt

Vis før og efter (1)
hides the logo mark inside the home link that has the shop name Eksempeldata

header.php Ændringer i header.php: 1 tilføjet, 1 fjernet

Ændringer i header.php: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
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 Fjernet <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 Tilføjet <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: opskrift decorative-image-alt

Vis før og efter (1)
marks the promo tile image decorative and validates Eksempeldata

app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html Ændringer i app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html: 1 tilføjet, 1 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
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 Fjernet <img src="/magento/media/wysiwyg/home/home-main.svg" width="400" height="240" />
114 Tilføjet <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"

Begynd med et gratis tjek af din webshop.

Send din webshops adresse. Validiscan scanner den og svarer med hver fejl, scanningen kan påvise, med siden og koden.

Bestil et gratis tjek

Eller skriv til info@validiscan.com.

Hvad det gratis tjek omfatter, og hvad det udelader
Du sender
din webshops adresse
Sider, der scannes
op til 15
Du får
hver fejl, scanningen kan påvise, med siden og koden
På din webshop
kun offentlige sider; intet login, intet købt, ingen formularer sendt
Hvad det ikke er
et fuldt audit

Skriv til Validiscan

Til et gratis tjek skal du skrive din webshops adresse og platform.

Validiscan bruger det, du sender, til at svare dig. Privatlivspolitik