Navigation

Wie Sie in Links gelernt haben, werden durch das <a>-Element mit dem Attribut href Links erstellt, denen Nutzer durch Klicken oder Tippen folgen können. Unter Listen haben Sie gelernt, wie Sie Inhaltslisten erstellen. In diesem Abschnitt erfahren Sie, wie Sie Linklisten gruppieren, um eine Navigation zu erstellen.

Es gibt verschiedene Navigationsarten und verschiedene Möglichkeiten, diese anzuzeigen. Benannte Anker in Text, die auf andere Seiten auf derselben Website verweisen, gelten als lokale Navigation. Die lokale Navigation, die aus einer Reihe von Links besteht, die die Hierarchie der aktuellen Seite im Verhältnis zur Struktur der Website oder die Seiten angeben, über die der Nutzer zur aktuellen Seite gelangt ist, 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. Der Navigationsbereich, der zu den Seiten der obersten Ebene der Website führt und sich auf jeder Seite befindet, wird als globale Navigation bezeichnet. Die globale Navigation kann auf verschiedene Arten angezeigt werden, z. B. in Navigationsleisten, Drop-down-Menüs und Flyout-Menüs. Die globale Navigation derselben Website kann je nach Größe des Darstellungsbereichs unterschiedlich dargestellt werden.

Achte immer darauf, dass Nutzer jede Seite deiner Website mit der geringsten Anzahl an Klicks aufrufen können. Achte dabei darauf, dass die Navigation intuitiv und nicht zu überwältigend ist. Es gibt jedoch keine besonderen Anforderungen an Navigationselemente. MachineLearningWorkshop.com ist eine einseitige Website und hat oben rechts eine lokale Navigationsleiste. Hier setzen mehrseitige Websites oft ihre globale Navigation ein.

Wenn Sie sich diese Seite auf web.dev ansehen, werden Sie einige Navigationsfunktionen entdecken. Über dem Titel befindet sich ein Navigationspfad, nach dem Titel ein Inhaltsverzeichnis „auf dieser Seite“ und ein Inhaltsverzeichnis „Learn HTML“, das je nach Breite des Bildschirms entweder immer angezeigt oder durch Klicken auf eine Menüschaltfläche sichtbar gemacht wird. Das erste Element auf der Seite ist ein versteckter Link zu #main, mit dem Sie sowohl die Seitenleisten- als auch die Breadcrumb-Links überspringen können.

Link „Zum Inhalt springen“

Das erste Element auf der Seite ist ein interner Link:

<a href="#main" class="skip-link button">Skip to main</a>

Sie scrollt durch Klicken oder wenn der Nutzer auf Enter klickt und den Fokus auf den Hauptinhalt legt: eine Orientierungshilfe <main> mit einem id von main:

<main id="main">

Möglicherweise hast du den Link auf dieser Website nie gesehen, auch wenn du alle vorherigen Abschnitte gelesen hast. Es wird nur angezeigt, wenn der Fokus darauf liegt:

Für eine bessere Nutzerfreundlichkeit und Barrierefreiheit ist es wichtig, dass Nutzende die Inhaltsblöcke, die auf jeder Seite wiederholt werden, umgehen können. Der Link zum Überspringen ist enthalten. Wenn ein Tastaturnutzer beim Laden auf tab klickt, kann er schnell zum Hauptinhalt der Website springen, ohne dass umfassende Verknüpfungen mit der Tabulatortaste hergestellt werden müssen. Auf dieser Seite überspringt der Link zum Überspringen die bereichsweite Navigationsleiste und den Navigationspfad, sodass der Nutzer direkt zum Seitentitel gelangt.

Den meisten Designfachkräften gefällt es nicht, einen Link oben auf der Seite zu haben. Es ist in Ordnung, den Link auszublenden, während der Link in den Fokus rückt, was dann der Fall ist, wenn ein Tastaturnutzer über den Link auf der Seite gelangt. Der Link muss für alle Nutzer sichtbar sein. Blenden Sie Content nur mit einem Selektor wie .visually-hidden:not(:focus):not(:active) aus, der nicht fokussiert und nicht aktiv ist.

