Landmarks sollten eine eindeutige Rolle oder eine eindeutige Kombination aus Rolle, Label und Titel (also zugänglichem Namen) haben

Hat eine Seite mehrere Bereiche desselben Typs, etwa zwei Navigationsmenüs, können Screenreader sie nur an ihren Namen unterscheiden. Ohne eindeutige Namen hören Kundinnen und Kunden zweimal „Navigation“ und können Hauptmenü, Footer-Menü und Breadcrumb-Navigation nicht auseinanderhalten.

Kostenlosen Check anfordern

Regel-ID: landmark-unique
Quelle: axe-core 4.13.0
Auswirkung: Mittel
Korrekturstufe: ASSISTED; auf Shopify, Shopware, WooCommerce und Magento
Status: wird ausgeführt

Was geprüft wird

Sicherstellen, dass Landmarks eindeutig sind

Die Regel sammelt die Landmarks der Seite: Elemente mit einer Landmark-role wie navigation oder search sowie <header>-, <footer>-, <nav>-, <main>-, <aside>-, <form>- und <section>-Elemente, deren berechnete Rolle eine Landmark-Rolle ist. Ohne role-Attribut zählt ein <section>- oder <form>-Element nur, wenn aria-label oder aria-labelledby ihm einen Namen gibt, und ein <header> oder <footer> innerhalb von <article>, <aside>, <nav>, <section> oder <main> zählt nicht. Landmarks, die vor assistiven Technologien verborgen sind, bleiben außen vor.

axe-core vergleicht für alle Landmarks der Seite und ihrer iframes die Rolle und den zugänglichen Namen, jeweils in Kleinbuchstaben. Zwei Landmarks mit derselben Rolle gelten als Verstoß, wenn beide keinen Namen haben oder wenn ihre Namen übereinstimmen: „Menü“ und „menü“ gelten also als gleich. Aus jeder solchen Gruppe meldet axe-core eine Landmark als Verstoß; die übrigen erscheinen nur als zugehörige Elemente dieses Verstoßes.

Diese Regel zur guten Praxis ist keinem WCAG-Erfolgskriterium zugeordnet. Der Scanner von Validiscan führt sie getrennt von den Regeln zur Konformität aus, übernimmt nur ihre Verstöße und rechnet ihre Befunde nicht in den Fortschritt der Behebung ein. Ob die Namen Kundinnen und Kunden helfen, die Landmarks auseinanderzuhalten, beurteilt die Regel nicht.

So wird es behoben

Geben Sie Landmarks mit derselben Rolle über aria-label oder aria-labelledby unterschiedliche zugängliche Namen, etwa aria-label="Hauptmenü" und aria-label="Footer-Menü" an zwei <nav>-Elementen. Verwenden Sie kurze, übersetzte Namen.

WCAG-Erfolgskriterien

Gute Praxis: keinem WCAG-Erfolgskriterium zugeordnet.

Rezepte, die diese Regel aufführen

Diese Regel hat die Korrekturstufe ASSISTED. In einem Projekt geht ein Befund dieser Regel den Weg ASSISTED, und diese Rezepte werden darauf nicht angewendet.

Vorher und nachher anzeigen (1)

Vorher und nachher Beispieldaten

assets/base.css.liquid Änderungen an assets/base.css.liquid: 30 hinzugefügt, 0 entfernt

Änderungen an assets/base.css.liquid: 30 hinzugefügt, 0 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
1866	1866		}
1867	1867
1868	1868		/* ----------------------------------------------------------------- motion */
	1869	Hinzugefügt
	1870	Hinzugefügt	/* validiscan:skip-link-main */
	1871	Hinzugefügt	.skip-to-content-link:not(:focus) {
	1872	Hinzugefügt	position: absolute !important;
	1873	Hinzugefügt	overflow: hidden;
	1874	Hinzugefügt	width: 1px;
	1875	Hinzugefügt	height: 1px;
	1876	Hinzugefügt	margin: -1px;
	1877	Hinzugefügt	padding: 0;
	1878	Hinzugefügt	border: 0;
	1879	Hinzugefügt	clip: rect(0 0 0 0);
	1880	Hinzugefügt	white-space: nowrap;
	1881	Hinzugefügt	}
	1882	Hinzugefügt
	1883	Hinzugefügt	.skip-to-content-link:focus {
	1884	Hinzugefügt	z-index: 9999;
	1885	Hinzugefügt	position: fixed !important;
	1886	Hinzugefügt	top: 0.5rem;
	1887	Hinzugefügt	left: 0.5rem;
	1888	Hinzugefügt	overflow: visible;
	1889	Hinzugefügt	width: auto;
	1890	Hinzugefügt	height: auto;
	1891	Hinzugefügt	margin: 0;
	1892	Hinzugefügt	padding: 0.75rem 1.25rem;
	1893	Hinzugefügt	clip: auto;
	1894	Hinzugefügt	background-color: #ffffff;
	1895	Hinzugefügt	color: #121212;
	1896	Hinzugefügt	text-decoration: underline;
	1897	Hinzugefügt	}
	1898	Hinzugefügt	/* /validiscan:skip-link-main */

