Validiscan
Menu

Langue

Le bandeau cookies doit être utilisable au clavier et gérer correctement le focus

Le bandeau cookies est la première chose que voit chaque visiteur. Quand les personnes qui naviguent au clavier ou avec un lecteur d’écran ne peuvent pas atteindre ses boutons, ne peuvent pas le fermer ou perdent leur position une fois qu’il est fermé, elles restent bloquées avant d’avoir vu le moindre produit, et la plupart quittent la boutique.

Demander une vérification gratuite
Identifiant de la règle
vs-cookie-banner
Source
Contrôle Validiscan
Impact
Critique
Niveau de correction
ASSISTED
sur Shopify, Shopware, WooCommerce et Magento
Statut
exécutée

Ce que fait le contrôle

Vérifie que le bandeau ou la boîte de dialogue de consentement peut être atteint et utilisé au clavier, garde le focus à l’intérieur tant qu’il bloque la page, propose un bouton de fermeture atteignable ou la touche Escape, possède un nom accessible et un contraste suffisant, et rend le focus à la page lorsqu’il se ferme.

Un bandeau est une zone contenant du texte et des commandes : le conteneur d’une plateforme de gestion du consentement, ou bien une boîte de dialogue ou un élément fixe, collant (sticky) ou positionné en absolu avec un z-index élevé, dont l’id, la classe ou le texte mentionne les cookies, le consentement ou la confidentialité. Comme le scanner accepte par défaut les bandeaux cookies, une page qui n’en affiche aucun est rouverte sans cookies, une fois par scan et par zone d’affichage.

Si le focus n’est pas entré dans le bandeau au bout de 30 appuis sur Tab depuis le haut de la page, cela donne lieu à un constat. Un bandeau doté d’aria-modal, un <dialog> modal, un bandeau qui bloque le défilement de la page ou qui s’accompagne d’un voile couvrant toute la zone d’affichage est modal : il doit déjà contenir le focus ou le recevoir au premier appui sur Tab.

Dans une copie jetable de la page, Échap doit fermer un bandeau modal, autre qu’un <dialog> natif, qui n’a aucune commande de refus ou de fermeture focalisable ; la commande de refus, de fermeture ou d’acceptation reçoit Entrée, Espace, puis un clic. Un bandeau qui ne se ferme qu’au clic donne lieu à un constat, tout comme un focus qui retombe sur le corps de la page après une fermeture au clavier. Les résultats non tranchés vont dans « à examiner », ce qui ne produit aucun constat aujourd’hui.

Comment corriger

Utilisez de vrais éléments <button> pour accepter, refuser et ouvrir les paramètres ; donnez au bandeau role="dialog" avec un nom (aria-labelledby pointant vers son titre) ; déplacez le focus dans le bandeau à son ouverture, gardez la navigation avec Tab à l’intérieur tant qu’il bloque la page, fermez-le avec Escape et rendez le focus là où se trouvait le visiteur. La plupart des bandeaux proviennent d’une plateforme de gestion du consentement : activez sa mise en page accessible ou ses options d’accessibilité avant de modifier le code du thème.

Critères de succès WCAG

Clauses de la norme EN 301 549

La clause de la norme EN 301 549 pour chaque critère, selon la version de la norme
Critère WCAG Version 3.2.1 Version 4.1.1
2.1.1 9.2.1.1 9.2.1.1
2.1.2 9.2.1.2 9.2.1.2
2.4.3 9.2.4.3 9.2.4.3
4.1.2 9.4.1.2 9.4.1.2

Recettes qui énumèrent cette règle

Cette règle a le niveau ASSISTED. Dans un projet, un constat de cette règle suit la voie ASSISTED, et ces recettes ne lui sont pas appliquées.

Shopify : recette button-semantics

Afficher l’avant et l’après (1)
Avant et après Données d’exemple

assets/base.css.liquid Modifications apportées à assets/base.css.liquid (lignes ajoutées : 14, lignes supprimées : 0)

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)

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)
buttons Données d’exemple

locales/en.default.json Modifications apportées à locales/en.default.json (lignes ajoutées : 3, lignes supprimées : 1)

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)

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)

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)

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)

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)

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>
links Données d’exemple

