Validiscan
Menú

Idioma

El destino del enlace de salto debería existir y poder recibir el foco

Un enlace «Saltar al contenido» permite a quienes usan el teclado o un lector de pantalla saltarse la cabecera y el menú. Si su destino no existe o no puede recibir el foco, el enlace no hace nada y los clientes tienen que recorrer con el tabulador toda la navegación en cada página.

Solicitar revisión gratuita
ID de la regla
skip-link
Origen
axe-core 4.13.0
Impacto
Moderado
Nivel de corrección
AUTO
en Shopify, Shopware, WooCommerce y Magento
Estado
se ejecuta

Qué hace la comprobación

Comprueba que todos los enlaces de salto tienen un destino que puede recibir el foco

La regla examina los elementos <a> cuyo href empieza por # o /#. Solo trata uno de ellos como enlace de salto cuando ningún enlace anterior lleva fuera de la página actual; un href que sea solo #, o que empiece por #! o #/, cuenta como un enlace que sale de ella. Prueba únicamente los enlaces de salto situados fuera del área de la página durante el escaneo, por ejemplo desplazados más allá del borde izquierdo con un left negativo grande. Un enlace de salto dentro del área de la página, u oculto con display: none, no se prueba.

axe-core toma la parte que sigue a # y busca un elemento con ese id, y después uno con ese atributo name. Si no hay ninguna coincidencia, el enlace no supera la regla. Si los productos de apoyo pueden leer el elemento encontrado, el enlace supera la regla. Si está oculto para ellos, el enlace solo se marca como «pendiente de revisión», y el escáner de Validiscan conserva únicamente los fallos de esta regla de buenas prácticas.

Pese al título de la regla, la comprobación no prueba si el destino puede recibir el foco, ni si el enlace se hace visible al enfocarlo. Para ambas cosas hace falta una persona con un teclado.

Cómo corregirlo

Haga que cada enlace de salto apunte a un elemento que exista en todas las páginas, normalmente <main id="MainContent" tabindex="-1">, y asegúrese de que el id coincide exactamente con el href del enlace. Muestre el enlace de salto de forma visible cuando reciba el foco del teclado.

Criterios de conformidad de las WCAG

Buena práctica: no está vinculada a ningún criterio de conformidad de las WCAG.

Dónde lo corrige una receta

Shopify: receta skip-link-main

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

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

Cambios en assets/base.css.liquid (líneas añadidas: 30; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
1866 1866 }
1867 1867
1868 1868 /* ----------------------------------------------------------------- motion */
1869 Añadida
1870 Añadida /* validiscan:skip-link-main */
1871 Añadida .skip-to-content-link:not(:focus) {
1872 Añadida position: absolute !important;
1873 Añadida overflow: hidden;
1874 Añadida width: 1px;
1875 Añadida height: 1px;
1876 Añadida margin: -1px;
1877 Añadida padding: 0;
1878 Añadida border: 0;
1879 Añadida clip: rect(0 0 0 0);
1880 Añadida white-space: nowrap;
1881 Añadida }
1882 Añadida
1883 Añadida .skip-to-content-link:focus {
1884 Añadida z-index: 9999;
1885 Añadida position: fixed !important;
1886 Añadida top: 0.5rem;
1887 Añadida left: 0.5rem;
1888 Añadida overflow: visible;
1889 Añadida width: auto;
1890 Añadida height: auto;
1891 Añadida margin: 0;
1892 Añadida padding: 0.75rem 1.25rem;
1893 Añadida clip: auto;
1894 Añadida background-color: #ffffff;
1895 Añadida color: #121212;
1896 Añadida text-decoration: underline;
1897 Añadida }
1898 Añadida /* /validiscan:skip-link-main */

layout/checkout.liquid Cambios en layout/checkout.liquid (líneas añadidas: 4; eliminadas: 3)

