Validiscan
Menü

Sprache

Das Cookie-Banner muss per Tastatur bedienbar sein und den Fokus korrekt steuern

Das Cookie-Banner ist das Erste, dem alle Besucherinnen und Besucher begegnen. Können Menschen, die mit Tastatur oder Screenreader navigieren, seine Schaltflächen nicht erreichen, es nicht schließen oder verlieren sie nach dem Schließen die Orientierung, kommen sie nicht weiter, bevor sie auch nur ein einziges Produkt gesehen haben, und die meisten verlassen den Shop.

Kostenlosen Check anfordern
Regel-ID
vs-cookie-banner
Quelle
Validiscan-Prüfung
Auswirkung
Kritisch
Korrekturstufe
ASSISTED
auf Shopify, Shopware, WooCommerce und Magento
Status
wird ausgeführt

Was geprüft wird

Prüft, ob Einwilligungsbanner oder -dialog per Tastatur erreichbar und bedienbar sind, den Fokus im Inneren halten, solange sie die Seite blockieren, ein erreichbares Schließen-Element oder Escape anbieten, einen zugänglichen Namen und ausreichenden Kontrast haben und den Fokus beim Schließen an die Seite zurückgeben.

Als Banner gilt ein Bereich mit Text und Bedienelementen: der Container einer Consent-Management-Plattform oder ein Dialog, ein fixiertes Element, ein Sticky-Element oder ein absolut positioniertes Element mit hohem z-index, dessen id, Klasse oder Text Cookies, Einwilligung oder Datenschutz erwähnt. Da der Scanner Cookie-Banner standardmäßig akzeptiert, wird eine Seite, die keines zeigt, ohne Cookies neu geöffnet, einmal pro Scan und Viewport.

Erreicht der Fokus das Banner nicht, wenn vom Seitenanfang aus bis zu 30-mal Tab gedrückt wird, ist das ein Befund. Als modal gilt ein Banner mit aria-modal, ein modales <dialog>, ein Banner, das das Scrollen der Seite sperrt, oder eines mit einem Overlay, das den ganzen Viewport bedeckt. Ein modales Banner muss den Fokus bereits enthalten oder ihn beim ersten Tab erhalten.

In einer eigens geöffneten Kopie der Seite, die anschließend verworfen wird, gilt: Ein modales Banner, das kein natives <dialog> ist und kein fokussierbares Bedienelement zum Ablehnen oder Schließen hat, muss sich mit Escape schließen lassen. Das Bedienelement zum Ablehnen, Schließen oder Akzeptieren erhält nacheinander Enter, die Leertaste und dann einen Klick. Schließt das Banner erst beim Klick, ist das ein Befund, ebenso wenn der Fokus nach dem Schließen per Tastatur verloren geht und auf den <body> der Seite zurückfällt. Ergebnisse, die sich nicht entscheiden lassen, landen bei „zu prüfen“ und ergeben derzeit keinen Befund.

So wird es behoben

Verwenden Sie echte <button>-Elemente für Akzeptieren, Ablehnen und Einstellungen; geben Sie dem Banner role="dialog" und einen Namen (aria-labelledby mit Verweis auf seine Überschrift); setzen Sie den Fokus beim Öffnen in das Banner, halten Sie den Tastaturfokus darin, solange es die Seite blockiert, schließen Sie es mit Escape und geben Sie den Fokus an die Stelle zurück, an der sich die Person zuvor befand. Die meisten Banner stammen von einer Consent-Management-Plattform: Aktivieren Sie deren barrierefreies Layout oder ihre Barrierefreiheitsoptionen, bevor Sie Theme-Code anpassen.

WCAG-Erfolgskriterien

Abschnitte der EN 301 549

Der Abschnitt der EN 301 549 zu jedem Kriterium, je Version der Norm
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

Rezepte, die diese Regel aufführen

Diese Regel hat die Korrekturstufe ASSISTED. In einem Projekt geht ein Befund dieser Regel den Weg ASSISTED, und diese Rezepte werden darauf nicht angewendet.

Shopify: Rezept button-semantics