Der Linktext lautet „skip to main“ (Zu Hauptseite springen). Dies ist der zugängliche Name des Links. Es handelt sich um eine technische Website. Nutzer wissen wahrscheinlich, was „Haupt“ bedeutet. Wie jeder Linktext sollte der barrierefreie Name eindeutig darauf hinweisen, wohin der Link die Nutzenden führt. Das Linkziel sollte der Anfang des Hauptinhalts der Seite sein. Wenn Sie dies testen möchten, gehen Sie beim Laden der Seite mit der Tabulatortaste zum Link „Weiter zur Hauptseite“. Drücken Sie dann Enter, damit er zum Hauptinhalt wechselt.

Inhalt

Mit dem Link zum Überspringen des Inhalts wird durch den Hauptinhalt gescrollt. Das erste Element ist die Überschrift <h1> mit dem Titel dieses Abschnitts. In diesem Fall <h1>Marking up navigation</h1>. Auf die Hauptüberschrift folgt die Kurzinfo, in der die Inhalte dieser Anleitung kurz beschrieben werden. Ob die Inhaltsverzeichnisnavigation in der Codebasis vor oder nach der Überschrift steht, hängt von der Breite Ihres Browsers ab.

Wenn Ihr Browser breiter als 80 em ist, steht das Inhaltsverzeichnis vor der Überschrift im Markup und sieht in etwa so aus (die Klassennamen wurden entfernt, um das Markup zu vereinfachen):

<nav aria-label="On this page">
  <div>On this page</div>
  <div>
    <ul>
      <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>
  </div>
</nav>

Das <nav>-Element eignet sich am besten für Navigationsabschnitte: Es informiert Screenreader und Suchmaschine automatisch darüber, dass ein Abschnitt die Rolle navigation (die Orientierungshilfe) hat.

Mit dem Attribut aria-label wird eine kurze Beschreibung des Zwecks der Navigation angegeben. Da der Wert des Attributs im Hinblick auf den auf der Seite sichtbaren Text redundant ist, empfiehlt es sich, mit aria-labelledby auf den sichtbaren Text zu verweisen.

Wir können das nicht semantische <div> in einen Absatz <p> ändern und dann eine id hinzufügen, damit darauf verwiesen werden kann. Wir verwenden dann aria-labelledby:

<nav aria-labelledby="tocTitle">
  <p id="tocTitle">On this page</p>

Neben der Reduzierung der Redundanz wird sichtbarer Text von Übersetzungsdiensten übersetzt, im Gegensatz zu Attributwerten. Wenn möglich, wenn Text vorhanden ist, der für ein angemessenes Label sorgt, sollte dieser dem Attributtext vorgezogen werden.

Diese Navigation ist das Inhaltsverzeichnis. Wenn du aria-label verwenden möchtest, gib diese Informationen an, anstatt sichtbaren Text zu wiederholen:

<nav aria-label="Table of Contents">
  <p>On this page</p>

Wenn Sie einen barrierefreien Namen für ein Element angeben, geben Sie nicht den Namen des Elements an. Screenreader stellen dem Nutzer diese Informationen zur Verfügung. Geben Sie beispielsweise bei Verwendung des Elements <nav> nicht „navigation“ an; diese Informationen sind bei Verwendung semanischer Elemente enthalten.

Die Links selbst befinden sich in einer ungeordneten Liste. Sie müssen zwar nicht in einer Liste verschachtelt sein, aber die Verwendung einer Liste ermöglicht Nutzern von Screenreadern, zu wissen, wie viele Listenelemente und somit Links eine einzelne Liste in einer Navigation sind.

<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>

Wenn die Breite Ihres Browsers weniger als 80 em beträgt, finden Sie das Widget „Auf dieser Seite“ unter der Überschrift und der Kurzinfo. Dazu werden zwei Navigationskomponenten für das Inhaltsverzeichnis eingeschlossen und eine der beiden Komponenten mit CSS-display: none; auf der Grundlage einer Medienabfrage ausgeblendet.

