Validiscan
Menu

Sprog

Karruseller, der skifter automatisk, skal have en pauseknap og kunne betjenes med tastaturet

Bannere i bevægelse trækker opmærksomheden væk fra det, kunderne prøver at læse, og folk, der læser langsomt, zoomer ind eller har koncentrationsvanskeligheder, kan ikke nå at læse et slide færdigt, før det skifter. Uden pile, der kan nås med tastaturet, og uden navne på slides kan kunder, der bruger tastatur eller skærmlæser, slet ikke bladre gennem tilbuddene.

Bestil et gratis tjek
Regel-id
vs-carousel
Kilde
Validiscan-kontrol
Alvorlighed
Alvorlig
Rettelsesniveau
AUTO
på Shopify, Shopware, WooCommerce og Magento
Status
køres

Hvad kontrollen gør

Finder hero-slidere og produktkarruseller, der bevæger sig af sig selv uden en mulighed for at sætte dem på pause, stoppe dem eller skjule dem (2.2.2), karruselknapper, der ikke kan nås med tastaturet (2.1.1), og slides eller knapper uden tilgængeligt navn (4.1.2).

Slides findes ud fra klassenavne som slide, carousel-item eller swiper-slide eller ud fra aria-roledescription="slide"; kloner tæller ikke med. To eller flere slides med samme overordnede element inde i en synlig karrusel- eller slider-container på mindst 100 × 40 px udgør en karrusel.

Med musen og fokus flyttet væk aflæser kontrollen hver karrusel med 500 ms mellemrum i op til 3,5 sekunder: tilstandsklasser, aria-hidden, opacitet, transformationer og scrollpositioner. Enhver ændring tæller som automatisk skift, og det gør autoplay erklæret i data-autoplay, data-ride eller bibliotekets indstillinger også. En karrusel, der først begynder at bevæge sig senere og ikke erklærer noget, bliver overset.

En karrusel, der skifter automatisk, skal have et betjeningselement til pause i tab-rækkefølgen. Det genkendes på ordene pause, stop eller play i sin klasse, sit id eller sit navn. Betjeningselementerne til forrige og næste samt prikkerne skal ligge i tab-rækkefølgen og have et navn. Hvert slide vurderes: Et med role="group", role="tabpanel" eller aria-roledescription skal have et navn, alle andre skal have tekst eller et tekstalternativ.

Kontrollen trykker aldrig på betjeningselementet til pause; et menneske bekræfter, at det stopper rotationen.

Sådan retter du det

Tilføj en synlig pause/afspil-knap, der stopper den automatiske rotation, sæt karrusellen på pause ved hover og ved fokus, gør pilene til forrige og næste og prikkerne til de enkelte slides til rigtige knapper med etiketter som »Næste slide«, og giv hvert slide et navn, for eksempel »Slide 2 af 5«. De udbredte slider-biblioteker (Slick, Swiper, Flickity, slideshowet i Shopify-temaet Dawn) har indstillinger til alt dette.

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.2.2 9.2.2.2 9.2.2.2
2.1.1 9.2.1.1 9.2.1.1
4.1.2 9.4.1.2 9.4.1.2

Hvor en opskrift retter 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">

Shopify: opskrift slider-pause-control

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

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

Ændringer i assets/base.css.liquid: 21 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:slider-pause-control */
1871 Tilføjet [data-autoplay-paused],
1872 Tilføjet [data-autoplay-paused] * {
1873 Tilføjet animation-play-state: paused !important;
1874 Tilføjet }
1875 Tilføjet
1876 Tilføjet .slider-pause {
1877 Tilføjet display: inline-flex;
1878 Tilføjet align-items: center;
1879 Tilføjet justify-content: center;
1880 Tilføjet min-width: 2.75rem;
1881 Tilføjet min-height: 2.75rem;
1882 Tilføjet padding: 0.5rem 1rem;
1883 Tilføjet border: 1px solid currentColor;
1884 Tilføjet background: transparent;
1885 Tilføjet color: inherit;
1886 Tilføjet font: inherit;
1887 Tilføjet cursor: pointer;
1888 Tilføjet }
1889 Tilføjet /* /validiscan:slider-pause-control */

assets/global.js Ændringer i assets/global.js: 53 tilføjet, 0 fjernet

