Mehrere Bereiche mit aria-label benennen
Unterscheiden Sie zwei navs voneinander, damit Nutzer ihren Zweck erkennen.
Mehrere Bereiche mit aria-label benennen ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Zwei navs, ein Problem
Viele Seiten haben ein Hauptmenü und ein Footer-Menü. Beide sind nav-Landmarks und klingen für einen Screenreader ohne Namen identisch.
Eine Region benennen
Fügen Sie aria-label hinzu, um einem Landmark einen kurzen Namen zu geben, der angesagt wird. So kann der Screenreader Ihre beiden navs unterscheiden.
<nav aria-label="Main">...</nav>
<nav aria-label="Footer">...</nav>Labels kurz halten
Ein aria-label sollte aus wenigen Wörtern bestehen, etwa Main oder Breadcrumb. Nutzer hören den Namen angesagt, daher respektiert Kürze ihre Zeit.
Die Rolle nicht wiederholen
Schreiben Sie Footer statt Footer navigation. Der Screenreader sagt navigation bereits an – eine Wiederholung wäre nur störendes Rauschen.
<nav aria-label="Footer">...</nav>Eine sichtbare Überschrift wiederverwenden
Wenn eine Region bereits eine sichtbare Überschrift hat, verweisen Sie mit aria-labelledby auf diese, statt den Namen zweimal einzugeben.
<nav aria-labelledby="more">
<h2 id="more">More links</h2>
</nav>label oder labelledby
Verwenden Sie aria-label, wenn kein sichtbarer Text vorhanden ist. aria-labelledby verwenden Sie, wenn eine Überschrift oder ein Text auf dem Bildschirm als Name dienen kann.
Funktioniert für jedes Landmark
Das Benennen ist nicht nur für nav gedacht. Benennen Sie auch ein aside oder eine section, damit Nutzer wissen, welche Inhalte die jeweilige Region enthält.
<aside aria-label="Related">...</aside>Eine Region, kein Label nötig
Wenn eine Seite nur ein einziges nav hat, benötigt es kein Label. Namen sind vor allem wichtig, wenn zwei Regionen dieselbe Rolle haben.
Eindeutige Namen sind wichtig
Geben Sie jeder Region einen eindeutigen Namen. Zwei navs mit dem Label Menu verfehlen ihren Zweck, da Nutzer sie weiterhin nicht unterscheiden können.
Den Unterschied hören
Mit passenden Namen lautet die Landmark-Liste Main navigation und Footer navigation. So wählen Nutzer sofort die richtige aus. 🔊
Labels sind nicht sichtbar
Ein aria-label wird angesagt, aber nie auf dem Bildschirm angezeigt. Visuell ändert sich nichts, doch alle Screenreader-Nutzer profitieren davon.
Schnelltest
Sie haben zwei nav-Regionen. Welches ist das beste Label für die untere?
Zusammenfassung: Benennen Sie Ihre Regionen
Sie haben gelernt, wiederkehrende Landmarks mit aria-label oder aria-labelledby zu benennen und dabei kurze, eindeutige Namen ohne Rollenbezeichnung zu verwenden. 🙌
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 30
- Lektionen
- 120
Häufig gestellte Fragen
Ist die Lektion „Mehrere Bereiche mit aria-label benennen“ kostenlos?
Ja — der vollständige Text von „Mehrere Bereiche mit aria-label benennen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Mehrere Bereiche mit aria-label benennen“?
Unterscheiden Sie zwei navs voneinander, damit Nutzer ihren Zweck erkennen. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Mehrere Bereiche mit aria-label benennen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- header, nav, main, footer: Die großen Vier
- Inhalte in main und nur ein main einfügen
- Mehrere Bereiche mit aria-label benennen
- Navigation über Orientierungspunkte: So springen Nutzer umher