Les liens doivent avoir un texte perceptible

Les lecteurs d’écran annoncent les liens par leur texte. Les liens sous forme d’icône ou d’image sans nom, comme ceux du panier, du compte, des réseaux sociaux ou des images de produits, sont annoncés comme « lien » ou comme une adresse web : les clients ne trouvent pas le panier ou ne peuvent pas ouvrir un produit.

Identifiant de la règle
link-name
Source
axe-core 4.13.0
Impact
Grave
Niveau de correction
ASSISTED
sur Shopify, Shopware, WooCommerce et Magento
Statut
exécutée

Ce que fait le contrôle

Vérifier que les liens ont un texte perceptible

La règle teste chaque élément <a> doté d’un attribut href, et non les éléments qui ne sont des liens que par role="link". Les liens masqués aux technologies d’assistance, par exemple avec display: none ou aria-hidden="true" sur le lien ou sur un ancêtre, sont ignorés.

Un lien réussit lorsqu’une source lui donne un texte qui n’est pas vide une fois les espaces de début et de fin retirés : son contenu, y compris le texte alt d’une image qu’il contient ; un aria-label ; un aria-labelledby qui pointe vers un élément contenant du texte ; ou un title. Un aria-labelledby qui pointe vers un élément absent ou vide ne compte pas. Un lien dans l’ordre de tabulation au clavier a aussi besoin d’un nom calculé non vide, et role="none" ou role="presentation" sur un lien vide ne l’empêche pas d’échouer.

Lorsqu’axe-core ne peut pas calculer le texte d’un lien, il peut signaler le lien comme « à examiner » au lieu de le mettre en échec, et le scanner de Validiscan ne transforme pas les résultats « à examiner » en constats. La règle teste seulement qu’un nom existe ; les textes génériques comme « en savoir plus » relèvent du contrôle distinct vs-link-purpose.

Comment corriger

Donnez à chaque lien un nom perceptible : un texte visible, une alternative textuelle sur l’image contenue dans le lien, un aria-label sur les liens composés uniquement d’une icône (par exemple aria-label="Panier, 2 articles") ou un texte masqué visuellement. Masquez les icônes décoratives du lien avec aria-hidden="true".

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.4.4 9.2.4.4 9.2.4.4
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 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 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 icon-accessible-name

Afficher l’avant et l’après (2)
names the account link and the social links, and leaves the uncertain gallery link Données d’exemple

header.php Modifications apportées à header.php (lignes ajoutées : 1, lignes supprimées : 1)

Modifications apportées à header.php (lignes ajoutées : 1, lignes supprimées : 1)
Ligne avant Ligne après Modification Code
60 60 <ul id="site-header-cart" class="site-header-cart menu">
61 61 <li class="kb-account">
62 62 <?php // VALIDISCAN-SEED link-name: icon-only account link. ?>
63 Supprimée <a class="kb-account-link" href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>"><?php kb_icon( 'user' ); ?></a>
63 Ajoutée <a class="kb-account-link" href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>"><?php kb_icon( 'user' ); ?><span class="screen-reader-text"><?php esc_html_e( 'My account', 'kestrel-birch' ); ?></span></a>
64 64 </li>
65 65 <li class="kb-cart<?php echo is_cart() ? ' current-menu-item' : ''; ?>">
66 66 <a class="cart-contents" href="<?php echo esc_url( wc_get_cart_url() ); ?>" title="<?php esc_attr_e( 'View your shopping cart', 'storefront' ); ?>">

template-parts/social-links.php Modifications apportées à template-parts/social-links.php (lignes ajoutées : 1, lignes supprimées : 1)

Modifications apportées à template-parts/social-links.php (lignes ajoutées : 1, lignes supprimées : 1)
Ligne avant Ligne après Modification Code
17 17 ?>
18 18 <ul class="kb-social">
19 19 <?php foreach ( $kb_profiles as $kb_network => $kb_url ) : ?>
20 Supprimée <a class="kb-social__link" href="<?php echo esc_url( $kb_url ); ?>"><?php kb_icon( $kb_network ); ?></a>
20 Ajoutée <a class="kb-social__link" href="<?php echo esc_url( $kb_url ); ?>"><?php kb_icon( $kb_network ); ?><span class="screen-reader-text"><?php echo esc_html( ucfirst( $kb_network ) ); ?></span></a>
21 21 <?php endforeach; ?>
22 22 </ul>
names the icon-only search and show-password buttons of the fixture theme Données d’exemple

header.php Modifications apportées à header.php (lignes ajoutées : 1, lignes supprimées : 1)

Modifications apportées à header.php (lignes ajoutées : 1, lignes supprimées : 1)
Ligne avant Ligne après Modification Code
51 51 <?php // VALIDISCAN-SEED vs-focus-order + tabindex: tabindex="1" "so the search is always the first stop". ?>
52 52 <input type="search" id="woocommerce-product-search-field-0" class="search-field" placeholder="<?php echo esc_attr__( 'Search products&hellip;', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="s" tabindex="1">
53 53 <?php // VALIDISCAN-SEED button-name: icon-only submit button without text. ?>
54 Supprimée <button type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" class="kb-search-submit"><?php kb_icon( 'search' ); ?></button>
54 Ajoutée <button type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" class="kb-search-submit"><?php kb_icon( 'search' ); ?><span class="screen-reader-text"><?php esc_html_e( 'Search', 'kestrel-birch' ); ?></span></button>
55 55 <input type="hidden" name="post_type" value="product">
56 56 </form>
57 57 </div>

woocommerce/myaccount/form-login.php Modifications apportées à woocommerce/myaccount/form-login.php (lignes ajoutées : 1, lignes supprimées : 1)

Modifications apportées à woocommerce/myaccount/form-login.php (lignes ajoutées : 1, lignes supprimées : 1)
Ligne avant Ligne après Modification Code
35 35 <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
36 36 <span class="password-input">
37 37 <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" id="password" autocomplete="off" onpaste="return false;">
38 Supprimée <button type="button" class="show-password-input"><?php kb_icon( 'eye' ); ?></button>
38 Ajoutée <button type="button" class="show-password-input"><?php kb_icon( 'eye' ); ?><span class="screen-reader-text"><?php esc_html_e( 'Show password', 'kestrel-birch' ); ?></span></button>
39 39 </span>
40 40 </p>
41 41

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é