Automatisch wechselnde Karussells brauchen eine Pause-Funktion und Tastaturzugang

Bewegte Banner lenken die Aufmerksamkeit von dem ab, was Kundinnen und Kunden gerade lesen wollen, und wer langsam liest, die Ansicht vergrößert oder Aufmerksamkeitsschwierigkeiten hat, wird mit einer Folie nicht fertig, bevor sie wechselt. Ohne Pfeile, die per Tastatur erreichbar sind, und ohne benannte Folien können Menschen, die mit Tastatur oder Screenreader navigieren, die Angebote gar nicht durchblättern.

Kostenlosen Check anfordern

Regel-ID: vs-carousel
Quelle: Validiscan-Prüfung
Auswirkung: Schwerwiegend
Korrekturstufe: AUTO; auf Shopify, Shopware, WooCommerce und Magento
Status: wird ausgeführt

Was geprüft wird

Erkennt Hero-Slider und Produktkarussells, die sich von selbst bewegen, ohne Bedienelement zum Pausieren, Stoppen oder Ausblenden (2.2.2), Bedienelemente des Karussells, die mit der Tastatur nicht erreichbar sind (2.1.1), sowie Folien oder Bedienelemente ohne zugänglichen Namen (4.1.2).

Folien erkennt die Prüfung an Klassennamen wie slide, carousel-item oder swiper-slide oder an aria-roledescription="slide"; Klone zählen nicht mit. Zwei oder mehr Folien auf derselben Ebene in einem sichtbaren Karussell- oder Slider-Container von mindestens 100 × 40 px ergeben ein Karussell.

Nachdem Maus und Fokus von den Karussells wegbewegt wurden, liest die Prüfung jedes Karussell bis zu 3,5 Sekunden lang alle 500 ms aus: Zustandsklassen, aria-hidden, Deckkraft, Transformationen und Scrollpositionen. Jede Änderung gilt als automatischer Wechsel, ebenso ein Autoplay, das in data-autoplay, data-ride oder in den Optionen einer Bibliothek angegeben ist. Ein Karussell, das sich erst später zum ersten Mal bewegt und nichts dergleichen angibt, wird übersehen.

Ein automatisch wechselndes Karussell braucht ein Bedienelement zum Pausieren in der Tab-Reihenfolge. Erkannt wird es an Wörtern für Pause, Stopp oder Wiedergabe in seiner Klasse, seiner id oder seinem Namen. Die Bedienelemente für die vorherige und die nächste Folie sowie die Paginierungspunkte müssen in der Tab-Reihenfolge liegen und einen Namen haben. Bewertet wird jede Folie: Eine Folie mit role="group", role="tabpanel" oder aria-roledescription braucht einen Namen, jede andere Text oder eine Textalternative.

Das Bedienelement zum Pausieren betätigt die Prüfung nie. Ob es den Wechsel tatsächlich anhält, bestätigt ein Mensch.

So wird es behoben

Fügen Sie eine sichtbare Pause-/Wiedergabe-Schaltfläche hinzu, die den automatischen Wechsel stoppt, pausieren Sie das Karussell bei Hover und bei Fokus, machen Sie die Bedienelemente für vorherige und nächste Folie sowie die Paginierung zu echten Schaltflächen mit Beschriftungen wie „Nächste Folie“, und benennen Sie jede Folie, zum Beispiel „Folie 2 von 5“. Die gängigen Slider-Bibliotheken (Slick, Swiper, Flickity, die Slideshow von Shopify Dawn) bieten Optionen für all das.

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.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

Wo ein Rezept es behebt

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 }}&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">

Shopify: Rezept slider-pause-control

Vorher und nachher anzeigen (1)

Vorher und nachher Beispieldaten

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