Cambios en layout/checkout.liquid (líneas añadidas: 4; eliminadas: 3)
Línea anterior Línea nueva Cambio Código
18 18 </head>
19 19
20 20 <body class="template-checkout">
21 Añadida <a class="skip-to-content-link" href="#MainContent">{{ 'accessibility.skip_to_text' | t }}</a>
21 22 <header class="checkout-header">
22 23 <div class="page-width checkout-header__inner">
23 24 <a href="{{ routes.root_url }}" class="checkout-header__logo"><img src="{{ 'logo.svg' | asset_url }}" width="140" height="32"></a>
24 Eliminada <nav class="checkout-breadcrumb">
25 Añadida <nav class="checkout-breadcrumb" aria-label="{{ 'accessibility.breadcrumbs' | t | escape }}">
25 26 <ol class="checkout-breadcrumb__list" role="list">
26 27 <li><a href="{{ routes.cart_url }}" class="checkout-breadcrumb__link">Cart</a></li>
27 28 <li><span class="checkout-breadcrumb__current">Information</span></li>
31 32 </nav>
32 33 </div>
33 34 </header>
34 Eliminada <div class="main checkout" id="MainContent">
35 Añadida <main class="main checkout" id="MainContent" tabindex="-1">
35 36 {{ content_for_layout }}
36 Eliminada </div>
37 Añadida </main>
37 38
38 39 <footer class="checkout-footer">
39 40 <div class="page-width">

layout/theme.focused.liquid Cambios en layout/theme.focused.liquid (líneas añadidas: 1; eliminadas: 0)

