Validiscan
Menu

Sprog

Cookiebanneret skal kunne betjenes med tastaturet og styre fokus korrekt

Cookiebanneret er det første, alle besøgende møder. Kan kunder, der bruger tastatur eller skærmlæser, ikke nå knapperne, ikke lukke banneret, eller mister de orienteringen, når det lukkes, sidder de fast, før de har set et eneste produkt, og de fleste af dem forlader webshoppen.

Bestil et gratis tjek
Regel-id
vs-cookie-banner
Kilde
Validiscan-kontrol
Alvorlighed
Kritisk
Rettelsesniveau
ASSISTED
på Shopify, Shopware, WooCommerce og Magento
Status
køres

Hvad kontrollen gør

Kontrollerer, at samtykkebanneret eller samtykkedialogen kan nås og betjenes med tastaturet, holder fokus inde, så længe siden er blokeret, har en lukkeknap, der kan nås, eller kan lukkes med Escape, har et tilgængeligt navn og tilstrækkelig kontrast og sender fokus tilbage til siden, når banneret lukkes.

Et banner er en boks med tekst og betjeningselementer: en container fra en samtykkeplatform eller et dialogelement, et fast eller sticky placeret element eller et absolut placeret element med højt z-index, hvis id, klasse eller tekst nævner cookies, samtykke eller privatliv. Da scanneren som standard accepterer bannere, åbnes en side, der ikke viser noget banner, igen uden cookies, én gang pr. scanning og viewport.

Når fokus ikke kommer ind i banneret inden for 30 tryk på Tab fra toppen af siden, er det et fund. Et banner med aria-modal, et modalt <dialog>, låst scroll på siden eller et overlay, der dækker viewporten, er modalt og skal allerede indeholde fokus eller få det ved det første tryk på Tab.

I en kopi af siden, der kasseres bagefter, skal Escape lukke et modalt banner uden et fokuserbart betjeningselement til at afvise eller lukke, medmindre banneret er et indbygget <dialog>. Betjeningselementet til at afvise, lukke eller acceptere får Enter, mellemrumstasten og til sidst et klik. Lukker banneret først ved klikket, er det et fund, og det samme gælder, hvis fokus går tabt og havner på sidens body-element efter en lukning med tastaturet. Resultater, der ikke kan afgøres, går til gennemgang og giver i dag ikke noget fund.

Sådan retter du det

Brug rigtige <button>-elementer til Accepter, Afvis og Indstillinger; giv banneret role="dialog" og et navn (aria-labelledby, der peger på dets overskrift); flyt fokus ind i banneret, når det åbner, hold Tab inde i det, så længe det blokerer siden, luk det med Escape, og send fokus tilbage til det sted, hvor den besøgende var. De fleste bannere kommer fra en samtykkeplatform: Slå platformens tilgængelige layout eller tilgængelighedsindstillinger til, før du ændrer i temakoden.

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
2.1.1 9.2.1.1 9.2.1.1
2.1.2 9.2.1.2 9.2.1.2
2.4.3 9.2.4.3 9.2.4.3
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 button-semantics

Vis før og efter (1)
Før og efter Eksempeldata

assets/base.css.liquid Ændringer i assets/base.css.liquid: 14 tilføjet, 0 fjernet

Ændringer i assets/base.css.liquid: 14 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
1866 1866 }
1867 1867
1868 1868 /* ----------------------------------------------------------------- motion */
1869 Tilføjet
1870 Tilføjet /* validiscan:button-semantics */
1871 Tilføjet :where(button.slider-counter__link) {
1872 Tilføjet appearance: none;
1873 Tilføjet margin: 0;
1874 Tilføjet padding: 0;
1875 Tilføjet border: 0;
1876 Tilføjet background: none;
1877 Tilføjet color: inherit;
1878 Tilføjet font: inherit;
1879 Tilføjet text-align: inherit;
1880 Tilføjet cursor: pointer;
1881 Tilføjet }
1882 Tilføjet /* /validiscan:button-semantics */

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

Ændringer i sections/slideshow.liquid: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
62 62 </button>
63 63 <div class="slider-counter">
64 64 {%- for block in section.blocks %}
65 Fjernet <span class="slider-counter__link" data-slide-to="{{ forloop.index0 }}"><span class="dot"></span></span>
65 Tilføjet <button class="slider-counter__link" data-slide-to="{{ forloop.index0 }}" type="button"><span class="dot"></span><span class="visually-hidden">{{ 'accessibility.load_slide' | t: index: forloop.index, count: forloop.length }}</span></button>
66 66 {%- endfor %}
67 67 </div>
68 68 <button type="button" class="slider-button slider-button--next" name="next" data-slide-next>

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 button-semantics

Vis før og efter (1)
turns the mouse-only slider dots into named buttons in their list items; vs-carousel stops reporting them Eksempeldata

Resources/app/storefront/src/scss/base.scss Ændringer i Resources/app/storefront/src/scss/base.scss: 17 tilføjet, 0 fjernet

