Sider skal have en overskriftsstruktur, landemærker og et spring over-link

Skærmlæserbrugere bevæger sig rundt på en side via overskrifter og områder, på samme måde som seende kunder skimmer den. Uden dem, og uden et »Spring til indhold«-link, må de lytte sig igennem hele headeren og megamenuen på hver side, før de når til produkterne.

Regel-id
vs-headings-landmarks
Kilde
Validiscan-kontrol
Alvorlighed
Moderat
Rettelsesniveau
AUTO
på Shopify, Shopware, WooCommerce og Magento
Status
køres

Hvad kontrollen gør

Markerer sider uden h1, oversprungne overskriftsniveauer, manglende main-landemærke, dublerede landemærker uden etiketter og manglende spring over-link (1.3.1, 2.4.1). Erstatter axe-reglerne bypass, page-has-heading-one, landmark-one-main og heading-order.

Kontrollen kører i hver scannet viewport og ser bort fra overskrifter og landemærker, der i den pågældende viewport er skjult med display: none eller aria-hidden="true".

  • Overskrifter: h1 til h6 og role="heading" (niveau fra aria-level, ellers 2) i dokumentrækkefølge, undtagen inde i dialoger. Flere h1-elementer rapporteres også. Et spring er en overskrift, der ligger mere end ét niveau under den foregående; fundet knyttes til det første spring.
  • Landemærker: header og footer tæller kun uden for article, aside, main, nav og section; section og form kun med aria-labelledby, aria-label eller title. To eller flere med samme rolle, som deler et navn eller slet ikke har et, giver ét fund pr. rolle.
  • Spring over-link: et af de første ti fokuserbare elementer i dokumentrækkefølge skal være et link til samme side, hvis navn indeholder et ord som »spring over« eller »zum Inhalt«, og hvis mål findes. Links uden for skærmen tæller med. Et ødelagt mål rapporteres på linket. Med et main-landemærke får et manglende spring over-link alvorligheden moderat, ikke alvorlig.

Et menneske må vurdere, om overskrifterne beskriver deres afsnit.

Sådan retter du det

Tilføj et »Spring til indhold«-link som det første fokuserbare element, pak sidens indhold ind i ét <main>-element, giv hver side én h1 (produkt- eller kategorinavnet), indlejr de øvrige overskrifter uden at springe niveauer over, og giv gentagne navigationsområder en etiket med aria-label.

WCAG-succeskriterier

Afsnit i EN 301 549

Afsnittet i EN 301 549 for hvert kriterium, fordelt på versioner af standarden
WCAG-kriterium Version 3.2.1 Version 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

Hvor en opskrift retter det

Shopify: opskrift heading-levels

Vis før og efter (1)
Før og efter Eksempeldata

sections/featured-collection.liquid Ændringer i sections/featured-collection.liquid: 1 tilføjet, 1 fjernet