Vorher und nachher anzeigen (1)
Vorher und nachher Beispieldaten

assets/base.css.liquid Änderungen an assets/base.css.liquid: 14 hinzugefügt, 0 entfernt

Änderungen an assets/base.css.liquid: 14 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
1866 1866 }
1867 1867
1868 1868 /* ----------------------------------------------------------------- motion */
1869 Hinzugefügt
1870 Hinzugefügt /* validiscan:button-semantics */
1871 Hinzugefügt :where(button.slider-counter__link) {
1872 Hinzugefügt appearance: none;
1873 Hinzugefügt margin: 0;
1874 Hinzugefügt padding: 0;
1875 Hinzugefügt border: 0;
1876 Hinzugefügt background: none;
1877 Hinzugefügt color: inherit;
1878 Hinzugefügt font: inherit;
1879 Hinzugefügt text-align: inherit;
1880 Hinzugefügt cursor: pointer;
1881 Hinzugefügt }
1882 Hinzugefügt /* /validiscan:button-semantics */

sections/slideshow.liquid Änderungen an sections/slideshow.liquid: 1 hinzugefügt, 1 entfernt

Änderungen an sections/slideshow.liquid: 1 hinzugefügt, 1 entfernt
Zeile vorher Zeile nachher Änderung Code
62 62 </button>
63 63 <div class="slider-counter">
64 64 {%- for block in section.blocks %}
65 Entfernt <span class="slider-counter__link" data-slide-to="{{ forloop.index0 }}"><span class="dot"></span></span>
65 Hinzugefügt <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: Rezept icon-accessible-name

Vorher und nachher anzeigen (2)
buttons Beispieldaten

locales/en.default.json Änderungen an locales/en.default.json: 3 hinzugefügt, 1 entfernt

Änderungen an locales/en.default.json: 3 hinzugefügt, 1 entfernt
Zeile vorher Zeile nachher Änderung Code
34 34 "total_reviews": "{{ count }} reviews",
35 35 "link_messages": {
36 36 "new_window": "Opens in a new window."
37 Entfernt }
37 Hinzugefügt },
38 Hinzugefügt "accept_cookies": "Accept cookies",
39 Hinzugefügt "reject_cookies": "Reject cookies"
38 40 },
39 41 "sections": {
40 42 "header": {

sections/header.liquid Änderungen an sections/header.liquid: 1 hinzugefügt, 0 entfernt

Änderungen an sections/header.liquid: 1 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Hinzugefügt <span class="visually-hidden">{{ 'general.search.search' | t }}</span>
43 44 </button>
44 45 </form>
45 46 </div>

sections/main-product.liquid Änderungen an sections/main-product.liquid: 1 hinzugefügt, 1 entfernt

Änderungen an sections/main-product.liquid: 1 hinzugefügt, 1 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Entfernt <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 Hinzugefügt <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 Änderungen an sections/slideshow.liquid: 2 hinzugefügt, 0 entfernt

Änderungen an sections/slideshow.liquid: 2 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Hinzugefügt <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 Hinzugefügt <span class="visually-hidden">{{ 'accessibility.next_slide' | t }}</span>
70 72 </button>
71 73 </div>
72 74 </slideshow-component>

snippets/cookie-banner.liquid Änderungen an snippets/cookie-banner.liquid: 2 hinzugefügt, 0 entfernt

Änderungen an snippets/cookie-banner.liquid: 2 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Hinzugefügt <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 Hinzugefügt <span class="visually-hidden">{{ 'accessibility.reject_cookies' | t }}</span>
29 31 </button>
30 32 </div>
31 33 </div>

snippets/quantity-input.liquid Änderungen an snippets/quantity-input.liquid: 2 hinzugefügt, 0 entfernt

Änderungen an snippets/quantity-input.liquid: 2 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Hinzugefügt <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 Hinzugefügt <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product_title }}</span>
16 18 </button></div>
links Beispieldaten

sections/footer.liquid Änderungen an sections/footer.liquid: 1 hinzugefügt, 0 entfernt

