Wie Sie unter Links erfahren haben, werden mit dem Element <a> und dem Attribut href Links erstellt, auf die Nutzer durch Klicken oder Tippen zugreifen können. Unter Listen haben Sie gelernt, wie Sie Inhaltslisten erstellen. In diesem Modul erfahren Sie, wie Sie Listen von Links gruppieren, um eine Navigation zu erstellen.
Es gibt verschiedene Navigationstypen und verschiedene Möglichkeiten, sie anzuzeigen. Namensanker im Text, die mit anderen Seiten auf derselben Website verlinkt sind, gelten als lokale Navigation. Die lokale Navigation, die aus einer Reihe von Links besteht, die die Hierarchie der aktuellen Seite in Bezug auf die Struktur der Website oder die Seiten anzeigen, die der Nutzer besucht hat, um zur aktuellen Seite zu gelangen, wird als Navigationspfad bezeichnet.
Ein Inhaltsverzeichnis einer Seite ist eine weitere Art der lokalen Navigation. Eine Seite mit hierarchischen Links zu jeder einzelnen Seite einer Website wird als Sitemap bezeichnet. Die Navigation zu den Seiten der obersten Ebene der Website, die sich wahrscheinlich auf jeder Seite befindet, wird als globale Navigation bezeichnet. Die globale Navigation kann auf verschiedene Arten dargestellt werden, z. B. über Navigationsleisten, Drop-down-Menüs und Ausklappmenüs. Die globale Navigation einer Website kann je nach Größe des Darstellungsbereichs unterschiedlich angezeigt werden.
Achten Sie darauf, dass Nutzer mit möglichst wenigen Klicks jede Seite Ihrer Website aufrufen können. Die Navigation sollte dabei intuitiv und nicht überladen sein. Für Navigationselemente gibt es jedoch keine speziellen Anforderungen. MachineLearningWorkshop.com ist eine Website mit nur einer Seite und hat oben rechts eine lokale Navigationsleiste. Dort platzieren Websites mit mehreren Seiten oft ihre globale Navigation.
Link „Direkt zum Inhalt“
Einige Websites enthalten einen Link „Direkt zum Inhalt“, der oft als erstes Element in der Fokusreihenfolge erscheint. Das könnte so aussehen:
<a href="#main" class="skip-link button">Skip to main</a>
Wenn darauf geklickt wird oder es den Fokus hat und der Nutzer die Taste Enter drückt, wird die Seite gescrollt und der Fokus wird auf das Element mit der ID main gelegt, vermutlich auf den Hauptinhalt.
<main id="main">
Für eine bessere Nutzerfreundlichkeit und Barrierefreiheit ist es wichtig, dass Nutzer die Inhaltsblöcke, die sich auf jeder Seite wiederholen, wie z. B. eine gemeinsame Überschrift und Hauptnavigationselemente, überspringen können. Wenn ein Nutzer mit Tastatur die Taste tab drückt, kann er mit einem Sprunglink schnell zum neuen Inhalt auf der Seite springen. So müssen sie nicht durch ein umfangreiches Menü wechseln.
Die meisten Designer mögen es nicht, wenn ein solcher Link oben auf der Seite zu sehen ist. Sie können diesen Link auch ausblenden. Denken Sie jedoch daran, dass der Link für den Nutzer sichtbar sein muss, wenn er den Fokus erhält. Das passiert, wenn ein Nutzer mit der Tastatur durch die Links auf der Seite tabt.
Inhalte nur im nicht fokussierten und nicht aktiven Zustand mit einer Auswahl wie .visually-hidden:not(:focus):not(:active) ausblenden
Wie bei jedem Linktext sollte der Name klar angeben, wohin der Link den Nutzer führt. Das Linkziel sollte der Beginn des Hauptinhalts der Seite sein.
Inhaltsverzeichnis
Das erste Element unserer Hauptinhalte ist die <h1>-Überschrift mit dem Titel dieser Seite: <h1>Navigation</h1>. Auf die Hauptüberschrift folgt eine kurze Beschreibung des Inhalts dieses Tutorials.
Auf kleineren Bildschirmen wird das Inhaltsverzeichnis nach der Überschrift angezeigt. Auf größeren Bildschirmen wird er in einer rechts ausgerichteten Seitenleiste angezeigt.
Für Navigationsbereiche eignet sich am besten das Element <nav>. Dadurch werden Screenreader und Suchmaschinen automatisch darüber informiert, dass ein Abschnitt die Rolle navigation hat, eine Landmark-Rolle.
Fügen Sie das Attribut aria-label hinzu, um den Zweck der Navigation kurz zu beschreiben. In diesem Fall würde der Wert dieses Attributs mit dem Text „Auf dieser Seite“ übereinstimmen. Verwenden Sie stattdessen aria-labelledby, um auf sichtbaren Text zu verweisen.
Mit einer id könnte das so aussehen:
<nav aria-labelledby="tocTitle">
<p id="tocTitle">On this page</p>
...
</nav>
Sichtbarer Text wird nicht nur übersichtlicher, sondern auch von Übersetzungsdiensten übersetzt, während Attributwerte möglicherweise nicht übersetzt werden. Wenn vorhanden, beziehen Sie sich nach Möglichkeit auf Text, der ein angemessenes Label bietet, anstatt Attributtext zu verwenden.
Die Navigationsleiste „Auf dieser Seite“ ist das Inhaltsverzeichnis. Wenn Sie aria-label verwenden möchten, geben Sie diesen Kontext an, anstatt sichtbaren Text zu wiederholen:
<nav aria-label="Table of Contents">
<p>On this page</p>
...
</nav>
Wenn Sie einen barrierefreien Namen für ein Element angeben möchten, sollten Sie den Namen des Elements nicht angeben. Screenreader geben dem Nutzer den Namen des Elements an.
Verwenden Sie beispielsweise beim <nav>-Element nicht das Wort „Navigation“, da diese Informationen bereits in den semantischen Elementen enthalten sind.
Navigationselemente müssen zwar nicht in einer Liste verschachtelt sein, aber durch die Verwendung einer Liste können Nutzer von Screenreadern erkennen, wie viele Listenelemente und damit Links sich in der Navigation befinden.
<nav aria-labelledby="tocTitle">
<p id="tocTitle">On this page</p>
<ul role="list">
<li>
<a href="#skip">Skip to content link</a>
</li>
<li>
<a href="#toc">Table of contents</a>
</li>
<li>
<a href="#bc">Page breadcrumbs</a>
</li>
<li>
<a href="#ln">Local navigation</a>
</li>
<li>
<a href="#global">Global navigation</a>
</li>
</ul>
</nav>
Tabreihenfolge nicht ändern
Der Inhaltsverzeichnis kann nach der Überschrift, auf kleineren Bildschirmen oder in einer rechts ausgerichteten Seitenleiste angezeigt werden. Zwei identische Navigationselemente einzubinden, um nur eines davon zu zeigen, wäre ein Anti-Muster.
Wir haben CSS verwendet, um die Navigation auf Seiten, die breiter als 1.254 Pixel sind, als Seitenleiste anzuzeigen.
Nutzer sind daran gewöhnt, dass Inhalte responsiv sind und sich die Position ändert, wenn sie das Gerät wechseln oder die Schriftgröße erhöhen. Sie erwarten jedoch nicht, dass sich die Tab-Reihenfolge dadurch ändert. Seitenlayouts sollten barrierefrei, vorhersehbar und auf einer Website einheitlich sein. Hier ist der Ort des Inhaltsverzeichnisses nicht vorhersehbar.
Navigationspfade auf Seiten
Breadcrumbs sind eine sekundäre Navigation, die Nutzern hilft zu verstehen, wo sie sich auf einer Website befinden. Navigationspfade geben in der Regel die URL-Hierarchie des aktuellen Dokuments und den Speicherort der aktuellen Seite innerhalb der Websitestruktur an.
Die Websitestruktur aus Nutzersicht kann sich von der Dateistruktur auf dem Server unterscheiden. Das ist in Ordnung. Der Nutzer muss nicht wissen, wie Sie Ihre Dateien organisieren, aber er muss sich in Ihren Inhalten zurechtfinden können.
Breadcrumbs geben Nutzern einen Einblick in die Struktur Ihrer Website. So können Nutzer mithilfe der Funktion back zu übergeordneten Abschnitten wechseln, ohne jede zuvor besuchte Seite noch einmal aufrufen zu müssen.
Wenn die Website eine hierarchische Verzeichnisstruktur hat, wie bei web.dev, enthält die Navigationsstruktur mit Wegweisern oft einen Link zur Startseite oder zum Hostnamen und einen Link zur Indexdatei jedes Verzeichnisses im URL-Pfad. Die aktuelle Seite ist optional und erfordert etwas mehr Aufmerksamkeit.
const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"
Die Abschnitte des Navigationspfads zeigen den Pfad von der aktuellen Seite zurück zur Startseite, einschließlich aller Zwischenebenen.
Jede Modulseite von „HTML lernen“ hat dieselbe Navigationsleiste, die die Hierarchie der HTML Lektionen im Abschnitt Learn von web.dev anzeigt.
Der Code sollte in etwa so aussehen:
<nav aria-label="breadcrumbs">
<ol role="list">
<li>
<a href="/">web.dev</a>
</li>
<li>
<a href="/learn">Learn</a>
</li>
<li>
<a href="/learn/html">HTML</a>
</li>
</ol>
</nav>
Das <nav>-Element, eine Orientierungspunktrolle, weist Hilfstechnologien an, den Navigationspfad als Navigationselement auf der Seite anzuzeigen.
Der barrierefreie Name „Brotkrüme“ für die aria-label unterscheidet diese Navigationselemente von den anderen Navigationselementen im selben Dokument.
Zwischen den einzelnen Links befindet sich ein Inhaltsseparator. Diese Trennzeichen können mit CSS generiert werden, um vor jedem Listenelement angezeigt zu werden, beginnend mit dem zweiten.
[aria-label^="breadcrumbs" i] li + li::before {
content: "";
display: block;
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
rotate: 45deg;
opacity: .8
}
Screenreader „sehen“ diese Symbole nicht, was eine Best Practice ist. Die Trennzeichen zwischen den Breadcrumb-Links sollten für Screenreader ausgeblendet werden. Sie müssen sich außerdem wie alle anderen Text- und visuellen Elemente auf der Seite deutlich vom Hintergrund abheben.
In unserem Beispielcode wird eine sortierte Liste verwendet, die einer unsortierten Liste vorzuziehen ist, da die Elemente nummeriert sind. role="list" wurde hinzugefügt, da einige Werte von CSS-Anzeigeeigenschaften die Semantik einiger Elemente entfernen.
Der Link zur Startseite in einem Navigationspfad sollte in der Regel „Startseite“ statt dem Namen oder Logo der Website lauten. Da sich die Navigationsleiste oben im Dokument befindet, ist es verständlich, warum dieses Anti-Muster verwendet wurde.
Die aktuelle Seite „Navigation“ ist nicht in der Navigationsleiste enthalten.
Aktuelle Seite
Wenn die aktuelle Seite in einer Navigationsleiste enthalten ist, sollte der Text vorzugsweise kein Link sein und aria-current="page" sollte im Listenelement der aktuellen Seite enthalten sein. Wenn dies nicht der Fall ist, ist es hilfreich, mit einem Symbol oder einem anderen Zeichen darauf hinzuweisen, dass die folgende Überschrift die aktuelle Seite ist.
Sehen wir uns eine alternative Version des Navigationspfads an, die diese Praxis berücksichtigt:
<nav aria-label="breadcrumbs">
<ol role="list">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/learn">Learn</a>
</li>
<li>
<a href="/learn/html">Learn HTML!</a>
</li>
<li aria-current="page">
Navigation
</li>
</ol>
</nav>
Die Breadcrumbs stimmen möglicherweise nicht mit den linearen Schritten überein, die ein Nutzer ausgeführt hat, um zur aktuellen Seite zu gelangen. Die Liste der Schritte, die bis zu diesem Punkt ausgeführt wurden, kann in einem <nav> verschachtelt sein, sollte aber nicht als Breadcrumb gekennzeichnet werden.
Lokale Navigation
Die nächste Navigationskomponente wird auf den meisten mittelgroßen und größeren Geräten in einer linken Seitenleiste mit einer Filterleiste und Links zu den einzelnen Abschnitten in „HTML lernen“ angezeigt. Diese Links und die Filterleiste dienen der Standortnavigation.
Wenn Sie diese Website auf einem Mobilgerät aufrufen oder ein schmaleres Display haben, wird die Seitenleiste beim Laden dieser Seite ausgeblendet. Du kannst über das Symbol in der oberen Navigationsleiste darauf zugreifen.
Der Hauptunterschied zwischen der dauerhaften lokalen Navigation auf breiten Bildschirmen und der lokalen Navigation auf schmaleren Bildschirmen ist der Pfeil, der zurück zur primären Navigation oben führt und die Navigation dann schließt.
Der Link zu diesem Dokument sieht genauso aus wie andere Links in der lokalen Navigation. Er kann sich jedoch leicht von den anderen Links unterscheiden, um sehenden Nutzern zu signalisieren, dass dies die aktuelle Seite ist. Diese visuelle Unterscheidung sollte mit CSS erfolgen.
Die aktuelle Seite kann auch mit dem Attribut aria-current="page" identifiziert werden. So wird Hilfstechnologien mitgeteilt, dass der Link zur aktuellen Seite führt.
Idealerweise sollte der HTML-Code für dieses Listenelement in der lokalen Navigation in etwa so aussehen:
<li>
<a aria-current="page" aria-selected="true" href="/learn/html/navigation">
Navigation
</a>
</li>
Globale Navigation
Die globale Navigation führt zu den obersten Seiten der Website und ist auf jeder Seite einer Website gleich.
Die globale Navigation einer Website kann auch aus Tabs bestehen, die verschachtelte Listen von Links öffnen, die zu allen Unterabschnitten einer Website oder anderen Menüs führen.
Er kann Bereiche mit Titeln, Schaltflächen und Such-Widgets enthalten. Diese zusätzlichen Funktionen sind keine Voraussetzung. Die Navigation muss auf jeder Seite angezeigt werden und auf jeder Seite gleich sein. Links zu der aktuellen Seite müssen natürlich aria-current="page" enthalten.
Die globale Navigation bietet eine einheitliche Möglichkeit, überall in der Anwendung oder auf der Website zu navigieren. Die Website von Google hat keine globale Navigation oben auf den Seiten. Yahoo! tut das. Auch wenn alle Haupt-Yahoo!-Properties unterschiedliche Stile haben, sind die Inhalte der meisten Bereiche gleich.
Die Inhalte der globalen Navigationsüberschriften für Nachrichten und Sport sind identisch. Das Symbol, das Nutzer darüber informiert, dass sie sich auf der Seite „Sport“ befinden, hat jedoch nicht genügend Kontrast, um barrierefrei zu sein, auch nicht für Besucher mit perfektem Sehvermögen. Beide Bereiche haben eine globale Navigation mit einer bereichsspezifischen lokalen Navigation darunter.
Ähnlich wie bei der globalen Navigation sollten auch die Fußzeilen auf allen Seiten identisch sein. Das ist aber die einzige Ähnlichkeit. Über die globale Navigation können Sie alle Bereiche der Website aus einer Produktperspektive aufrufen. Für Navigationselemente in einem Footer gelten keine speziellen Anforderungen.
In der Regel enthält die Fußzeile Links zu Unternehmensinformationen, z. B. rechtliche Hinweise, Informationen zum Unternehmen, eine Karriereseite und Links zu relevanten externen Quellen wie sozialen Medien.
Die Fußzeile dieser Seite enthält zwei Navigationselemente: eine dreispaltige Navigation zu ähnlichen web.dev-Seiten und eine separate Navigation zu den Nutzungsbedingungen und Datenschutzhinweisen von Google. Die Fußzeile enthält Informationen dazu, wie Sie zu web.dev beitragen können, ähnliche Inhalte des web.dev-Teams und Links zu externen sozialen Medien.
Als Nächstes sehen wir uns an, wie Sie Datentabellen markieren.
Wissen testen
Testen Sie Ihr Wissen über die Navigation.
Mit welchem Element wird die Hauptnavigation einer Website markiert?
<navigation><breadcrumb><nav>Kann es auf einer Seite mehrere Navigationselemente geben?