Ændringer i sections/featured-collection.liquid: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
1 1 {%- liquid
2 2 assign featured = section.settings.collection
3 Fjernet assign card_heading = 'h4'
3 Tilføjet 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 Ændringer i sections/header.liquid: 3 tilføjet, 0 fjernet

Ændringer i sections/header.liquid: 3 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
3 3 assign menu = linklists[section.settings.menu]
4 4 assign icon_size = 18
5 5 assign logo_is_heading = false
6 Tilføjet if request.page_type == 'index'
7 Tilføjet assign logo_is_heading = true
8 Tilføjet 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 Ændringer i sections/main-collection.liquid: 1 tilføjet, 1 fjernet

Ændringer i sections/main-collection.liquid: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
6 6 wishlist heart nested inside the product image link.
7 7 {%- endcomment -%}
8 8 {%- liquid
9 Fjernet assign card_heading = 'h4'
9 Tilføjet 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 Ændringer i sections/main-product.liquid: 1 tilføjet, 1 fjernet

Ændringer i sections/main-product.liquid: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
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 Fjernet assign sub_heading = 'h4'
16 Tilføjet 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 Ændringer i sections/main-search.liquid: 1 tilføjet, 1 fjernet

Ændringer i sections/main-search.liquid: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
1 1 {%- liquid
2 Fjernet assign card_heading = 'h4'
2 Tilføjet 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>
Vis før og efter (1)
Før og efter Eksempeldata

assets/base.css.liquid Ændringer i assets/base.css.liquid: 30 tilføjet, 0 fjernet

Ændringer i assets/base.css.liquid: 30 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
1866 1866 }
1867 1867
1868 1868 /* ----------------------------------------------------------------- motion */
1869 Tilføjet
1870 Tilføjet /* validiscan:skip-link-main */
1871 Tilføjet .skip-to-content-link:not(:focus) {
1872 Tilføjet position: absolute !important;
1873 Tilføjet overflow: hidden;
1874 Tilføjet width: 1px;
1875 Tilføjet height: 1px;
1876 Tilføjet margin: -1px;
1877 Tilføjet padding: 0;
1878 Tilføjet border: 0;
1879 Tilføjet clip: rect(0 0 0 0);
1880 Tilføjet white-space: nowrap;
1881 Tilføjet }
1882 Tilføjet
1883 Tilføjet .skip-to-content-link:focus {
1884 Tilføjet z-index: 9999;
1885 Tilføjet position: fixed !important;
1886 Tilføjet top: 0.5rem;
1887 Tilføjet left: 0.5rem;
1888 Tilføjet overflow: visible;
1889 Tilføjet width: auto;
1890 Tilføjet height: auto;
1891 Tilføjet margin: 0;
1892 Tilføjet padding: 0.75rem 1.25rem;
1893 Tilføjet clip: auto;
1894 Tilføjet background-color: #ffffff;
1895 Tilføjet color: #121212;
1896 Tilføjet text-decoration: underline;
1897 Tilføjet }
1898 Tilføjet /* /validiscan:skip-link-main */

layout/checkout.liquid Ændringer i layout/checkout.liquid: 4 tilføjet, 3 fjernet

Ændringer i layout/checkout.liquid: 4 tilføjet, 3 fjernet
Linje før Linje efter Ændring Kode
18 18 </head>
19 19
20 20 <body class="template-checkout">
21 Tilføjet <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 Fjernet <nav class="checkout-breadcrumb">
25 Tilføjet <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 Fjernet <div class="main checkout" id="MainContent">
35 Tilføjet <main class="main checkout" id="MainContent" tabindex="-1">
35 36 {{ content_for_layout }}
36 Fjernet </div>
37 Tilføjet </main>
37 38
38 39 <footer class="checkout-footer">
39 40 <div class="page-width">

layout/theme.focused.liquid Ændringer i layout/theme.focused.liquid: 1 tilføjet, 0 fjernet

Ændringer i layout/theme.focused.liquid: 1 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
22 22 </head>
23 23
24 24 <body class="gradient template-{{ template.name | handleize }} layout-focused">
25 Tilføjet <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 Ændringer i layout/theme.liquid: 1 tilføjet, 0 fjernet

Ændringer i layout/theme.liquid: 1 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
28 28 </head>
29 29
30 30 <body class="gradient template-{{ template.name | handleize }}">
31 Tilføjet <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 Ændringer i locales/en.default.json: 3 tilføjet, 1 fjernet

Ændringer i locales/en.default.json: 3 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
34 34 "total_reviews": "{{ count }} reviews",
35 35 "link_messages": {
36 36 "new_window": "Opens in a new window."
37 Fjernet }
37 Tilføjet },
38 Tilføjet "breadcrumbs": "Breadcrumbs",
39 Tilføjet "mobile_menu": "Mobile menu"
38 40 },
39 41 "sections": {
40 42 "header": {

sections/footer.liquid Ændringer i sections/footer.liquid: 1 tilføjet, 1 fjernet

Ændringer i sections/footer.liquid: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
17 17 {%- endform -%}
18 18 </div>
19 19
20 Fjernet <nav class="footer__menus">
20 Tilføjet <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 Ændringer i sections/header.liquid: 2 tilføjet, 2 fjernet

Ændringer i sections/header.liquid: 2 tilføjet, 2 fjernet
Linje før Linje efter Ændring Kode
11 11 {%- render 'icon', icon: 'menu', size: icon_size -%}
12 12 </summary>
13 13 <div class="menu-drawer">
14 Fjernet <nav class="menu-drawer__navigation">
14 Tilføjet <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 Fjernet <nav class="header__inline-menu">
28 Tilføjet <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: opskrift heading-levels

Vis før og efter (1)
moves a static grid title from h3 to h2; the skipped level is gone Eksempeldata

Resources/views/storefront/block/cms-block-product-grid.html.twig Ændringer i Resources/views/storefront/block/cms-block-product-grid.html.twig: 1 tilføjet, 1 fjernet

Ændringer i Resources/views/storefront/block/cms-block-product-grid.html.twig: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
5 5 {% block block_product_grid %}
6 6 <div class="cms-block cms-block-product-grid">
7 7 <div class="cms-block-container">
8 Fjernet <h3 class="cms-block-title">{{ block.title }}</h3>
8 Tilføjet <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 } %}
Vis før og efter (1)
adds a skip link, a <main> landmark and navigation names; the landmark problems are gone Eksempeldata

