Navigation

Wie Sie unter Links gelernt haben, erstellt das Element <a> mit dem Attribut href Links, denen Nutzer durch Klicken oder Tippen folgen 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 zu anderen Seiten auf derselben Website verlinken, 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.

Das 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. Bei der einseitigen Website MachineLearningWorkshop.com befindet sich oben rechts eine lokale Navigationsleiste. Hier wird häufig die globale Navigation für Websites mit mehreren Seiten implementiert.

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 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äre der Wert dieses Attributs zum Text „Auf dieser Seite“ redundant. Verwenden Sie stattdessen aria-labelledby, um auf sichtbaren Text zu verweisen.

Mit einem id könnte dies 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>

Um einen barrierefreien Namen für ein Element bereitzustellen, sollten Sie den Namen des Elements nicht angeben. Screenreader stellen den Nutzern den Namen des Elements zur Verfügung. Verwenden Sie beispielsweise beim <nav>-Element nicht das Wort „Navigation“, da diese Informationen bereits in den semantischen Elementen enthalten sind.

Navigationselemente müssen nicht in einer Liste verschachtelt sein. Wenn Sie jedoch eine Liste verwenden, können Nutzer von Screenreadern sehen, 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

Das 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 ändern, wenn sie das Gerät wechseln oder die Schriftgröße erhöhen. Sie erwarten jedoch nicht, dass sich dadurch die Tab-Reihenfolge ändert. Seitenlayouts sollten barrierefrei, vorhersehbar und auf einer Website einheitlich sein. Hier ist der Speicherort des Inhaltsverzeichnisses nicht vorhersehbar.

Navigationspfade auf der Seite

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 die Position 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 alle Ancestor-Abschnitte aufrufen, ohne mit der Funktion back jede zuvor besuchte Seite aufrufen zu müssen.

Wenn die Website eine hierarchische Verzeichnisstruktur hat, wie es bei web.dev der Fall ist, enthält der Navigationspfad häufig 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 zugängliche Name der Navigationspfade, der mit dem aria-label angegeben wird, unterscheidet diese Navigation von den anderen Navigationsmarkierungen im selben Dokument.

Zwischen den einzelnen Links wird ein Inhaltstrennzeichen verwendet. 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 Navigationspfadlinks sollten für Screenreader verborgen sein. Außerdem müssen sie sich wie alle anderen Text- und visuellen Elemente auf der Seite deutlich vom Hintergrund abheben.

In unserem Beispielcode wird eine geordnete Liste verwendet, die einer ungeordneten Liste vorzuziehen ist, da die Elemente nummeriert sind. role="list" wurde hinzugefügt, da einige Werte von CSS-Darstellungseigenschaften die Semantik einiger Elemente entfernen.

Im Allgemeinen sollte der Link zur Startseite in einem Navigationspfad „home“ lauten und nicht der Name oder das Logo der Website. 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. Sie können darauf mit menu in der oberen Navigationsleiste 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 Seiten der obersten Ebene der Website und ist auf jeder Seite 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, sich innerhalb der Anwendung oder Website zu bewegen. Die Website von Google hat keine globale Navigation oben auf den Seiten. Yahoo! tut dies. 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 Fußzeilen auf allen Seiten identisch sein. Das ist aber die einzige Ähnlichkeit. Die globale Navigation ermöglicht die Navigation aus der Produktperspektive zu allen Teilen der Website. 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.

Wissenstest

Testen Sie Ihr Wissen über die Navigation.