Les carrousels à défilement automatique doivent avoir un bouton pause et être utilisables au clavier
Les bannières qui bougent détournent l’attention de ce que les clients essaient de lire, et les personnes qui lisent lentement, zooment ou ont des troubles de l’attention ne peuvent pas finir une diapositive avant qu’elle change. Sans flèches accessibles au clavier ni diapositives nommées, les personnes qui naviguent au clavier ou avec un lecteur d’écran ne peuvent pas du tout parcourir les offres.
- Identifiant de la règle
- vs-carousel
- Source
- Contrôle Validiscan
- Impact
- Grave
- Niveau de correction
- AUTO
- sur Shopify, Shopware, WooCommerce et Magento
- Statut
- exécutée
Ce que fait le contrôle
Détecte les sliders d’accueil et les carrousels de produits qui défilent d’eux-mêmes sans bouton pour les mettre en pause, les arrêter ou les masquer (2.2.2), les commandes de carrousel inaccessibles au clavier (2.1.1) et les diapositives ou commandes sans nom accessible (4.1.2).
Les diapositives sont identifiées par des noms de classe comme slide, carousel-item ou swiper-slide, ou par aria-roledescription="slide", clones exclus. Deux diapositives sœurs ou plus, dans un conteneur de carrousel ou de diaporama (slider) visible d’au moins 100 × 40 px, forment un carrousel.
Une fois la souris et le focus éloignés, le contrôle relève l’état de chaque carrousel toutes les 500 ms pendant 3,5 secondes au plus : classes d’état, aria-hidden, opacité, transformations et positions de défilement. Tout changement compte comme un défilement automatique, de même qu’une lecture automatique déclarée dans data-autoplay, data-ride ou les options d’une bibliothèque. Un carrousel qui ne commence à bouger que plus tard et ne déclare rien passe inaperçu.
Un carrousel à défilement automatique a besoin d’une commande de pause dans l’ordre de tabulation, reconnue à un mot évoquant la pause, l’arrêt ou la lecture dans sa classe, son id ou son nom. Les commandes « précédent », « suivant » et les points de pagination doivent figurer dans l’ordre de tabulation et avoir un nom. Chaque diapositive est évaluée : une diapositive avec role="group", role="tabpanel" ou aria-roledescription a besoin d’un nom, toute autre a besoin de texte ou d’une alternative textuelle.
Le contrôle n’actionne jamais la commande de pause ; une personne confirme qu’elle arrête le défilement.
Comment corriger
Ajoutez un bouton pause/lecture visible qui arrête la rotation automatique, mettez le défilement en pause au survol et au focus, utilisez de vrais boutons pour les flèches précédent et suivant et pour la pagination, avec des libellés comme « Diapositive suivante », et nommez chaque diapositive, par exemple « Diapositive 2 sur 5 ». Les bibliothèques de sliders courantes (Slick, Swiper, Flickity, le diaporama du thème Dawn de Shopify) proposent des options pour tout cela.
Critères de succès WCAG
- 2.2.2 Pause, Stop, Hide, niveau A
- 2.1.1 Keyboard, niveau A
- 4.1.2 Name, Role, Value, niveau A
Clauses de la norme EN 301 549
| Critère WCAG | 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 |
Où une recette corrige le problème
Shopify : recette button-semantics
Afficher l’avant et l’après (1)
assets/base.css.liquid Modifications apportées à assets/base.css.liquid (lignes ajoutées : 14, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1866 | 1866 | } | |
| 1867 | 1867 | ||
| 1868 | 1868 | /* ----------------------------------------------------------------- motion */ | |
| 1869 | Ajoutée | ||
| 1870 | Ajoutée | /* validiscan:button-semantics */ | |
| 1871 | Ajoutée | :where(button.slider-counter__link) { | |
| 1872 | Ajoutée | appearance: none; | |
| 1873 | Ajoutée | margin: 0; | |
| 1874 | Ajoutée | padding: 0; | |
| 1875 | Ajoutée | border: 0; | |
| 1876 | Ajoutée | background: none; | |
| 1877 | Ajoutée | color: inherit; | |
| 1878 | Ajoutée | font: inherit; | |
| 1879 | Ajoutée | text-align: inherit; | |
| 1880 | Ajoutée | cursor: pointer; | |
| 1881 | Ajoutée | } | |
| 1882 | Ajoutée | /* /validiscan:button-semantics */ |
sections/slideshow.liquid Modifications apportées à sections/slideshow.liquid (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 62 | 62 | </button> | |
| 63 | 63 | <div class="slider-counter"> | |
| 64 | 64 | {%- for block in section.blocks %} | |
| 65 | Supprimée | <span class="slider-counter__link" data-slide-to="{{ forloop.index0 }}"><span class="dot"></span></span> | |
| 65 | Ajoutée | <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 : recette icon-accessible-name
Afficher l’avant et l’après (2)
locales/en.default.json Modifications apportées à locales/en.default.json (lignes ajoutées : 3, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 34 | 34 | "total_reviews": "{{ count }} reviews", | |
| 35 | 35 | "link_messages": { | |
| 36 | 36 | "new_window": "Opens in a new window." | |
| 37 | Supprimée | } | |
| 37 | Ajoutée | }, | |
| 38 | Ajoutée | "accept_cookies": "Accept cookies", | |
| 39 | Ajoutée | "reject_cookies": "Reject cookies" | |
| 38 | 40 | }, | |
| 39 | 41 | "sections": { | |
| 40 | 42 | "header": { |
sections/header.liquid Modifications apportées à sections/header.liquid (lignes ajoutées : 1, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | 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 | Ajoutée | <span class="visually-hidden">{{ 'general.search.search' | t }}</span> | |
| 43 | 44 | </button> | |
| 44 | 45 | </form> | |
| 45 | 46 | </div> |
sections/main-product.liquid Modifications apportées à sections/main-product.liquid (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | 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 | Supprimée | <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 | Ajoutée | <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 Modifications apportées à sections/slideshow.liquid (lignes ajoutées : 2, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | 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 | Ajoutée | <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 | Ajoutée | <span class="visually-hidden">{{ 'accessibility.next_slide' | t }}</span> | |
| 70 | 72 | </button> | |
| 71 | 73 | </div> | |
| 72 | 74 | </slideshow-component> |
snippets/cookie-banner.liquid Modifications apportées à snippets/cookie-banner.liquid (lignes ajoutées : 2, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | 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 | Ajoutée | <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 | Ajoutée | <span class="visually-hidden">{{ 'accessibility.reject_cookies' | t }}</span> | |
| 29 | 31 | </button> | |
| 30 | 32 | </div> | |
| 31 | 33 | </div> |
snippets/quantity-input.liquid Modifications apportées à snippets/quantity-input.liquid (lignes ajoutées : 2, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | 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 | Ajoutée | <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 | Ajoutée | <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product_title }}</span> | |
| 16 | 18 | </button></div> |
sections/footer.liquid Modifications apportées à sections/footer.liquid (lignes ajoutées : 1, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | 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 | Ajoutée | <span class="visually-hidden">{{ 'general.social.links.' | append: social.icon | t }}</span> | |
| 40 | 41 | </a> | |
| 41 | 42 | {%- endfor %} | |
| 42 | 43 | </ul> |
sections/header.liquid Modifications apportées à sections/header.liquid (lignes ajoutées : 3, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 22 | 22 | </details> | |
| 23 | 23 | ||
| 24 | 24 | {% if logo_is_heading %}<h1 class="header__heading">{% else %}<div class="header__heading">{% endif %} | |
| 25 | Supprimée | <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 | Ajoutée | <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 | Ajoutée | <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 | Ajoutée | <span class="visually-hidden">{{ 'sections.header.cart' | t }}</span> | |
| 60 | 62 | </a> | |
| 61 | 63 | </div> | |
| 62 | 64 | </header> |
sections/main-cart.liquid Modifications apportées à sections/main-cart.liquid (lignes ajoutées : 1, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | 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 | Ajoutée | <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 : recette slider-pause-control
Afficher l’avant et l’après (1)
assets/base.css.liquid Modifications apportées à assets/base.css.liquid (lignes ajoutées : 21, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1866 | 1866 | } | |
| 1867 | 1867 | ||
| 1868 | 1868 | /* ----------------------------------------------------------------- motion */ | |
| 1869 | Ajoutée | ||
| 1870 | Ajoutée | /* validiscan:slider-pause-control */ | |
| 1871 | Ajoutée | [data-autoplay-paused], | |
| 1872 | Ajoutée | [data-autoplay-paused] * { | |
| 1873 | Ajoutée | animation-play-state: paused !important; | |
| 1874 | Ajoutée | } | |
| 1875 | Ajoutée | ||
| 1876 | Ajoutée | .slider-pause { | |
| 1877 | Ajoutée | display: inline-flex; | |
| 1878 | Ajoutée | align-items: center; | |
| 1879 | Ajoutée | justify-content: center; | |
| 1880 | Ajoutée | min-width: 2.75rem; | |
| 1881 | Ajoutée | min-height: 2.75rem; | |
| 1882 | Ajoutée | padding: 0.5rem 1rem; | |
| 1883 | Ajoutée | border: 1px solid currentColor; | |
| 1884 | Ajoutée | background: transparent; | |
| 1885 | Ajoutée | color: inherit; | |
| 1886 | Ajoutée | font: inherit; | |
| 1887 | Ajoutée | cursor: pointer; | |
| 1888 | Ajoutée | } | |
| 1889 | Ajoutée | /* /validiscan:slider-pause-control */ |
assets/global.js Modifications apportées à assets/global.js (lignes ajoutées : 53, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 412 | 412 | if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', boot); | |
| 413 | 413 | else boot(); | |
| 414 | 414 | })(); | |
| 415 | Ajoutée | ||
| 416 | Ajoutée | /* validiscan:slider-pause-control */ | |
| 417 | Ajoutée | (function () { | |
| 418 | Ajoutée | 'use strict'; | |
| 419 | Ajoutée | var ROOTS = 'slideshow-component, slider-component, .swiper, .swiper-container, .slick-slider, .flickity-enabled, .splide, [data-autoplay]'; | |
| 420 | Ajoutée | var reduce = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : null; | |
| 421 | Ajoutée | ||
| 422 | Ajoutée | function rootOf(button) { | |
| 423 | Ajoutée | return button.closest(ROOTS) || button.previousElementSibling; | |
| 424 | Ajoutée | } | |
| 425 | Ajoutée | ||
| 426 | Ajoutée | function setPaused(button, paused) { | |
| 427 | Ajoutée | var root = rootOf(button); | |
| 428 | Ajoutée | if (!root) return; | |
| 429 | Ajoutée | if (paused) root.setAttribute('data-autoplay-paused', ''); | |
| 430 | Ajoutée | else root.removeAttribute('data-autoplay-paused'); | |
| 431 | Ajoutée | if (root.swiper && root.swiper.autoplay) { | |
| 432 | Ajoutée | if (paused) root.swiper.autoplay.stop(); | |
| 433 | Ajoutée | else root.swiper.autoplay.start(); | |
| 434 | Ajoutée | } | |
| 435 | Ajoutée | var $ = window.jQuery; | |
| 436 | Ajoutée | if ($ && $(root).hasClass('slick-initialized')) $(root).slick(paused ? 'slickPause' : 'slickPlay'); | |
| 437 | Ajoutée | var flickity = window.Flickity && window.Flickity.data(root); | |
| 438 | Ajoutée | if (flickity) { | |
| 439 | Ajoutée | if (paused) flickity.pausePlayer(); | |
| 440 | Ajoutée | else flickity.unpausePlayer(); | |
| 441 | Ajoutée | } | |
| 442 | Ajoutée | var autoplay = root.splide && root.splide.Components && root.splide.Components.Autoplay; | |
| 443 | Ajoutée | if (autoplay) { | |
| 444 | Ajoutée | if (paused) autoplay.pause(); | |
| 445 | Ajoutée | else autoplay.play(); | |
| 446 | Ajoutée | } | |
| 447 | Ajoutée | if (root.localName.indexOf('-') > 0 && typeof root.pause === 'function' && typeof root.play === 'function') { | |
| 448 | Ajoutée | if (paused) root.pause(); | |
| 449 | Ajoutée | else root.play(); | |
| 450 | Ajoutée | } | |
| 451 | Ajoutée | button.setAttribute('data-paused', paused ? 'true' : 'false'); | |
| 452 | Ajoutée | button.textContent = button.getAttribute(paused ? 'data-label-play' : 'data-label-pause') || button.textContent; | |
| 453 | Ajoutée | } | |
| 454 | Ajoutée | ||
| 455 | Ajoutée | function init() { | |
| 456 | Ajoutée | Array.prototype.forEach.call(document.querySelectorAll('[data-slider-pause]'), function (button) { | |
| 457 | Ajoutée | button.addEventListener('click', function () { | |
| 458 | Ajoutée | setPaused(button, button.getAttribute('data-paused') !== 'true'); | |
| 459 | Ajoutée | }); | |
| 460 | Ajoutée | if (reduce && reduce.matches) setPaused(button, true); | |
| 461 | Ajoutée | }); | |
| 462 | Ajoutée | } | |
| 463 | Ajoutée | ||
| 464 | Ajoutée | if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init); | |
| 465 | Ajoutée | else init(); | |
| 466 | Ajoutée | })(); | |
| 467 | Ajoutée | /* /validiscan:slider-pause-control */ |
locales/en.default.json Modifications apportées à locales/en.default.json (lignes ajoutées : 3, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 34 | 34 | "total_reviews": "{{ count }} reviews", | |
| 35 | 35 | "link_messages": { | |
| 36 | 36 | "new_window": "Opens in a new window." | |
| 37 | Supprimée | } | |
| 37 | Ajoutée | }, | |
| 38 | Ajoutée | "pause_slideshow": "Pause slideshow", | |
| 39 | Ajoutée | "play_slideshow": "Play slideshow" | |
| 38 | 40 | }, | |
| 39 | 41 | "sections": { | |
| 40 | 42 | "header": { |
sections/slideshow.liquid Modifications apportées à sections/slideshow.liquid (lignes ajoutées : 3, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | 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 | Ajoutée | {%- if autoplay %} | |
| 72 | Ajoutée | <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 | Ajoutée | {%- endif %} | |
| 71 | 74 | </div> | |
| 72 | 75 | </slideshow-component> | |
| 73 | 76 |
Shopware : recette button-semantics
Afficher l’avant et l’après (1)
Resources/app/storefront/src/scss/base.scss Modifications apportées à Resources/app/storefront/src/scss/base.scss (lignes ajoutées : 17, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1708 | 1708 | margin: 8px 0 0; | |
| 1709 | 1709 | font-size: 0.875rem; | |
| 1710 | 1710 | } | |
| 1711 | Ajoutée | ||
| 1712 | Ajoutée | /* validiscan:button-semantics */ | |
| 1713 | Ajoutée | /* Former <div>/<span>/<li> controls, now <button>: drop the browser button styles, keep the theme's (no specificity). */ | |
| 1714 | Ajoutée | :where(button.base-slider-dot) { | |
| 1715 | Ajoutée | display: block; | |
| 1716 | Ajoutée | margin: 0; | |
| 1717 | Ajoutée | padding: 0; | |
| 1718 | Ajoutée | border: 0; | |
| 1719 | Ajoutée | background: none; | |
| 1720 | Ajoutée | color: inherit; | |
| 1721 | Ajoutée | font: inherit; | |
| 1722 | Ajoutée | line-height: inherit; | |
| 1723 | Ajoutée | text-align: inherit; | |
| 1724 | Ajoutée | cursor: pointer; | |
| 1725 | Ajoutée | appearance: none; | |
| 1726 | Ajoutée | } | |
| 1727 | Ajoutée | /* /validiscan:button-semantics */ |
Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Modifications apportées à Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (lignes ajoutées : 5, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | 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 | Ajoutée | }, | |
| 197 | Ajoutée | "a11y": { | |
| 198 | Ajoutée | "control": { | |
| 199 | Ajoutée | "showSlide": "Folie %index% anzeigen" | |
| 200 | Ajoutée | } | |
| 196 | 201 | } | |
| 197 | 202 | } |
Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Modifications apportées à Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (lignes ajoutées : 5, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | 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 | Ajoutée | }, | |
| 197 | Ajoutée | "a11y": { | |
| 198 | Ajoutée | "control": { | |
| 199 | Ajoutée | "showSlide": "Show slide %index%" | |
| 200 | Ajoutée | } | |
| 196 | 201 | } | |
| 197 | 202 | } |
Resources/views/storefront/element/cms-element-image-slider.html.twig Modifications apportées à Resources/views/storefront/element/cms-element-image-slider.html.twig (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 51 | 51 | </button> | |
| 52 | 52 | <ol class="base-slider-dots"> | |
| 53 | 53 | {% for slide in slides %} | |
| 54 | Supprimée | <li class="base-slider-dot{% if loop.first %} is-active{% endif %}" data-slide-to="{{ loop.index0 }}"></li> | |
| 54 | Ajoutée | <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 : recette icon-accessible-name
Afficher l’avant et l’après (2)
Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Modifications apportées à Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (lignes ajoutées : 12, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | 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 | Ajoutée | }, | |
| 197 | Ajoutée | "a11y": { | |
| 198 | Ajoutée | "control": { | |
| 199 | Ajoutée | "search": "Suchen", | |
| 200 | Ajoutée | "previousSlide": "Vorherige Folie", | |
| 201 | Ajoutée | "nextSlide": "Nächste Folie", | |
| 202 | Ajoutée | "cookieSettings": "Cookie-Einstellungen", | |
| 203 | Ajoutée | "acceptCookies": "Alle Cookies akzeptieren", | |
| 204 | Ajoutée | "decreaseQuantity": "Menge verringern", | |
| 205 | Ajoutée | "increaseQuantity": "Menge erhöhen", | |
| 206 | Ajoutée | "removeFromCart": "Aus dem Warenkorb entfernen" | |
| 207 | Ajoutée | } | |
| 196 | 208 | } | |
| 197 | 209 | } |
Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Modifications apportées à Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (lignes ajoutées : 12, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | 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 | Ajoutée | }, | |
| 197 | Ajoutée | "a11y": { | |
| 198 | Ajoutée | "control": { | |
| 199 | Ajoutée | "search": "Search", | |
| 200 | Ajoutée | "previousSlide": "Previous slide", | |
| 201 | Ajoutée | "nextSlide": "Next slide", | |
| 202 | Ajoutée | "cookieSettings": "Cookie settings", | |
| 203 | Ajoutée | "acceptCookies": "Accept all cookies", | |
| 204 | Ajoutée | "decreaseQuantity": "Decrease quantity", | |
| 205 | Ajoutée | "increaseQuantity": "Increase quantity", | |
| 206 | Ajoutée | "removeFromCart": "Remove from cart" | |
| 207 | Ajoutée | } | |
| 196 | 208 | } | |
| 197 | 209 | } |
Resources/views/storefront/element/cms-element-image-gallery.html.twig Modifications apportées à Resources/views/storefront/element/cms-element-image-gallery.html.twig (lignes ajoutées : 2, lignes supprimées : 2)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 31 | 31 | ||
| 32 | 32 | {% if media|length > 1 %} | |
| 33 | 33 | <div class="gallery-slider-controls"> | |
| 34 | Supprimée | <button type="button" class="base-slider-controls-prev gallery-slider-controls-prev" data-gallery-prev> | |
| 34 | Ajoutée | <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 | Supprimée | <button type="button" class="base-slider-controls-next gallery-slider-controls-next" data-gallery-next> | |
| 37 | Ajoutée | <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 Modifications apportées à Resources/views/storefront/element/cms-element-image-slider.html.twig (lignes ajoutées : 2, lignes supprimées : 2)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 46 | 46 | ||
| 47 | 47 | {% block element_image_slider_controls %} | |
| 48 | 48 | <div class="image-slider-controls-container"> | |
| 49 | Supprimée | <button type="button" class="base-slider-controls-prev image-slider-controls-btn" data-slide-prev> | |
| 49 | Ajoutée | <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 | Supprimée | <button type="button" class="base-slider-controls-next image-slider-controls-btn" data-slide-next> | |
| 57 | Ajoutée | <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 Modifications apportées à Resources/views/storefront/layout/cookie/cookie-permission.html.twig (lignes ajoutées : 2, lignes supprimées : 2)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 22 | 22 | </p> | |
| 23 | 23 | </div> | |
| 24 | 24 | <div class="col-auto cookie-permission-actions"> | |
| 25 | Supprimée | <button type="button" class="btn cookie-permission-icon-btn js-cookie-configuration-toggle">{% sw_icon 'settings' %}</button> | |
| 26 | Supprimée | <button type="button" class="btn btn-primary cookie-permission-icon-btn js-cookie-accept-all-button">{% sw_icon 'checkmark' %}</button> | |
| 25 | Ajoutée | <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 | Ajoutée | <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 Modifications apportées à Resources/views/storefront/layout/header/search.html.twig (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 13 | 13 | autocomplete="off" | |
| 14 | 14 | autocapitalize="off" | |
| 15 | 15 | placeholder="{{ 'header.searchPlaceholder'|trans }}" value="{{ page.searchTerm }}"> | |
| 16 | Supprimée | <button type="submit" class="btn header-search-btn"> | |
| 16 | Ajoutée | <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 Modifications apportées à Resources/views/storefront/page/checkout/cart/index.html.twig (lignes ajoutées : 3, lignes supprimées : 3)
| Ligne avant | Ligne après | Modification | 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 | Supprimée | <button type="button" class="btn btn-outline-light btn-minus js-btn-minus"> | |
| 42 | Ajoutée | <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 | Supprimée | <button type="button" class="btn btn-outline-light btn-plus js-btn-plus"> | |
| 53 | Ajoutée | <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 | Supprimée | <button type="button" class="btn btn-light btn-sm line-item-remove-button"> | |
| 67 | Ajoutée | <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 Modifications apportées à Resources/views/storefront/page/product-detail/buy-widget.html.twig (lignes ajoutées : 2, lignes supprimées : 2)
| Ligne avant | Ligne après | Modification | 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 | Supprimée | <button type="button" class="btn btn-outline-light btn-minus js-btn-minus"> | |
| 67 | Ajoutée | <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 | Supprimée | <button type="button" class="btn btn-outline-light btn-plus js-btn-plus"> | |
| 78 | Ajoutée | <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> |
Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Modifications apportées à Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (lignes ajoutées : 6, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | 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 | Ajoutée | }, | |
| 197 | Ajoutée | "a11y": { | |
| 198 | Ajoutée | "control": { | |
| 199 | Ajoutée | "home": "Zur Startseite", | |
| 200 | Ajoutée | "account": "Ihr Konto" | |
| 201 | Ajoutée | } | |
| 196 | 202 | } | |
| 197 | 203 | } |
Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Modifications apportées à Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (lignes ajoutées : 6, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | 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 | Ajoutée | }, | |
| 197 | Ajoutée | "a11y": { | |
| 198 | Ajoutée | "control": { | |
| 199 | Ajoutée | "home": "Go to the homepage", | |
| 200 | Ajoutée | "account": "Your account" | |
| 201 | Ajoutée | } | |
| 196 | 202 | } | |
| 197 | 203 | } |
Resources/views/storefront/layout/header/actions.html.twig Modifications apportées à Resources/views/storefront/layout/header/actions.html.twig (lignes ajoutées : 2, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 3 | 3 | {% block layout_header_actions_account %} | |
| 4 | 4 | <div class="header-account"> | |
| 5 | 5 | <a href="{{ url('/account/login') }}" | |
| 6 | Supprimée | class="btn account-menu-btn header-actions-btn"> | |
| 6 | Ajoutée | class="btn account-menu-btn header-actions-btn" | |
| 7 | Ajoutée | 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 Modifications apportées à Resources/views/storefront/layout/header/logo.html.twig (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | 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 | Supprimée | <a class="header-logo-main-link" href="{{ url('/') }}"> | |
| 5 | Ajoutée | <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 : recette slider-pause-control
Afficher l’avant et l’après (1)
Resources/app/storefront/src/main.js Modifications apportées à Resources/app/storefront/src/main.js (lignes ajoutées : 52, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 142 | 142 | if (options.autoplay === true) { | |
| 143 | 143 | window.setInterval( | |
| 144 | 144 | function () { | |
| 145 | Ajoutée | 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 | Ajoutée | ||
| 458 | Ajoutée | /* validiscan:slider-pause-control */ | |
| 459 | Ajoutée | /* | |
| 460 | Ajoutée | * Pause / play button of auto-advancing sliders (WCAG 2.2.2): wired to the | |
| 461 | Ajoutée | * slider's autoplay; sliders start paused when the visitor prefers reduced motion. | |
| 462 | Ajoutée | */ | |
| 463 | Ajoutée | (function sliderPauseControl() { | |
| 464 | Ajoutée | 'use strict'; | |
| 465 | Ajoutée | ||
| 466 | Ajoutée | function tinySlider(slider) { | |
| 467 | Ajoutée | const manager = window.PluginManager; | |
| 468 | Ajoutée | if (!manager || typeof manager.getPluginInstanceFromElement !== 'function') return null; | |
| 469 | Ajoutée | const plugin = manager.getPluginInstanceFromElement(slider, 'BaseSlider'); | |
| 470 | Ajoutée | return plugin && plugin._slider ? plugin._slider : null; | |
| 471 | Ajoutée | } | |
| 472 | Ajoutée | ||
| 473 | Ajoutée | function autoplays(slider) { | |
| 474 | Ajoutée | try { | |
| 475 | Ajoutée | const options = JSON.parse(slider.getAttribute('data-base-slider-options') || '{}') || {}; | |
| 476 | Ajoutée | return Boolean(options.slider && options.slider.autoplay); | |
| 477 | Ajoutée | } catch { | |
| 478 | Ajoutée | return false; | |
| 479 | Ajoutée | } | |
| 480 | Ajoutée | } | |
| 481 | Ajoutée | ||
| 482 | Ajoutée | function init() { | |
| 483 | Ajoutée | const reduceMotion = | |
| 484 | Ajoutée | window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; | |
| 485 | Ajoutée | document.querySelectorAll('[data-slider-pause]').forEach(function (button) { | |
| 486 | Ajoutée | const slider = button.closest('[data-base-slider]'); | |
| 487 | Ajoutée | if (!slider || !autoplays(slider)) return; | |
| 488 | Ajoutée | ||
| 489 | Ajoutée | function setPaused(paused) { | |
| 490 | Ajoutée | slider.setAttribute('data-autoplay-paused', paused ? 'true' : 'false'); | |
| 491 | Ajoutée | button.textContent = button.getAttribute(paused ? 'data-label-play' : 'data-label-pause'); | |
| 492 | Ajoutée | const instance = tinySlider(slider); | |
| 493 | Ajoutée | if (instance) instance[paused ? 'pause' : 'play'](); | |
| 494 | Ajoutée | } | |
| 495 | Ajoutée | ||
| 496 | Ajoutée | button.hidden = false; | |
| 497 | Ajoutée | button.addEventListener('click', function () { | |
| 498 | Ajoutée | setPaused(slider.getAttribute('data-autoplay-paused') !== 'true'); | |
| 499 | Ajoutée | }); | |
| 500 | Ajoutée | if (reduceMotion) setPaused(true); | |
| 501 | Ajoutée | }); | |
| 502 | Ajoutée | } | |
| 503 | Ajoutée | ||
| 504 | Ajoutée | if (document.readyState === 'complete') init(); | |
| 505 | Ajoutée | else window.addEventListener('load', init); | |
| 506 | Ajoutée | })(); | |
| 507 | Ajoutée | /* /validiscan:slider-pause-control */ |
Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Modifications apportées à Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (lignes ajoutées : 6, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | 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 | Ajoutée | }, | |
| 197 | Ajoutée | "a11y": { | |
| 198 | Ajoutée | "slider": { | |
| 199 | Ajoutée | "pause": "Diashow anhalten", | |
| 200 | Ajoutée | "play": "Diashow abspielen" | |
| 201 | Ajoutée | } | |
| 196 | 202 | } | |
| 197 | 203 | } |
Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Modifications apportées à Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (lignes ajoutées : 6, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | 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 | Ajoutée | }, | |
| 197 | Ajoutée | "a11y": { | |
| 198 | Ajoutée | "slider": { | |
| 199 | Ajoutée | "pause": "Pause slideshow", | |
| 200 | Ajoutée | "play": "Play slideshow" | |
| 201 | Ajoutée | } | |
| 196 | 202 | } | |
| 197 | 203 | } |
Resources/views/storefront/element/cms-element-image-slider.html.twig Modifications apportées à Resources/views/storefront/element/cms-element-image-slider.html.twig (lignes ajoutées : 1, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | 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 | Ajoutée | <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 : recette button-semantics
Afficher l’avant et l’après (1)
assets/css/main.css Modifications apportées à assets/css/main.css (lignes ajoutées : 17, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 766 | 766 | gap: 0.75rem; | |
| 767 | 767 | } | |
| 768 | 768 | ||
| 769 | Ajoutée | /* validiscan:button-semantics */ | |
| 770 | Ajoutée | /* Controls that became <button>s: keep the look of the elements they replace. The theme | |
| 771 | Ajoutée | rules for these classes follow and still win. */ | |
| 769 | 772 | .kb-cookie-bar__settings, | |
| 770 | 773 | .kb-cookie-bar__accept { | |
| 774 | Ajoutée | margin: 0; | |
| 775 | Ajoutée | padding: 0; | |
| 776 | Ajoutée | border: 0; | |
| 777 | Ajoutée | background: none; | |
| 778 | Ajoutée | color: inherit; | |
| 779 | Ajoutée | font: inherit; | |
| 780 | Ajoutée | line-height: inherit; | |
| 781 | Ajoutée | text-align: inherit; | |
| 782 | Ajoutée | cursor: pointer; | |
| 783 | Ajoutée | } | |
| 784 | Ajoutée | /* /validiscan:button-semantics */ | |
| 785 | Ajoutée | ||
| 786 | Ajoutée | .kb-cookie-bar__settings, | |
| 787 | Ajoutée | .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 Modifications apportées à template-parts/cookie-bar.php (lignes ajoutées : 3, lignes supprimées : 3)
| Ligne avant | Ligne après | Modification | 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 | Supprimée | <span class="kb-cookie-bar__settings" data-kb-consent="settings"><?php esc_html_e( 'Cookie settings', 'kestrel-birch' ); ?></span> | |
| 25 | Supprimée | <span class="kb-cookie-bar__accept" data-kb-consent="accept"><?php esc_html_e( 'Accept', 'kestrel-birch' ); ?></span> | |
| 26 | Supprimée | <button type="button" class="kb-cookie-bar__close" data-kb-consent="close"><?php kb_icon( 'close' ); ?></button> | |
| 24 | Ajoutée | <button class="kb-cookie-bar__settings" data-kb-consent="settings" type="button"><?php esc_html_e( 'Cookie settings', 'kestrel-birch' ); ?></button> | |
| 25 | Ajoutée | <button class="kb-cookie-bar__accept" data-kb-consent="accept" type="button"><?php esc_html_e( 'Accept', 'kestrel-birch' ); ?></button> | |
| 26 | Ajoutée | <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 : recette slider-pause-control
Afficher l’avant et l’après (1)
assets/css/main.css Modifications apportées à assets/css/main.css (lignes ajoutées : 28, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 508 | 508 | background: var(--kb-navy); | |
| 509 | 509 | } | |
| 510 | 510 | ||
| 511 | Ajoutée | /* validiscan:slider-pause-control */ | |
| 512 | Ajoutée | .hero-slider.is-paused .hero-slider__track { | |
| 513 | Ajoutée | animation-play-state: paused; | |
| 514 | Ajoutée | } | |
| 515 | Ajoutée | ||
| 516 | Ajoutée | @media (prefers-reduced-motion: reduce) { | |
| 517 | Ajoutée | .hero-slider__track { | |
| 518 | Ajoutée | animation-play-state: paused; | |
| 519 | Ajoutée | } | |
| 520 | Ajoutée | } | |
| 521 | Ajoutée | ||
| 522 | Ajoutée | .hero-slider__pause { | |
| 523 | Ajoutée | position: absolute; | |
| 524 | Ajoutée | top: 1rem; | |
| 525 | Ajoutée | right: 1rem; | |
| 526 | Ajoutée | z-index: 2; | |
| 527 | Ajoutée | min-height: 24px; | |
| 528 | Ajoutée | padding: 0.4em 0.9em; | |
| 529 | Ajoutée | border: 2px solid currentColor; | |
| 530 | Ajoutée | border-radius: 4px; | |
| 531 | Ajoutée | background: #ffffff; | |
| 532 | Ajoutée | color: var(--kb-ink); | |
| 533 | Ajoutée | font: inherit; | |
| 534 | Ajoutée | font-weight: 600; | |
| 535 | Ajoutée | cursor: pointer; | |
| 536 | Ajoutée | } | |
| 537 | Ajoutée | /* /validiscan:slider-pause-control */ | |
| 538 | Ajoutée | ||
| 511 | 539 | .hero-slide img { | |
| 512 | 540 | width: 100%; | |
| 513 | 541 | aspect-ratio: 5 / 2; |
assets/js/theme.js Modifications apportées à assets/js/theme.js (lignes ajoutées : 20, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 255 | 255 | initCheckout(); | |
| 256 | 256 | initShowPassword(); | |
| 257 | 257 | })(); | |
| 258 | Ajoutée | ||
| 259 | Ajoutée | /* validiscan:slider-pause-control */ | |
| 260 | Ajoutée | (function () { | |
| 261 | Ajoutée | const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; | |
| 262 | Ajoutée | for (const slider of document.querySelectorAll('.hero-slider')) { | |
| 263 | Ajoutée | const button = slider.querySelector('.hero-slider__pause'); | |
| 264 | Ajoutée | if (!button) continue; | |
| 265 | Ajoutée | const pauseLabel = button.textContent; | |
| 266 | Ajoutée | const playLabel = button.getAttribute('data-play-label') || pauseLabel; | |
| 267 | Ajoutée | const set = (paused) => { | |
| 268 | Ajoutée | slider.classList.toggle('is-paused', paused); | |
| 269 | Ajoutée | button.textContent = paused ? playLabel : pauseLabel; | |
| 270 | Ajoutée | }; | |
| 271 | Ajoutée | button.addEventListener('click', () => { | |
| 272 | Ajoutée | set(!slider.classList.contains('is-paused')); | |
| 273 | Ajoutée | }); | |
| 274 | Ajoutée | if (reduce) set(true); | |
| 275 | Ajoutée | } | |
| 276 | Ajoutée | })(); | |
| 277 | Ajoutée | /* /validiscan:slider-pause-control */ |
template-parts/hero-slider.php Modifications apportées à template-parts/hero-slider.php (lignes ajoutées : 1, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 37 | 37 | }; | |
| 38 | 38 | ?> | |
| 39 | 39 | <div class="hero-slider" data-autoplay="true" data-interval="6000"> | |
| 40 | Ajoutée | <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 : recette button-semantics
Afficher l’avant et l’après (1)
app/design/frontend/Validiscan/fixture/Magento_Cookie/templates/html/notices.phtml Modifications apportées à app/design/frontend/Validiscan/fixture/Magento_Cookie/templates/html/notices.phtml (lignes ajoutées : 2, lignes supprimées : 2)
| Ligne avant | Ligne après | Modification | 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 | Supprimée | <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 | Supprimée | <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 | Ajoutée | <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 | Ajoutée | <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 Modifications apportées à app/design/frontend/Validiscan/fixture/web/css/source/_theme.less (lignes ajoutées : 30, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1264 | 1264 | height: 18px; | |
| 1265 | 1265 | stroke-width: 3; | |
| 1266 | 1266 | } | |
| 1267 | Ajoutée | ||
| 1268 | Ajoutée | /* validiscan:button-semantics */ | |
| 1269 | Ajoutée | button.amgdprcookie-button.-allow, | |
| 1270 | Ajoutée | button.amgdprcookie-button.-decline { | |
| 1271 | Ajoutée | -webkit-appearance: none; | |
| 1272 | Ajoutée | appearance: none; | |
| 1273 | Ajoutée | margin: 0; | |
| 1274 | Ajoutée | padding: 0; | |
| 1275 | Ajoutée | box-shadow: none; | |
| 1276 | Ajoutée | font: inherit; | |
| 1277 | Ajoutée | letter-spacing: inherit; | |
| 1278 | Ajoutée | text-align: inherit; | |
| 1279 | Ajoutée | text-transform: inherit; | |
| 1280 | Ajoutée | text-shadow: none; | |
| 1281 | Ajoutée | } | |
| 1282 | Ajoutée | button.amgdprcookie-button.-allow:hover, | |
| 1283 | Ajoutée | button.amgdprcookie-button.-allow:focus, | |
| 1284 | Ajoutée | button.amgdprcookie-button.-allow:active { | |
| 1285 | Ajoutée | background: @nw-primary; | |
| 1286 | Ajoutée | border: 0; | |
| 1287 | Ajoutée | color: #fff; | |
| 1288 | Ajoutée | } | |
| 1289 | Ajoutée | button.amgdprcookie-button.-decline:hover, | |
| 1290 | Ajoutée | button.amgdprcookie-button.-decline:focus, | |
| 1291 | Ajoutée | button.amgdprcookie-button.-decline:active { | |
| 1292 | Ajoutée | background: #fff; | |
| 1293 | Ajoutée | border: 1px solid @nw-border; | |
| 1294 | Ajoutée | color: @nw-text; | |
| 1295 | Ajoutée | } | |
| 1296 | Ajoutée | /* /validiscan:button-semantics */ |
app/design/frontend/Validiscan/fixture/web/css/styles-m.css Modifications apportées à app/design/frontend/Validiscan/fixture/web/css/styles-m.css (lignes ajoutées : 30, lignes supprimées : 0)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1232 | 1232 | height: 18px; | |
| 1233 | 1233 | stroke-width: 3; | |
| 1234 | 1234 | } | |
| 1235 | Ajoutée | ||
| 1236 | Ajoutée | /* validiscan:button-semantics */ | |
| 1237 | Ajoutée | button.amgdprcookie-button.-allow, | |
| 1238 | Ajoutée | button.amgdprcookie-button.-decline { | |
| 1239 | Ajoutée | -webkit-appearance: none; | |
| 1240 | Ajoutée | appearance: none; | |
| 1241 | Ajoutée | margin: 0; | |
| 1242 | Ajoutée | padding: 0; | |
| 1243 | Ajoutée | box-shadow: none; | |
| 1244 | Ajoutée | font: inherit; | |
| 1245 | Ajoutée | letter-spacing: inherit; | |
| 1246 | Ajoutée | text-align: inherit; | |
| 1247 | Ajoutée | text-transform: inherit; | |
| 1248 | Ajoutée | text-shadow: none; | |
| 1249 | Ajoutée | } | |
| 1250 | Ajoutée | button.amgdprcookie-button.-allow:hover, | |
| 1251 | Ajoutée | button.amgdprcookie-button.-allow:focus, | |
| 1252 | Ajoutée | button.amgdprcookie-button.-allow:active { | |
| 1253 | Ajoutée | background: #1979c3; | |
| 1254 | Ajoutée | border: 0; | |
| 1255 | Ajoutée | color: #fff; | |
| 1256 | Ajoutée | } | |
| 1257 | Ajoutée | button.amgdprcookie-button.-decline:hover, | |
| 1258 | Ajoutée | button.amgdprcookie-button.-decline:focus, | |
| 1259 | Ajoutée | button.amgdprcookie-button.-decline:active { | |
| 1260 | Ajoutée | background: #fff; | |
| 1261 | Ajoutée | border: 1px solid #c2c2c2; | |
| 1262 | Ajoutée | color: #333; | |
| 1263 | Ajoutée | } | |
| 1264 | Ajoutée | /* /validiscan:button-semantics */ |
Magento : recette slider-pause-control
Afficher l’avant et l’après (1)
app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html Modifications apportées à app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html (lignes ajoutées : 1, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 3 | 3 | class="pagebuilder-slider slick-slider" | |
| 4 | 4 | data-content-type="slider" | |
| 5 | 5 | data-appearance="default" | |
| 6 | Supprimée | data-autoplay="true" | |
| 6 | Ajoutée | 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 Modifications apportées à app/design/frontend/Validiscan/fixture/web/css/source/_theme.less (lignes ajoutées : 0, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1176 | 1176 | .slick-track { | |
| 1177 | 1177 | display: flex; | |
| 1178 | 1178 | width: 300%; | |
| 1179 | Supprimée | 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 Modifications apportées à app/design/frontend/Validiscan/fixture/web/css/styles-m.css (lignes ajoutées : 0, lignes supprimées : 1)
| Ligne avant | Ligne après | Modification | Code |
|---|---|---|---|
| 1147 | 1147 | .slick-track { | |
| 1148 | 1148 | display: flex; | |
| 1149 | 1149 | width: 300%; | |
| 1150 | Supprimée | animation: nw-slider-autoplay 9s ease-in-out infinite; | |
| 1151 | 1150 | } | |
| 1152 | 1151 | .slick-slide { | |
| 1153 | 1152 | flex: 0 0 33.3333%; |
Commencez par une vérification gratuite de votre boutique.
Envoyez l’adresse de votre boutique. Validiscan la scanne et vous envoie chaque échec que le scan peut prouver, avec sa page et son code.
Demander une vérification gratuiteOu écrivez à info@validiscan.com.
Ce que couvre la vérification gratuite, et ce qu’elle laisse de côté- Vous envoyez
- l’adresse de votre boutique
- Pages scannées
- jusqu’à 15
- Vous recevez
- chaque échec que le scan peut prouver, avec la page et le code
- Sur votre boutique
- pages publiques uniquement ; aucune connexion, aucun achat, aucun formulaire envoyé
- Ce qu’elle n’est pas
- un audit complet