Resources/app/storefront/src/scss/base.scss Ændringer i Resources/app/storefront/src/scss/base.scss: 24 tilføjet, 0 fjernet

Ændringer i Resources/app/storefront/src/scss/base.scss: 24 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
1708 1708 margin: 8px 0 0;
1709 1709 font-size: 0.875rem;
1710 1710 }
1711 Tilføjet
1712 Tilføjet /* validiscan:skip-link-main */
1713 Tilføjet /* Skip link: parked off-screen, shown at the top left when it receives keyboard focus (WCAG 2.4.1). */
1714 Tilføjet .skip-to-content-link {
1715 Tilføjet position: absolute;
1716 Tilføjet top: 8px;
1717 Tilføjet left: -10000px;
1718 Tilføjet z-index: 10000;
1719 Tilføjet padding: 12px 16px;
1720 Tilføjet border: 2px solid #1f2328;
1721 Tilføjet background: #ffffff;
1722 Tilføjet color: #1f2328;
1723 Tilføjet font-weight: 700;
1724 Tilføjet }
1725 Tilføjet
1726 Tilføjet .skip-to-content-link:focus {
1727 Tilføjet left: 8px;
1728 Tilføjet }
1729 Tilføjet
1730 Tilføjet /* The skip target takes focus programmatically; it needs no focus ring of its own. */
1731 Tilføjet #content-main:focus {
1732 Tilføjet outline: none;
1733 Tilføjet }
1734 Tilføjet /* /validiscan:skip-link-main */

Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json Ændringer i Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json: 7 tilføjet, 0 fjernet

Ændringer i Resources/snippet/de_DE/kaffeekontor-nord.de-DE.json: 7 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
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 Tilføjet },
197 Tilføjet "a11y": {
198 Tilføjet "navigation": {
199 Tilføjet "breadcrumb": "Brotkrümelnavigation",
200 Tilføjet "service": "Servicenavigation",
201 Tilføjet "main": "Hauptnavigation"
202 Tilføjet }
196 203 }
197 204 }

Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json Ændringer i Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json: 7 tilføjet, 0 fjernet

Ændringer i Resources/snippet/en_GB/kaffeekontor-nord.en-GB.json: 7 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
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 Tilføjet },
197 Tilføjet "a11y": {
198 Tilføjet "navigation": {
199 Tilføjet "breadcrumb": "Breadcrumb",
200 Tilføjet "service": "Service navigation",
201 Tilføjet "main": "Main navigation"
202 Tilføjet }
196 203 }
197 204 }

Resources/views/storefront/base.html.twig Ændringer i Resources/views/storefront/base.html.twig: 4 tilføjet, 3 fjernet