Cambios en layout/theme.focused.liquid (líneas añadidas: 1; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
22 22 </head>
23 23
24 24 <body class="gradient template-{{ template.name | handleize }} layout-focused">
25 Añadida <a class="skip-to-content-link" href="#MainContent">{{ 'accessibility.skip_to_text' | t }}</a>
25 26 {% section 'header' %}
26 27
27 28 <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">

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

Cambios en layout/theme.liquid (líneas añadidas: 1; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
28 28 </head>
29 29
30 30 <body class="gradient template-{{ template.name | handleize }}">
31 Añadida <a class="skip-to-content-link" href="#MainContent">{{ 'accessibility.skip_to_text' | t }}</a>
31 32
32 33 {% sections 'header-group' %}
33 34

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 "breadcrumbs": "Breadcrumbs",
39 Añadida "mobile_menu": "Mobile menu"
38 40 },
39 41 "sections": {
40 42 "header": {

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

Cambios en sections/footer.liquid (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
17 17 {%- endform -%}
18 18 </div>
19 19
20 Eliminada <nav class="footer__menus">
20 Añadida <nav class="footer__menus" aria-label="{{ 'sections.footer.menu' | t | escape }}">
21 21 {%- for handle in menu_handles %}
22 22 {%- assign footer_menu = linklists[handle] %}
23 23 <div class="footer-block footer-block--menu">

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

Cambios en sections/header.liquid (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
11 11 {%- render 'icon', icon: 'menu', size: icon_size -%}
12 12 </summary>
13 13 <div class="menu-drawer">
14 Eliminada <nav class="menu-drawer__navigation">
14 Añadida <nav class="menu-drawer__navigation" aria-label="{{ 'accessibility.mobile_menu' | t | escape }}">
15 15 <ul class="menu-drawer__menu list-unstyled" role="list">
16 16 {%- for link in menu.links %}
17 17 <li><a href="{{ link.url }}" class="menu-drawer__menu-item">{{ link.title | escape }}</a></li>
25 25 <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>
26 26 {% if logo_is_heading %}</h1>{% else %}</div>{% endif %}
27 27
28 Eliminada <nav class="header__inline-menu">
28 Añadida <nav class="header__inline-menu" aria-label="{{ 'sections.header.main_menu' | t | escape }}">
29 29 <ul class="list-menu list-menu--inline" role="list">
30 30 {%- for link in menu.links %}
31 31 <li>

Shopware: receta skip-link-main

Mostrar el antes y el después (1)
adds a skip link, a <main> landmark and navigation names; the landmark problems are gone Datos de ejemplo

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

Cambios en Resources/app/storefront/src/scss/base.scss (líneas añadidas: 24; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
1708 1708 margin: 8px 0 0;
1709 1709 font-size: 0.875rem;
1710 1710 }
1711 Añadida
1712 Añadida /* validiscan:skip-link-main */
1713 Añadida /* Skip link: parked off-screen, shown at the top left when it receives keyboard focus (WCAG 2.4.1). */
1714 Añadida .skip-to-content-link {
1715 Añadida position: absolute;
1716 Añadida top: 8px;
1717 Añadida left: -10000px;
1718 Añadida z-index: 10000;
1719 Añadida padding: 12px 16px;
1720 Añadida border: 2px solid #1f2328;
1721 Añadida background: #ffffff;
1722 Añadida color: #1f2328;
1723 Añadida font-weight: 700;
1724 Añadida }
1725 Añadida
1726 Añadida .skip-to-content-link:focus {
1727 Añadida left: 8px;
1728 Añadida }
1729 Añadida
1730 Añadida /* The skip target takes focus programmatically; it needs no focus ring of its own. */
1731 Añadida #content-main:focus {
1732 Añadida outline: none;
1733 Añadida }
1734 Añadida /* /validiscan:skip-link-main */

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

Cambios en Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json (líneas añadidas: 7; 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 "navigation": {
199 Añadida "breadcrumb": "Brotkrümelnavigation",
200 Añadida "service": "Servicenavigation",
201 Añadida "main": "Hauptnavigation"
202 Añadida }
196 203 }
197 204 }

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

Cambios en Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json (líneas añadidas: 7; 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 "navigation": {
199 Añadida "breadcrumb": "Breadcrumb",
200 Añadida "service": "Service navigation",
201 Añadida "main": "Main navigation"
202 Añadida }
196 203 }
197 204 }

Resources/views/storefront/base.html.twig Cambios en Resources/views/storefront/base.html.twig (líneas añadidas: 4; eliminadas: 3)

Cambios en Resources/views/storefront/base.html.twig (líneas añadidas: 4; eliminadas: 3)
Línea anterior Línea nueva Cambio Código
22 22 <body class="{% block base_body_classes %}is-ctl-{{ page.controllerName }} is-act-{{ page.controllerAction }} sw-storefront sw-theme-kaffeekontor-nord{% endblock %}">
23 23
24 24 {% block base_body_skip_to_content %}
25 Eliminada {% endblock %}
25 Añadida <a class="skip-to-content-link" href="#content-main">{{ 'general.skipToContent'|trans|sw_sanitize }}</a>
26 Añadida {% endblock %}
26 27
27 28 {% block base_body_inner %}
28 29 {% block base_noscript %}
48 49 {% endblock %}
49 50
50 51 {% block base_main %}
51 Eliminada <div class="content-main">
52 Añadida <main class="content-main" id="content-main" tabindex="-1">
52 53 {% block base_main_inner %}
53 54 <div class="container">
54 55 {% block base_main_container %}
64 65 {% endblock %}
65 66 </div>
66 67 {% endblock %}
67 Eliminada </div>
68 Añadida </main>
68 69 {% endblock %}
69 70
70 71 {% block base_footer %}

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

Cambios en Resources/views/storefront/layout/breadcrumb.html.twig (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
1 1 {% block layout_breadcrumb %}
2 Eliminada <nav class="breadcrumb-nav">
2 Añadida <nav class="breadcrumb-nav" aria-label="{{ 'a11y.navigation.breadcrumb'|trans|striptags }}">
3 3 <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
4 4 {% for item in items %}
5 5 <li class="breadcrumb-item{% if loop.last %} active{% endif %}"

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

Cambios en Resources/views/storefront/layout/footer/footer.html.twig (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
23 23 {% block layout_footer_navigation_service %}
24 24 <div class="col-md-6 col-lg-3 footer-column">
25 25 <div class="footer-column-headline" id="footer-headline-service">{{ 'footer.serviceMenuHeadline'|trans }}</div>
26 Eliminada <nav class="footer-column-content">
26 Añadida <nav class="footer-column-content" aria-labelledby="footer-headline-service">
27 27 <ul class="list-unstyled footer-service-menu-list">
28 28 <li class="footer-service-menu-item"><a class="footer-link" href="{{ url('/contact') }}">{{ 'footer.linkContact'|trans }}</a></li>
29 29 <li class="footer-service-menu-item"><a class="footer-link" href="{{ url('/brewing-guide') }}">{{ 'footer.linkBrewingGuide'|trans }}</a></li>
38 38 {% block layout_footer_navigation_information %}
39 39 <div class="col-md-6 col-lg-3 footer-column">
40 40 <div class="footer-column-headline" id="footer-headline-information">{{ 'footer.informationHeadline'|trans }}</div>
41 Eliminada <nav class="footer-column-content">
41 Añadida <nav class="footer-column-content" aria-labelledby="footer-headline-information">
42 42 <ul class="list-unstyled footer-service-menu-list">
43 43 {% for category in categories %}
44 44 <li class="footer-service-menu-item"><a class="footer-link" href="{{ category.url }}">{{ category.name }}</a></li>

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

Cambios en Resources/views/storefront/layout/header/top-bar.html.twig (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
1 1 {% block layout_header_top_bar %}
2 2 <div class="top-bar">
3 Eliminada <nav class="top-bar-nav">
3 Añadida <nav class="top-bar-nav" aria-label="{{ 'a11y.navigation.service'|trans|striptags }}">
4 4 {% block layout_header_top_bar_usp %}
5 5 <p class="top-bar-usp">
6 6 {% sw_icon 'checkmark' style { size: 'xs' } %}

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

Cambios en Resources/views/storefront/layout/navigation/navigation.html.twig (líneas añadidas: 2; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
3 3 <div class="container">
4 4 {% block layout_main_navigation_menu %}
5 5 <nav class="nav main-navigation-menu" itemscope="itemscope"
6 Eliminada itemtype="https://schema.org/SiteNavigationElement">
6 Añadida itemtype="https://schema.org/SiteNavigationElement"
7 Añadida aria-label="{{ 'a11y.navigation.main'|trans|striptags }}">
7 8 {% block layout_main_navigation_menu_items %}
8 9 {% for item in navigation %}
9 10 {% set active = item.id == page.activeNavigationId %}

WooCommerce: receta skip-link-main

Mostrar el antes y el después (1)
restores the skip links, adds <main> and labels the navigation of the fixture theme Datos de ejemplo

404.php Cambios en 404.php (líneas añadidas: 2; eliminadas: 2)

Cambios en 404.php (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
9 9 ?>
10 10
11 11 <div id="primary" class="content-area">
12 Eliminada <div id="main" class="site-main">
12 Añadida <main id="main" class="site-main">
13 13 <div class="error-404 not-found">
14 14 <div class="page-content">
15 15 <header class="page-header">
22 22 </section>
23 23 </div>
24 24 </div>
25 Eliminada </div><!-- #main -->
25 Añadida </main><!-- #main -->
26 26 </div><!-- #primary -->
27 27
28 28 <?php

archive-product.php Cambios en archive-product.php (líneas añadidas: 2; eliminadas: 2)

Cambios en archive-product.php (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
22 22
23 23 <div id="primary" class="content-area">
24 24 <?php // VALIDISCAN-SEED vs-headings-landmarks + region: <div> instead of <main>. ?>
25 Eliminada <div id="main" class="site-main">
25 Añadida <main id="main" class="site-main">
26 26
27 27 <header class="woocommerce-products-header">
28 28 <h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
46 46 <?php do_action( 'woocommerce_no_products_found' ); ?>
47 47 <?php endif; ?>
48 48
49 Eliminada </div><!-- #main -->
49 Añadida </main><!-- #main -->
50 50 </div><!-- #primary -->
51 51
52 52 <?php // The sidebar div gets role="complementary" but no label (VALIDISCAN-SEED landmark-unique on pages with two). ?>

front-page.php Cambios en front-page.php (líneas añadidas: 2; eliminadas: 2)

Cambios en front-page.php (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
18 18
19 19 <div id="primary" class="content-area">
20 20 <?php // VALIDISCAN-SEED vs-headings-landmarks + region: the content wrapper is a <div>, not <main>. ?>
21 Eliminada <div id="main" class="site-main">
21 Añadida <main id="main" class="site-main">
22 22
23 23 <?php get_template_part( 'template-parts/hero-slider' ); ?>
24 24
62 62 ?>
63 63 </section>
64 64
65 Eliminada </div><!-- #main -->
65 Añadida </main><!-- #main -->
66 66 </div><!-- #primary -->
67 67
68 68 <?php

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

Cambios en functions.php (líneas añadidas: 1; eliminadas: 4)
Línea anterior Línea nueva Cambio Código
32 32 * Storefront pieces the child theme does not use.
33 33 */
34 34 function kb_remove_storefront_parts() {
35 Eliminada // VALIDISCAN-SEED vs-headings-landmarks: Storefront's "Skip to navigation / Skip to content"
36 Eliminada // links are removed because "they flash on the first Tab"; nothing replaces them.
37 Eliminada remove_action( 'storefront_before_header', 'storefront_skip_links', 0 );
38 35 remove_action( 'storefront_footer', 'storefront_handheld_footer_bar', 999 );
39 36 remove_action( 'storefront_header', 'storefront_product_search', 40 );
40 37 }
212 209 $defaults['delimiter'] = '<span class="breadcrumb-separator"> / </span>';
213 210 // VALIDISCAN-SEED landmark-unique + vs-headings-landmarks: the breadcrumb <nav> has no aria-label,
214 211 // like the primary and the footer navigation.
215 Eliminada $defaults['wrap_before'] = '<div class="storefront-breadcrumb"><div class="col-full"><nav class="woocommerce-breadcrumb">';
212 Añadida $defaults['wrap_before'] = '<div class="storefront-breadcrumb"><div class="col-full"><nav class="woocommerce-breadcrumb" aria-label="' . esc_attr__( 'Breadcrumb', 'kestrel-birch' ) . '">';
216 213 $defaults['wrap_after'] = '</nav></div></div>';
217 214 return $defaults;
218 215 }

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

Cambios en header-checkout.php (líneas añadidas: 1; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
18 18
19 19 <body <?php body_class(); ?>>
20 20 <?php wp_body_open(); ?>
21 Añadida <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'kestrel-birch' ); ?></a>
21 22
22 23 <div id="page" class="hfeed site">
23 24 <header id="masthead" class="site-header kb-checkout-header" role="banner">

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
74 74 <div class="storefront-primary-navigation">
75 75 <div class="col-full">
76 76 <?php // VALIDISCAN-SEED landmark-unique + vs-headings-landmarks: the primary <nav> has no aria-label. ?>
77 Eliminada <nav id="site-navigation" class="main-navigation">
77 Añadida <nav id="site-navigation" class="main-navigation" aria-label="<?php esc_attr_e( 'Primary navigation', 'kestrel-birch' ); ?>">
78 78 <?php
79 79 wp_nav_menu(
80 80 array(

page-contact.php Cambios en page-contact.php (líneas añadidas: 2; eliminadas: 2)

Cambios en page-contact.php (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
24 24
25 25 <div id="primary" class="content-area">
26 26 <?php // VALIDISCAN-SEED vs-headings-landmarks + region: <div> instead of <main>. ?>
27 Eliminada <div id="main" class="site-main">
27 Añadida <main id="main" class="site-main">
28 28 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
29 29 <header class="entry-header"><?php the_title( '<h1 class="entry-title">', '</h1>' ); ?></header>
30 30 <div class="entry-content">
85 85 </div>
86 86 </div>
87 87 </article>
88 Eliminada </div><!-- #main -->
88 Añadida </main><!-- #main -->
89 89 </div><!-- #primary -->
90 90
91 91 <?php

page.php Cambios en page.php (líneas añadidas: 2; eliminadas: 2)

Cambios en page.php (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
13 13
14 14 <div id="primary" class="content-area">
15 15 <?php // VALIDISCAN-SEED vs-headings-landmarks + region: <div> instead of <main>. ?>
16 Eliminada <div id="main" class="site-main">
16 Añadida <main id="main" class="site-main">
17 17
18 18 <?php
19 19 while ( have_posts() ) :
35 35 endwhile;
36 36 ?>
37 37
38 Eliminada </div><!-- #main -->
38 Añadida </main><!-- #main -->
39 39 </div><!-- #primary -->
40 40
41 41 <?php

search.php Cambios en search.php (líneas añadidas: 2; eliminadas: 2)

Cambios en search.php (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
11 11
12 12 <div id="primary" class="content-area">
13 13 <?php // VALIDISCAN-SEED vs-headings-landmarks + region: <div> instead of <main>. ?>
14 Eliminada <div id="main" class="site-main">
14 Añadida <main id="main" class="site-main">
15 15 <header class="woocommerce-products-header">
16 16 <h1 class="woocommerce-products-header__title page-title">
17 17 <?php
36 36 <?php else : ?>
37 37 <?php wc_no_products_found(); ?>
38 38 <?php endif; ?>
39 Eliminada </div><!-- #main -->
39 Añadida </main><!-- #main -->
40 40 </div><!-- #primary -->
41 41
42 42 <?php

single-product.php Cambios en single-product.php (líneas añadidas: 2; eliminadas: 2)

Cambios en single-product.php (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
13 13
14 14 <div id="primary" class="content-area">
15 15 <?php // VALIDISCAN-SEED vs-headings-landmarks + region: <div> instead of <main>. ?>
16 Eliminada <div id="main" class="site-main">
16 Añadida <main id="main" class="site-main">
17 17 <?php
18 18 while ( have_posts() ) :
19 19 the_post();
20 20 wc_get_template_part( 'content', 'single-product' );
21 21 endwhile;
22 22 ?>
23 Eliminada </div><!-- #main -->
23 Añadida </main><!-- #main -->
24 24 </div><!-- #primary -->
25 25
26 26 <?php

Magento: receta skip-link-main

Mostrar el antes y el después (1)
fixes the vs-headings-landmarks finding and validates Datos de ejemplo

app/design/frontend/Validiscan/fixture/Magento_Cms/layout/cms_index_index.xml Cambios en app/design/frontend/Validiscan/fixture/Magento_Cms/layout/cms_index_index.xml (líneas añadidas: 1; eliminadas: 1)

Cambios en app/design/frontend/Validiscan/fixture/Magento_Cms/layout/cms_index_index.xml (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
6 6 <div>, so the home page has no <main> landmark (and, with the page title hidden by
7 7 display:none in _theme.less, no h1 either).
8 8 Fixed variant: keep htmlTag="main"; hide the title visually only (clip), not with display:none. -->
9 Eliminada <referenceContainer name="main.content" htmlTag="div" htmlId="maincontent" htmlClass="page-main"/>
9 Añadida <referenceContainer name="main.content" htmlTag="main" htmlId="maincontent" htmlClass="page-main"/>
10 10 <referenceBlock name="breadcrumbs" remove="true"/>
11 11 </body>
12 12 </page>

app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/footer.phtml Cambios en app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/footer.phtml (líneas añadidas: 1; eliminadas: 1)

Cambios en app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/footer.phtml (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
19 19 ?>
20 20 <!-- VALIDISCAN-SEEDED list + landmark-unique: list items wrapped in a div inside the ul; second unlabelled nav -->
21 21 <?php /* Fixed variant: <nav class="footer-nav" aria-label="Footer links"> with the <li> elements directly in the <ul>. */ ?>
22 Eliminada <nav class="footer-nav">
22 Añadida <nav class="footer-nav" aria-label="<?= $escaper->escapeHtmlAttr(__('Footer links')) ?>">
23 23 <ul class="footer links">
24 24 <div class="footer-col">
25 25 <?php foreach ($links as $link): ?>

app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/header.phtml Cambios en app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/header.phtml (líneas añadidas: 1; eliminadas: 0)

Cambios en app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/header.phtml (líneas añadidas: 1; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
13 13 <header class="page-header">
14 14 <div class="panel wrapper">
15 15 <div class="panel header">
16 Añadida <a class="action skip contentarea" href="#contentarea"><span><?= $escaper->escapeHtml(__('Skip to Content')) ?></span></a>
16 17 <!-- VALIDISCAN-SEEDED vs-headings-landmarks: the skip link was removed from the header panel -->
17 18 <?php /* Fixed variant: <a class="action skip contentarea" href="#contentarea"><span>Skip to Content</span></a> */ ?>
18 19 <?php if ($linksMoved): ?>

app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/topmenu.phtml Cambios en app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/topmenu.phtml (líneas añadidas: 1; eliminadas: 1)

Cambios en app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/topmenu.phtml (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
15 15 <div class="section-item-content nav-sections-item-content" id="store.menu" data-role="content">
16 16 <!-- VALIDISCAN-SEEDED aria-required-children + landmark-unique: menubar whose children are plain list items; nav without a label -->
17 17 <?php /* Fixed variant: <nav ... aria-label="Main menu"> and a plain <ul> (no menubar role). */ ?>
18 Eliminada <nav class="navigation" data-action="navigation">
18 Añadida <nav class="navigation" data-action="navigation" aria-label="<?= $escaper->escapeHtmlAttr(__('Main menu')) ?>">
19 19 <ul role="menubar" data-mage-init='{"menu":{"responsive":true,"expanded":true,"position":{"my":"left top","at":"left bottom"}}}'>
20 20 <?php foreach ($items as $item): ?>
21 21 <li class="level0 <?= $escaper->escapeHtmlAttr($item['class']) ?> level-top"><a href="<?= $escaper->escapeUrl($item['url']) ?>" class="level-top"><span><?= $escaper->escapeHtml($item['label']) ?></span></a></li>

app/design/frontend/Validiscan/fixture/web/css/source/_theme.less Cambios en app/design/frontend/Validiscan/fixture/web/css/source/_theme.less (líneas añadidas: 24; eliminadas: 0)

Cambios en app/design/frontend/Validiscan/fixture/web/css/source/_theme.less (líneas añadidas: 24; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
1264 1264 height: 18px;
1265 1265 stroke-width: 3;
1266 1266 }
1267 Añadida
1268 Añadida /* validiscan:skip-link-main */
1269 Añadida .action.skip:not(:focus) {
1270 Añadida position: absolute;
1271 Añadida width: 1px;
1272 Añadida height: 1px;
1273 Añadida margin: -1px;
1274 Añadida padding: 0;
1275 Añadida overflow: hidden;
1276 Añadida clip: rect(0 0 0 0);
1277 Añadida white-space: nowrap;
1278 Añadida border: 0;
1279 Añadida }
1280 Añadida .action.skip:focus {
1281 Añadida position: absolute;
1282 Añadida top: 4px;
1283 Añadida left: 4px;
1284 Añadida z-index: 100;
1285 Añadida padding: 8px 12px;
1286 Añadida background: #fff;
1287 Añadida color: #1a1a1a;
1288 Añadida text-decoration: underline;
1289 Añadida }
1290 Añadida /* /validiscan:skip-link-main */

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

Cambios en app/design/frontend/Validiscan/fixture/web/css/styles-m.css (líneas añadidas: 24; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
1232 1232 height: 18px;
1233 1233 stroke-width: 3;
1234 1234 }
1235 Añadida
1236 Añadida /* validiscan:skip-link-main */
1237 Añadida .action.skip:not(:focus) {
1238 Añadida position: absolute;
1239 Añadida width: 1px;
1240 Añadida height: 1px;
1241 Añadida margin: -1px;
1242 Añadida padding: 0;
1243 Añadida overflow: hidden;
1244 Añadida clip: rect(0 0 0 0);
1245 Añadida white-space: nowrap;
1246 Añadida border: 0;
1247 Añadida }
1248 Añadida .action.skip:focus {
1249 Añadida position: absolute;
1250 Añadida top: 4px;
1251 Añadida left: 4px;
1252 Añadida z-index: 100;
1253 Añadida padding: 8px 12px;
1254 Añadida background: #fff;
1255 Añadida color: #1a1a1a;
1256 Añadida text-decoration: underline;
1257 Añadida }
1258 Añadida /* /validiscan:skip-link-main */

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