Zwei identische Widgets, nur eines anzuzeigen, ist ein Anti-Pattern. Die zusätzlichen Byte sind vernachlässigbar. Es ist angemessen, HTML-Inhalte mit dem CSS-Code display: none für alle Nutzer auszublenden. Das Problem besteht darin, dass bei breiten Bildschirmen das Inhaltsverzeichnis vor #main steht und auf kleineren Bildschirmen das Inhaltsverzeichnis in #main verschachtelt ist. Wenn Sie die Tastatur verwenden, um zu Inhalten zu springen, wird auf dem Breitbildbildschirm das Inhaltsverzeichnis übersprungen. Nutzer sind daran gewöhnt, dass Inhalte responsiv sind und den Standort ändern, wenn sie das Gerät wechseln oder die Schrift vergrößern. Sie erwarten jedoch nicht, dass sich die TAB-Reihenfolge ändert, wenn sie dies tun. Seitenlayouts sollten auf einer Website zugänglich, vorhersehbar und einheitlich sein. Hier ist der Speicherort des Inhaltsverzeichnisses nicht vorhersehbar.

Navigationspfade für Seiten

Navigationspfade bieten eine sekundäre Navigation, damit Nutzende verstehen, wo sie sich auf einer Website befinden. Sie zeigen in der Regel die URL-Hierarchie des aktuellen Dokuments und die Position der aktuellen Seite in der Website-Struktur an. Die Websitestruktur kann aus Sicht des Nutzers von der Dateistruktur auf dem Server abweichen. Das ist in Ordnung. Der Nutzer muss nicht wissen, wie Sie Ihre Dateien organisieren, aber er muss in der Lage sein, durch Ihre Inhalte zu navigieren.

Navigationspfade helfen Nutzern dabei, sich auf Ihrer Website zurechtzufinden und sich ein Bild von der Organisation Ihrer Website machen. So können sie schnell zu beliebigen Ancestor-Bereichen navigieren, ohne die einzelnen zuvor besuchten Seiten durchlaufen zu müssen, um mithilfe der back-Funktion zur aktuellen Seite zu gelangen.

Wenn die Website eine einfache hierarchische Verzeichnisstruktur hat, wie es bei web.dev der Fall ist, besteht die Breadcrumb-Navigation häufig aus einem Link zum Basisverzeichnis oder zum Hostnamen mit einem Link zur Indexdatei jedes Verzeichnisses im Pfadnamen der URL. Die Aufnahme der aktuellen Seite ist optional und erfordert ein wenig besondere 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, wobei die einzelnen Ebenen dazwischen dargestellt sind.

Jede Seite mit dem HTML-Modul zum Lernen verfügt über dieselbe Navigationspfad-Navigation. Hier wird die Hierarchie der HTML-Lektionen im Abschnitt learn von web.dev angezeigt. Der Code ähnelt dem folgenden, wobei Klassen und SVG-Details aus Gründen der Übersichtlichkeit entfernt wurden:

<nav aria-label="breadcrumbs">
  <ul role="list">
    <li>
      <a href="/">
        <svg aria-label="web.dev" role="img">
          <use href="#webDevLogo" />
        </svg>
      </a>
    </li>
    <li>
      <a href="/learn">Learn</a>
    </li>
    <li>
      <a href="/learn/html">Learn HTML!</a>
    </li>
  </ul>
  <share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
    <svg aria-label="share" role="img">
      <use href="#shareIcon" />
    </svg>
    <span>Share</span>
  </share-action>
</nav>

Dieser Navigationspfad entspricht den Best Practices. Dabei kommt das <nav>-Element zum Einsatz, das eine Orientierungshilfe darstellt, sodass die Hilfstechnologien den Navigationspfad als Navigationselement auf der Seite darstellen. Der zugängliche Name des „Navigationspfads“, der zusammen mit dem aria-label angegeben wird, unterscheidet ihn von den anderen Orientierungspunkten für die Navigation im aktuellen Dokument.

Zwischen den Links gibt es von CSS generierte Inhaltstrennzeichen. Die Trennzeichen stehen vor jedem Listenelement, beginnend mit dem zweiten <li>.