Ændringer i Resources/views/storefront/base.html.twig: 4 tilføjet, 3 fjernet
Linje før Linje efter Ændring Kode
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 Fjernet {% endblock %}
25 Tilføjet <a class="skip-to-content-link" href="#content-main">{{ 'general.skipToContent'|trans|sw_sanitize }}</a>
26 Tilføjet {% 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 Fjernet <div class="content-main">
52 Tilføjet <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 Fjernet </div>
68 Tilføjet </main>
68 69 {% endblock %}
69 70
70 71 {% block base_footer %}

Resources/views/storefront/layout/breadcrumb.html.twig Ændringer i Resources/views/storefront/layout/breadcrumb.html.twig: 1 tilføjet, 1 fjernet

Ændringer i Resources/views/storefront/layout/breadcrumb.html.twig: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
1 1 {% block layout_breadcrumb %}
2 Fjernet <nav class="breadcrumb-nav">
2 Tilføjet <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 Ændringer i Resources/views/storefront/layout/footer/footer.html.twig: 2 tilføjet, 2 fjernet

Ændringer i Resources/views/storefront/layout/footer/footer.html.twig: 2 tilføjet, 2 fjernet
Linje før Linje efter Ændring Kode
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 Fjernet <nav class="footer-column-content">
26 Tilføjet <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 Fjernet <nav class="footer-column-content">
41 Tilføjet <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 Ændringer i Resources/views/storefront/layout/header/top-bar.html.twig: 1 tilføjet, 1 fjernet

Ændringer i Resources/views/storefront/layout/header/top-bar.html.twig: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
1 1 {% block layout_header_top_bar %}
2 2 <div class="top-bar">
3 Fjernet <nav class="top-bar-nav">
3 Tilføjet <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 Ændringer i Resources/views/storefront/layout/navigation/navigation.html.twig: 2 tilføjet, 1 fjernet

Ændringer i Resources/views/storefront/layout/navigation/navigation.html.twig: 2 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
3 3 <div class="container">
4 4 {% block layout_main_navigation_menu %}
5 5 <nav class="nav main-navigation-menu" itemscope="itemscope"
6 Fjernet itemtype="https://schema.org/SiteNavigationElement">
6 Tilføjet itemtype="https://schema.org/SiteNavigationElement"
7 Tilføjet 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: opskrift heading-levels

Vis før og efter (2)
gives the home page its <h1> and fixes the teaser and widget title levels Eksempeldata

front-page.php Ændringer i front-page.php: 2 tilføjet, 2 fjernet

Ændringer i front-page.php: 2 tilføjet, 2 fjernet
Linje før Linje efter Ændring Kode
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 Fjernet <p class="kb-intro__title"><?php esc_html_e( 'Woollen outdoor clothing, made to last', 'kestrel-birch' ); ?></p>
27 Tilføjet <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 Fjernet <h4 class="kb-teaser__title"><?php echo esc_html( get_the_title( $kb_post ) ); ?></h4>
47 Tilføjet <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 Ændringer i functions.php: 2 tilføjet, 2 fjernet

Ændringer i functions.php: 2 tilføjet, 2 fjernet
Linje før Linje efter Ændring Kode
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 Fjernet 'before_title' => '<h4 class="widget-title">',
57 Fjernet 'after_title' => '</h4>',
56 Tilføjet 'before_title' => '<h2 class="widget-title">',
57 Tilføjet 'after_title' => '</h2>',
58 58 )
59 59 );
60 60 }
moves the checkout section headings from h3 to h2, as in the fixed checkout Eksempeldata

woocommerce/checkout/form-billing.php Ændringer i woocommerce/checkout/form-billing.php: 1 tilføjet, 1 fjernet

Ændringer i woocommerce/checkout/form-billing.php: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
15 15 defined( 'ABSPATH' ) || exit;
16 16 ?>
17 17 <div class="woocommerce-billing-fields">
18 Fjernet <h3><?php esc_html_e( 'Billing details', 'woocommerce' ); ?></h3>
18 Tilføjet <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 Ændringer i woocommerce/checkout/form-checkout.php: 1 tilføjet, 1 fjernet

Ændringer i woocommerce/checkout/form-checkout.php: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
26 26 </div>
27 27 </div>
28 28
29 Fjernet <h3 id="order_review_heading"><?php esc_html_e( 'Your order', 'woocommerce' ); ?></h3>
29 Tilføjet <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 Ændringer i woocommerce/checkout/form-shipping.php: 2 tilføjet, 2 fjernet

