Los enlaces deben tener texto perceptible

Los lectores de pantalla anuncian los enlaces por su texto. Los enlaces de icono o de imagen sin nombre, como los del carrito, la cuenta, las redes sociales o las imágenes de producto, se anuncian como «enlace» o como una dirección web, así que los clientes no encuentran el carrito ni pueden abrir un producto.

ID de la regla
link-name
Origen
axe-core 4.13.0
Impacto
Grave
Nivel de corrección
ASSISTED
en Shopify, Shopware, WooCommerce y Magento
Estado
se ejecuta

Qué hace la comprobación

Comprueba que los enlaces tienen texto perceptible

La regla comprueba cada elemento <a> con un atributo href, no los elementos que son enlaces solo mediante role="link". Los enlaces ocultos para los productos de apoyo, por ejemplo con display: none o aria-hidden="true" en el enlace o en un ancestro, se omiten.

Un enlace supera la prueba cuando una fuente le da un texto que no está vacío tras quitar los espacios iniciales y finales: su contenido, incluido el texto alt de una imagen que contenga; un aria-label; un aria-labelledby que apunte a un elemento con texto; o un title. Un aria-labelledby que apunta a un elemento inexistente o vacío no cuenta. Un enlace en el orden de tabulación del teclado necesita además un nombre calculado no vacío, y role="none" o role="presentation" en un enlace vacío no evita que falle.

Cuando axe-core no puede calcular el texto de un enlace, puede comunicarlo como «pendiente de revisión» en lugar de darlo por fallido, y el escáner de Validiscan no convierte los resultados pendientes de revisión en hallazgos. La regla solo comprueba que exista un nombre; los textos genéricos como «leer más» son objeto de otra comprobación, vs-link-purpose.

Cómo corregirlo

Dé a cada enlace un nombre perceptible: texto visible, texto alternativo en una imagen dentro del enlace, un aria-label en los enlaces que solo tienen un icono (por ejemplo aria-label="Carrito, 2 artículos") o texto oculto visualmente. Oculte los iconos decorativos del enlace con aria-hidden="true".

Criterios de conformidad de las WCAG

Apartados de la norma EN 301 549

El apartado de la norma EN 301 549 que corresponde a cada criterio, por versión de la norma
Criterio de las WCAG Versión 3.2.1 Versión 4.1.1
2.4.4 9.2.4.4 9.2.4.4
4.1.2 9.4.1.2 9.4.1.2

Recetas que enumeran esta regla

Esta regla tiene el nivel ASSISTED. En un proyecto, un hallazgo de esta regla sigue la vía ASSISTED, y estas recetas no se le aplican.

Shopify: receta icon-accessible-name

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

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

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

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

