<svg>-elementer med rollen img eller image skal have alternativ tekst
Inline-SVG-billeder med en billedrolle, for eksempel logoer, betalingsikoner, mærkater eller bedømmelsesstjerner, skal have et tekstalternativ. Uden et tekstalternativ går skærmlæserbrugere glip af webshoppens navn i logoet, de betalingsmetoder, der accepteres, eller et produkts bedømmelse.
- Regel-id
- svg-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 <svg>-elementer med rollen img, image, graphics-document eller graphics-symbol har en tilgængelig tekst
Reglen tester et <svg>, eller et element inde i et sådant, der har role="img", role="image" eller role="graphics-symbol", samt et <svg> med role="graphics-document". Et <svg> uden en af disse roller testes ikke, og en <div role="img"> hører under reglen role-img-alt. Elementer, der er skjult for hjælpemidler, for eksempel et ikon med aria-hidden="true", springes over.
Elementet består med en hvilken som helst af disse fire kilder:
- et
<title>, der er et direkte underelement og indeholder tekst - en
aria-labelmed andet end blanktegn - en
aria-labelledby, der peger på elementer, hvis tekst ikke er tom - en
title-attribut med andet end blanktegn
Et <title>, der ligger dybere, for eksempel inde i et <circle> eller <metadata>, giver ikke det ydre <svg> et navn. Hverken et <desc>-element eller <text> tegnet inde i grafikken tæller, og en aria-labelledby, der peger på et id, som ikke findes, tæller heller ikke.
Reglen tester kun, at der findes et navn. Den vurderer ikke, om navnet beskriver det logo, den betalingsmetode eller den bedømmelse, det står for.
Sådan retter du det
Giv hvert <svg role="img"> et tilgængeligt navn med et <title>-element som første underelement, med aria-label eller med aria-labelledby, for eksempel aria-label="Visa". Dekorative SVG’er skal have aria-hidden="true" og ingen img-rolle.
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