Ændringer i woocommerce/checkout/form-shipping.php: 2 tilføjet, 2 fjernet
Linje før Linje efter Ændring Kode
16 16 defined( 'ABSPATH' ) || exit;
17 17 ?>
18 18 <div class="woocommerce-shipping-fields">
19 Fjernet <h3><?php esc_html_e( 'Shipping details', 'kestrel-birch' ); ?></h3>
19 Tilføjet <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 Fjernet <h3><?php esc_html_e( 'Additional information', 'woocommerce' ); ?></h3>
32 Tilføjet <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 ) {
Vis før og efter (1)
restores the skip links, adds <main> and labels the navigation of the fixture theme Eksempeldata

404.php Ændringer i 404.php: 2 tilføjet, 2 fjernet

Ændringer i 404.php: 2 tilføjet, 2 fjernet
Linje før Linje efter Ændring Kode
9 9 ?>
10 10
11 11 <div id="primary" class="content-area">
12 Fjernet <div id="main" class="site-main">
12 Tilføjet <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 Fjernet </div><!-- #main -->
25 Tilføjet </main><!-- #main -->
26 26 </div><!-- #primary -->
27 27
28 28 <?php

archive-product.php Ændringer i archive-product.php: 2 tilføjet, 2 fjernet

Ændringer i archive-product.php: 2 tilføjet, 2 fjernet
Linje før Linje efter Ændring Kode
22 22
23 23 <div id="primary" class="content-area">
24 24 <?php // VALIDISCAN-SEED vs-headings-landmarks + region: <div> instead of <main>. ?>
25 Fjernet <div id="main" class="site-main">
25 Tilføjet <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 Fjernet </div><!-- #main -->
49 Tilføjet </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 Ændringer i front-page.php: 2 tilføjet, 2 fjernet

Ændringer i front-page.php: 2 tilføjet, 2 fjernet
Linje før Linje efter Ændring Kode
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 Fjernet <div id="main" class="site-main">
21 Tilføjet <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 Fjernet </div><!-- #main -->
65 Tilføjet </main><!-- #main -->
66 66 </div><!-- #primary -->
67 67
68 68 <?php

functions.php Ændringer i functions.php: 1 tilføjet, 4 fjernet

Ændringer i functions.php: 1 tilføjet, 4 fjernet
Linje før Linje efter Ændring Kode
32 32 * Storefront pieces the child theme does not use.
33 33 */
34 34 function kb_remove_storefront_parts() {
35 Fjernet // VALIDISCAN-SEED vs-headings-landmarks: Storefront's "Skip to navigation / Skip to content"
36 Fjernet // links are removed because "they flash on the first Tab"; nothing replaces them.
37 Fjernet 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 Fjernet $defaults['wrap_before'] = '<div class="storefront-breadcrumb"><div class="col-full"><nav class="woocommerce-breadcrumb">';
212 Tilføjet $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 Ændringer i header-checkout.php: 1 tilføjet, 0 fjernet

Ændringer i header-checkout.php: 1 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
18 18
19 19 <body <?php body_class(); ?>>
20 20 <?php wp_body_open(); ?>
21 Tilføjet <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 Ændringer i header.php: 1 tilføjet, 1 fjernet

Ændringer i header.php: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
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 Fjernet <nav id="site-navigation" class="main-navigation">
77 Tilføjet <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 Ændringer i page-contact.php: 2 tilføjet, 2 fjernet

Ændringer i page-contact.php: 2 tilføjet, 2 fjernet
Linje før Linje efter Ændring Kode
24 24
25 25 <div id="primary" class="content-area">
26 26 <?php // VALIDISCAN-SEED vs-headings-landmarks + region: <div> instead of <main>. ?>
27 Fjernet <div id="main" class="site-main">
27 Tilføjet <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 Fjernet </div><!-- #main -->
88 Tilføjet </main><!-- #main -->
89 89 </div><!-- #primary -->
90 90
91 91 <?php

page.php Ændringer i page.php: 2 tilføjet, 2 fjernet

Ændringer i page.php: 2 tilføjet, 2 fjernet
Linje før Linje efter Ændring Kode
13 13
14 14 <div id="primary" class="content-area">
15 15 <?php // VALIDISCAN-SEED vs-headings-landmarks + region: <div> instead of <main>. ?>
16 Fjernet <div id="main" class="site-main">
16 Tilføjet <main id="main" class="site-main">
17 17
18 18 <?php
19 19 while ( have_posts() ) :
35 35 endwhile;
36 36 ?>
37 37
38 Fjernet </div><!-- #main -->
38 Tilføjet </main><!-- #main -->
39 39 </div><!-- #primary -->
40 40
41 41 <?php

search.php Ændringer i search.php: 2 tilføjet, 2 fjernet

Ændringer i search.php: 2 tilføjet, 2 fjernet
Linje før Linje efter Ændring Kode
11 11
12 12 <div id="primary" class="content-area">
13 13 <?php // VALIDISCAN-SEED vs-headings-landmarks + region: <div> instead of <main>. ?>
14 Fjernet <div id="main" class="site-main">
14 Tilføjet <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 Fjernet </div><!-- #main -->
39 Tilføjet </main><!-- #main -->
40 40 </div><!-- #primary -->
41 41
42 42 <?php

single-product.php Ændringer i single-product.php: 2 tilføjet, 2 fjernet

Ændringer i single-product.php: 2 tilføjet, 2 fjernet
Linje før Linje efter Ændring Kode
13 13
14 14 <div id="primary" class="content-area">
15 15 <?php // VALIDISCAN-SEED vs-headings-landmarks + region: <div> instead of <main>. ?>
16 Fjernet <div id="main" class="site-main">
16 Tilføjet <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 Fjernet </div><!-- #main -->
23 Tilføjet </main><!-- #main -->
24 24 </div><!-- #primary -->
25 25
26 26 <?php

Magento: opskrift heading-levels

Vis før og efter (2)
keeps the hidden home page title as the h1 and validates Eksempeldata

app/design/frontend/Validiscan/fixture/web/css/source/_theme.less Ændringer i app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 6 tilføjet, 1 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 6 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
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 Fjernet display: none;
1096 Tilføjet position: absolute;
1097 Tilføjet width: 1px;
1098 Tilføjet height: 1px;
1099 Tilføjet overflow: hidden;
1100 Tilføjet clip: rect(0 0 0 0);
1101 Tilføjet 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 Ændringer i app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 6 tilføjet, 1 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 6 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
1070 1070 }
1071 1071
1072 1072 .cms-index-index .page-title-wrapper {
1073 Fjernet display: none;
1073 Tilføjet position: absolute;
1074 Tilføjet width: 1px;
1075 Tilføjet height: 1px;
1076 Tilføjet overflow: hidden;
1077 Tilføjet clip: rect(0 0 0 0);
1078 Tilføjet white-space: nowrap;
1074 1079 }
1075 1080
1076 1081 .block-promo .info,
moves the journal headings from h4 to h3 and validates Eksempeldata

app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html Ændringer i app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html: 3 tilføjet, 3 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/Magento_Cms/content/home.html: 3 tilføjet, 3 fjernet
Linje før Linje efter Ændring Kode
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 Fjernet <h4 class="journal-title">Layering for wet autumn days</h4>
155 Tilføjet <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 Fjernet <h4 class="journal-title">Caring for technical shells</h4>
160 Tilføjet <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 Fjernet <h4 class="journal-title">Running through the dark season</h4>
165 Tilføjet <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>
Vis før og efter (1)
fixes the vs-headings-landmarks finding and validates Eksempeldata

app/design/frontend/Validiscan/fixture/Magento_Cms/layout/cms_index_index.xml Ændringer i app/design/frontend/Validiscan/fixture/Magento_Cms/layout/cms_index_index.xml: 1 tilføjet, 1 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/Magento_Cms/layout/cms_index_index.xml: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
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 Fjernet <referenceContainer name="main.content" htmlTag="div" htmlId="maincontent" htmlClass="page-main"/>
9 Tilføjet <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 Ændringer i app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/footer.phtml: 1 tilføjet, 1 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/footer.phtml: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
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 Fjernet <nav class="footer-nav">
22 Tilføjet <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 Ændringer i app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/header.phtml: 1 tilføjet, 0 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/header.phtml: 1 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
13 13 <header class="page-header">
14 14 <div class="panel wrapper">
15 15 <div class="panel header">
16 Tilføjet <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 Ændringer i app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/topmenu.phtml: 1 tilføjet, 1 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/topmenu.phtml: 1 tilføjet, 1 fjernet
Linje før Linje efter Ændring Kode
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 Fjernet <nav class="navigation" data-action="navigation">
18 Tilføjet <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 Ændringer i app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 24 tilføjet, 0 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 24 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
1264 1264 height: 18px;
1265 1265 stroke-width: 3;
1266 1266 }
1267 Tilføjet
1268 Tilføjet /* validiscan:skip-link-main */
1269 Tilføjet .action.skip:not(:focus) {
1270 Tilføjet position: absolute;
1271 Tilføjet width: 1px;
1272 Tilføjet height: 1px;
1273 Tilføjet margin: -1px;
1274 Tilføjet padding: 0;
1275 Tilføjet overflow: hidden;
1276 Tilføjet clip: rect(0 0 0 0);
1277 Tilføjet white-space: nowrap;
1278 Tilføjet border: 0;
1279 Tilføjet }
1280 Tilføjet .action.skip:focus {
1281 Tilføjet position: absolute;
1282 Tilføjet top: 4px;
1283 Tilføjet left: 4px;
1284 Tilføjet z-index: 100;
1285 Tilføjet padding: 8px 12px;
1286 Tilføjet background: #fff;
1287 Tilføjet color: #1a1a1a;
1288 Tilføjet text-decoration: underline;
1289 Tilføjet }
1290 Tilføjet /* /validiscan:skip-link-main */