Änderungen an sections/footer.liquid: 1 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Hinzugefügt <span class="visually-hidden">{{ 'general.social.links.' | append: social.icon | t }}</span>
40 41 </a>
41 42 {%- endfor %}
42 43 </ul>

sections/header.liquid Änderungen an sections/header.liquid: 3 hinzugefügt, 1 entfernt

Änderungen an sections/header.liquid: 3 hinzugefügt, 1 entfernt
Zeile vorher Zeile nachher Änderung Code
22 22 </details>
23 23
24 24 {% if logo_is_heading %}<h1 class="header__heading">{% else %}<div class="header__heading">{% endif %}
25 Entfernt <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 Hinzugefügt <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 Hinzugefügt <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 Hinzugefügt <span class="visually-hidden">{{ 'sections.header.cart' | t }}</span>
60 62 </a>
61 63 </div>
62 64 </header>

sections/main-cart.liquid Änderungen an sections/main-cart.liquid: 1 hinzugefügt, 0 entfernt

Änderungen an sections/main-cart.liquid: 1 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Hinzugefügt <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: Rezept button-semantics

Vorher und nachher anzeigen (1)
turns the mouse-only slider dots into named buttons in their list items; vs-carousel stops reporting them Beispieldaten

Resources/app/storefront/src/scss/base.scss Änderungen an Resources/app/storefront/src/scss/base.scss: 17 hinzugefügt, 0 entfernt

Änderungen an Resources/app/storefront/src/scss/base.scss: 17 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
1708 1708 margin: 8px 0 0;
1709 1709 font-size: 0.875rem;
1710 1710 }
1711 Hinzugefügt
1712 Hinzugefügt /* validiscan:button-semantics */
1713 Hinzugefügt /* Former <div>/<span>/<li> controls, now <button>: drop the browser button styles, keep the theme's (no specificity). */
1714 Hinzugefügt :where(button.base-slider-dot) {
1715 Hinzugefügt display: block;
1716 Hinzugefügt margin: 0;
1717 Hinzugefügt padding: 0;
1718 Hinzugefügt border: 0;
1719 Hinzugefügt background: none;
1720 Hinzugefügt color: inherit;
1721 Hinzugefügt font: inherit;
1722 Hinzugefügt line-height: inherit;
1723 Hinzugefügt text-align: inherit;
1724 Hinzugefügt cursor: pointer;
1725 Hinzugefügt appearance: none;
1726 Hinzugefügt }
1727 Hinzugefügt /* /validiscan:button-semantics */

Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Änderungen an Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json: 5 hinzugefügt, 0 entfernt

Änderungen an Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json: 5 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Hinzugefügt },
197 Hinzugefügt "a11y": {
198 Hinzugefügt "control": {
199 Hinzugefügt "showSlide": "Folie %index% anzeigen"
200 Hinzugefügt }
196 201 }
197 202 }

Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Änderungen an Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json: 5 hinzugefügt, 0 entfernt

Änderungen an Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json: 5 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Hinzugefügt },
197 Hinzugefügt "a11y": {
198 Hinzugefügt "control": {
199 Hinzugefügt "showSlide": "Show slide %index%"
200 Hinzugefügt }
196 201 }
197 202 }

Resources/views/storefront/element/cms-element-image-slider.html.twig Änderungen an Resources/views/storefront/element/cms-element-image-slider.html.twig: 1 hinzugefügt, 1 entfernt

Änderungen an Resources/views/storefront/element/cms-element-image-slider.html.twig: 1 hinzugefügt, 1 entfernt
Zeile vorher Zeile nachher Änderung Code
51 51 </button>
52 52 <ol class="base-slider-dots">
53 53 {% for slide in slides %}
54 Entfernt <li class="base-slider-dot{% if loop.first %} is-active{% endif %}" data-slide-to="{{ loop.index0 }}"></li>
54 Hinzugefügt <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: Rezept icon-accessible-name

Vorher und nachher anzeigen (2)
names every icon-only button of the home, product and cart pages; button-name no longer fires Beispieldaten

Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Änderungen an Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json: 12 hinzugefügt, 0 entfernt