Änderungen an assets/base.css.liquid: 21 hinzugefügt, 0 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
1866	1866		}
1867	1867
1868	1868		/* ----------------------------------------------------------------- motion */
	1869	Hinzugefügt
	1870	Hinzugefügt	/* validiscan:slider-pause-control */
	1871	Hinzugefügt	[data-autoplay-paused],
	1872	Hinzugefügt	[data-autoplay-paused] * {
	1873	Hinzugefügt	animation-play-state: paused !important;
	1874	Hinzugefügt	}
	1875	Hinzugefügt
	1876	Hinzugefügt	.slider-pause {
	1877	Hinzugefügt	display: inline-flex;
	1878	Hinzugefügt	align-items: center;
	1879	Hinzugefügt	justify-content: center;
	1880	Hinzugefügt	min-width: 2.75rem;
	1881	Hinzugefügt	min-height: 2.75rem;
	1882	Hinzugefügt	padding: 0.5rem 1rem;
	1883	Hinzugefügt	border: 1px solid currentColor;
	1884	Hinzugefügt	background: transparent;
	1885	Hinzugefügt	color: inherit;
	1886	Hinzugefügt	font: inherit;
	1887	Hinzugefügt	cursor: pointer;
	1888	Hinzugefügt	}
	1889	Hinzugefügt	/* /validiscan:slider-pause-control */

assets/global.js Änderungen an assets/global.js: 53 hinzugefügt, 0 entfernt

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

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

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

Änderungen an sections/slideshow.liquid: 3 hinzugefügt, 0 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
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	Hinzugefügt	{%- if autoplay %}
	72	Hinzugefügt	<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	Hinzugefügt	{%- endif %}
71	74		</div>
72	75		</slideshow-component>
73	76

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

Shopware: Rezept slider-pause-control

Vorher und nachher anzeigen (1)

adds a wired pause button to the hero slider; the carousel is no longer unstoppable Beispieldaten

Resources/app/storefront/src/main.js Änderungen an Resources/app/storefront/src/main.js: 52 hinzugefügt, 0 entfernt

