Validiscan
Menu

Sprog

Knapper skal have en læsbar tekst

Skærmlæsere læser knapper uden navn op som blot »knap«. Blinde kunder kan ikke vide, hvilken knap der lægger varen i kurven, åbner menuen, lukker et pop op-vindue eller går til kassen, så de kan måske slet ikke gennemføre et køb.

Bestil et gratis tjek
Regel-id
button-name
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 knapper har en læsbar tekst

Reglen ser kun på rigtige <button>-elementer. Betjeningselementer med role="button" og <input>-knapper har deres egne regler, aria-command-name og input-button-name. Et <button> springes over, når det er skjult for hjælpemidler, eller når en anden eksplicit role end none eller presentation erstatter knaprollen med en rolle, der ikke kræver et navn, og elementet ikke kan få fokus.

En knap består, når den har en af syv ting: tekstindhold, aria-label, aria-labelledby, title, et omsluttende <label>, et <label for>, der matcher dens id, eller en præsentationsrolle. En værdi, der kun består af blanktegn, regnes som manglende. I tekstindholdet tæller underelementer, der er skjult for skærmlæsere, ikke med. En kurv- eller lukkeknap, der kun består af et ikon mærket aria-hidden="true", har derfor brug for en af de andre kilder. Visuelt skjult tekst, for eksempel tekst, der er klippet væk, tæller stadig med. role="none" redder ikke en knap, der ikke er deaktiveret: axe-core ignorerer en præsentationsrolle på elementer, der kan få fokus.

Der testes kun, om der findes et navn. En knap med navnet »x« består; reglen vurderer ikke, om navnet fortæller, hvad knappen gør.

Sådan retter du det

Giv hver knap et tilgængeligt navn: synlig tekst, aria-labelledby eller aria-label. Knapper, der kun består af et ikon (kurv, søgning, luk, plus og minus til antal), skal have en etiket, der beskriver handlingen, for eksempel aria-label="Luk" eller visuelt skjult tekst.

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
4.1.2 9.4.1.2 9.4.1.2

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 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 }}&amp;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 icon-accessible-name

Vis før og efter (2)
names every icon-only button of the home, product and cart pages; button-name no longer fires Eksempeldata

Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Ændringer i Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json: 12 tilføjet, 0 fjernet

Ændringer i Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json: 12 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
193 193 "notFoundText": "Die gesuchte Seite existiert nicht oder wurde verschoben.",
194 194 "backToHome": "Zurück zur Startseite",
195 195 "searchInstead": "Unsere Kaffees durchsuchen"
196 Tilføjet },
197 Tilføjet "a11y": {
198 Tilføjet "control": {
199 Tilføjet "search": "Suchen",
200 Tilføjet "previousSlide": "Vorherige Folie",
201 Tilføjet "nextSlide": "Nächste Folie",
202 Tilføjet "cookieSettings": "Cookie-Einstellungen",
203 Tilføjet "acceptCookies": "Alle Cookies akzeptieren",
204 Tilføjet "decreaseQuantity": "Menge verringern",
205 Tilføjet "increaseQuantity": "Menge erhöhen",
206 Tilføjet "removeFromCart": "Aus dem Warenkorb entfernen"
207 Tilføjet }
196 208 }
197 209 }

Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Ændringer i Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json: 12 tilføjet, 0 fjernet

Ændringer i Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json: 12 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
193 193 "notFoundText": "The page you are looking for does not exist or has moved.",
194 194 "backToHome": "Back to the homepage",
195 195 "searchInstead": "Search our coffees"
196 Tilføjet },
197 Tilføjet "a11y": {
198 Tilføjet "control": {
199 Tilføjet "search": "Search",
200 Tilføjet "previousSlide": "Previous slide",
201 Tilføjet "nextSlide": "Next slide",
202 Tilføjet "cookieSettings": "Cookie settings",
203 Tilføjet "acceptCookies": "Accept all cookies",
204 Tilføjet "decreaseQuantity": "Decrease quantity",
205 Tilføjet "increaseQuantity": "Increase quantity",
206 Tilføjet "removeFromCart": "Remove from cart"
207 Tilføjet }
196 208 }
197 209 }