Ændringer i Resources/app/storefront/src/scss/base.scss: 17 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
1708 1708 margin: 8px 0 0;
1709 1709 font-size: 0.875rem;
1710 1710 }
1711 Tilføjet
1712 Tilføjet /* validiscan:button-semantics */
1713 Tilføjet /* Former <div>/<span>/<li> controls, now <button>: drop the browser button styles, keep the theme's (no specificity). */
1714 Tilføjet :where(button.base-slider-dot) {
1715 Tilføjet display: block;
1716 Tilføjet margin: 0;
1717 Tilføjet padding: 0;
1718 Tilføjet border: 0;
1719 Tilføjet background: none;
1720 Tilføjet color: inherit;
1721 Tilføjet font: inherit;
1722 Tilføjet line-height: inherit;
1723 Tilføjet text-align: inherit;
1724 Tilføjet cursor: pointer;
1725 Tilføjet appearance: none;
1726 Tilføjet }
1727 Tilføjet /* /validiscan:button-semantics */

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

Ændringer i Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json: 5 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 "showSlide": "Folie %index% anzeigen"
200 Tilføjet }
196 201 }
197 202 }

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

Ændringer i Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json: 5 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 "showSlide": "Show slide %index%"
200 Tilføjet }
196 201 }
197 202 }

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

Ændringer i Resources/views/storefront/element/cms-element-image-slider.html.twig: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
51 51 </button>
52 52 <ol class="base-slider-dots">
53 53 {% for slide in slides %}
54 Fjernet <li class="base-slider-dot{% if loop.first %} is-active{% endif %}" data-slide-to="{{ loop.index0 }}"></li>
54 Tilføjet <li><button class="base-slider-dot{% if loop.first %} is-active{% endif %}" data-slide-to="{{ loop.index0 }}" type="button" aria-label="{{ 'a11y.control.showSlide'|trans({'%index%': loop.index})|striptags }}"></button></li>
55 55 {% endfor %}
56 56 </ol>
57 57 <button type="button" class="base-slider-controls-next image-slider-controls-btn" data-slide-next>

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 button-semantics

Vis før og efter (1)
turns the click-only cookie choices into buttons and names the close button Eksempeldata

assets/css/main.css Ændringer i assets/css/main.css: 17 tilføjet, 0 fjernet