layout/checkout.liquid Änderungen an layout/checkout.liquid: 4 hinzugefügt, 3 entfernt

Änderungen an layout/checkout.liquid: 4 hinzugefügt, 3 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
18	18		</head>
19	19
20	20		<body class="template-checkout">
	21	Hinzugefügt	<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		Entfernt	<nav class="checkout-breadcrumb">
	25	Hinzugefügt	<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		Entfernt	<div class="main checkout" id="MainContent">
	35	Hinzugefügt	<main class="main checkout" id="MainContent" tabindex="-1">
35	36		{{ content_for_layout }}
36		Entfernt	</div>
	37	Hinzugefügt	</main>
37	38
38	39		<footer class="checkout-footer">
39	40		<div class="page-width">

layout/theme.focused.liquid Änderungen an layout/theme.focused.liquid: 1 hinzugefügt, 0 entfernt

Änderungen an layout/theme.focused.liquid: 1 hinzugefügt, 0 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
22	22		</head>
23	23
24	24		<body class="gradient template-{{ template.name \| handleize }} layout-focused">
	25	Hinzugefügt	<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 Änderungen an layout/theme.liquid: 1 hinzugefügt, 0 entfernt

Änderungen an layout/theme.liquid: 1 hinzugefügt, 0 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
28	28		</head>
29	29
30	30		<body class="gradient template-{{ template.name \| handleize }}">
	31	Hinzugefügt	<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 Änderungen an locales/en.default.json: 3 hinzugefügt, 1 entfernt

Änderungen an locales/en.default.json: 3 hinzugefügt, 1 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
34	34		"total_reviews": "{{ count }} reviews",
35	35		"link_messages": {
36	36		"new_window": "Opens in a new window."
37		Entfernt	}
	37	Hinzugefügt	},
	38	Hinzugefügt	"breadcrumbs": "Breadcrumbs",
	39	Hinzugefügt	"mobile_menu": "Mobile menu"