Resources/views/storefront/element/cms-element-image-gallery.html.twig Ændringer i Resources/views/storefront/element/cms-element-image-gallery.html.twig: 2 tilføjet, 2 fjernet

Ændringer i Resources/views/storefront/element/cms-element-image-gallery.html.twig: 2 tilføjet, 2 fjernet
Linje før Linje efter Ændring Kode
31 31
32 32 {% if media|length > 1 %}
33 33 <div class="gallery-slider-controls">
34 Fjernet <button type="button" class="base-slider-controls-prev gallery-slider-controls-prev" data-gallery-prev>
34 Tilføjet <button type="button" class="base-slider-controls-prev gallery-slider-controls-prev" data-gallery-prev aria-label="{{ 'a11y.control.previousSlide'|trans|striptags }}">
35 35 {% sw_icon 'arrow-head-left' %}
36 36 </button>
37 Fjernet <button type="button" class="base-slider-controls-next gallery-slider-controls-next" data-gallery-next>
37 Tilføjet <button type="button" class="base-slider-controls-next gallery-slider-controls-next" data-gallery-next aria-label="{{ 'a11y.control.nextSlide'|trans|striptags }}">
38 38 {% sw_icon 'arrow-head-right' %}
39 39 </button>
40 40 </div>

Resources/views/storefront/element/cms-element-image-slider.html.twig Ændringer i Resources/views/storefront/element/cms-element-image-slider.html.twig: 2 tilføjet, 2 fjernet

Ændringer i Resources/views/storefront/element/cms-element-image-slider.html.twig: 2 tilføjet, 2 fjernet
Linje før Linje efter Ændring Kode
46 46
47 47 {% block element_image_slider_controls %}
48 48 <div class="image-slider-controls-container">
49 Fjernet <button type="button" class="base-slider-controls-prev image-slider-controls-btn" data-slide-prev>
49 Tilføjet <button type="button" class="base-slider-controls-prev image-slider-controls-btn" data-slide-prev aria-label="{{ 'a11y.control.previousSlide'|trans|striptags }}">
50 50 {% sw_icon 'arrow-head-left' %}
51 51 </button>
52 52 <ol class="base-slider-dots">
54 54 <li class="base-slider-dot{% if loop.first %} is-active{% endif %}" data-slide-to="{{ loop.index0 }}"></li>
55 55 {% endfor %}
56 56 </ol>
57 Fjernet <button type="button" class="base-slider-controls-next image-slider-controls-btn" data-slide-next>
57 Tilføjet <button type="button" class="base-slider-controls-next image-slider-controls-btn" data-slide-next aria-label="{{ 'a11y.control.nextSlide'|trans|striptags }}">
58 58 {% sw_icon 'arrow-head-right' %}
59 59 </button>
60 60 </div>

Resources/views/storefront/layout/cookie/cookie-permission.html.twig Ændringer i Resources/views/storefront/layout/cookie/cookie-permission.html.twig: 2 tilføjet, 2 fjernet

Ændringer i Resources/views/storefront/layout/cookie/cookie-permission.html.twig: 2 tilføjet, 2 fjernet
Linje før Linje efter Ændring Kode
22 22 </p>
23 23 </div>
24 24 <div class="col-auto cookie-permission-actions">
25 Fjernet <button type="button" class="btn cookie-permission-icon-btn js-cookie-configuration-toggle">{% sw_icon 'settings' %}</button>
26 Fjernet <button type="button" class="btn btn-primary cookie-permission-icon-btn js-cookie-accept-all-button">{% sw_icon 'checkmark' %}</button>
25 Tilføjet <button type="button" class="btn cookie-permission-icon-btn js-cookie-configuration-toggle" aria-label="{{ 'a11y.control.cookieSettings'|trans|striptags }}">{% sw_icon 'settings' %}</button>
26 Tilføjet <button type="button" class="btn btn-primary cookie-permission-icon-btn js-cookie-accept-all-button" aria-label="{{ 'a11y.control.acceptCookies'|trans|striptags }}">{% sw_icon 'checkmark' %}</button>
27 27 </div>
28 28 </div>
29 29 <p class="cookie-permission-configuration" hidden>{{ 'cookie.configurationText'|trans }}</p>

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