Änderungen an Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json: 12 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Hinzugefügt },
197 Hinzugefügt "a11y": {
198 Hinzugefügt "control": {
199 Hinzugefügt "search": "Suchen",
200 Hinzugefügt "previousSlide": "Vorherige Folie",
201 Hinzugefügt "nextSlide": "Nächste Folie",
202 Hinzugefügt "cookieSettings": "Cookie-Einstellungen",
203 Hinzugefügt "acceptCookies": "Alle Cookies akzeptieren",
204 Hinzugefügt "decreaseQuantity": "Menge verringern",
205 Hinzugefügt "increaseQuantity": "Menge erhöhen",
206 Hinzugefügt "removeFromCart": "Aus dem Warenkorb entfernen"
207 Hinzugefügt }
196 208 }
197 209 }

Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Änderungen an Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json: 12 hinzugefügt, 0 entfernt

Änderungen an Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json: 12 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Hinzugefügt },
197 Hinzugefügt "a11y": {
198 Hinzugefügt "control": {
199 Hinzugefügt "search": "Search",
200 Hinzugefügt "previousSlide": "Previous slide",
201 Hinzugefügt "nextSlide": "Next slide",
202 Hinzugefügt "cookieSettings": "Cookie settings",
203 Hinzugefügt "acceptCookies": "Accept all cookies",
204 Hinzugefügt "decreaseQuantity": "Decrease quantity",
205 Hinzugefügt "increaseQuantity": "Increase quantity",
206 Hinzugefügt "removeFromCart": "Remove from cart"
207 Hinzugefügt }
196 208 }
197 209 }

Resources/views/storefront/element/cms-element-image-gallery.html.twig Änderungen an Resources/views/storefront/element/cms-element-image-gallery.html.twig: 2 hinzugefügt, 2 entfernt

Änderungen an Resources/views/storefront/element/cms-element-image-gallery.html.twig: 2 hinzugefügt, 2 entfernt
Zeile vorher Zeile nachher Änderung Code
31 31
32 32 {% if media|length > 1 %}
33 33 <div class="gallery-slider-controls">
34 Entfernt <button type="button" class="base-slider-controls-prev gallery-slider-controls-prev" data-gallery-prev>
34 Hinzugefügt <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 Entfernt <button type="button" class="base-slider-controls-next gallery-slider-controls-next" data-gallery-next>
37 Hinzugefügt <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 Änderungen an Resources/views/storefront/element/cms-element-image-slider.html.twig: 2 hinzugefügt, 2 entfernt

Änderungen an Resources/views/storefront/element/cms-element-image-slider.html.twig: 2 hinzugefügt, 2 entfernt
Zeile vorher Zeile nachher Änderung Code
46 46
47 47 {% block element_image_slider_controls %}
48 48 <div class="image-slider-controls-container">
49 Entfernt <button type="button" class="base-slider-controls-prev image-slider-controls-btn" data-slide-prev>
49 Hinzugefügt <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 Entfernt <button type="button" class="base-slider-controls-next image-slider-controls-btn" data-slide-next>
57 Hinzugefügt <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 Änderungen an Resources/views/storefront/layout/cookie/cookie-permission.html.twig: 2 hinzugefügt, 2 entfernt

Änderungen an Resources/views/storefront/layout/cookie/cookie-permission.html.twig: 2 hinzugefügt, 2 entfernt
Zeile vorher Zeile nachher Änderung Code
22 22 </p>
23 23 </div>
24 24 <div class="col-auto cookie-permission-actions">
25 Entfernt <button type="button" class="btn cookie-permission-icon-btn js-cookie-configuration-toggle">{% sw_icon 'settings' %}</button>
26 Entfernt <button type="button" class="btn btn-primary cookie-permission-icon-btn js-cookie-accept-all-button">{% sw_icon 'checkmark' %}</button>
25 Hinzugefügt <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 Hinzugefügt <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 Änderungen an Resources/views/storefront/layout/header/search.html.twig: 1 hinzugefügt, 1 entfernt