[aria-label^="breadcrumb" 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“ sie nicht, was eine Best Practice ist: Trennzeichen zwischen Links für Navigationspfade sollten vor Screenreadern verborgen sein. Außerdem muss der Kontrast zum Hintergrund groß genug sein, wie bei normalem Text.

In dieser Version werden eine ungeordnete Liste und Listenelemente verwendet. Eine geordnete Liste ist zu bevorzugen, da geordnete Listenelemente aufgezählt werden. Es handelt sich auch um eine Liste: role="list" wurde wieder hinzugefügt, weil einige CSS-Eigenschaftswerte für die Anzeige die Semantik aus einigen Elementen entfernen.

Im Allgemeinen sollte der Link zur Startseite in einem Navigationspfad „Startseite“ lauten und nicht das Logo der Website mit dem Namen der Website als Label. Da sich der Navigationspfad jedoch oben im Dokument befindet und das einzige Vorkommen des Logos auf der Seite ist, ergibt es Sinn, warum dieses Anti-Muster verwendet wurde.

Das letzte Element ist ein benutzerdefiniertes <share-action>-Element. Benutzerdefinierte Elemente werden in Abschnitt 15 erläutert. Dieses benutzerdefinierte Element ist zwar nicht Teil des Navigationspfads, aber das Einbinden eines anderen Elements in einem <nav> ist zulässig, solange es auf allen Seiten einheitlich ist.

Aktuelle Seite

Auf dieser Seite ist die aktuelle Seite „Navigation“ nicht im Navigationspfad enthalten. Wenn sich die aktuelle Seite in einem Navigationspfad befindet, sollte der Text möglichst kein Link sein. Außerdem sollte aria-current="page" im Listenelement der aktuellen Seite enthalten sein. Falls es nicht enthalten ist, ist es hilfreich, anzugeben, dass es sich bei der folgenden Überschrift um die aktuelle Seite handelt. Verwenden Sie dazu ein Symbol oder ein anderes Symbol.

Sollte sich das Design ändern, könnte eine alternative Version des Navigationspfads verwendet werden:

<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>

Navigationspfade sind nicht für lineare Schritte vorgesehen. Beispielsweise kann eine Liste des Pfads, den der Nutzer verwendet hat, um zur aktuellen Seite zu gelangen, oder die Liste der Schritte, die bis zu diesem Punkt in einem Schema ausgeführt wurden, in einem <nav> verschachtelt werden, sie sollten jedoch nicht als Navigationspfad gekennzeichnet werden.

Lokale Navigation

Auf dieser Seite gibt es eine weitere Navigationskomponente. Auf einem Breitbildbildschirm gibt es links eine Seitenleiste mit dem Logo „HTML lernen“, einer Suchleiste und Links zu jedem der 20 Abschnitte in „HTML lernen“. Jeder Link enthält die Kapitelnummer, den Abschnittstitel und ein Häkchen rechts von Abschnitten, die Sie bereits besucht haben – möglicherweise diesen, wenn Sie eine Seite verlassen haben und wieder zurückgekehrt sind. Die Links zu allen Abschnitten in „HTML-Lernen“ bilden zusammen mit der Suche und dem lokalen Header die Ortsnavigation.

Wenn Sie diese Website auf einem Tablet oder Mobilgerät aufrufen oder wenn Sie einen schmaleren Bildschirm verwenden, wird die Seitenleiste beim Laden dieser Seite ausgeblendet. Sie können sie über das Dreistrich-Menü in der oberen Navigationsleiste anzeigen lassen (ja, die Kopfzeile ist ein benutzerdefiniertes <web-header>-Element, für das role="navigation" festgelegt ist).

Der Hauptunterschied zwischen der permanenten lokalen Navigation auf breiten Bildschirmen und der lokalen Navigation auf kleineren Bildschirmen, die ein- und ausgeblendet werden können, besteht in der Anzeige der Schließen-Schaltfläche in der Version, die ausgeblendet werden kann. Dieses Symbol wird auf Breitbildschirmen mit display: none; ausgeblendet.

Der Link zu diesem Dokument, Abschnitt 010, sieht etwas anders aus als die anderen Links in der lokalen Navigation, um sehende Nutzer darauf hinzuweisen, dass dies die aktuelle Seite ist. Dieser visuelle Unterschied wird mit CSS erzeugt. Die aktuelle Seite wird auch durch das Attribut aria-current="page" identifiziert. Dies informiert assistive Technologien darüber, dass es sich um einen Link zur aktuellen Seite handelt. Der HTML-Code für dieses Listenelement in dieser lokalen Navigation sieht in etwa so aus:

<li>
  <a aria-current="page" href="/learn/html/navigation" data-complete="true">
    <span>010</span>
    <span>Navigation</span>
    <svg aria-label="Check" role="img">
      <use href="#checkmark" />
    </svg>
  </a>
</li>

Wenn Sie diese Seite nicht zum ersten Mal aufrufen, wird das Häkchen nicht angezeigt. Wenn Sie diese Seite schon einmal besucht haben, ist das benutzerdefinierte Attribut data-complete auf true gesetzt und das Häkchen wird angezeigt. Das Häkchen ist in jedem Link enthalten, aber CSS blendet das Kästchen für Nutzer aus, die diese Seite mit display: none noch nicht besucht haben, da das Attribut data-complete="true" und der Wert nicht vorhanden sind:

.course .stack-nav a:not([data-complete="true"]) svg {
  display: none;
}

Wenn display auf etwas anderes als none festgelegt ist, informiert role die Hilfstechnologie darüber, dass das Inline-SVG ein Bild ist, und aria-label fungiert als alt-Attribut für einen <img>.

Globale Navigation

Globale Navigation ist der Navigationsbereich, der zu den Seiten der obersten Ebene der Website führt, die auf jeder Seite einer Website identisch sind. Die globale Navigation einer Website kann auch aus Registerkarten bestehen, die verschachtelte Listen mit Links öffnen, die auf alle Unterbereiche einer Website oder andere Menüs verweisen. Sie können benannte Abschnitte, Schaltflächen und Such-Widgets enthalten. Diese zusätzlichen Funktionen sind keine Voraussetzung. Erforderlich ist, dass die Navigation auf jeder Seite identisch ist und auf jeder Seite gleich ist – natürlich mit aria-current="page" für alle Links zur aktuellen Seite.

Die globale Navigation bietet eine einheitliche Möglichkeit, sich überall in der Anwendung oder auf der Website zu bewegen. Google hat keine globale Navigation oben auf der Seite. Yahoo! tut dies. Zwar haben alle Yahoo!-Haupteigenschaften unterschiedliche Stile, der Inhalt der meisten Bereiche ist jedoch derselbe.

Der Inhalt der globalen Navigationsüberschriften für Nachrichten und Sport ist identisch, aber das Symbol, das anzeigt, dass der Nutzer derzeit Sport treibt, bietet nicht genügend Kontrast, um zugänglich zu sein. Dies gilt auch für Besucher mit eingeschränktem Sehvermögen. Beide Abschnitte haben eine globale Navigation und darunter eine bereichsspezifische lokale Navigation.

Ähnlich wie bei globalen Navigationen sollten die Fußzeilen auf allen Seiten identisch sein. Aber das ist die einzige Gemeinsamkeit. Die globale Navigation ermöglicht die Navigation zu allen Teilen der Website aus Produktperspektive. Navigationselemente innerhalb einer Fußzeile haben keine besonderen Anforderungen. Die Fußzeile enthält im Allgemeinen Unternehmenslinks, z. B. zu rechtlichen Hinweisen, zum Unternehmen und zu Karrieremöglichkeiten. Sie kann zu externen Quellen wie Social-Media-Symbolen führen.

Die Fußzeile dieser Seite enthält drei zusätzliche <nav>-Elemente: die Fußzeilennavigation, Google Developers sowie Nutzungsbedingungen und Richtlinien, die jeweils ein Link sind. In der Navigationsleiste in der Fußzeile finden Sie Informationen dazu, wie Sie auf GitHub zu web.dev beitragen können, andere Bildungsinhalte, die von Google außerhalb von web.dev bereitgestellt werden, und externe Links zum Herstellen einer Verbindung.

Diese drei Navigationen in der <footer> sind <nav>-Elemente mit einem aria-label, der einen barrierefreien Namen für diese Sehenswürdigkeiten-Rollen angibt. Alle Navigationen, die wir gesehen haben, sind Links, die in Listen innerhalb einer Navigation eingebettet sind. Wir haben alles behandelt, was Sie wissen müssen, um eigene Navigationen zu erstellen. Als Nächstes sehen wir uns das Auszeichnen von Datentabellen an.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Navigation.