38	40		},
39	41		"sections": {
40	42		"header": {

sections/footer.liquid Änderungen an sections/footer.liquid: 1 hinzugefügt, 1 entfernt

Änderungen an sections/footer.liquid: 1 hinzugefügt, 1 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
17	17		{%- endform -%}
18	18		</div>
19	19
20		Entfernt	<nav class="footer__menus">
	20	Hinzugefügt	<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 Änderungen an sections/header.liquid: 2 hinzugefügt, 2 entfernt

Änderungen an sections/header.liquid: 2 hinzugefügt, 2 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
11	11		{%- render 'icon', icon: 'menu', size: icon_size -%}
12	12		</summary>
13	13		<div class="menu-drawer">
14		Entfernt	<nav class="menu-drawer__navigation">
	14	Hinzugefügt	<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		Entfernt	<nav class="header__inline-menu">
	28	Hinzugefügt	<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>

Vorher und nachher anzeigen (1)

restores the skip links, adds <main> and labels the navigation of the fixture theme Beispieldaten

404.php Änderungen an 404.php: 2 hinzugefügt, 2 entfernt

Änderungen an 404.php: 2 hinzugefügt, 2 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
9	9		?>
10	10
11	11		<div id="primary" class="content-area">
12		Entfernt	<div id="main" class="site-main">
	12	Hinzugefügt	<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		Entfernt	</div><!-- #main -->
	25	Hinzugefügt	</main><!-- #main -->
26	26		</div><!-- #primary -->
27	27
28	28		<?php

archive-product.php Änderungen an archive-product.php: 2 hinzugefügt, 2 entfernt

Änderungen an archive-product.php: 2 hinzugefügt, 2 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
22	22
23	23		<div id="primary" class="content-area">
24	24		<?php // VALIDISCAN-SEED vs-headings-landmarks + region: <div> instead of <main>. ?>
25		Entfernt	<div id="main" class="site-main">
	25	Hinzugefügt	<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		Entfernt	</div><!-- #main -->
	49	Hinzugefügt	</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 Änderungen an front-page.php: 2 hinzugefügt, 2 entfernt

Änderungen an front-page.php: 2 hinzugefügt, 2 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
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		Entfernt	<div id="main" class="site-main">
	21	Hinzugefügt	<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		Entfernt	</div><!-- #main -->
	65	Hinzugefügt	</main><!-- #main -->
66	66		</div><!-- #primary -->
67	67
68	68		<?php

functions.php Änderungen an functions.php: 1 hinzugefügt, 4 entfernt

Änderungen an functions.php: 1 hinzugefügt, 4 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
32	32		* Storefront pieces the child theme does not use.
33	33		*/
34	34		function kb_remove_storefront_parts() {
35		Entfernt	// VALIDISCAN-SEED vs-headings-landmarks: Storefront's "Skip to navigation / Skip to content"
36		Entfernt	// links are removed because "they flash on the first Tab"; nothing replaces them.
37		Entfernt	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		Entfernt	$defaults['wrap_before'] = '<div class="storefront-breadcrumb"><div class="col-full"><nav class="woocommerce-breadcrumb">';
	212	Hinzugefügt	$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 Änderungen an header-checkout.php: 1 hinzugefügt, 0 entfernt

Änderungen an header-checkout.php: 1 hinzugefügt, 0 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
18	18
19	19		<body <?php body_class(); ?>>
20	20		<?php wp_body_open(); ?>
	21	Hinzugefügt	<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 Änderungen an header.php: 1 hinzugefügt, 1 entfernt

Änderungen an header.php: 1 hinzugefügt, 1 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
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		Entfernt	<nav id="site-navigation" class="main-navigation">
	77	Hinzugefügt	<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 Änderungen an page-contact.php: 2 hinzugefügt, 2 entfernt

Änderungen an page-contact.php: 2 hinzugefügt, 2 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
24	24
25	25		<div id="primary" class="content-area">
26	26		<?php // VALIDISCAN-SEED vs-headings-landmarks + region: <div> instead of <main>. ?>
27		Entfernt	<div id="main" class="site-main">
	27	Hinzugefügt	<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		Entfernt	</div><!-- #main -->
	88	Hinzugefügt	</main><!-- #main -->
89	89		</div><!-- #primary -->
90	90
91	91		<?php

page.php Änderungen an page.php: 2 hinzugefügt, 2 entfernt

Änderungen an page.php: 2 hinzugefügt, 2 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
13	13
14	14		<div id="primary" class="content-area">
15	15		<?php // VALIDISCAN-SEED vs-headings-landmarks + region: <div> instead of <main>. ?>
16		Entfernt	<div id="main" class="site-main">
	16	Hinzugefügt	<main id="main" class="site-main">
17	17
18	18		<?php
19	19		while ( have_posts() ) :
35	35		endwhile;
36	36		?>
37	37
38		Entfernt	</div><!-- #main -->
	38	Hinzugefügt	</main><!-- #main -->
39	39		</div><!-- #primary -->
40	40
41	41		<?php

search.php Änderungen an search.php: 2 hinzugefügt, 2 entfernt

Änderungen an search.php: 2 hinzugefügt, 2 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
11	11
12	12		<div id="primary" class="content-area">
13	13		<?php // VALIDISCAN-SEED vs-headings-landmarks + region: <div> instead of <main>. ?>
14		Entfernt	<div id="main" class="site-main">
	14	Hinzugefügt	<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		Entfernt	</div><!-- #main -->
	39	Hinzugefügt	</main><!-- #main -->
40	40		</div><!-- #primary -->
41	41
42	42		<?php

single-product.php Änderungen an single-product.php: 2 hinzugefügt, 2 entfernt

Änderungen an single-product.php: 2 hinzugefügt, 2 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
13	13
14	14		<div id="primary" class="content-area">
15	15		<?php // VALIDISCAN-SEED vs-headings-landmarks + region: <div> instead of <main>. ?>
16		Entfernt	<div id="main" class="site-main">
	16	Hinzugefügt	<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		Entfernt	</div><!-- #main -->
	23	Hinzugefügt	</main><!-- #main -->
24	24		</div><!-- #primary -->
25	25
26	26		<?php

Vorher und nachher anzeigen (1)

fixes the vs-headings-landmarks finding and validates Beispieldaten

app/design/frontend/Validiscan/fixture/Magento_Cms/layout/cms_index_index.xml Änderungen an app/design/frontend/Validiscan/fixture/Magento_Cms/layout/cms_index_index.xml: 1 hinzugefügt, 1 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/Magento_Cms/layout/cms_index_index.xml: 1 hinzugefügt, 1 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
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		Entfernt	<referenceContainer name="main.content" htmlTag="div" htmlId="maincontent" htmlClass="page-main"/>
	9	Hinzugefügt	<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 Änderungen an app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/footer.phtml: 1 hinzugefügt, 1 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/footer.phtml: 1 hinzugefügt, 1 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
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		Entfernt	<nav class="footer-nav">
	22	Hinzugefügt	<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 Änderungen an app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/header.phtml: 1 hinzugefügt, 0 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/header.phtml: 1 hinzugefügt, 0 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
13	13		<header class="page-header">
14	14		<div class="panel wrapper">
15	15		<div class="panel header">
	16	Hinzugefügt	<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 Änderungen an app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/topmenu.phtml: 1 hinzugefügt, 1 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/Magento_Theme/templates/html/topmenu.phtml: 1 hinzugefügt, 1 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
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		Entfernt	<nav class="navigation" data-action="navigation">
	18	Hinzugefügt	<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 Änderungen an app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 24 hinzugefügt, 0 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 24 hinzugefügt, 0 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
1264	1264		height: 18px;
1265	1265		stroke-width: 3;
1266	1266		}
	1267	Hinzugefügt
	1268	Hinzugefügt	/* validiscan:skip-link-main */
	1269	Hinzugefügt	.action.skip:not(:focus) {
	1270	Hinzugefügt	position: absolute;
	1271	Hinzugefügt	width: 1px;
	1272	Hinzugefügt	height: 1px;
	1273	Hinzugefügt	margin: -1px;
	1274	Hinzugefügt	padding: 0;
	1275	Hinzugefügt	overflow: hidden;
	1276	Hinzugefügt	clip: rect(0 0 0 0);
	1277	Hinzugefügt	white-space: nowrap;
	1278	Hinzugefügt	border: 0;
	1279	Hinzugefügt	}
	1280	Hinzugefügt	.action.skip:focus {
	1281	Hinzugefügt	position: absolute;
	1282	Hinzugefügt	top: 4px;
	1283	Hinzugefügt	left: 4px;
	1284	Hinzugefügt	z-index: 100;
	1285	Hinzugefügt	padding: 8px 12px;
	1286	Hinzugefügt	background: #fff;
	1287	Hinzugefügt	color: #1a1a1a;
	1288	Hinzugefügt	text-decoration: underline;
	1289	Hinzugefügt	}
	1290	Hinzugefügt	/* /validiscan:skip-link-main */

app/design/frontend/Validiscan/fixture/web/css/styles-m.css Änderungen an app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 24 hinzugefügt, 0 entfernt

Änderungen an app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 24 hinzugefügt, 0 entfernt
Zeile vorher	Zeile nachher	Änderung	Code
1232	1232		height: 18px;
1233	1233		stroke-width: 3;
1234	1234		}
	1235	Hinzugefügt
	1236	Hinzugefügt	/* validiscan:skip-link-main */
	1237	Hinzugefügt	.action.skip:not(:focus) {
	1238	Hinzugefügt	position: absolute;
	1239	Hinzugefügt	width: 1px;
	1240	Hinzugefügt	height: 1px;
	1241	Hinzugefügt	margin: -1px;
	1242	Hinzugefügt	padding: 0;
	1243	Hinzugefügt	overflow: hidden;
	1244	Hinzugefügt	clip: rect(0 0 0 0);
	1245	Hinzugefügt	white-space: nowrap;
	1246	Hinzugefügt	border: 0;
	1247	Hinzugefügt	}
	1248	Hinzugefügt	.action.skip:focus {
	1249	Hinzugefügt	position: absolute;
	1250	Hinzugefügt	top: 4px;
	1251	Hinzugefügt	left: 4px;
	1252	Hinzugefügt	z-index: 100;
	1253	Hinzugefügt	padding: 8px 12px;
	1254	Hinzugefügt	background: #fff;
	1255	Hinzugefügt	color: #1a1a1a;
	1256	Hinzugefügt	text-decoration: underline;
	1257	Hinzugefügt	}
	1258	Hinzugefügt	/* /validiscan:skip-link-main */

Beginnen Sie mit einem kostenlosen Check Ihres Shops.

Senden Sie die Adresse Ihres Shops. Validiscan scannt ihn und antwortet mit jedem Fehler, den der Scan nachweisen kann, jeweils mit der Seite und dem Code.

Kostenlosen Check anfordern

Oder schreiben Sie an info@validiscan.com.

Was der kostenlose Check umfasst und was nicht

Sie senden: die Adresse Ihres Shops
Gescannte Seiten: bis zu 15
Sie erhalten: jeden Fehler, den der Scan nachweisen kann, mit Seite und Code
In Ihrem Shop: nur öffentliche Seiten; keine Anmeldung, nichts gekauft, kein Formular abgeschickt
Was er nicht ist: ein vollständiges Audit

Was geprüft wird

So wird es behoben

WCAG-Erfolgskriterien

Rezepte, die diese Regel aufführen

Shopify: Rezept skip-link-main

WooCommerce: Rezept skip-link-main

Magento: Rezept skip-link-main

Beginnen Sie mit einem kostenlosen Check Ihres Shops.