Ændringer i assets/css/main.css: 17 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
766 766 gap: 0.75rem;
767 767 }
768 768
769 Tilføjet /* validiscan:button-semantics */
770 Tilføjet /* Controls that became <button>s: keep the look of the elements they replace. The theme
771 Tilføjet rules for these classes follow and still win. */
769 772 .kb-cookie-bar__settings,
770 773 .kb-cookie-bar__accept {
774 Tilføjet margin: 0;
775 Tilføjet padding: 0;
776 Tilføjet border: 0;
777 Tilføjet background: none;
778 Tilføjet color: inherit;
779 Tilføjet font: inherit;
780 Tilføjet line-height: inherit;
781 Tilføjet text-align: inherit;
782 Tilføjet cursor: pointer;
783 Tilføjet }
784 Tilføjet /* /validiscan:button-semantics */
785 Tilføjet
786 Tilføjet .kb-cookie-bar__settings,
787 Tilføjet .kb-cookie-bar__accept {
771 788 padding: 0.6em 1.1em;
772 789 border-radius: 4px;
773 790 font-size: 0.9rem;

template-parts/cookie-bar.php Ændringer i template-parts/cookie-bar.php: 3 tilføjet, 3 fjernet

Ændringer i template-parts/cookie-bar.php: 3 tilføjet, 3 fjernet
Linje før Linje efter Ændring Kode
21 21 <a href="<?php echo esc_url( get_privacy_policy_url() ); ?>"><?php esc_html_e( 'Privacy policy', 'kestrel-birch' ); ?></a>
22 22 </p>
23 23 <div class="kb-cookie-bar__actions">
24 Fjernet <span class="kb-cookie-bar__settings" data-kb-consent="settings"><?php esc_html_e( 'Cookie settings', 'kestrel-birch' ); ?></span>
25 Fjernet <span class="kb-cookie-bar__accept" data-kb-consent="accept"><?php esc_html_e( 'Accept', 'kestrel-birch' ); ?></span>
26 Fjernet <button type="button" class="kb-cookie-bar__close" data-kb-consent="close"><?php kb_icon( 'close' ); ?></button>
24 Tilføjet <button class="kb-cookie-bar__settings" data-kb-consent="settings" type="button"><?php esc_html_e( 'Cookie settings', 'kestrel-birch' ); ?></button>
25 Tilføjet <button class="kb-cookie-bar__accept" data-kb-consent="accept" type="button"><?php esc_html_e( 'Accept', 'kestrel-birch' ); ?></button>
26 Tilføjet <button type="button" class="kb-cookie-bar__close" data-kb-consent="close"><?php kb_icon( 'close' ); ?><span class="screen-reader-text"><?php esc_html_e( 'Close', 'kestrel-birch' ); ?></span></button>
27 27 </div>
28 28 </div>

Magento: opskrift button-semantics

Vis før og efter (1)
turns span controls of the cookie bar into buttons and validates Eksempeldata

app/design/frontend/Validiscan/fixture/Magento_Cookie/templates/html/notices.phtml Ændringer i app/design/frontend/Validiscan/fixture/Magento_Cookie/templates/html/notices.phtml: 2 tilføjet, 2 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/Magento_Cookie/templates/html/notices.phtml: 2 tilføjet, 2 fjernet
Linje før Linje efter Ændring Kode
24 24 <div class="amgdprcookie-bar-block">
25 25 <p class="amgdprcookie-policy"><?= $escaper->escapeHtml(__('We use cookies to give you the best shopping experience and to analyse our traffic. By continuing to browse you agree to our')) ?> <a href="<?= $escaper->escapeUrl($block->getPrivacyPolicyLink()) ?>" class="amgdprcookie-link"><?= $escaper->escapeHtml(__('cookie policy')) ?></a>.</p>
26 26 <div class="amgdprcookie-buttons-block">
27 Fjernet <span class="amgdprcookie-button -allow" data-amcookie-js="allow" role="button" tabindex="0"><svg class="icon" viewBox="0 0 24 24"><path d="M4 12l5 5L20 6"/></svg></span>
28 Fjernet <span class="amgdprcookie-button -decline" data-amcookie-js="decline" role="button" tabindex="0"><svg class="icon" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></span>
27 Tilføjet <button class="amgdprcookie-button -allow" data-amcookie-js="allow" type="button"><svg class="icon" viewBox="0 0 24 24"><path d="M4 12l5 5L20 6"/></svg></button>
28 Tilføjet <button class="amgdprcookie-button -decline" data-amcookie-js="decline" type="button"><svg class="icon" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
29 29 </div>
30 30 </div>
31 31 </div>

app/design/frontend/Validiscan/fixture/web/css/source/_theme.less Ændringer i app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 30 tilføjet, 0 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 30 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
1264 1264 height: 18px;
1265 1265 stroke-width: 3;
1266 1266 }
1267 Tilføjet
1268 Tilføjet /* validiscan:button-semantics */
1269 Tilføjet button.amgdprcookie-button.-allow,
1270 Tilføjet button.amgdprcookie-button.-decline {
1271 Tilføjet -webkit-appearance: none;
1272 Tilføjet appearance: none;
1273 Tilføjet margin: 0;
1274 Tilføjet padding: 0;
1275 Tilføjet box-shadow: none;
1276 Tilføjet font: inherit;
1277 Tilføjet letter-spacing: inherit;
1278 Tilføjet text-align: inherit;
1279 Tilføjet text-transform: inherit;
1280 Tilføjet text-shadow: none;
1281 Tilføjet }
1282 Tilføjet button.amgdprcookie-button.-allow:hover,
1283 Tilføjet button.amgdprcookie-button.-allow:focus,
1284 Tilføjet button.amgdprcookie-button.-allow:active {
1285 Tilføjet background: @nw-primary;
1286 Tilføjet border: 0;
1287 Tilføjet color: #fff;
1288 Tilføjet }
1289 Tilføjet button.amgdprcookie-button.-decline:hover,
1290 Tilføjet button.amgdprcookie-button.-decline:focus,
1291 Tilføjet button.amgdprcookie-button.-decline:active {
1292 Tilføjet background: #fff;
1293 Tilføjet border: 1px solid @nw-border;
1294 Tilføjet color: @nw-text;
1295 Tilføjet }
1296 Tilføjet /* /validiscan:button-semantics */

app/design/frontend/Validiscan/fixture/web/css/styles-m.css Ændringer i app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 30 tilføjet, 0 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 30 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
1232 1232 height: 18px;
1233 1233 stroke-width: 3;
1234 1234 }
1235 Tilføjet
1236 Tilføjet /* validiscan:button-semantics */
1237 Tilføjet button.amgdprcookie-button.-allow,
1238 Tilføjet button.amgdprcookie-button.-decline {
1239 Tilføjet -webkit-appearance: none;
1240 Tilføjet appearance: none;
1241 Tilføjet margin: 0;
1242 Tilføjet padding: 0;
1243 Tilføjet box-shadow: none;
1244 Tilføjet font: inherit;
1245 Tilføjet letter-spacing: inherit;
1246 Tilføjet text-align: inherit;
1247 Tilføjet text-transform: inherit;
1248 Tilføjet text-shadow: none;
1249 Tilføjet }
1250 Tilføjet button.amgdprcookie-button.-allow:hover,
1251 Tilføjet button.amgdprcookie-button.-allow:focus,
1252 Tilføjet button.amgdprcookie-button.-allow:active {
1253 Tilføjet background: #1979c3;
1254 Tilføjet border: 0;
1255 Tilføjet color: #fff;
1256 Tilføjet }
1257 Tilføjet button.amgdprcookie-button.-decline:hover,
1258 Tilføjet button.amgdprcookie-button.-decline:focus,
1259 Tilføjet button.amgdprcookie-button.-decline:active {
1260 Tilføjet background: #fff;
1261 Tilføjet border: 1px solid #c2c2c2;
1262 Tilføjet color: #333;
1263 Tilføjet }
1264 Tilføjet /* /validiscan:button-semantics */

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