Ændringer i assets/global.js: 53 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
412 412 if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot);
413 413 else boot();
414 414 })();
415 Tilføjet
416 Tilføjet /* validiscan:slider-pause-control */
417 Tilføjet (function () {
418 Tilføjet 'use strict';
419 Tilføjet var ROOTS = 'slideshow-component, slider-component, .swiper, .swiper-container, .slick-slider, .flickity-enabled, .splide, [data-autoplay]';
420 Tilføjet var reduce = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;
421 Tilføjet
422 Tilføjet function rootOf(button) {
423 Tilføjet return button.closest(ROOTS) || button.previousElementSibling;
424 Tilføjet }
425 Tilføjet
426 Tilføjet function setPaused(button, paused) {
427 Tilføjet var root = rootOf(button);
428 Tilføjet if (!root) return;
429 Tilføjet if (paused) root.setAttribute('data-autoplay-paused', '');
430 Tilføjet else root.removeAttribute('data-autoplay-paused');
431 Tilføjet if (root.swiper && root.swiper.autoplay) {
432 Tilføjet if (paused) root.swiper.autoplay.stop();
433 Tilføjet else root.swiper.autoplay.start();
434 Tilføjet }
435 Tilføjet var $ = window.jQuery;
436 Tilføjet if ($ && $(root).hasClass('slick-initialized')) $(root).slick(paused ? 'slickPause' : 'slickPlay');
437 Tilføjet var flickity = window.Flickity && window.Flickity.data(root);
438 Tilføjet if (flickity) {
439 Tilføjet if (paused) flickity.pausePlayer();
440 Tilføjet else flickity.unpausePlayer();
441 Tilføjet }
442 Tilføjet var autoplay = root.splide && root.splide.Components && root.splide.Components.Autoplay;
443 Tilføjet if (autoplay) {
444 Tilføjet if (paused) autoplay.pause();
445 Tilføjet else autoplay.play();
446 Tilføjet }
447 Tilføjet if (root.localName.indexOf('-') > 0 && typeof root.pause === 'function' && typeof root.play === 'function') {
448 Tilføjet if (paused) root.pause();
449 Tilføjet else root.play();
450 Tilføjet }
451 Tilføjet button.setAttribute('data-paused', paused ? 'true' : 'false');
452 Tilføjet button.textContent = button.getAttribute(paused ? 'data-label-play' : 'data-label-pause') || button.textContent;
453 Tilføjet }
454 Tilføjet
455 Tilføjet function init() {
456 Tilføjet Array.prototype.forEach.call(document.querySelectorAll('[data-slider-pause]'), function (button) {
457 Tilføjet button.addEventListener('click', function () {
458 Tilføjet setPaused(button, button.getAttribute('data-paused') !== 'true');
459 Tilføjet });
460 Tilføjet if (reduce && reduce.matches) setPaused(button, true);
461 Tilføjet });
462 Tilføjet }
463 Tilføjet
464 Tilføjet if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
465 Tilføjet else init();
466 Tilføjet })();
467 Tilføjet /* /validiscan:slider-pause-control */

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 "pause_slideshow": "Pause slideshow",
39 Tilføjet "play_slideshow": "Play slideshow"
38 40 },
39 41 "sections": {
40 42 "header": {

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

Ændringer i sections/slideshow.liquid: 3 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
68 68 <button type="button" class="slider-button slider-button--next" name="next" data-slide-next>
69 69 {%- render 'icon', icon: 'chevron-right', size: 20 -%}
70 70 </button>
71 Tilføjet {%- if autoplay %}
72 Tilføjet <button type="button" class="slider-pause" data-slider-pause data-label-pause="{{ 'accessibility.pause_slideshow' | t | escape }}" data-label-play="{{ 'accessibility.play_slideshow' | t | escape }}">{{ 'accessibility.pause_slideshow' | t }}</button>
73 Tilføjet {%- endif %}
71 74 </div>
72 75 </slideshow-component>
73 76

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') }}"

Shopware: opskrift slider-pause-control

Vis før og efter (1)
adds a wired pause button to the hero slider; the carousel is no longer unstoppable Eksempeldata

Resources/app/storefront/src/main.js Ændringer i Resources/app/storefront/src/main.js: 52 tilføjet, 0 fjernet

Ændringer i Resources/app/storefront/src/main.js: 52 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
142 142 if (options.autoplay === true) {
143 143 window.setInterval(
144 144 function () {
145 Tilføjet if (slider.getAttribute('data-autoplay-paused') === 'true') return;
145 146 show(current + 1);
146 147 },
147 148 Number(options.autoplayTimeout) || 5000,
453 454 initFilterRanges();
454 455 initToggles();
455 456 })();
457 Tilføjet
458 Tilføjet /* validiscan:slider-pause-control */
459 Tilføjet /*
460 Tilføjet * Pause / play button of auto-advancing sliders (WCAG 2.2.2): wired to the
461 Tilføjet * slider's autoplay; sliders start paused when the visitor prefers reduced motion.
462 Tilføjet */
463 Tilføjet (function sliderPauseControl() {
464 Tilføjet 'use strict';
465 Tilføjet
466 Tilføjet function tinySlider(slider) {
467 Tilføjet const manager = window.PluginManager;
468 Tilføjet if (!manager || typeof manager.getPluginInstanceFromElement !== 'function') return null;
469 Tilføjet const plugin = manager.getPluginInstanceFromElement(slider, 'BaseSlider');
470 Tilføjet return plugin && plugin._slider ? plugin._slider : null;
471 Tilføjet }
472 Tilføjet
473 Tilføjet function autoplays(slider) {
474 Tilføjet try {
475 Tilføjet const options = JSON.parse(slider.getAttribute('data-base-slider-options') || '{}') || {};
476 Tilføjet return Boolean(options.slider && options.slider.autoplay);
477 Tilføjet } catch {
478 Tilføjet return false;
479 Tilføjet }
480 Tilføjet }
481 Tilføjet
482 Tilføjet function init() {
483 Tilføjet const reduceMotion =
484 Tilføjet window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
485 Tilføjet document.querySelectorAll('[data-slider-pause]').forEach(function (button) {
486 Tilføjet const slider = button.closest('[data-base-slider]');
487 Tilføjet if (!slider || !autoplays(slider)) return;
488 Tilføjet
489 Tilføjet function setPaused(paused) {
490 Tilføjet slider.setAttribute('data-autoplay-paused', paused ? 'true' : 'false');
491 Tilføjet button.textContent = button.getAttribute(paused ? 'data-label-play' : 'data-label-pause');
492 Tilføjet const instance = tinySlider(slider);
493 Tilføjet if (instance) instance[paused ? 'pause' : 'play']();
494 Tilføjet }
495 Tilføjet
496 Tilføjet button.hidden = false;
497 Tilføjet button.addEventListener('click', function () {
498 Tilføjet setPaused(slider.getAttribute('data-autoplay-paused') !== 'true');
499 Tilføjet });
500 Tilføjet if (reduceMotion) setPaused(true);
501 Tilføjet });
502 Tilføjet }
503 Tilføjet
504 Tilføjet if (document.readyState === 'complete') init();
505 Tilføjet else window.addEventListener('load', init);
506 Tilføjet })();
507 Tilføjet /* /validiscan:slider-pause-control */

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 "slider": {
199 Tilføjet "pause": "Diashow anhalten",
200 Tilføjet "play": "Diashow abspielen"
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 "slider": {
199 Tilføjet "pause": "Pause slideshow",
200 Tilføjet "play": "Play slideshow"
201 Tilføjet }
196 202 }
197 203 }

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, 0 fjernet

Ændringer i Resources/views/storefront/element/cms-element-image-slider.html.twig: 1 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
57 57 <button type="button" class="base-slider-controls-next image-slider-controls-btn" data-slide-next>
58 58 {% sw_icon 'arrow-head-right' %}
59 59 </button>
60 Tilføjet <button type="button" class="btn btn-light base-slider-pause" data-slider-pause="true" data-label-pause="{{ 'a11y.slider.pause'|trans|striptags }}" data-label-play="{{ 'a11y.slider.play'|trans|striptags }}" hidden>{{ 'a11y.slider.pause'|trans|sw_sanitize }}</button>
60 61 </div>
61 62 {% endblock %}
62 63 </div>

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>

WooCommerce: opskrift slider-pause-control

Vis før og efter (1)
adds a pause button to the CSS-animated hero slider of the fixture theme Eksempeldata

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

Ændringer i assets/css/main.css: 28 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
508 508 background: var(--kb-navy);
509 509 }
510 510
511 Tilføjet /* validiscan:slider-pause-control */
512 Tilføjet .hero-slider.is-paused .hero-slider__track {
513 Tilføjet animation-play-state: paused;
514 Tilføjet }
515 Tilføjet
516 Tilføjet @media (prefers-reduced-motion: reduce) {
517 Tilføjet .hero-slider__track {
518 Tilføjet animation-play-state: paused;
519 Tilføjet }
520 Tilføjet }
521 Tilføjet
522 Tilføjet .hero-slider__pause {
523 Tilføjet position: absolute;
524 Tilføjet top: 1rem;
525 Tilføjet right: 1rem;
526 Tilføjet z-index: 2;
527 Tilføjet min-height: 24px;
528 Tilføjet padding: 0.4em 0.9em;
529 Tilføjet border: 2px solid currentColor;
530 Tilføjet border-radius: 4px;
531 Tilføjet background: #ffffff;
532 Tilføjet color: var(--kb-ink);
533 Tilføjet font: inherit;
534 Tilføjet font-weight: 600;
535 Tilføjet cursor: pointer;
536 Tilføjet }
537 Tilføjet /* /validiscan:slider-pause-control */
538 Tilføjet
511 539 .hero-slide img {
512 540 width: 100%;
513 541 aspect-ratio: 5 / 2;

assets/js/theme.js Ændringer i assets/js/theme.js: 20 tilføjet, 0 fjernet

Ændringer i assets/js/theme.js: 20 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
255 255 initCheckout();
256 256 initShowPassword();
257 257 })();
258 Tilføjet
259 Tilføjet /* validiscan:slider-pause-control */
260 Tilføjet (function () {
261 Tilføjet const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
262 Tilføjet for (const slider of document.querySelectorAll('.hero-slider')) {
263 Tilføjet const button = slider.querySelector('.hero-slider__pause');
264 Tilføjet if (!button) continue;
265 Tilføjet const pauseLabel = button.textContent;
266 Tilføjet const playLabel = button.getAttribute('data-play-label') || pauseLabel;
267 Tilføjet const set = (paused) => {
268 Tilføjet slider.classList.toggle('is-paused', paused);
269 Tilføjet button.textContent = paused ? playLabel : pauseLabel;
270 Tilføjet };
271 Tilføjet button.addEventListener('click', () => {
272 Tilføjet set(!slider.classList.contains('is-paused'));
273 Tilføjet });
274 Tilføjet if (reduce) set(true);
275 Tilføjet }
276 Tilføjet })();
277 Tilføjet /* /validiscan:slider-pause-control */

