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
- 1.1.1 Non-text Content, niveau A
Afsnit i EN 301 549
| 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)
sections/footer.liquid Æ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
| 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)
Resources/views/storefront/layout/footer/footer.html.twig Æ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)
header.php Æ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)
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
| 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 tjekEller 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