Validiscan
Menú

Idioma

Las páginas necesitan una estructura de encabezados, regiones de referencia y un enlace de salto

Quienes usan un lector de pantalla recorren una página por sus encabezados y regiones, igual que los clientes videntes la recorren con la vista. Sin ellos, y sin un enlace «Saltar al contenido», tienen que escuchar toda la cabecera y el megamenú en cada página antes de llegar a los productos.

Solicitar revisión gratuita
ID de la regla
vs-headings-landmarks
Origen
Comprobación de Validiscan
Impacto
Moderado
Nivel de corrección
AUTO
en Shopify, Shopware, WooCommerce y Magento
Estado
se ejecuta

Qué hace la comprobación

Señala páginas sin h1, niveles de encabezado saltados, la falta de una región main, regiones duplicadas sin etiqueta y la falta de un enlace de salto (1.3.1, 2.4.1). Sustituye a las reglas de axe bypass, page-has-heading-one, landmark-one-main y heading-order.

La comprobación se ejecuta en cada viewport escaneado e ignora los encabezados y las regiones de referencia (landmarks) que quedan ocultos en él con display: none o aria-hidden="true".

  • Encabezados: de h1 a h6 y role="heading" (el nivel se toma de aria-level o, si falta, es 2), en el orden del documento, salvo los que están dentro de cuadros de diálogo. Si hay varios elementos h1, también se notifica. Un salto es un encabezado que está más de un nivel por debajo del anterior; el hallazgo se asigna al primer salto.
  • Regiones de referencia: header y footer cuentan solo fuera de article, aside, main, nav y section; section y form, solo con aria-labelledby, aria-label o title. Dos o más del mismo rol que comparten un nombre, o que no tienen ninguno, dan un hallazgo por rol.
  • Enlace de salto: uno de los diez primeros elementos enfocables en el orden del documento debe ser un enlace a la misma página cuyo nombre contenga una palabra como «skip» o «zum Inhalt» y cuyo destino exista. Los enlaces situados fuera de la pantalla cuentan. Un destino roto se notifica en el enlace. Si hay una región de referencia main, la falta de un enlace de salto tiene impacto moderado, no grave.

Una persona tiene que juzgar si los encabezados describen sus secciones.

Cómo corregirlo

Añada un enlace «Saltar al contenido» como primer elemento enfocable, envuelva el contenido de la página en un único elemento <main>, dé a cada página un h1 (el nombre del producto o de la categoría) y anide los demás encabezados sin saltar niveles, y etiquete con aria-label las regiones de navegación repetidas.

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
1.3.1 9.1.3.1 9.1.3.1
2.4.1 9.2.4.1 9.2.4.1

Dónde lo corrige una receta

Shopify: receta heading-levels

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

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

Cambios en sections/featured-collection.liquid (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
1 1 {%- liquid
2 2 assign featured = section.settings.collection
3 Eliminada assign card_heading = 'h4'
3 Añadida assign card_heading = 'h3'
4 4 -%}
5 5 <div class="featured-collection page-width section-spacing">
6 6 <div class="title-wrapper">

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

Cambios en sections/header.liquid (líneas añadidas: 3; eliminadas: 0)
Línea anterior Línea nueva Cambio Código
3 3 assign menu = linklists[section.settings.menu]
4 4 assign icon_size = 18
5 5 assign logo_is_heading = false
6 Añadida if request.page_type == 'index'
7 Añadida assign logo_is_heading = true
8 Añadida endif
6 9 -%}
7 10 <div class="header-wrapper">
8 11 <header class="header page-width"{% if header_lang != '' %} lang="{{ header_lang }}"{% endif %}>

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