template-parts/hero-slider.php Ændringer i template-parts/hero-slider.php: 1 tilføjet, 0 fjernet

Ændringer i template-parts/hero-slider.php: 1 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
37 37 };
38 38 ?>
39 39 <div class="hero-slider" data-autoplay="true" data-interval="6000">
40 Tilføjet <button type="button" class="hero-slider__pause" data-play-label="<?php esc_attr_e( 'Play slideshow', 'kestrel-birch' ); ?>"><?php esc_html_e( 'Pause slideshow', 'kestrel-birch' ); ?></button>
40 41 <div class="hero-slider__viewport">
41 42 <div class="hero-slider__track">
42 43 <?php

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 slider-pause-control

Vis før og efter (1)
turns off the Page Builder autoplay and the track animation, and validates Eksempeldata

app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html Ændringer i app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html: 1 tilføjet, 1 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
3 3 class="pagebuilder-slider slick-slider"
4 4 data-content-type="slider"
5 5 data-appearance="default"
6 Fjernet data-autoplay="true"
6 Tilføjet data-autoplay="false"
7 7 data-autoplay-speed="3000"
8 8 data-fade="false"
9 9 data-infinite-loop="true"

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

Ændringer i app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 0 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
1176 1176 .slick-track {
1177 1177 display: flex;
1178 1178 width: 300%;
1179 Fjernet animation: nw-slider-autoplay 9s ease-in-out infinite;
1180 1179 }
1181 1180 .slick-slide {
1182 1181 flex: 0 0 33.3333%;

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

Ændringer i app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 0 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
1147 1147 .slick-track {
1148 1148 display: flex;
1149 1149 width: 300%;
1150 Fjernet animation: nw-slider-autoplay 9s ease-in-out infinite;
1151 1150 }
1152 1151 .slick-slide {
1153 1152 flex: 0 0 33.3333%;

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