Ændringer i Resources/views/storefront/layout/header/search.html.twig: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
13 13 autocomplete="off"
14 14 autocapitalize="off"
15 15 placeholder="{{ 'header.searchPlaceholder'|trans }}" value="{{ page.searchTerm }}">
16 Fjernet <button type="submit" class="btn header-search-btn">
16 Tilføjet <button type="submit" class="btn header-search-btn" aria-label="{{ 'a11y.control.search'|trans|striptags }}">
17 17 <span class="header-search-icon">{% sw_icon 'search' %}</span>
18 18 </button>
19 19 </div>

Resources/views/storefront/page/checkout/cart/index.html.twig Ændringer i Resources/views/storefront/page/checkout/cart/index.html.twig: 3 tilføjet, 3 fjernet

Ændringer i Resources/views/storefront/page/checkout/cart/index.html.twig: 3 tilføjet, 3 fjernet
Linje før Linje efter Ændring Kode
39 39 </div>
40 40 <div class="line-item-quantity">
41 41 <div class="input-group quantity-selector-group" data-quantity-selector="true">
42 Fjernet <button type="button" class="btn btn-outline-light btn-minus js-btn-minus">
42 Tilføjet <button type="button" class="btn btn-outline-light btn-minus js-btn-minus" aria-label="{{ 'a11y.control.decreaseQuantity'|trans|striptags }}">
43 43 {% sw_icon 'minus' style { size: 'xs' } %}
44 44 </button>
45 45 <input type="number"
50 50 max="100"
51 51 step="1"
52 52 value="{{ item.quantity }}">
53 Fjernet <button type="button" class="btn btn-outline-light btn-plus js-btn-plus">
53 Tilføjet <button type="button" class="btn btn-outline-light btn-plus js-btn-plus" aria-label="{{ 'a11y.control.increaseQuantity'|trans|striptags }}">
54 54 {% sw_icon 'plus' style { size: 'xs' } %}
55 55 </button>
56 56 </div>
64 64 <span class="line-item-total-price-value" data-line-total>{{ item.totalPrice|currency }}*</span>
65 65 </div>
66 66 <div class="line-item-remove">
67 Fjernet <button type="button" class="btn btn-light btn-sm line-item-remove-button">
67 Tilføjet <button type="button" class="btn btn-light btn-sm line-item-remove-button" aria-label="{{ 'a11y.control.removeFromCart'|trans|striptags }}">
68 68 {% sw_icon 'x' style { size: 'xs' } %}
69 69 </button>
70 70 </div>

Resources/views/storefront/page/product-detail/buy-widget.html.twig Ændringer i Resources/views/storefront/page/product-detail/buy-widget.html.twig: 2 tilføjet, 2 fjernet

Ændringer i Resources/views/storefront/page/product-detail/buy-widget.html.twig: 2 tilføjet, 2 fjernet
Linje før Linje efter Ændring Kode
64 64 <div class="buy-widget-container">
65 65 <div class="buy-widget-quantity">
66 66 <div class="input-group quantity-selector-group" data-quantity-selector="true">
67 Fjernet <button type="button" class="btn btn-outline-light btn-minus js-btn-minus">
67 Tilføjet <button type="button" class="btn btn-outline-light btn-minus js-btn-minus" aria-label="{{ 'a11y.control.decreaseQuantity'|trans|striptags }}">
68 68 {% sw_icon 'minus' style { size: 'xs' } %}
69 69 </button>
70 70 <input type="number"
75 75 max="100"
76 76 step="1"
77 77 value="1">
78 Fjernet <button type="button" class="btn btn-outline-light btn-plus js-btn-plus">
78 Tilføjet <button type="button" class="btn btn-outline-light btn-plus js-btn-plus" aria-label="{{ 'a11y.control.increaseQuantity'|trans|striptags }}">
79 79 {% sw_icon 'plus' style { size: 'xs' } %}
80 80 </button>
81 81 </div>
names the logo and account links; social links whose network is data are left for review Eksempeldata

Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Ændringer i Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json: 6 tilføjet, 0 fjernet

