Validiscan
Menú

Idioma

Los carruseles de avance automático necesitan un control de pausa y acceso con el teclado

Los banners en movimiento desvían la atención de lo que los clientes intentan leer, y las personas que leen despacio, usan el zoom o tienen dificultades de atención no pueden terminar una diapositiva antes de que cambie. Sin flechas accesibles con el teclado ni diapositivas con nombre, quienes usan el teclado o un lector de pantalla no pueden recorrer las ofertas en absoluto.

Solicitar revisión gratuita
ID de la regla
vs-carousel
Origen
Comprobación de Validiscan
Impacto
Grave
Nivel de corrección
AUTO
en Shopify, Shopware, WooCommerce y Magento
Estado
se ejecuta

Qué hace la comprobación

Detecta banners rotativos de portada y carruseles de productos que se mueven solos sin un control para pausarlos, detenerlos u ocultarlos (2.2.2), controles de carrusel a los que no se puede llegar con el teclado (2.1.1) y diapositivas o controles sin nombre accesible (4.1.2).

Las diapositivas se detectan por nombres de clase como slide, carousel-item o swiper-slide, o por aria-roledescription="slide", sin contar los clones. Dos o más diapositivas hermanas dentro de un contenedor visible de carrusel o slider de al menos 100 × 40 px forman un carrusel.

Con el ratón y el foco apartados, la comprobación toma muestras de cada carrusel a intervalos de 500 ms durante un máximo de 3,5 segundos: clases de estado, aria-hidden, opacidad, transformaciones y posiciones de desplazamiento. Cualquier cambio cuenta como avance automático, igual que la reproducción automática declarada en data-autoplay, data-ride o en las opciones de la biblioteca. Un carrusel que empieza a moverse más tarde y no declara nada pasa desapercibido.

Un carrusel de avance automático necesita un control de pausa en el orden de tabulación, que se reconoce por palabras de pausa, parada o reproducción en su clase, su id o su nombre. Los controles de anterior y siguiente y los puntos de paginación deben estar en el orden de tabulación y tener nombre. Se evalúa cada diapositiva: una con role="group", role="tabpanel" o aria-roledescription necesita un nombre; cualquier otra necesita texto o una alternativa textual.

La comprobación nunca pulsa el control de pausa; que detenga la rotación lo confirma una persona.

Cómo corregirlo

Añada un botón visible de pausa/reproducción que detenga la rotación automática, pause el carrusel al pasar el ratón y al recibir el foco, convierta los controles anterior, siguiente y de paginación en botones reales con etiquetas como «Diapositiva siguiente», y dé nombre a cada diapositiva, por ejemplo «Diapositiva 2 de 5». Las bibliotecas de carruseles más habituales (Slick, Swiper, Flickity, la presentación de diapositivas del tema Dawn de Shopify) tienen opciones para todo esto.

Criterios de conformidad de las WCAG

Apartados de la norma EN 301 549

El apartado de la norma EN 301 549 que corresponde a cada criterio, por versión de la norma
Criterio de las WCAG Versión 3.2.1 Versión 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

Dónde lo corrige una receta

Shopify: receta button-semantics

Mostrar el antes y el después (1)
Antes y después Datos de ejemplo

assets/base.css.liquid Cambios en assets/base.css.liquid (líneas añadidas: 14; eliminadas: 0)

Cambios en assets/base.css.liquid (líneas añadidas: 14; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
1866 1866 }
1867 1867
1868 1868 /* ----------------------------------------------------------------- motion */
1869 Añadida
1870 Añadida /* validiscan:button-semantics */
1871 Añadida :where(button.slider-counter__link) {
1872 Añadida appearance: none;
1873 Añadida margin: 0;
1874 Añadida padding: 0;
1875 Añadida border: 0;
1876 Añadida background: none;
1877 Añadida color: inherit;
1878 Añadida font: inherit;
1879 Añadida text-align: inherit;
1880 Añadida cursor: pointer;
1881 Añadida }
1882 Añadida /* /validiscan:button-semantics */

