Billeder skal have alternativ tekst

Blinde og svagsynede kunder er afhængige af skærmlæsere for at få at vide, hvad et billede viser. Produktfotos, bannere og logoer uden alternativ tekst bliver læst op som et filnavn eller sprunget over, så kunderne ikke ved, hvilken farve, hvilken model eller hvilket tilbud de har foran sig, og måske opgiver købet.

Bestil et gratis tjek

Regel-id: image-alt
Kilde: axe-core 4.13.0
Alvorlighed: Kritisk
Rettelsesniveau: ASSISTED; på Shopify, Shopware, WooCommerce og Magento
Status: køres

Hvad kontrollen gør

Sørg for, at <img>-elementer har alternativ tekst eller rollen none eller presentation

Reglen tester hvert <img>, som hjælpemidler kan nå. Billeder, der er skjult med display: none eller aria-hidden="true" på billedet eller et overordnet element, springes over. Et <img> med en anden gyldig role springes også over, medmindre den rolle kræver et tilgængeligt navn, eller billedet kan få fokus.

Et billede består, hvis det har en af disse: en alt-attribut, selv en tom alt=""; en aria-label, der ikke er tom; en aria-labelledby, der peger på et element med tekst; en title med tekst; eller den beregnede rolle none eller presentation. Den rolle ignoreres på et billede, der kan få fokus eller har en global ARIA-attribut som aria-live. En alt, der kun består af blanktegn, fejler, medmindre rollen er en præsentationsrolle.

Som standard kører Validiscans scanner reglen i en desktopstørrelse og en mobilstørrelse, så et billede, der er skjult med display: none i den ene størrelse, kun testes i den anden. Reglen kontrollerer, at der findes et tekstalternativ, ikke hvordan det er formuleret; den afgør ikke, om et billede er dekorativt, eller om teksten passer til det.

Sådan retter du det

Tilføj en alt-attribut til hvert <img>. Ved informative billeder og billedlinks skal du beskrive, hvad billedet viser eller gør, for eksempel produktnavnet og farvevarianten; brug kun alt="" til rent dekorative billeder. I temaer skal alt hentes fra alt-tekstfeltet for mediet i webshoppens administration, med produkttitlen som reserve, hvis feltet er tomt.

WCAG-succeskriterier

1.1.1 Non-text Content, niveau A

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

Shopify: opskrift icon-accessible-name

Vis før og efter (2)

buttons Eksempeldata

locales/en.default.json Ændringer i locales/en.default.json: 3 tilføjet, 1 fjernet

Ændringer i locales/en.default.json: 3 tilføjet, 1 fjernet
Linje før	Linje efter	Ændring	Kode
34	34		"total_reviews": "{{ count }} reviews",
35	35		"link_messages": {
36	36		"new_window": "Opens in a new window."
37		Fjernet	}
	37	Tilføjet	},
	38	Tilføjet	"accept_cookies": "Accept cookies",
	39	Tilføjet	"reject_cookies": "Reject cookies"
38	40		},
39	41		"sections": {
40	42		"header": {

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

Ændringer i sections/header.liquid: 1 tilføjet, 0 fjernet
Linje før	Linje efter	Ændring	Kode
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	Tilføjet	<span class="visually-hidden">{{ 'general.search.search' \| t }}</span>
43	44		</button>
44	45		</form>
45	46		</div>

sections/main-product.liquid Ændringer i sections/main-product.liquid: 1 tilføjet, 1 fjernet

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

Ændringer i sections/slideshow.liquid: 2 tilføjet, 0 fjernet
Linje før	Linje efter	Ændring	Kode
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	Tilføjet	<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	Tilføjet	<span class="visually-hidden">{{ 'accessibility.next_slide' \| t }}</span>
70	72		</button>
71	73		</div>
72	74		</slideshow-component>

snippets/cookie-banner.liquid Ændringer i snippets/cookie-banner.liquid: 2 tilføjet, 0 fjernet

Ændringer i snippets/cookie-banner.liquid: 2 tilføjet, 0 fjernet
Linje før	Linje efter	Ændring	Kode
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	Tilføjet	<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	Tilføjet	<span class="visually-hidden">{{ 'accessibility.reject_cookies' \| t }}</span>
29	31		</button>
30	32		</div>
31	33		</div>

snippets/quantity-input.liquid Ændringer i snippets/quantity-input.liquid: 2 tilføjet, 0 fjernet

Ændringer i snippets/quantity-input.liquid: 2 tilføjet, 0 fjernet
Linje før	Linje efter	Ændring	Kode
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	Tilføjet	<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	Tilføjet	<span class="visually-hidden">{{ 'products.product.quantity.increase' \| t: product: product_title }}</span>
16	18		</button></div>

links Eksempeldata

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

Ændringer i sections/footer.liquid: 1 tilføjet, 0 fjernet
Linje før	Linje efter	Ændring	Kode
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	Tilføjet	<span class="visually-hidden">{{ 'general.social.links.' \| append: social.icon \| t }}</span>
40	41		</a>
41	42		{%- endfor %}
42	43		</ul>

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

Ændringer i sections/header.liquid: 3 tilføjet, 1 fjernet
Linje før	Linje efter	Ændring	Kode
22	22		</details>
23	23
24	24		{% if logo_is_heading %}<h1 class="header__heading">{% else %}<div class="header__heading">{% endif %}
25		Fjernet	<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	Tilføjet	<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	Tilføjet	<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	Tilføjet	<span class="visually-hidden">{{ 'sections.header.cart' \| t }}</span>
60	62		</a>
61	63		</div>
62	64		</header>

sections/main-cart.liquid Ændringer i sections/main-cart.liquid: 1 tilføjet, 0 fjernet

Ændringer i sections/main-cart.liquid: 1 tilføjet, 0 fjernet
Linje før	Linje efter	Ændring	Kode
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 }}&quantity=0" class="cart-item__remove cart-item__remove--compact" data-cart-remove>
28	28		{%- render 'icon', icon: 'trash', size: 16 -%}
	29	Tilføjet	<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: 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