Cambios en sections/header.liquid (líneas añadidas: 1; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
40 40 <input class="search__input field__input" type="search" name="q" value="" placeholder="{{ 'general.search.placeholder' | t }}" tabindex="1">
41 41 <button type="submit" class="search__button">
42 42 {%- render 'icon', icon: 'search', size: 20 -%}
43 Añadida <span class="visually-hidden">{{ 'general.search.search' | t }}</span>
43 44 </button>
44 45 </form>
45 46 </div>

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

Cambios en sections/main-product.liquid (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
88 88 <p class="form__label">{{ option.name | escape }}</p>
89 89 <div class="swatch-list swatch-list--compact">
90 90 {%- for swatch in option.swatches %}
91 Eliminada <button type="button" class="swatch swatch--button{% if swatch.selected %} swatch--active{% endif %}" style="--swatch-color: {{ swatch.color }};" data-option-index="{{ option_index }}" data-value="{{ swatch.value | escape }}"></button>
91 Añadida <button type="button" class="swatch swatch--button{% if swatch.selected %} swatch--active{% endif %}" style="--swatch-color: {{ swatch.color }};" data-option-index="{{ option_index }}" data-value="{{ swatch.value | escape }}"><span class="visually-hidden">{{ swatch.value | escape }}</span></button>
92 92 {%- endfor %}
93 93 </div>
94 94 </div>

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

Cambios en sections/slideshow.liquid (líneas añadidas: 2; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
59 59 <div class="slideshow__controls">
60 60 <button type="button" class="slider-button slider-button--prev" name="previous" data-slide-prev>
61 61 {%- render 'icon', icon: 'chevron-left', size: 20 -%}
62 Añadida <span class="visually-hidden">{{ 'accessibility.previous_slide' | t }}</span>
62 63 </button>
63 64 <div class="slider-counter">
64 65 {%- for block in section.blocks %}
67 68 </div>
68 69 <button type="button" class="slider-button slider-button--next" name="next" data-slide-next>
69 70 {%- render 'icon', icon: 'chevron-right', size: 20 -%}
71 Añadida <span class="visually-hidden">{{ 'accessibility.next_slide' | t }}</span>
70 72 </button>
71 73 </div>
72 74 </slideshow-component>

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

Cambios en snippets/cookie-banner.liquid (líneas añadidas: 2; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
23 23 <div class="cookie-banner__actions">
24 24 <button type="button" class="cookie-banner__icon-button cookie-banner__icon-button--accept" data-cookie-accept>
25 25 {%- render 'icon', icon: 'check', size: 20 -%}
26 Añadida <span class="visually-hidden">{{ 'accessibility.accept_cookies' | t }}</span>
26 27 </button>
27 28 <button type="button" class="cookie-banner__icon-button" data-cookie-reject>
28 29 {%- render 'icon', icon: 'close', size: 20 -%}
30 Añadida <span class="visually-hidden">{{ 'accessibility.reject_cookies' | t }}</span>
29 31 </button>
30 32 </div>
31 33 </div>

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

Cambios en snippets/quantity-input.liquid (líneas añadidas: 2; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
9 9 {%- endcomment -%}
10 10 <div class="quantity quantity--compact" data-quantity{% if line %} data-line="{{ line }}"{% endif %}><button class="quantity__button" name="minus" type="button" data-quantity-minus>
11 11 {%- render 'icon', icon: 'minus', size: 12 -%}
12 Añadida <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product_title }}</span>
12 13 </button>
13 14 <input class="quantity__input" type="number" name="{{ input_name }}" id="{{ input_id }}" value="{{ value | default: 1 }}" min="{% if line %}0{% else %}1{% endif %}" data-quantity-input>
14 15 <button class="quantity__button" name="plus" type="button" data-quantity-plus>
15 16 {%- render 'icon', icon: 'plus', size: 12 -%}
17 Añadida <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product_title }}</span>
16 18 </button></div>
links Datos de ejemplo

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

Cambios en sections/footer.liquid (líneas añadidas: 1; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
37 37 {%- for social in shop.social %}
38 38 <a href="{{ social.url }}" class="list-social__link link">
39 39 {%- render 'icon', icon: social.icon, size: 20 -%}
40 Añadida <span class="visually-hidden">{{ 'general.social.links.' | append: social.icon | t }}</span>
40 41 </a>
41 42 {%- endfor %}
42 43 </ul>

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

Cambios en sections/header.liquid (líneas añadidas: 3; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
22 22 </details>
23 23
24 24 {% if logo_is_heading %}<h1 class="header__heading">{% else %}<div class="header__heading">{% endif %}
25 Eliminada <a href="{{ routes.root_url }}" class="header__heading-link"><img src="{{ 'logo.svg' | asset_url }}" width="{{ settings.logo_width }}" height="32" class="header__heading-logo"></a>
25 Añadida <a href="{{ routes.root_url }}" class="header__heading-link"><img src="{{ 'logo.svg' | asset_url }}" width="{{ settings.logo_width }}" height="32" class="header__heading-logo" alt="{{ shop.name | escape }}"></a>
26 26 {% if logo_is_heading %}</h1>{% else %}</div>{% endif %}
27 27
28 28 <nav class="header__inline-menu">
50 50 {%- endif %}
51 51 <a href="{{ routes.account_login_url }}" class="header__icon header__icon--account link">
52 52 {%- render 'icon', icon: 'account', size: icon_size -%}
53 Añadida <span class="visually-hidden">{{ 'sections.header.account' | t }}</span>
53 54 </a>
54 55 <a href="{{ routes.cart_url }}" class="header__icon header__icon--cart link" id="cart-icon-bubble">
55 56 {%- render 'icon', icon: 'cart', size: icon_size -%}
57 58 <span class="cart-count-bubble" aria-hidden="true"><span data-cart-count>{{ cart.item_count }}</span></span>
58 59 {%- endif -%}
59 60
61 Añadida <span class="visually-hidden">{{ 'sections.header.cart' | t }}</span>
60 62 </a>
61 63 </div>
62 64 </header>

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

Cambios en sections/main-cart.liquid (líneas añadidas: 1; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
26 26 {% render 'quantity-input', input_id: qty_id, input_name: 'updates[]', value: item.quantity, product_title: item.product.title, line: line %}
27 27 <a href="{{ routes.cart_change_url }}?line={{ line }}&amp;quantity=0" class="cart-item__remove cart-item__remove--compact" data-cart-remove>
28 28 {%- render 'icon', icon: 'trash', size: 16 -%}
29 Añadida <span class="visually-hidden">{{ 'sections.cart.remove' | t: title: item.product.title }}</span>
29 30 </a>
30 31 </div>
31 32 <div class="cart-item__totals">

Shopware: receta icon-accessible-name

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

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

Cambios en Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (líneas añadidas: 12; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
193 193 "notFoundText": "Die gesuchte Seite existiert nicht oder wurde verschoben.",
194 194 "backToHome": "Zurück zur Startseite",
195 195 "searchInstead": "Unsere Kaffees durchsuchen"
196 Añadida },
197 Añadida "a11y": {
198 Añadida "control": {
199 Añadida "search": "Suchen",
200 Añadida "previousSlide": "Vorherige Folie",
201 Añadida "nextSlide": "Nächste Folie",
202 Añadida "cookieSettings": "Cookie-Einstellungen",
203 Añadida "acceptCookies": "Alle Cookies akzeptieren",
204 Añadida "decreaseQuantity": "Menge verringern",
205 Añadida "increaseQuantity": "Menge erhöhen",
206 Añadida "removeFromCart": "Aus dem Warenkorb entfernen"
207 Añadida }
196 208 }
197 209 }

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

Cambios en Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (líneas añadidas: 12; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
193 193 "notFoundText": "The page you are looking for does not exist or has moved.",
194 194 "backToHome": "Back to the homepage",
195 195 "searchInstead": "Search our coffees"
196 Añadida },
197 Añadida "a11y": {
198 Añadida "control": {
199 Añadida "search": "Search",
200 Añadida "previousSlide": "Previous slide",
201 Añadida "nextSlide": "Next slide",
202 Añadida "cookieSettings": "Cookie settings",
203 Añadida "acceptCookies": "Accept all cookies",
204 Añadida "decreaseQuantity": "Decrease quantity",
205 Añadida "increaseQuantity": "Increase quantity",
206 Añadida "removeFromCart": "Remove from cart"
207 Añadida }
196 208 }
197 209 }

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

Cambios en Resources/views/storefront/element/cms-element-image-gallery.html.twig (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
31 31
32 32 {% if media|length > 1 %}
33 33 <div class="gallery-slider-controls">
34 Eliminada <button type="button" class="base-slider-controls-prev gallery-slider-controls-prev" data-gallery-prev>
34 Añadida <button type="button" class="base-slider-controls-prev gallery-slider-controls-prev" data-gallery-prev aria-label="{{ 'a11y.control.previousSlide'|trans|striptags }}">
35 35 {% sw_icon 'arrow-head-left' %}
36 36 </button>
37 Eliminada <button type="button" class="base-slider-controls-next gallery-slider-controls-next" data-gallery-next>
37 Añadida <button type="button" class="base-slider-controls-next gallery-slider-controls-next" data-gallery-next aria-label="{{ 'a11y.control.nextSlide'|trans|striptags }}">
38 38 {% sw_icon 'arrow-head-right' %}
39 39 </button>
40 40 </div>

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

Cambios en Resources/views/storefront/element/cms-element-image-slider.html.twig (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
46 46
47 47 {% block element_image_slider_controls %}
48 48 <div class="image-slider-controls-container">
49 Eliminada <button type="button" class="base-slider-controls-prev image-slider-controls-btn" data-slide-prev>
49 Añadida <button type="button" class="base-slider-controls-prev image-slider-controls-btn" data-slide-prev aria-label="{{ 'a11y.control.previousSlide'|trans|striptags }}">
50 50 {% sw_icon 'arrow-head-left' %}
51 51 </button>
52 52 <ol class="base-slider-dots">
54 54 <li class="base-slider-dot{% if loop.first %} is-active{% endif %}" data-slide-to="{{ loop.index0 }}"></li>
55 55 {% endfor %}
56 56 </ol>
57 Eliminada <button type="button" class="base-slider-controls-next image-slider-controls-btn" data-slide-next>
57 Añadida <button type="button" class="base-slider-controls-next image-slider-controls-btn" data-slide-next aria-label="{{ 'a11y.control.nextSlide'|trans|striptags }}">
58 58 {% sw_icon 'arrow-head-right' %}
59 59 </button>
60 60 </div>

Resources/views/storefront/layout/cookie/cookie-permission.html.twig Cambios en Resources/views/storefront/layout/cookie/cookie-permission.html.twig (líneas añadidas: 2; eliminadas: 2)

Cambios en Resources/views/storefront/layout/cookie/cookie-permission.html.twig (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
22 22 </p>
23 23 </div>
24 24 <div class="col-auto cookie-permission-actions">
25 Eliminada <button type="button" class="btn cookie-permission-icon-btn js-cookie-configuration-toggle">{% sw_icon 'settings' %}</button>
26 Eliminada <button type="button" class="btn btn-primary cookie-permission-icon-btn js-cookie-accept-all-button">{% sw_icon 'checkmark' %}</button>
25 Añadida <button type="button" class="btn cookie-permission-icon-btn js-cookie-configuration-toggle" aria-label="{{ 'a11y.control.cookieSettings'|trans|striptags }}">{% sw_icon 'settings' %}</button>
26 Añadida <button type="button" class="btn btn-primary cookie-permission-icon-btn js-cookie-accept-all-button" aria-label="{{ 'a11y.control.acceptCookies'|trans|striptags }}">{% sw_icon 'checkmark' %}</button>
27 27 </div>
28 28 </div>
29 29 <p class="cookie-permission-configuration" hidden>{{ 'cookie.configurationText'|trans }}</p>

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

Cambios en Resources/views/storefront/layout/header/search.html.twig (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
13 13 autocomplete="off"
14 14 autocapitalize="off"
15 15 placeholder="{{ 'header.searchPlaceholder'|trans }}" value="{{ page.searchTerm }}">
16 Eliminada <button type="submit" class="btn header-search-btn">
16 Añadida <button type="submit" class="btn header-search-btn" aria-label="{{ 'a11y.control.search'|trans|striptags }}">
17 17 <span class="header-search-icon">{% sw_icon 'search' %}</span>
18 18 </button>
19 19 </div>

Resources/views/storefront/page/checkout/cart/index.html.twig Cambios en Resources/views/storefront/page/checkout/cart/index.html.twig (líneas añadidas: 3; eliminadas: 3)

Cambios en Resources/views/storefront/page/checkout/cart/index.html.twig (líneas añadidas: 3; eliminadas: 3)
Línea anterior Línea nueva Cambio Código
39 39 </div>
40 40 <div class="line-item-quantity">
41 41 <div class="input-group quantity-selector-group" data-quantity-selector="true">
42 Eliminada <button type="button" class="btn btn-outline-light btn-minus js-btn-minus">
42 Añadida <button type="button" class="btn btn-outline-light btn-minus js-btn-minus" aria-label="{{ 'a11y.control.decreaseQuantity'|trans|striptags }}">
43 43 {% sw_icon 'minus' style { size: 'xs' } %}
44 44 </button>
45 45 <input type="number"
50 50 max="100"
51 51 step="1"
52 52 value="{{ item.quantity }}">
53 Eliminada <button type="button" class="btn btn-outline-light btn-plus js-btn-plus">
53 Añadida <button type="button" class="btn btn-outline-light btn-plus js-btn-plus" aria-label="{{ 'a11y.control.increaseQuantity'|trans|striptags }}">
54 54 {% sw_icon 'plus' style { size: 'xs' } %}
55 55 </button>
56 56 </div>
64 64 <span class="line-item-total-price-value" data-line-total>{{ item.totalPrice|currency }}*</span>
65 65 </div>
66 66 <div class="line-item-remove">
67 Eliminada <button type="button" class="btn btn-light btn-sm line-item-remove-button">
67 Añadida <button type="button" class="btn btn-light btn-sm line-item-remove-button" aria-label="{{ 'a11y.control.removeFromCart'|trans|striptags }}">
68 68 {% sw_icon 'x' style { size: 'xs' } %}
69 69 </button>
70 70 </div>

Resources/views/storefront/page/product-detail/buy-widget.html.twig Cambios en Resources/views/storefront/page/product-detail/buy-widget.html.twig (líneas añadidas: 2; eliminadas: 2)

Cambios en Resources/views/storefront/page/product-detail/buy-widget.html.twig (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
64 64 <div class="buy-widget-container">
65 65 <div class="buy-widget-quantity">
66 66 <div class="input-group quantity-selector-group" data-quantity-selector="true">
67 Eliminada <button type="button" class="btn btn-outline-light btn-minus js-btn-minus">
67 Añadida <button type="button" class="btn btn-outline-light btn-minus js-btn-minus" aria-label="{{ 'a11y.control.decreaseQuantity'|trans|striptags }}">
68 68 {% sw_icon 'minus' style { size: 'xs' } %}
69 69 </button>
70 70 <input type="number"
75 75 max="100"
76 76 step="1"
77 77 value="1">
78 Eliminada <button type="button" class="btn btn-outline-light btn-plus js-btn-plus">
78 Añadida <button type="button" class="btn btn-outline-light btn-plus js-btn-plus" aria-label="{{ 'a11y.control.increaseQuantity'|trans|striptags }}">
79 79 {% sw_icon 'plus' style { size: 'xs' } %}
80 80 </button>
81 81 </div>
names the logo and account links; social links whose network is data are left for review Datos de ejemplo

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

Cambios en Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (líneas añadidas: 6; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
193 193 "notFoundText": "Die gesuchte Seite existiert nicht oder wurde verschoben.",
194 194 "backToHome": "Zurück zur Startseite",
195 195 "searchInstead": "Unsere Kaffees durchsuchen"
196 Añadida },
197 Añadida "a11y": {
198 Añadida "control": {
199 Añadida "home": "Zur Startseite",
200 Añadida "account": "Ihr Konto"
201 Añadida }
196 202 }
197 203 }

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

Cambios en Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (líneas añadidas: 6; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
193 193 "notFoundText": "The page you are looking for does not exist or has moved.",
194 194 "backToHome": "Back to the homepage",
195 195 "searchInstead": "Search our coffees"
196 Añadida },
197 Añadida "a11y": {
198 Añadida "control": {
199 Añadida "home": "Go to the homepage",
200 Añadida "account": "Your account"
201 Añadida }
196 202 }
197 203 }

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

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

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

Cambios en Resources/views/storefront/layout/header/logo.html.twig (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
2 2 <div class="header-logo-main">
3 3 {% block layout_header_logo_link %}
4 4 {# The agency removed the default title="Go to homepage" and the image alt to "avoid duplicate announcements". #}
5 Eliminada <a class="header-logo-main-link" href="{{ url('/') }}">
5 Añadida <a class="header-logo-main-link" href="{{ url('/') }}" aria-label="{{ 'a11y.control.home'|trans|striptags }}">
6 6 {% block layout_header_logo_image %}
7 7 <picture class="header-logo-picture">
8 8 <img src="{{ asset('bundles/storefront/assets/logo/kaffeekontor-nord-logo.svg') }}"

WooCommerce: receta icon-accessible-name

Mostrar el antes y el después (2)
names the account link and the social links, and leaves the uncertain gallery link Datos de ejemplo

header.php Cambios en header.php (líneas añadidas: 1; eliminadas: 1)

Cambios en header.php (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
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 Eliminada <a class="kb-account-link" href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>"><?php kb_icon( 'user' ); ?></a>
63 Añadida <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 Cambios en template-parts/social-links.php (líneas añadidas: 1; eliminadas: 1)

Cambios en template-parts/social-links.php (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
17 17 ?>
18 18 <ul class="kb-social">
19 19 <?php foreach ( $kb_profiles as $kb_network => $kb_url ) : ?>
20 Eliminada <a class="kb-social__link" href="<?php echo esc_url( $kb_url ); ?>"><?php kb_icon( $kb_network ); ?></a>
20 Añadida <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 Datos de ejemplo

header.php Cambios en header.php (líneas añadidas: 1; eliminadas: 1)

Cambios en header.php (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
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 Eliminada <button type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" class="kb-search-submit"><?php kb_icon( 'search' ); ?></button>
54 Añadida <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 Cambios en woocommerce/myaccount/form-login.php (líneas añadidas: 1; eliminadas: 1)

Cambios en woocommerce/myaccount/form-login.php (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
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 Eliminada <button type="button" class="show-password-input"><?php kb_icon( 'eye' ); ?></button>
38 Añadida <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: receta icon-accessible-name

Mostrar el antes y el después (2)
names the icon-only search button and validates Datos de ejemplo

app/design/frontend/Validiscan/fixture/Magento_Search/templates/form.mini.phtml Cambios en app/design/frontend/Validiscan/fixture/Magento_Search/templates/form.mini.phtml (líneas añadidas: 1; eliminadas: 1)

Cambios en app/design/frontend/Validiscan/fixture/Magento_Search/templates/form.mini.phtml (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
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 Eliminada <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 Añadida <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 Datos de ejemplo

app/design/frontend/Validiscan/fixture/Magento_Checkout/templates/cart/minicart.phtml Cambios en app/design/frontend/Validiscan/fixture/Magento_Checkout/templates/cart/minicart.phtml (líneas añadidas: 1; eliminadas: 1)

Cambios en app/design/frontend/Validiscan/fixture/Magento_Checkout/templates/cart/minicart.phtml (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
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 Eliminada <a class="action showcart" href="<?= $escaper->escapeUrl($block->getShoppingCartUrl()) ?>" data-bind="scope: 'minicart_content'" aria-haspopup="true" aria-expanded="closed">
16 Añadida <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>

Empiece con una revisión gratuita de su tienda.

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

Solicitar revisión gratuita

O escriba a info@validiscan.com.

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

Escribir a Validiscan

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

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