Änderungen an Resources/app/storefront/src/main.js: 52 hinzugefügt, 0 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
142	142		if (options.autoplay === true) {
143	143		window.setInterval(
144	144		function () {
	145	Hinzugefügt	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	Hinzugefügt
	458	Hinzugefügt	/* validiscan:slider-pause-control */
	459	Hinzugefügt	/*
	460	Hinzugefügt	* Pause / play button of auto-advancing sliders (WCAG 2.2.2): wired to the
	461	Hinzugefügt	* slider's autoplay; sliders start paused when the visitor prefers reduced motion.
	462	Hinzugefügt	*/
	463	Hinzugefügt	(function sliderPauseControl() {
	464	Hinzugefügt	'use strict';
	465	Hinzugefügt
	466	Hinzugefügt	function tinySlider(slider) {
	467	Hinzugefügt	const manager = window.PluginManager;
	468	Hinzugefügt	if (!manager \|\| typeof manager.getPluginInstanceFromElement !== 'function') return null;
	469	Hinzugefügt	const plugin = manager.getPluginInstanceFromElement(slider, 'BaseSlider');
	470	Hinzugefügt	return plugin && plugin._slider ? plugin._slider : null;
	471	Hinzugefügt	}
	472	Hinzugefügt
	473	Hinzugefügt	function autoplays(slider) {
	474	Hinzugefügt	try {
	475	Hinzugefügt	const options = JSON.parse(slider.getAttribute('data-base-slider-options') \|\| '{}') \|\| {};
	476	Hinzugefügt	return Boolean(options.slider && options.slider.autoplay);
	477	Hinzugefügt	} catch {
	478	Hinzugefügt	return false;
	479	Hinzugefügt	}
	480	Hinzugefügt	}
	481	Hinzugefügt
	482	Hinzugefügt	function init() {
	483	Hinzugefügt	const reduceMotion =
	484	Hinzugefügt	window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
	485	Hinzugefügt	document.querySelectorAll('[data-slider-pause]').forEach(function (button) {
	486	Hinzugefügt	const slider = button.closest('[data-base-slider]');
	487	Hinzugefügt	if (!slider \|\| !autoplays(slider)) return;
	488	Hinzugefügt
	489	Hinzugefügt	function setPaused(paused) {
	490	Hinzugefügt	slider.setAttribute('data-autoplay-paused', paused ? 'true' : 'false');
	491	Hinzugefügt	button.textContent = button.getAttribute(paused ? 'data-label-play' : 'data-label-pause');
	492	Hinzugefügt	const instance = tinySlider(slider);
	493	Hinzugefügt	if (instance) instance[paused ? 'pause' : 'play']();
	494	Hinzugefügt	}
	495	Hinzugefügt
	496	Hinzugefügt	button.hidden = false;
	497	Hinzugefügt	button.addEventListener('click', function () {
	498	Hinzugefügt	setPaused(slider.getAttribute('data-autoplay-paused') !== 'true');
	499	Hinzugefügt	});
	500	Hinzugefügt	if (reduceMotion) setPaused(true);
	501	Hinzugefügt	});
	502	Hinzugefügt	}
	503	Hinzugefügt
	504	Hinzugefügt	if (document.readyState === 'complete') init();
	505	Hinzugefügt	else window.addEventListener('load', init);
	506	Hinzugefügt	})();
	507	Hinzugefügt	/* /validiscan:slider-pause-control */

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

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

Änderungen an Resources/views/storefront/element/cms-element-image-slider.html.twig: 1 hinzugefügt, 0 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
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	Hinzugefügt	<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: 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>

WooCommerce: Rezept slider-pause-control

Vorher und nachher anzeigen (1)

adds a pause button to the CSS-animated hero slider of the fixture theme Beispieldaten

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

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

assets/js/theme.js Änderungen an assets/js/theme.js: 20 hinzugefügt, 0 entfernt

Änderungen an assets/js/theme.js: 20 hinzugefügt, 0 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
255	255		initCheckout();
256	256		initShowPassword();
257	257		})();
	258	Hinzugefügt
	259	Hinzugefügt	/* validiscan:slider-pause-control */
	260	Hinzugefügt	(function () {
	261	Hinzugefügt	const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
	262	Hinzugefügt	for (const slider of document.querySelectorAll('.hero-slider')) {
	263	Hinzugefügt	const button = slider.querySelector('.hero-slider__pause');
	264	Hinzugefügt	if (!button) continue;
	265	Hinzugefügt	const pauseLabel = button.textContent;
	266	Hinzugefügt	const playLabel = button.getAttribute('data-play-label') \|\| pauseLabel;
	267	Hinzugefügt	const set = (paused) => {
	268	Hinzugefügt	slider.classList.toggle('is-paused', paused);
	269	Hinzugefügt	button.textContent = paused ? playLabel : pauseLabel;
	270	Hinzugefügt	};
	271	Hinzugefügt	button.addEventListener('click', () => {
	272	Hinzugefügt	set(!slider.classList.contains('is-paused'));
	273	Hinzugefügt	});
	274	Hinzugefügt	if (reduce) set(true);
	275	Hinzugefügt	}
	276	Hinzugefügt	})();
	277	Hinzugefügt	/* /validiscan:slider-pause-control */

template-parts/hero-slider.php Änderungen an template-parts/hero-slider.php: 1 hinzugefügt, 0 entfernt

Änderungen an template-parts/hero-slider.php: 1 hinzugefügt, 0 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
37	37		};
38	38		?>
39	39		<div class="hero-slider" data-autoplay="true" data-interval="6000">
	40	Hinzugefügt	<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: 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 slider-pause-control

Vorher und nachher anzeigen (1)

turns off the Page Builder autoplay and the track animation, and validates Beispieldaten

app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html Änderungen an app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html: 1 hinzugefügt, 1 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html: 1 hinzugefügt, 1 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
3	3		class="pagebuilder-slider slick-slider"
4	4		data-content-type="slider"
5	5		data-appearance="default"
6		Entfernt	data-autoplay="true"
	6	Hinzugefügt	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 Änderungen an app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 0 hinzugefügt, 1 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 0 hinzugefügt, 1 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
1176	1176		.slick-track {
1177	1177		display: flex;
1178	1178		width: 300%;
1179		Entfernt	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 Änderungen an app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 0 hinzugefügt, 1 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 0 hinzugefügt, 1 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
1147	1147		.slick-track {
1148	1148		display: flex;
1149	1149		width: 300%;
1150		Entfernt	animation: nw-slider-autoplay 9s ease-in-out infinite;
1151	1150		}
1152	1151		.slick-slide {
1153	1152		flex: 0 0 33.3333%;

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