Validiscan
Menu

Sprog

Spring over-linkets mål bør findes og kunne få fokus

Et link som »Spring til indhold« lader tastatur- og skærmlæserbrugere springe forbi header og menu. Hvis målet ikke findes eller ikke kan få fokus, gør linket ingenting, og kunderne må trykke sig gennem hele navigationen med Tab-tasten på hver side.

Bestil et gratis tjek
Regel-id
skip-link
Kilde
axe-core 4.13.0
Alvorlighed
Moderat
Rettelsesniveau
AUTO
på Shopify, Shopware, WooCommerce og Magento
Status
køres

Hvad kontrollen gør

Sørg for, at alle spring over-links har et mål, der kan få fokus

Reglen ser på <a>-elementer, hvis href begynder med # eller /#. Den regner kun et link for et spring over-link, når intet tidligere link peger væk fra den aktuelle side; et href, der kun er #, eller et, der begynder med #! eller #/, regnes for at pege væk. Den tester kun spring over-links, der under scanningen er placeret uden for sidens område, for eksempel flyttet ud over venstre kant med en stor negativ left-værdi. Et spring over-link inde i sidens område, eller et, der er skjult med display: none, testes ikke.

axe-core tager delen efter # og leder først efter et element med det id og derefter efter et med den værdi som name-attribut. Findes der intet sådant element, består linket ikke. Et fundet element, som hjælpemidler kan læse, består. Et fundet element, der er skjult for dem, markeres kun til gennemgang, og Validiscans scanner beholder kun fejlene fra denne regel for god praksis.

Trods reglens titel tester kontrollen ikke, om målet kan få fokus, eller om linket bliver synligt, når det får fokus. Begge dele kræver et menneske med et tastatur.

Sådan retter du det

Lad hvert spring over-link pege på et element, der findes på alle sider, typisk <main id="MainContent" tabindex="-1">, og sørg for, at id’et matcher linkets href præcist. Vis spring over-linket synligt, når det får tastaturfokus.

WCAG-succeskriterier

God praksis: ikke knyttet til et succeskriterium i WCAG.

Hvor en opskrift retter det

Shopify: opskrift skip-link-main

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 skip-link-main

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 skip-link-main

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 skip-link-main

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