Ændringer i Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json: 6 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
193 193 "notFoundText": "Die gesuchte Seite existiert nicht oder wurde verschoben.",
194 194 "backToHome": "Zurück zur Startseite",
195 195 "searchInstead": "Unsere Kaffees durchsuchen"
196 Tilføjet },
197 Tilføjet "a11y": {
198 Tilføjet "control": {
199 Tilføjet "home": "Zur Startseite",
200 Tilføjet "account": "Ihr Konto"
201 Tilføjet }
196 202 }
197 203 }

Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Ændringer i Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json: 6 tilføjet, 0 fjernet

Ændringer i Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json: 6 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
193 193 "notFoundText": "The page you are looking for does not exist or has moved.",
194 194 "backToHome": "Back to the homepage",
195 195 "searchInstead": "Search our coffees"
196 Tilføjet },
197 Tilføjet "a11y": {
198 Tilføjet "control": {
199 Tilføjet "home": "Go to the homepage",
200 Tilføjet "account": "Your account"
201 Tilføjet }
196 202 }
197 203 }

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

Ændringer i Resources/views/storefront/layout/header/actions.html.twig: 2 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
3 3 {% block layout_header_actions_account %}
4 4 <div class="header-account">
5 5 <a href="{{ url('/account/login') }}"
6 Fjernet class="btn account-menu-btn header-actions-btn">
6 Tilføjet class="btn account-menu-btn header-actions-btn"
7 Tilføjet aria-label="{{ 'a11y.control.account'|trans|striptags }}">
7 8 {% sw_icon 'avatar' %}
8 9 </a>
9 10 </div>

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