app/design/frontend/Validiscan/fixture/web/css/styles-m.css Ændringer i app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 24 tilføjet, 0 fjernet

Ændringer i app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 24 tilføjet, 0 fjernet
Linje før Linje efter Ændring Kode
1232 1232 height: 18px;
1233 1233 stroke-width: 3;
1234 1234 }
1235 Tilføjet
1236 Tilføjet /* validiscan:skip-link-main */
1237 Tilføjet .action.skip:not(:focus) {
1238 Tilføjet position: absolute;
1239 Tilføjet width: 1px;
1240 Tilføjet height: 1px;
1241 Tilføjet margin: -1px;
1242 Tilføjet padding: 0;
1243 Tilføjet overflow: hidden;
1244 Tilføjet clip: rect(0 0 0 0);
1245 Tilføjet white-space: nowrap;
1246 Tilføjet border: 0;
1247 Tilføjet }
1248 Tilføjet .action.skip:focus {
1249 Tilføjet position: absolute;
1250 Tilføjet top: 4px;
1251 Tilføjet left: 4px;
1252 Tilføjet z-index: 100;
1253 Tilføjet padding: 8px 12px;
1254 Tilføjet background: #fff;
1255 Tilføjet color: #1a1a1a;
1256 Tilføjet text-decoration: underline;
1257 Tilføjet }
1258 Tilføjet /* /validiscan:skip-link-main */

Begynd med et gratis tjek af din webshop.

Send din webshops adresse. Validiscan scanner den og svarer med hver fejl, scanningen kan påvise, med siden og koden.

Bestil et gratis tjek

Eller skriv til info@validiscan.com.

Hvad det gratis tjek omfatter, og hvad det udelader
Du sender
din webshops adresse
Sider, der scannes
op til 15
Du får
hver fejl, scanningen kan påvise, med siden og koden
På din webshop
kun offentlige sider; intet login, intet købt, ingen formularer sendt
Hvad det ikke er
et fuldt audit

Skriv til Validiscan

Til et gratis tjek skal du skrive din webshops adresse og platform.

Validiscan bruger det, du sender, til at svare dig. Privatlivspolitik