sections/slideshow.liquid Cambios en sections/slideshow.liquid (líneas añadidas: 1; eliminadas: 1)

Cambios en sections/slideshow.liquid (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
62 62 </button>
63 63 <div class="slider-counter">
64 64 {%- for block in section.blocks %}
65 Eliminada <span class="slider-counter__link" data-slide-to="{{ forloop.index0 }}"><span class="dot"></span></span>
65 Añadida <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: receta icon-accessible-name

Mostrar el antes y el después (2)
buttons Datos de ejemplo

locales/en.default.json Cambios en locales/en.default.json (líneas añadidas: 3; eliminadas: 1)

Cambios en locales/en.default.json (líneas añadidas: 3; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
34 34 "total_reviews": "{{ count }} reviews",
35 35 "link_messages": {
36 36 "new_window": "Opens in a new window."
37 Eliminada }
37 Añadida },
38 Añadida "accept_cookies": "Accept cookies",
39 Añadida "reject_cookies": "Reject cookies"
38 40 },
39 41 "sections": {
40 42 "header": {

sections/header.liquid Cambios en sections/header.liquid (líneas añadidas: 1; eliminadas: 0)

Cambios en sections/header.liquid (líneas añadidas: 1; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
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 Añadida <span class="visually-hidden">{{ 'general.search.search' | t }}</span>
43 44 </button>
44 45 </form>
45 46 </div>

sections/main-product.liquid Cambios en sections/main-product.liquid (líneas añadidas: 1; eliminadas: 1)

Cambios en sections/main-product.liquid (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
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 Eliminada <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 Añadida <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 Cambios en sections/slideshow.liquid (líneas añadidas: 2; eliminadas: 0)

Cambios en sections/slideshow.liquid (líneas añadidas: 2; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
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 Añadida <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 Añadida <span class="visually-hidden">{{ 'accessibility.next_slide' | t }}</span>
70 72 </button>
71 73 </div>
72 74 </slideshow-component>

snippets/cookie-banner.liquid Cambios en snippets/cookie-banner.liquid (líneas añadidas: 2; eliminadas: 0)

Cambios en snippets/cookie-banner.liquid (líneas añadidas: 2; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
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 Añadida <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 Añadida <span class="visually-hidden">{{ 'accessibility.reject_cookies' | t }}</span>
29 31 </button>
30 32 </div>
31 33 </div>

snippets/quantity-input.liquid Cambios en snippets/quantity-input.liquid (líneas añadidas: 2; eliminadas: 0)

Cambios en snippets/quantity-input.liquid (líneas añadidas: 2; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
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 Añadida <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 Añadida <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product_title }}</span>
16 18 </button></div>
links Datos de ejemplo

sections/footer.liquid Cambios en sections/footer.liquid (líneas añadidas: 1; eliminadas: 0)

Cambios en sections/footer.liquid (líneas añadidas: 1; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
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 Añadida <span class="visually-hidden">{{ 'general.social.links.' | append: social.icon | t }}</span>
40 41 </a>
41 42 {%- endfor %}
42 43 </ul>

sections/header.liquid Cambios en sections/header.liquid (líneas añadidas: 3; eliminadas: 1)

Cambios en sections/header.liquid (líneas añadidas: 3; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
22 22 </details>
23 23
24 24 {% if logo_is_heading %}<h1 class="header__heading">{% else %}<div class="header__heading">{% endif %}
25 Eliminada <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 Añadida <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 Añadida <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 Añadida <span class="visually-hidden">{{ 'sections.header.cart' | t }}</span>
60 62 </a>
61 63 </div>
62 64 </header>

sections/main-cart.liquid Cambios en sections/main-cart.liquid (líneas añadidas: 1; eliminadas: 0)

Cambios en sections/main-cart.liquid (líneas añadidas: 1; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
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 Añadida <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: receta slider-pause-control

Mostrar el antes y el después (1)
Antes y después Datos de ejemplo

assets/base.css.liquid Cambios en assets/base.css.liquid (líneas añadidas: 21; eliminadas: 0)

Cambios en assets/base.css.liquid (líneas añadidas: 21; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
1866 1866 }
1867 1867
1868 1868 /* ----------------------------------------------------------------- motion */
1869 Añadida
1870 Añadida /* validiscan:slider-pause-control */
1871 Añadida [data-autoplay-paused],
1872 Añadida [data-autoplay-paused] * {
1873 Añadida animation-play-state: paused !important;
1874 Añadida }
1875 Añadida
1876 Añadida .slider-pause {
1877 Añadida display: inline-flex;
1878 Añadida align-items: center;
1879 Añadida justify-content: center;
1880 Añadida min-width: 2.75rem;
1881 Añadida min-height: 2.75rem;
1882 Añadida padding: 0.5rem 1rem;
1883 Añadida border: 1px solid currentColor;
1884 Añadida background: transparent;
1885 Añadida color: inherit;
1886 Añadida font: inherit;
1887 Añadida cursor: pointer;
1888 Añadida }
1889 Añadida /* /validiscan:slider-pause-control */

assets/global.js Cambios en assets/global.js (líneas añadidas: 53; eliminadas: 0)

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

locales/en.default.json Cambios en locales/en.default.json (líneas añadidas: 3; eliminadas: 1)

Cambios en locales/en.default.json (líneas añadidas: 3; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
34 34 "total_reviews": "{{ count }} reviews",
35 35 "link_messages": {
36 36 "new_window": "Opens in a new window."
37 Eliminada }
37 Añadida },
38 Añadida "pause_slideshow": "Pause slideshow",
39 Añadida "play_slideshow": "Play slideshow"
38 40 },
39 41 "sections": {
40 42 "header": {

sections/slideshow.liquid Cambios en sections/slideshow.liquid (líneas añadidas: 3; eliminadas: 0)

Cambios en sections/slideshow.liquid (líneas añadidas: 3; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
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 Añadida {%- if autoplay %}
72 Añadida <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 Añadida {%- endif %}
71 74 </div>
72 75 </slideshow-component>
73 76

Shopware: receta button-semantics

Mostrar el antes y el después (1)
turns the mouse-only slider dots into named buttons in their list items; vs-carousel stops reporting them Datos de ejemplo

Resources/app/storefront/src/scss/base.scss Cambios en Resources/app/storefront/src/scss/base.scss (líneas añadidas: 17; eliminadas: 0)

Cambios en Resources/app/storefront/src/scss/base.scss (líneas añadidas: 17; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
1708 1708 margin: 8px 0 0;
1709 1709 font-size: 0.875rem;
1710 1710 }
1711 Añadida
1712 Añadida /* validiscan:button-semantics */
1713 Añadida /* Former <div>/<span>/<li> controls, now <button>: drop the browser button styles, keep the theme's (no specificity). */
1714 Añadida :where(button.base-slider-dot) {
1715 Añadida display: block;
1716 Añadida margin: 0;
1717 Añadida padding: 0;
1718 Añadida border: 0;
1719 Añadida background: none;
1720 Añadida color: inherit;
1721 Añadida font: inherit;
1722 Añadida line-height: inherit;
1723 Añadida text-align: inherit;
1724 Añadida cursor: pointer;
1725 Añadida appearance: none;
1726 Añadida }
1727 Añadida /* /validiscan:button-semantics */

Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Cambios en Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (líneas añadidas: 5; eliminadas: 0)

Cambios en Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (líneas añadidas: 5; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
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 Añadida },
197 Añadida "a11y": {
198 Añadida "control": {
199 Añadida "showSlide": "Folie %index% anzeigen"
200 Añadida }
196 201 }
197 202 }

Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Cambios en Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (líneas añadidas: 5; eliminadas: 0)

Cambios en Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (líneas añadidas: 5; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
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 Añadida },
197 Añadida "a11y": {
198 Añadida "control": {
199 Añadida "showSlide": "Show slide %index%"
200 Añadida }
196 201 }
197 202 }

Resources/views/storefront/element/cms-element-image-slider.html.twig Cambios en Resources/views/storefront/element/cms-element-image-slider.html.twig (líneas añadidas: 1; eliminadas: 1)

Cambios en Resources/views/storefront/element/cms-element-image-slider.html.twig (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
51 51 </button>
52 52 <ol class="base-slider-dots">
53 53 {% for slide in slides %}
54 Eliminada <li class="base-slider-dot{% if loop.first %} is-active{% endif %}" data-slide-to="{{ loop.index0 }}"></li>
54 Añadida <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: receta icon-accessible-name

Mostrar el antes y el después (2)
names every icon-only button of the home, product and cart pages; button-name no longer fires Datos de ejemplo

Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Cambios en Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (líneas añadidas: 12; eliminadas: 0)

Cambios en Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (líneas añadidas: 12; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
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 Añadida },
197 Añadida "a11y": {
198 Añadida "control": {
199 Añadida "search": "Suchen",
200 Añadida "previousSlide": "Vorherige Folie",
201 Añadida "nextSlide": "Nächste Folie",
202 Añadida "cookieSettings": "Cookie-Einstellungen",
203 Añadida "acceptCookies": "Alle Cookies akzeptieren",
204 Añadida "decreaseQuantity": "Menge verringern",
205 Añadida "increaseQuantity": "Menge erhöhen",
206 Añadida "removeFromCart": "Aus dem Warenkorb entfernen"
207 Añadida }
196 208 }
197 209 }

Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Cambios en Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (líneas añadidas: 12; eliminadas: 0)

Cambios en Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (líneas añadidas: 12; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
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 Añadida },
197 Añadida "a11y": {
198 Añadida "control": {
199 Añadida "search": "Search",
200 Añadida "previousSlide": "Previous slide",
201 Añadida "nextSlide": "Next slide",
202 Añadida "cookieSettings": "Cookie settings",
203 Añadida "acceptCookies": "Accept all cookies",
204 Añadida "decreaseQuantity": "Decrease quantity",
205 Añadida "increaseQuantity": "Increase quantity",
206 Añadida "removeFromCart": "Remove from cart"
207 Añadida }
196 208 }
197 209 }

Resources/views/storefront/element/cms-element-image-gallery.html.twig Cambios en Resources/views/storefront/element/cms-element-image-gallery.html.twig (líneas añadidas: 2; eliminadas: 2)

Cambios en Resources/views/storefront/element/cms-element-image-gallery.html.twig (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
31 31
32 32 {% if media|length > 1 %}
33 33 <div class="gallery-slider-controls">
34 Eliminada <button type="button" class="base-slider-controls-prev gallery-slider-controls-prev" data-gallery-prev>
34 Añadida <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 Eliminada <button type="button" class="base-slider-controls-next gallery-slider-controls-next" data-gallery-next>
37 Añadida <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 Cambios en Resources/views/storefront/element/cms-element-image-slider.html.twig (líneas añadidas: 2; eliminadas: 2)

Cambios en Resources/views/storefront/element/cms-element-image-slider.html.twig (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
46 46
47 47 {% block element_image_slider_controls %}
48 48 <div class="image-slider-controls-container">
49 Eliminada <button type="button" class="base-slider-controls-prev image-slider-controls-btn" data-slide-prev>
49 Añadida <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 Eliminada <button type="button" class="base-slider-controls-next image-slider-controls-btn" data-slide-next>
57 Añadida <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 Cambios en Resources/views/storefront/layout/cookie/cookie-permission.html.twig (líneas añadidas: 2; eliminadas: 2)

Cambios en Resources/views/storefront/layout/cookie/cookie-permission.html.twig (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
22 22 </p>
23 23 </div>
24 24 <div class="col-auto cookie-permission-actions">
25 Eliminada <button type="button" class="btn cookie-permission-icon-btn js-cookie-configuration-toggle">{% sw_icon 'settings' %}</button>
26 Eliminada <button type="button" class="btn btn-primary cookie-permission-icon-btn js-cookie-accept-all-button">{% sw_icon 'checkmark' %}</button>
25 Añadida <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 Añadida <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 Cambios en Resources/views/storefront/layout/header/search.html.twig (líneas añadidas: 1; eliminadas: 1)

Cambios en Resources/views/storefront/layout/header/search.html.twig (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
13 13 autocomplete="off"
14 14 autocapitalize="off"
15 15 placeholder="{{ 'header.searchPlaceholder'|trans }}" value="{{ page.searchTerm }}">
16 Eliminada <button type="submit" class="btn header-search-btn">
16 Añadida <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 Cambios en Resources/views/storefront/page/checkout/cart/index.html.twig (líneas añadidas: 3; eliminadas: 3)

Cambios en Resources/views/storefront/page/checkout/cart/index.html.twig (líneas añadidas: 3; eliminadas: 3)
Línea anterior Línea nueva Cambio Código
39 39 </div>
40 40 <div class="line-item-quantity">
41 41 <div class="input-group quantity-selector-group" data-quantity-selector="true">
42 Eliminada <button type="button" class="btn btn-outline-light btn-minus js-btn-minus">
42 Añadida <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 Eliminada <button type="button" class="btn btn-outline-light btn-plus js-btn-plus">
53 Añadida <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 Eliminada <button type="button" class="btn btn-light btn-sm line-item-remove-button">
67 Añadida <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 Cambios en Resources/views/storefront/page/product-detail/buy-widget.html.twig (líneas añadidas: 2; eliminadas: 2)

Cambios en Resources/views/storefront/page/product-detail/buy-widget.html.twig (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
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 Eliminada <button type="button" class="btn btn-outline-light btn-minus js-btn-minus">
67 Añadida <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 Eliminada <button type="button" class="btn btn-outline-light btn-plus js-btn-plus">
78 Añadida <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 Datos de ejemplo

Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Cambios en Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (líneas añadidas: 6; eliminadas: 0)

Cambios en Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (líneas añadidas: 6; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
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 Añadida },
197 Añadida "a11y": {
198 Añadida "control": {
199 Añadida "home": "Zur Startseite",
200 Añadida "account": "Ihr Konto"
201 Añadida }
196 202 }
197 203 }

Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Cambios en Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (líneas añadidas: 6; eliminadas: 0)

Cambios en Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (líneas añadidas: 6; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
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 Añadida },
197 Añadida "a11y": {
198 Añadida "control": {
199 Añadida "home": "Go to the homepage",
200 Añadida "account": "Your account"
201 Añadida }
196 202 }
197 203 }

Resources/views/storefront/layout/header/actions.html.twig Cambios en Resources/views/storefront/layout/header/actions.html.twig (líneas añadidas: 2; eliminadas: 1)

Cambios en Resources/views/storefront/layout/header/actions.html.twig (líneas añadidas: 2; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
3 3 {% block layout_header_actions_account %}
4 4 <div class="header-account">
5 5 <a href="{{ url('/account/login') }}"
6 Eliminada class="btn account-menu-btn header-actions-btn">
6 Añadida class="btn account-menu-btn header-actions-btn"
7 Añadida 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 Cambios en Resources/views/storefront/layout/header/logo.html.twig (líneas añadidas: 1; eliminadas: 1)

Cambios en Resources/views/storefront/layout/header/logo.html.twig (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
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 Eliminada <a class="header-logo-main-link" href="{{ url('/') }}">
5 Añadida <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: receta slider-pause-control

Mostrar el antes y el después (1)
adds a wired pause button to the hero slider; the carousel is no longer unstoppable Datos de ejemplo

Resources/app/storefront/src/main.js Cambios en Resources/app/storefront/src/main.js (líneas añadidas: 52; eliminadas: 0)

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

Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Cambios en Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (líneas añadidas: 6; eliminadas: 0)

Cambios en Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (líneas añadidas: 6; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
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 Añadida },
197 Añadida "a11y": {
198 Añadida "slider": {
199 Añadida "pause": "Diashow anhalten",
200 Añadida "play": "Diashow abspielen"
201 Añadida }
196 202 }
197 203 }

Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Cambios en Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (líneas añadidas: 6; eliminadas: 0)

Cambios en Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (líneas añadidas: 6; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
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 Añadida },
197 Añadida "a11y": {
198 Añadida "slider": {
199 Añadida "pause": "Pause slideshow",
200 Añadida "play": "Play slideshow"
201 Añadida }
196 202 }
197 203 }

Resources/views/storefront/element/cms-element-image-slider.html.twig Cambios en Resources/views/storefront/element/cms-element-image-slider.html.twig (líneas añadidas: 1; eliminadas: 0)

Cambios en Resources/views/storefront/element/cms-element-image-slider.html.twig (líneas añadidas: 1; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
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 Añadida <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: receta button-semantics

Mostrar el antes y el después (1)
turns the click-only cookie choices into buttons and names the close button Datos de ejemplo

assets/css/main.css Cambios en assets/css/main.css (líneas añadidas: 17; eliminadas: 0)

Cambios en assets/css/main.css (líneas añadidas: 17; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
766 766 gap: 0.75rem;
767 767 }
768 768
769 Añadida /* validiscan:button-semantics */
770 Añadida /* Controls that became <button>s: keep the look of the elements they replace. The theme
771 Añadida rules for these classes follow and still win. */
769 772 .kb-cookie-bar__settings,
770 773 .kb-cookie-bar__accept {
774 Añadida margin: 0;
775 Añadida padding: 0;
776 Añadida border: 0;
777 Añadida background: none;
778 Añadida color: inherit;
779 Añadida font: inherit;
780 Añadida line-height: inherit;
781 Añadida text-align: inherit;
782 Añadida cursor: pointer;
783 Añadida }
784 Añadida /* /validiscan:button-semantics */
785 Añadida
786 Añadida .kb-cookie-bar__settings,
787 Añadida .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 Cambios en template-parts/cookie-bar.php (líneas añadidas: 3; eliminadas: 3)

Cambios en template-parts/cookie-bar.php (líneas añadidas: 3; eliminadas: 3)
Línea anterior Línea nueva Cambio Código
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 Eliminada <span class="kb-cookie-bar__settings" data-kb-consent="settings"><?php esc_html_e( 'Cookie settings', 'kestrel-birch' ); ?></span>
25 Eliminada <span class="kb-cookie-bar__accept" data-kb-consent="accept"><?php esc_html_e( 'Accept', 'kestrel-birch' ); ?></span>
26 Eliminada <button type="button" class="kb-cookie-bar__close" data-kb-consent="close"><?php kb_icon( 'close' ); ?></button>
24 Añadida <button class="kb-cookie-bar__settings" data-kb-consent="settings" type="button"><?php esc_html_e( 'Cookie settings', 'kestrel-birch' ); ?></button>
25 Añadida <button class="kb-cookie-bar__accept" data-kb-consent="accept" type="button"><?php esc_html_e( 'Accept', 'kestrel-birch' ); ?></button>
26 Añadida <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: receta slider-pause-control

Mostrar el antes y el después (1)
adds a pause button to the CSS-animated hero slider of the fixture theme Datos de ejemplo

assets/css/main.css Cambios en assets/css/main.css (líneas añadidas: 28; eliminadas: 0)

Cambios en assets/css/main.css (líneas añadidas: 28; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
508 508 background: var(--kb-navy);
509 509 }
510 510
511 Añadida /* validiscan:slider-pause-control */
512 Añadida .hero-slider.is-paused .hero-slider__track {
513 Añadida animation-play-state: paused;
514 Añadida }
515 Añadida
516 Añadida @media (prefers-reduced-motion: reduce) {
517 Añadida .hero-slider__track {
518 Añadida animation-play-state: paused;
519 Añadida }
520 Añadida }
521 Añadida
522 Añadida .hero-slider__pause {
523 Añadida position: absolute;
524 Añadida top: 1rem;
525 Añadida right: 1rem;
526 Añadida z-index: 2;
527 Añadida min-height: 24px;
528 Añadida padding: 0.4em 0.9em;
529 Añadida border: 2px solid currentColor;
530 Añadida border-radius: 4px;
531 Añadida background: #ffffff;
532 Añadida color: var(--kb-ink);
533 Añadida font: inherit;
534 Añadida font-weight: 600;
535 Añadida cursor: pointer;
536 Añadida }
537 Añadida /* /validiscan:slider-pause-control */
538 Añadida
511 539 .hero-slide img {
512 540 width: 100%;
513 541 aspect-ratio: 5 / 2;

assets/js/theme.js Cambios en assets/js/theme.js (líneas añadidas: 20; eliminadas: 0)

Cambios en assets/js/theme.js (líneas añadidas: 20; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
255 255 initCheckout();
256 256 initShowPassword();
257 257 })();
258 Añadida
259 Añadida /* validiscan:slider-pause-control */
260 Añadida (function () {
261 Añadida const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
262 Añadida for (const slider of document.querySelectorAll('.hero-slider')) {
263 Añadida const button = slider.querySelector('.hero-slider__pause');
264 Añadida if (!button) continue;
265 Añadida const pauseLabel = button.textContent;
266 Añadida const playLabel = button.getAttribute('data-play-label') || pauseLabel;
267 Añadida const set = (paused) => {
268 Añadida slider.classList.toggle('is-paused', paused);
269 Añadida button.textContent = paused ? playLabel : pauseLabel;
270 Añadida };
271 Añadida button.addEventListener('click', () => {
272 Añadida set(!slider.classList.contains('is-paused'));
273 Añadida });
274 Añadida if (reduce) set(true);
275 Añadida }
276 Añadida })();
277 Añadida /* /validiscan:slider-pause-control */

template-parts/hero-slider.php Cambios en template-parts/hero-slider.php (líneas añadidas: 1; eliminadas: 0)

Cambios en template-parts/hero-slider.php (líneas añadidas: 1; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
37 37 };
38 38 ?>
39 39 <div class="hero-slider" data-autoplay="true" data-interval="6000">
40 Añadida <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: receta button-semantics

Mostrar el antes y el después (1)
turns span controls of the cookie bar into buttons and validates Datos de ejemplo

app/design/frontend/Validiscan/fixture/Magento_Cookie/templates/html/notices.phtml Cambios en app/design/frontend/Validiscan/fixture/Magento_Cookie/templates/html/notices.phtml (líneas añadidas: 2; eliminadas: 2)

Cambios en app/design/frontend/Validiscan/fixture/Magento_Cookie/templates/html/notices.phtml (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
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 Eliminada <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 Eliminada <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 Añadida <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 Añadida <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 Cambios en app/design/frontend/Validiscan/fixture/web/css/source/_theme.less (líneas añadidas: 30; eliminadas: 0)

Cambios en app/design/frontend/Validiscan/fixture/web/css/source/_theme.less (líneas añadidas: 30; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
1264 1264 height: 18px;
1265 1265 stroke-width: 3;
1266 1266 }
1267 Añadida
1268 Añadida /* validiscan:button-semantics */
1269 Añadida button.amgdprcookie-button.-allow,
1270 Añadida button.amgdprcookie-button.-decline {
1271 Añadida -webkit-appearance: none;
1272 Añadida appearance: none;
1273 Añadida margin: 0;
1274 Añadida padding: 0;
1275 Añadida box-shadow: none;
1276 Añadida font: inherit;
1277 Añadida letter-spacing: inherit;
1278 Añadida text-align: inherit;
1279 Añadida text-transform: inherit;
1280 Añadida text-shadow: none;
1281 Añadida }
1282 Añadida button.amgdprcookie-button.-allow:hover,
1283 Añadida button.amgdprcookie-button.-allow:focus,
1284 Añadida button.amgdprcookie-button.-allow:active {
1285 Añadida background: @nw-primary;
1286 Añadida border: 0;
1287 Añadida color: #fff;
1288 Añadida }
1289 Añadida button.amgdprcookie-button.-decline:hover,
1290 Añadida button.amgdprcookie-button.-decline:focus,
1291 Añadida button.amgdprcookie-button.-decline:active {
1292 Añadida background: #fff;
1293 Añadida border: 1px solid @nw-border;
1294 Añadida color: @nw-text;
1295 Añadida }
1296 Añadida /* /validiscan:button-semantics */

app/design/frontend/Validiscan/fixture/web/css/styles-m.css Cambios en app/design/frontend/Validiscan/fixture/web/css/styles-m.css (líneas añadidas: 30; eliminadas: 0)

Cambios en app/design/frontend/Validiscan/fixture/web/css/styles-m.css (líneas añadidas: 30; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
1232 1232 height: 18px;
1233 1233 stroke-width: 3;
1234 1234 }
1235 Añadida
1236 Añadida /* validiscan:button-semantics */
1237 Añadida button.amgdprcookie-button.-allow,
1238 Añadida button.amgdprcookie-button.-decline {
1239 Añadida -webkit-appearance: none;
1240 Añadida appearance: none;
1241 Añadida margin: 0;
1242 Añadida padding: 0;
1243 Añadida box-shadow: none;
1244 Añadida font: inherit;
1245 Añadida letter-spacing: inherit;
1246 Añadida text-align: inherit;
1247 Añadida text-transform: inherit;
1248 Añadida text-shadow: none;
1249 Añadida }
1250 Añadida button.amgdprcookie-button.-allow:hover,
1251 Añadida button.amgdprcookie-button.-allow:focus,
1252 Añadida button.amgdprcookie-button.-allow:active {
1253 Añadida background: #1979c3;
1254 Añadida border: 0;
1255 Añadida color: #fff;
1256 Añadida }
1257 Añadida button.amgdprcookie-button.-decline:hover,
1258 Añadida button.amgdprcookie-button.-decline:focus,
1259 Añadida button.amgdprcookie-button.-decline:active {
1260 Añadida background: #fff;
1261 Añadida border: 1px solid #c2c2c2;
1262 Añadida color: #333;
1263 Añadida }
1264 Añadida /* /validiscan:button-semantics */

Magento: receta slider-pause-control

Mostrar el antes y el después (1)
turns off the Page Builder autoplay and the track animation, and validates Datos de ejemplo

app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html Cambios en app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html (líneas añadidas: 1; eliminadas: 1)

Cambios en app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
3 3 class="pagebuilder-slider slick-slider"
4 4 data-content-type="slider"
5 5 data-appearance="default"
6 Eliminada data-autoplay="true"
6 Añadida 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 Cambios en app/design/frontend/Validiscan/fixture/web/css/source/_theme.less (líneas añadidas: 0; eliminadas: 1)

Cambios en app/design/frontend/Validiscan/fixture/web/css/source/_theme.less (líneas añadidas: 0; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
1176 1176 .slick-track {
1177 1177 display: flex;
1178 1178 width: 300%;
1179 Eliminada 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 Cambios en app/design/frontend/Validiscan/fixture/web/css/styles-m.css (líneas añadidas: 0; eliminadas: 1)

Cambios en app/design/frontend/Validiscan/fixture/web/css/styles-m.css (líneas añadidas: 0; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
1147 1147 .slick-track {
1148 1148 display: flex;
1149 1149 width: 300%;
1150 Eliminada animation: nw-slider-autoplay 9s ease-in-out infinite;
1151 1150 }
1152 1151 .slick-slide {
1153 1152 flex: 0 0 33.3333%;

Empiece con una revisión gratuita de su tienda.

Envíe la dirección de su tienda. Validiscan la escanea y le responde con cada fallo que el escaneo pueda demostrar, con la página y el código.

Solicitar revisión gratuita

O escriba a info@validiscan.com.

Qué cubre la revisión gratuita y qué deja fuera
Usted envía
la dirección de su tienda
Páginas escaneadas
hasta 15
Usted recibe
todos los fallos que el escaneo puede demostrar, con la página y el código
En su tienda
solo páginas públicas; sin inicio de sesión, nada comprado, ningún formulario enviado
Lo que no es
una auditoría completa

Escribir a Validiscan

Para una revisión gratuita, indique la dirección web de su tienda y su plataforma.

Validiscan utiliza lo que usted envía para responderle. Política de privacidad