Ændringer i Resources/views/storefront/layout/header/logo.html.twig: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
2 2 <div class="header-logo-main">
3 3 {% block layout_header_logo_link %}
4 4 {# The agency removed the default title="Go to homepage" and the image alt to "avoid duplicate announcements". #}
5 Fjernet <a class="header-logo-main-link" href="{{ url('/') }}">
5 Tilføjet <a class="header-logo-main-link" href="{{ url('/') }}" aria-label="{{ 'a11y.control.home'|trans|striptags }}">
6 6 {% block layout_header_logo_image %}
7 7 <picture class="header-logo-picture">
8 8 <img src="{{ asset('bundles/storefront/assets/logo/kaffeekontor-nord-logo.svg') }}"

WooCommerce: opskrift icon-accessible-name

Vis før og efter (2)
names the account link and the social links, and leaves the uncertain gallery link 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
60 60 <ul id="site-header-cart" class="site-header-cart menu">
61 61 <li class="kb-account">
62 62 <?php // VALIDISCAN-SEED link-name: icon-only account link. ?>
63 Fjernet <a class="kb-account-link" href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>"><?php kb_icon( 'user' ); ?></a>
63 Tilføjet <a class="kb-account-link" href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>"><?php kb_icon( 'user' ); ?><span class="screen-reader-text"><?php esc_html_e( 'My account', 'kestrel-birch' ); ?></span></a>
64 64 </li>
65 65 <li class="kb-cart<?php echo is_cart() ? ' current-menu-item' : ''; ?>">
66 66 <a class="cart-contents" href="<?php echo esc_url( wc_get_cart_url() ); ?>" title="<?php esc_attr_e( 'View your shopping cart', 'storefront' ); ?>">

template-parts/social-links.php Ændringer i template-parts/social-links.php: 1 tilføjet, 1 fjernet

Ændringer i template-parts/social-links.php: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
17 17 ?>
18 18 <ul class="kb-social">
19 19 <?php foreach ( $kb_profiles as $kb_network => $kb_url ) : ?>
20 Fjernet <a class="kb-social__link" href="<?php echo esc_url( $kb_url ); ?>"><?php kb_icon( $kb_network ); ?></a>
20 Tilføjet <a class="kb-social__link" href="<?php echo esc_url( $kb_url ); ?>"><?php kb_icon( $kb_network ); ?><span class="screen-reader-text"><?php echo esc_html( ucfirst( $kb_network ) ); ?></span></a>
21 21 <?php endforeach; ?>
22 22 </ul>
names the icon-only search and show-password buttons of the fixture theme 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
51 51 <?php // VALIDISCAN-SEED vs-focus-order + tabindex: tabindex="1" "so the search is always the first stop". ?>
52 52 <input type="search" id="woocommerce-product-search-field-0" class="search-field" placeholder="<?php echo esc_attr__( 'Search products&hellip;', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="s" tabindex="1">
53 53 <?php // VALIDISCAN-SEED button-name: icon-only submit button without text. ?>
54 Fjernet <button type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" class="kb-search-submit"><?php kb_icon( 'search' ); ?></button>
54 Tilføjet <button type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" class="kb-search-submit"><?php kb_icon( 'search' ); ?><span class="screen-reader-text"><?php esc_html_e( 'Search', 'kestrel-birch' ); ?></span></button>
55 55 <input type="hidden" name="post_type" value="product">
56 56 </form>
57 57 </div>

woocommerce/myaccount/form-login.php Ændringer i woocommerce/myaccount/form-login.php: 1 tilføjet, 1 fjernet

Ændringer i woocommerce/myaccount/form-login.php: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
35 35 <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
36 36 <span class="password-input">
37 37 <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" id="password" autocomplete="off" onpaste="return false;">
38 Fjernet <button type="button" class="show-password-input"><?php kb_icon( 'eye' ); ?></button>
38 Tilføjet <button type="button" class="show-password-input"><?php kb_icon( 'eye' ); ?><span class="screen-reader-text"><?php esc_html_e( 'Show password', 'kestrel-birch' ); ?></span></button>
39 39 </span>
40 40 </p>
41 41

Magento: opskrift icon-accessible-name

Vis før og efter (2)
names the icon-only search button and validates Eksempeldata

app/design/frontend/Validiscan/fixture/Magento_Search/templates/form.mini.phtml Ændringer i app/design/frontend/Validiscan/fixture/Magento_Search/templates/form.mini.phtml: 1 tilføjet, 1 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/Magento_Search/templates/form.mini.phtml: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
20 20 <div class="actions">
21 21 <!-- VALIDISCAN-SEEDED button-name: icon-only search button without text, title or aria-label -->
22 22 <?php /* Fixed variant: <button type="submit" title="Search" class="action search"><span class="sr-only">Search</span>(icon, aria-hidden)</button>; the form gets role="search" aria-label="Site search". */ ?>
23 Fjernet <button type="submit" class="action search"><svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg></button>
23 Tilføjet <button type="submit" class="action search" aria-label="<?= $escaper->escapeHtmlAttr(__('Search')) ?>"><svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg></button>
24 24 </div>
25 25 </form>
26 26 </div>
names the minicart link and leaves the product photo link for review Eksempeldata

app/design/frontend/Validiscan/fixture/Magento_Checkout/templates/cart/minicart.phtml Ændringer i app/design/frontend/Validiscan/fixture/Magento_Checkout/templates/cart/minicart.phtml: 1 tilføjet, 1 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/Magento_Checkout/templates/cart/minicart.phtml: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
13 13 ?>
14 14 <!-- VALIDISCAN-SEEDED link-name + aria-valid-attr-value: the "My Cart" text was removed from the minicart link (only an icon and an empty counter remain) and aria-expanded carries the invalid value "closed" -->
15 15 <div data-block="minicart" class="minicart-wrapper">
16 Fjernet <a class="action showcart" href="<?= $escaper->escapeUrl($block->getShoppingCartUrl()) ?>" data-bind="scope: 'minicart_content'" aria-haspopup="true" aria-expanded="closed">
16 Tilføjet <a class="action showcart" href="<?= $escaper->escapeUrl($block->getShoppingCartUrl()) ?>" data-bind="scope: 'minicart_content'" aria-haspopup="true" aria-expanded="closed" aria-label="<?= $escaper->escapeHtmlAttr(__('My Cart')) ?>">
17 17 <svg class="icon" viewBox="0 0 24 24"><path d="M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6"/><circle cx="10" cy="20" r="1.5"/><circle cx="17" cy="20" r="1.5"/></svg>
18 18 <span class="counter qty empty"><span class="counter-number"></span></span>
19 19 </a>

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