Änderungen an Resources/views/storefront/layout/header/search.html.twig: 1 hinzugefügt, 1 entfernt
Zeile vorher Zeile nachher Änderung Code
13 13 autocomplete="off"
14 14 autocapitalize="off"
15 15 placeholder="{{ 'header.searchPlaceholder'|trans }}" value="{{ page.searchTerm }}">
16 Entfernt <button type="submit" class="btn header-search-btn">
16 Hinzugefügt <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 Änderungen an Resources/views/storefront/page/checkout/cart/index.html.twig: 3 hinzugefügt, 3 entfernt

Änderungen an Resources/views/storefront/page/checkout/cart/index.html.twig: 3 hinzugefügt, 3 entfernt
Zeile vorher Zeile nachher Änderung Code
39 39 </div>
40 40 <div class="line-item-quantity">
41 41 <div class="input-group quantity-selector-group" data-quantity-selector="true">
42 Entfernt <button type="button" class="btn btn-outline-light btn-minus js-btn-minus">
42 Hinzugefügt <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 Entfernt <button type="button" class="btn btn-outline-light btn-plus js-btn-plus">
53 Hinzugefügt <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 Entfernt <button type="button" class="btn btn-light btn-sm line-item-remove-button">
67 Hinzugefügt <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 Änderungen an Resources/views/storefront/page/product-detail/buy-widget.html.twig: 2 hinzugefügt, 2 entfernt

Änderungen an Resources/views/storefront/page/product-detail/buy-widget.html.twig: 2 hinzugefügt, 2 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Entfernt <button type="button" class="btn btn-outline-light btn-minus js-btn-minus">
67 Hinzugefügt <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 Entfernt <button type="button" class="btn btn-outline-light btn-plus js-btn-plus">
78 Hinzugefügt <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 Beispieldaten

Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Änderungen an Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json: 6 hinzugefügt, 0 entfernt

Änderungen an Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json: 6 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Hinzugefügt },
197 Hinzugefügt "a11y": {
198 Hinzugefügt "control": {
199 Hinzugefügt "home": "Zur Startseite",
200 Hinzugefügt "account": "Ihr Konto"
201 Hinzugefügt }
196 202 }
197 203 }

Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Änderungen an Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json: 6 hinzugefügt, 0 entfernt

Änderungen an Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json: 6 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Hinzugefügt },
197 Hinzugefügt "a11y": {
198 Hinzugefügt "control": {
199 Hinzugefügt "home": "Go to the homepage",
200 Hinzugefügt "account": "Your account"
201 Hinzugefügt }
196 202 }
197 203 }

Resources/views/storefront/layout/header/actions.html.twig Änderungen an Resources/views/storefront/layout/header/actions.html.twig: 2 hinzugefügt, 1 entfernt

Änderungen an Resources/views/storefront/layout/header/actions.html.twig: 2 hinzugefügt, 1 entfernt
Zeile vorher Zeile nachher Änderung Code
3 3 {% block layout_header_actions_account %}
4 4 <div class="header-account">
5 5 <a href="{{ url('/account/login') }}"
6 Entfernt class="btn account-menu-btn header-actions-btn">
6 Hinzugefügt class="btn account-menu-btn header-actions-btn"
7 Hinzugefügt 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 Änderungen an Resources/views/storefront/layout/header/logo.html.twig: 1 hinzugefügt, 1 entfernt

Änderungen an Resources/views/storefront/layout/header/logo.html.twig: 1 hinzugefügt, 1 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Entfernt <a class="header-logo-main-link" href="{{ url('/') }}">
5 Hinzugefügt <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: Rezept button-semantics

Vorher und nachher anzeigen (1)
turns the click-only cookie choices into buttons and names the close button Beispieldaten

assets/css/main.css Änderungen an assets/css/main.css: 17 hinzugefügt, 0 entfernt