sections/footer.liquid Modifications apportées à sections/footer.liquid (lignes ajoutées : 1, lignes supprimées : 0)

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)

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)

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

Shopware : recette button-semantics

Afficher l’avant et l’après (1)
turns the mouse-only slider dots into named buttons in their list items; vs-carousel stops reporting them Données d’exemple

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)

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)

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)

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)

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)
names every icon-only button of the home, product and cart pages; button-name no longer fires Données d’exemple

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)

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)

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)

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)

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)

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)

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)

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)

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>
names the logo and account links; social links whose network is data are left for review Données d’exemple

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)

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)

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)

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)

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

WooCommerce : recette button-semantics

Afficher l’avant et l’après (1)
turns the click-only cookie choices into buttons and names the close button Données d’exemple

assets/css/main.css Modifications apportées à assets/css/main.css (lignes ajoutées : 17, lignes supprimées : 0)

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)

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>

Magento : recette button-semantics

Afficher l’avant et l’après (1)
turns span controls of the cookie bar into buttons and validates Données d’exemple

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)

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)

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)

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 icon-accessible-name

Afficher l’avant et l’après (2)
names the icon-only search button and validates Données d’exemple

app/design/frontend/Validiscan/fixture/Magento_Search/templates/form.mini.phtml Modifications apportées à app/design/frontend/Validiscan/fixture/Magento_Search/templates/form.mini.phtml (lignes ajoutées : 1, lignes supprimées : 1)

Modifications apportées à app/design/frontend/Validiscan/fixture/Magento_Search/templates/form.mini.phtml (lignes ajoutées : 1, lignes supprimées : 1)
Ligne avant Ligne après Modification Code
20 20 <div class="actions">
21 21 <!-- VALIDISCAN-SEEDED button-name: icon-only search button without text, title or aria-label -->
22 22 <?php /* Fixed variant: <button type="submit" title="Search" class="action search"><span class="sr-only">Search</span>(icon, aria-hidden)</button>; the form gets role="search" aria-label="Site search". */ ?>
23 Supprimée <button type="submit" class="action search"><svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg></button>
23 Ajoutée <button type="submit" class="action search" aria-label="<?= $escaper->escapeHtmlAttr(__('Search')) ?>"><svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg></button>
24 24 </div>
25 25 </form>
26 26 </div>
names the minicart link and leaves the product photo link for review Données d’exemple

app/design/frontend/Validiscan/fixture/Magento_Checkout/templates/cart/minicart.phtml Modifications apportées à app/design/frontend/Validiscan/fixture/Magento_Checkout/templates/cart/minicart.phtml (lignes ajoutées : 1, lignes supprimées : 1)

Modifications apportées à app/design/frontend/Validiscan/fixture/Magento_Checkout/templates/cart/minicart.phtml (lignes ajoutées : 1, lignes supprimées : 1)
Ligne avant Ligne après Modification Code
13 13 ?>
14 14 <!-- VALIDISCAN-SEEDED link-name + aria-valid-attr-value: the "My Cart" text was removed from the minicart link (only an icon and an empty counter remain) and aria-expanded carries the invalid value "closed" -->
15 15 <div data-block="minicart" class="minicart-wrapper">
16 Supprimée <a class="action showcart" href="<?= $escaper->escapeUrl($block->getShoppingCartUrl()) ?>" data-bind="scope: 'minicart_content'" aria-haspopup="true" aria-expanded="closed">
16 Ajoutée <a class="action showcart" href="<?= $escaper->escapeUrl($block->getShoppingCartUrl()) ?>" data-bind="scope: 'minicart_content'" aria-haspopup="true" aria-expanded="closed" aria-label="<?= $escaper->escapeHtmlAttr(__('My Cart')) ?>">
17 17 <svg class="icon" viewBox="0 0 24 24"><path d="M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6"/><circle cx="10" cy="20" r="1.5"/><circle cx="17" cy="20" r="1.5"/></svg>
18 18 <span class="counter qty empty"><span class="counter-number"></span></span>
19 19 </a>

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 gratuite

Ou é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

Écrire à Validiscan

Pour une vérification gratuite, indiquez l’adresse de votre boutique et sa plateforme.

Validiscan utilise ce que vous envoyez pour vous répondre. Politique de confidentialité