Kostenloser Scan

„Kein Sprunglink“ in HTML beheben

Warum das ein Problem ist

Ohne Sprunglink müssen Tastatur- und Screenreader-Nutzende auf jeder Seite den gesamten Kopfbereich und das Menü durchlaufen, bevor sie den Inhalt erreichen. Bei dreißig Menülinks sind das dreißig Tabulator-Anschläge pro Navigation.

So beheben Sie es — HTML

Setzen Sie als allererstes Element im <body> einen Link zum Anker des Hauptinhalts. Er darf visuell verborgen sein, muss aber beim Fokussieren sichtbar werden.

Vermeiden
<body>
  <header>…trente liens de menu…</header>
  <main>…</main>
</body>
Korrekt
<body>
  <a href="#contenu" class="skip-link">Aller au contenu</a>
  <header>…</header>
  <main id="contenu">…</main>
</body>

<style>
/* Masqué, mais RÉAFFICHÉ à la prise de focus. */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 0; top: 0; padding: 0.75rem 1rem; background: #fff; }
</style>

Prüfen Sie Ihre Website in 30 Sekunden

Conformly erkennt diese Art von Problem auf allen Ihren Seiten kontinuierlich und warnt Sie bei jeder Regression.

Kostenloser Scan

Weitere Korrekturen