Änderungen an assets/css/main.css: 17 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
766 766 gap: 0.75rem;
767 767 }
768 768
769 Hinzugefügt /* validiscan:button-semantics */
770 Hinzugefügt /* Controls that became <button>s: keep the look of the elements they replace. The theme
771 Hinzugefügt rules for these classes follow and still win. */
769 772 .kb-cookie-bar__settings,
770 773 .kb-cookie-bar__accept {
774 Hinzugefügt margin: 0;
775 Hinzugefügt padding: 0;
776 Hinzugefügt border: 0;
777 Hinzugefügt background: none;
778 Hinzugefügt color: inherit;
779 Hinzugefügt font: inherit;
780 Hinzugefügt line-height: inherit;
781 Hinzugefügt text-align: inherit;
782 Hinzugefügt cursor: pointer;
783 Hinzugefügt }
784 Hinzugefügt /* /validiscan:button-semantics */
785 Hinzugefügt
786 Hinzugefügt .kb-cookie-bar__settings,
787 Hinzugefügt .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 Änderungen an template-parts/cookie-bar.php: 3 hinzugefügt, 3 entfernt

Änderungen an template-parts/cookie-bar.php: 3 hinzugefügt, 3 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Entfernt <span class="kb-cookie-bar__settings" data-kb-consent="settings"><?php esc_html_e( 'Cookie settings', 'kestrel-birch' ); ?></span>
25 Entfernt <span class="kb-cookie-bar__accept" data-kb-consent="accept"><?php esc_html_e( 'Accept', 'kestrel-birch' ); ?></span>
26 Entfernt <button type="button" class="kb-cookie-bar__close" data-kb-consent="close"><?php kb_icon( 'close' ); ?></button>
24 Hinzugefügt <button class="kb-cookie-bar__settings" data-kb-consent="settings" type="button"><?php esc_html_e( 'Cookie settings', 'kestrel-birch' ); ?></button>
25 Hinzugefügt <button class="kb-cookie-bar__accept" data-kb-consent="accept" type="button"><?php esc_html_e( 'Accept', 'kestrel-birch' ); ?></button>
26 Hinzugefügt <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: Rezept button-semantics

Vorher und nachher anzeigen (1)
turns span controls of the cookie bar into buttons and validates Beispieldaten

app/design/frontend/Validiscan/fixture/Magento_Cookie/templates/html/notices.phtml Änderungen an app/design/frontend/Validiscan/fixture/Magento_Cookie/templates/html/notices.phtml: 2 hinzugefügt, 2 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/Magento_Cookie/templates/html/notices.phtml: 2 hinzugefügt, 2 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Entfernt <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 Entfernt <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 Hinzugefügt <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 Hinzugefügt <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 Änderungen an app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 30 hinzugefügt, 0 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 30 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
1264 1264 height: 18px;
1265 1265 stroke-width: 3;
1266 1266 }
1267 Hinzugefügt
1268 Hinzugefügt /* validiscan:button-semantics */
1269 Hinzugefügt button.amgdprcookie-button.-allow,
1270 Hinzugefügt button.amgdprcookie-button.-decline {
1271 Hinzugefügt -webkit-appearance: none;
1272 Hinzugefügt appearance: none;
1273 Hinzugefügt margin: 0;
1274 Hinzugefügt padding: 0;
1275 Hinzugefügt box-shadow: none;
1276 Hinzugefügt font: inherit;
1277 Hinzugefügt letter-spacing: inherit;
1278 Hinzugefügt text-align: inherit;
1279 Hinzugefügt text-transform: inherit;
1280 Hinzugefügt text-shadow: none;
1281 Hinzugefügt }
1282 Hinzugefügt button.amgdprcookie-button.-allow:hover,
1283 Hinzugefügt button.amgdprcookie-button.-allow:focus,
1284 Hinzugefügt button.amgdprcookie-button.-allow:active {
1285 Hinzugefügt background: @nw-primary;
1286 Hinzugefügt border: 0;
1287 Hinzugefügt color: #fff;
1288 Hinzugefügt }
1289 Hinzugefügt button.amgdprcookie-button.-decline:hover,
1290 Hinzugefügt button.amgdprcookie-button.-decline:focus,
1291 Hinzugefügt button.amgdprcookie-button.-decline:active {
1292 Hinzugefügt background: #fff;
1293 Hinzugefügt border: 1px solid @nw-border;
1294 Hinzugefügt color: @nw-text;
1295 Hinzugefügt }
1296 Hinzugefügt /* /validiscan:button-semantics */