Cambios en sections/main-collection.liquid (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
6 6 wishlist heart nested inside the product image link.
7 7 {%- endcomment -%}
8 8 {%- liquid
9 Eliminada assign card_heading = 'h4'
9 Añadida assign card_heading = 'h3'
10 10 assign price_max = collection.price_max_rounded
11 11 assign in_stock_count = collection.products | where: 'available', true | size
12 12 assign out_of_stock_count = collection.products_count | minus: in_stock_count

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
13 13 assign featured = product.featured_image
14 14 assign form_id = 'product-form-' | append: section.id
15 15 assign qty_id = 'Quantity-' | append: section.id
16 Eliminada assign sub_heading = 'h4'
16 Añadida assign sub_heading = 'h2'
17 17 assign size_option = nil
18 18 for option in product.options_with_values
19 19 if option.name == 'Size'

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

Cambios en sections/main-search.liquid (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
1 1 {%- liquid
2 Eliminada assign card_heading = 'h4'
2 Añadida assign card_heading = 'h3'
3 3 -%}
4 4 <div class="template-search page-width">
5 5 <h1 class="template-search__title">{{ 'templates.search.title' | t }}</h1>

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 heading-levels

Mostrar el antes y el después (1)
moves a static grid title from h3 to h2; the skipped level is gone Datos de ejemplo

Resources/views/storefront/block/cms-block-product-grid.html.twig Cambios en Resources/views/storefront/block/cms-block-product-grid.html.twig (líneas añadidas: 1; eliminadas: 1)

Cambios en Resources/views/storefront/block/cms-block-product-grid.html.twig (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
5 5 {% block block_product_grid %}
6 6 <div class="cms-block cms-block-product-grid">
7 7 <div class="cms-block-container">
8 Eliminada <h3 class="cms-block-title">{{ block.title }}</h3>
8 Añadida <h2 class="cms-block-title">{{ block.title }}</h2>
9 9 <div class="row cms-listing-row">
10 10 {% for product in block.products %}
11 11 {% sw_include '@Storefront/storefront/component/product/card/box-standard.html.twig' with { product: product } %}

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 heading-levels

Mostrar el antes y el después (2)
gives the home page its <h1> and fixes the teaser and widget title levels Datos de ejemplo

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
24 24
25 25 <div class="kb-intro">
26 26 <?php // VALIDISCAN-SEED vs-headings-landmarks: the page title is a styled <p>, the page has no <h1>. ?>
27 Eliminada <p class="kb-intro__title"><?php esc_html_e( 'Woollen outdoor clothing, made to last', 'kestrel-birch' ); ?></p>
27 Añadida <h1 class="kb-intro__title"><?php esc_html_e( 'Woollen outdoor clothing, made to last', 'kestrel-birch' ); ?></h1>
28 28 <p><?php echo esc_html( get_the_excerpt() ); ?></p>
29 29 <p class="kb-popular">
30 30 <?php esc_html_e( 'Looking for something warm?', 'kestrel-birch' ); ?>
44 44 <article class="kb-teaser">
45 45 <?php echo get_the_post_thumbnail( $kb_post, 'woocommerce_single', array( 'loading' => 'lazy' ) ); ?>
46 46 <?php // VALIDISCAN-SEED vs-headings-landmarks: teaser titles jump from h2 to h4. ?>
47 Eliminada <h4 class="kb-teaser__title"><?php echo esc_html( get_the_title( $kb_post ) ); ?></h4>
47 Añadida <h3 class="kb-teaser__title"><?php echo esc_html( get_the_title( $kb_post ) ); ?></h3>
48 48 <p><?php echo esc_html( get_the_excerpt( $kb_post ) ); ?></p>
49 49 <?php // VALIDISCAN-SEED vs-link-purpose: three identical "Read more" links to different targets. ?>
50 50 <a class="kb-teaser__more" href="<?php echo esc_url( get_post_meta( $kb_post->ID, '_kb_teaser_url', true ) ); ?>"><?php esc_html_e( 'Read more', 'kestrel-birch' ); ?></a>

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

Cambios en functions.php (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
53 53 'after_widget' => '</div>',
54 54 // VALIDISCAN-SEED vs-headings-landmarks: footer widget titles are h4, directly after
55 55 // the h2 sections of the page (skipped heading level).
56 Eliminada 'before_title' => '<h4 class="widget-title">',
57 Eliminada 'after_title' => '</h4>',
56 Añadida 'before_title' => '<h2 class="widget-title">',
57 Añadida 'after_title' => '</h2>',
58 58 )
59 59 );
60 60 }
moves the checkout section headings from h3 to h2, as in the fixed checkout Datos de ejemplo

woocommerce/checkout/form-billing.php Cambios en woocommerce/checkout/form-billing.php (líneas añadidas: 1; eliminadas: 1)

Cambios en woocommerce/checkout/form-billing.php (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
15 15 defined( 'ABSPATH' ) || exit;
16 16 ?>
17 17 <div class="woocommerce-billing-fields">
18 Eliminada <h3><?php esc_html_e( 'Billing details', 'woocommerce' ); ?></h3>
18 Añadida <h2><?php esc_html_e( 'Billing details', 'woocommerce' ); ?></h2>
19 19
20 20 <div class="woocommerce-billing-fields__field-wrapper">
21 21 <?php

woocommerce/checkout/form-checkout.php Cambios en woocommerce/checkout/form-checkout.php (líneas añadidas: 1; eliminadas: 1)

Cambios en woocommerce/checkout/form-checkout.php (líneas añadidas: 1; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
26 26 </div>
27 27 </div>
28 28
29 Eliminada <h3 id="order_review_heading"><?php esc_html_e( 'Your order', 'woocommerce' ); ?></h3>
29 Añadida <h2 id="order_review_heading"><?php esc_html_e( 'Your order', 'woocommerce' ); ?></h2>
30 30
31 31 <div id="order_review" class="woocommerce-checkout-review-order">
32 32 <?php do_action( 'woocommerce_checkout_order_review' ); ?>

woocommerce/checkout/form-shipping.php Cambios en woocommerce/checkout/form-shipping.php (líneas añadidas: 2; eliminadas: 2)

Cambios en woocommerce/checkout/form-shipping.php (líneas añadidas: 2; eliminadas: 2)
Línea anterior Línea nueva Cambio Código
16 16 defined( 'ABSPATH' ) || exit;
17 17 ?>
18 18 <div class="woocommerce-shipping-fields">
19 Eliminada <h3><?php esc_html_e( 'Shipping details', 'kestrel-birch' ); ?></h3>
19 Añadida <h2><?php esc_html_e( 'Shipping details', 'kestrel-birch' ); ?></h2>
20 20 <div class="shipping_address">
21 21 <div class="woocommerce-shipping-fields__field-wrapper">
22 22 <?php
29 29 </div>
30 30
31 31 <div class="woocommerce-additional-fields">
32 Eliminada <h3><?php esc_html_e( 'Additional information', 'woocommerce' ); ?></h3>
32 Añadida <h2><?php esc_html_e( 'Additional information', 'woocommerce' ); ?></h2>
33 33 <div class="woocommerce-additional-fields__field-wrapper">
34 34 <?php
35 35 foreach ( $checkout->get_checkout_fields( 'order' ) as $kb_key => $kb_field ) {

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 heading-levels

Mostrar el antes y el después (2)
keeps the hidden home page title as the h1 and validates Datos de ejemplo

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: 6; eliminadas: 1)

Cambios en app/design/frontend/Validiscan/fixture/web/css/source/_theme.less (líneas añadidas: 6; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
1093 1093
1094 1094 // VALIDISCAN-SEEDED vs-headings-landmarks: the home page title is display:none, so the page has no h1.
1095 1095 .cms-index-index .page-title-wrapper {
1096 Eliminada display: none;
1096 Añadida position: absolute;
1097 Añadida width: 1px;
1098 Añadida height: 1px;
1099 Añadida overflow: hidden;
1100 Añadida clip: rect(0 0 0 0);
1101 Añadida white-space: nowrap;
1097 1102 }
1098 1103
1099 1104 // VALIDISCAN-SEEDED color-contrast: #929292 on white is 3.1:1.

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: 6; eliminadas: 1)

Cambios en app/design/frontend/Validiscan/fixture/web/css/styles-m.css (líneas añadidas: 6; eliminadas: 1)
Línea anterior Línea nueva Cambio Código
1070 1070 }
1071 1071
1072 1072 .cms-index-index .page-title-wrapper {
1073 Eliminada display: none;
1073 Añadida position: absolute;
1074 Añadida width: 1px;
1075 Añadida height: 1px;
1076 Añadida overflow: hidden;
1077 Añadida clip: rect(0 0 0 0);
1078 Añadida white-space: nowrap;
1074 1079 }
1075 1080
1076 1081 .block-promo .info,
moves the journal headings from h4 to h3 and validates Datos de ejemplo

app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html Cambios en app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html (líneas añadidas: 3; eliminadas: 3)

Cambios en app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html (líneas añadidas: 3; eliminadas: 3)
Línea anterior Línea nueva Cambio Código
152 152 <!-- VALIDISCAN-SEEDED vs-headings-landmarks (h2 followed by h4) + vs-link-purpose ("Read more" links to three different pages) -->
153 153 <div class="journal-items">
154 154 <article class="journal-item">
155 Eliminada <h4 class="journal-title">Layering for wet autumn days</h4>
155 Añadida <h3 class="journal-title">Layering for wet autumn days</h3>
156 156 <p>How a light shell over a warm mid-layer keeps you dry on the way to work.</p>
157 157 <a class="journal-link" href="/magento/juno-jacket.html">Read more</a>
158 158 </article>
159 159 <article class="journal-item">
160 Eliminada <h4 class="journal-title">Caring for technical shells</h4>
160 Añadida <h3 class="journal-title">Caring for technical shells</h3>
161 161 <p>Washing, drying and re-proofing: three steps that keep a rain shell working for years.</p>
162 162 <a class="journal-link" href="/magento/nadia-elements-shell.html">Read more</a>
163 163 </article>
164 164 <article class="journal-item">
165 Eliminada <h4 class="journal-title">Running through the dark season</h4>
165 Añadida <h3 class="journal-title">Running through the dark season</h3>
166 166 <p>Reflective details, lights and route planning for early morning runs.</p>
167 167 <a class="journal-link" href="/magento/ingrid-running-jacket.html">Read more</a>
168 168 </article>

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