<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-label med 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

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