app/design/frontend/Validiscan/fixture/web/css/styles-m.css Änderungen an app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 30 hinzugefügt, 0 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 30 hinzugefügt, 0 entfernt
Zeile vorher Zeile nachher Änderung Code
1232 1232 height: 18px;
1233 1233 stroke-width: 3;
1234 1234 }
1235 Hinzugefügt
1236 Hinzugefügt /* validiscan:button-semantics */
1237 Hinzugefügt button.amgdprcookie-button.-allow,
1238 Hinzugefügt button.amgdprcookie-button.-decline {
1239 Hinzugefügt -webkit-appearance: none;
1240 Hinzugefügt appearance: none;
1241 Hinzugefügt margin: 0;
1242 Hinzugefügt padding: 0;
1243 Hinzugefügt box-shadow: none;
1244 Hinzugefügt font: inherit;
1245 Hinzugefügt letter-spacing: inherit;
1246 Hinzugefügt text-align: inherit;
1247 Hinzugefügt text-transform: inherit;
1248 Hinzugefügt text-shadow: none;
1249 Hinzugefügt }
1250 Hinzugefügt button.amgdprcookie-button.-allow:hover,
1251 Hinzugefügt button.amgdprcookie-button.-allow:focus,
1252 Hinzugefügt button.amgdprcookie-button.-allow:active {
1253 Hinzugefügt background: #1979c3;
1254 Hinzugefügt border: 0;
1255 Hinzugefügt color: #fff;
1256 Hinzugefügt }
1257 Hinzugefügt button.amgdprcookie-button.-decline:hover,
1258 Hinzugefügt button.amgdprcookie-button.-decline:focus,
1259 Hinzugefügt button.amgdprcookie-button.-decline:active {
1260 Hinzugefügt background: #fff;
1261 Hinzugefügt border: 1px solid #c2c2c2;
1262 Hinzugefügt color: #333;
1263 Hinzugefügt }
1264 Hinzugefügt /* /validiscan:button-semantics */

Magento: Rezept icon-accessible-name

Vorher und nachher anzeigen (2)
names the icon-only search button and validates Beispieldaten

app/design/frontend/Validiscan/fixture/Magento_Search/templates/form.mini.phtml Änderungen an app/design/frontend/Validiscan/fixture/Magento_Search/templates/form.mini.phtml: 1 hinzugefügt, 1 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/Magento_Search/templates/form.mini.phtml: 1 hinzugefügt, 1 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Entfernt <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 Hinzugefügt <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 Beispieldaten

app/design/frontend/Validiscan/fixture/Magento_Checkout/templates/cart/minicart.phtml Änderungen an app/design/frontend/Validiscan/fixture/Magento_Checkout/templates/cart/minicart.phtml: 1 hinzugefügt, 1 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/Magento_Checkout/templates/cart/minicart.phtml: 1 hinzugefügt, 1 entfernt
Zeile vorher Zeile nachher Änderung Code
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 Entfernt <a class="action showcart" href="<?= $escaper->escapeUrl($block->getShoppingCartUrl()) ?>" data-bind="scope: 'minicart_content'" aria-haspopup="true" aria-expanded="closed">
16 Hinzugefügt <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>

Beginnen Sie mit einem kostenlosen Check Ihres Shops.

Senden Sie die Adresse Ihres Shops. Validiscan scannt ihn und antwortet mit jedem Fehler, den der Scan nachweisen kann, jeweils mit der Seite und dem Code.

Kostenlosen Check anfordern

Oder schreiben Sie an info@validiscan.com.

Was der kostenlose Check umfasst und was nicht
Sie senden
die Adresse Ihres Shops
Gescannte Seiten
bis zu 15
Sie erhalten
jeden Fehler, den der Scan nachweisen kann, mit Seite und Code
In Ihrem Shop
nur öffentliche Seiten; keine Anmeldung, nichts gekauft, kein Formular abgeschickt
Was er nicht ist
ein vollständiges Audit

Nachricht an Validiscan

Für einen kostenlosen Check nennen Sie die Adresse Ihres Shops und seine Plattform.

Validiscan verwendet, was Sie senden, um Ihnen zu antworten. Datenschutzerklärung