jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-Tools

Kostenlose HTML-Landmark-Prüfer

Füge HTML ein und prüfe auf ARIA-Landmark-Elemente für Screenreader-Navigation.

Tool wird geladen...

Was ist HTML-Landmark-Prüfer?

ARIA-Landmarks sind HTML-Elemente, die Seitenbereiche definieren. Screenreader nutzen Landmarks, damit Nutzer zwischen Seitenabschnitten springen können. Zu den wichtigsten Landmarks gehören header, main, nav, footer, aside und form. Fehlende Landmarks erschweren die Navigation für Benutzer von assistiven Technologien.

Kurze Antwort

Fügen Sie Ihren HTML-Code ein, um zu prüfen, welche ARIA-Landmark-Elemente vorhanden sind und welche fehlen. Screenreader verwenden Landmarks, um Tastatur- und Assistenztechnologie-Nutzern die Navigation zwischen Seitenbereichen zu erleichtern.

Last updated: 2026-06-11

Einschränkungen

  • Das Tool scannt nur nach Elementnamen. Es prüft nicht, ob Landmarks zugängliche Namen über aria-label, aria-labelledby oder sichtbare Überschriften haben.
  • Der Prüfer validiert keine ARIA-Rollenzuweisungen. Ein Element mit einem role-Attribut kann die implizite Landmark-Rolle überschreiben oder entfernen.
  • Das Einfügen von teilweisem HTML kann Landmark-Elemente außerhalb des eingefügten Inhalts übersehen. Fügen Sie das vollständige Seiten-HTML für eine vollständige Prüfung ein.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Fügen Sie Ihr HTML-Markup in den Eingabebereich ein.
  2. Das Tool scannt nach Landmark-Elementen und zeigt an, welche vorhanden sind.
  3. Prüfen Sie die Ergebnisse, die anzeigen, welche Landmarks auf Ihrer Seite fehlen.
  4. Fügen Sie die fehlenden Landmark-Elemente hinzu, um die Barrierefreiheit zu verbessern.

Wofür du es nutzen kannst

  • Auditieren Sie eine statische Seitenvorlage auf fehlende Landmark-Elemente vor der Veröffentlichung.
  • Stellen Sie sicher, dass jede Seite einer Website ein main-Element für die Screenreader-Navigation enthält.
  • Prüfen Sie, dass Navigationsblöcke das nav-Element anstelle von generischen div-Elementen verwenden.

Anwendungsfalle

Praxisbeispiele

Beispiel

Fehlende main-Landmark

Eine Seitenvorlagen-Prüfung zeigt ein fehlendes main-Element. Der Prüfer markiert es als erforderliche Landmark und erklärt, dass Screenreader auf main angewiesen sind, um zum Seiteninhalt zu springen.

Beispiel

Div-Navigation erkannt

Ein Blog-Layout enthält header- und footer-Elemente, verwendet aber ein div für die Navigation. Der Prüfer empfiehlt, das div durch ein nav-Element zu ersetzen.

Haufige Fehler

  • Mehrere main-Elemente auf einer Seite zu verwenden, was nicht standardkonform ist und die Screenreader-Navigation verwirrt.
  • Alles in ein nav-Element zu packen, anstatt es nur für die tatsächliche Seitennavigation zu nutzen.
  • section-Elemente ohne zugängliche Namen zu verwenden, was sie als ARIA-Landmarks weniger nützlich macht.

Überprüfung

  1. Laden Sie die geprüfte Seite in einem Browser und navigieren Sie mit einem Screenreader oder einer Browsererweiterung durch die Landmarks, um zu bestätigen, dass die erwarteten Bereiche vorhanden sind.
  2. Führen Sie die Seite mit einem formalen Barrierefreiheits-Tool wie axe DevTools oder WAVE aus, um die Landmark-Prüfungsergebnisse zu verifizieren.

FAQ

Fragen zu HTML-Landmark-Prüfer

Wie viele main-Elemente sollte eine Seite haben?

Ein sichtbares main-Element pro Seite. Mehrere main-Elemente sind nicht standardkonform und verwirren die Screenreader-Navigation.

Sind HTML5-Semantikelemente dasselbe wie ARIA-Landmarks?

Ja. Elemente wie header, main, nav, footer, aside und form haben implizite ARIA-Landmark-Rollen. Die Verwendung dieser semantischen Elemente erzeugt automatisch Landmarks.

Benötige ich Labels für section-Elemente?

Ein section-Element ohne zugänglichen Namen wird im Accessibility Tree nicht als Landmark registriert. Fügen Sie section-Elementen, die eigene Seitenbereiche darstellen, ein aria-label oder aria-labelledby-Attribut hinzu.

Was ist der Unterschied zwischen article und section?

Article repräsentiert einen in sich geschlossenen Inhalt, der auch isoliert vom Rest der Seite Sinn ergibt - ein Blogbeitrag, eine Produktkarte oder ein Forenbeitrag. Section ist eine thematische Gruppierung von Inhalten, die den Kontext der Seite benötigt und typischerweise eine Überschrift enthält.

Verwandte Tools

Weitere html-tools

Auch ausprobieren

Auch ausprobieren