Wie Sie unter links gelernt haben, erstellt das Element <a> mit dem Attribut href Links, denen Nutzer folgen können, indem sie auf oder
Tippen. In Listen haben Sie gelernt, wie Sie Inhaltslisten erstellen. In diesem Abschnitt erfahren Sie, wie Sie Listen
um eine Navigation zu erstellen.
Es gibt verschiedene Navigationstypen und verschiedene Möglichkeiten, diese anzuzeigen. Benannte Anker in Text, die auf andere Seiten innerhalb von Website werden als lokale Navigation betrachtet. Lokale Navigation, die aus einer Reihe von Links besteht, die die Hierarchie der Die aktuelle Seite in Bezug auf die Struktur der Website oder die Seiten, denen der Nutzer gefolgt ist, um zur aktuellen Seite zu gelangen, wird als Navigationspfad bezeichnet. Das Inhaltsverzeichnis einer Seite ist eine weitere Art der lokalen Navigation. Eine Seite, die hierarchische Links zu jeder einzelnen Seite einer Website enthält, eine Sitemap. Der Navigationsabschnitt, der zu den Seiten der obersten Ebene der Website führt, die sich auf jeder Seite befinden, wird als globale Navigation bezeichnet. Die globale Navigation kann auf verschiedene Arten angezeigt werden, unter anderem über Navigationsleisten, Dropdown-Menüs und Flyout-Menüs. Die globale Navigation einer Website kann je nach Größe des Darstellungsbereichs unterschiedlich angezeigt werden.
Stellen Sie immer sicher, dass die Nutzer mit möglichst wenig Klicks zu jeder Seite Ihrer Website navigieren können, während Sie gleichzeitig intuitiv und nicht zu überwältigend. Es gibt jedoch keine besonderen Anforderungen an Navigationselemente. MachineLearningWorkshop.com eine einseitige Website mit einer lokalen Navigationsleiste oben rechts; Hier wird bei mehrseitigen Websites oft die globale Navigation platziert.
Wenn Sie sich diese Seite auf web.dev ansehen, fallen Ihnen einige Navigationsfunktionen auf. Über dem Titel befindet sich ein Klickpfad, ein „auf dieser Seite“ ein Inhaltsverzeichnis nach dem Titel und eine ein Inhaltsverzeichnis, das je nach Bildschirmbreite entweder immer angezeigt oder mit einem Klick auf eine Menüschaltfläche sichtbar gemacht werden. Das erste Element auf der Seite ist ein versteckter Link zu #main, mit dem Sie sowohl die Seitenleiste als auch den Navigationspfad überspringen können.
„Direkt zum Inhalt“ Link
Das erste Element auf der Seite ist ein interner Link:
<a href="#main" class="skip-link button">Skip to main</a>
Wenn der Nutzer darauf klickt oder auf Enter klickt, scrollt er auf der Seite und rückt den Hauptinhalt in den Fokus:
eine Sehenswürdigkeit <main> mit einem id von main:
<main id="main">
Möglicherweise haben Sie den Link auf dieser Website noch nie gesehen, selbst wenn Sie alle vorherigen Abschnitte gelesen haben. Es wird nur angezeigt, wenn der Fokus darauf liegt:
Zur Verbesserung der Nutzerfreundlichkeit und Barrierefreiheit ist es wichtig, dass Nutzer die Inhaltsblöcke umgehen, die auf jeder Seite wiederholt werden.
Der Link zum Überspringen ist enthalten. Wenn ein Tastaturnutzer beim Laden auf tab klickt, kann er schnell zum Hauptinhalt der Website springen.
sich durch umfangreiche Verknüpfungen zu bewegen. Der Link zum Überspringen auf dieser Seite überspringt die bereichsweite Seitenleistennavigation und den Navigationspfad.
sodass der Nutzer direkt
zum Seitentitel gelangt.
Den meisten Designschaffenden gefällt das Aussehen eines Links oben auf der Seite nicht. Es ist in Ordnung, den Link auszublenden,
Wenn der Link hervorgehoben wird, was passiert, wenn ein Nutzer mit der Tastatur über den Link auf der Seite navigiert, muss der Link für alle Nutzer sichtbar sein.
Mit einer Auswahl wie .visually-hidden:not(:focus):not(:active) kannst du nur Inhalte im Status „nicht fokussiert“ und „nicht aktiv“ ausblenden.
Der Linktext lautet „Zur Hauptseite springen“. Dies ist der zugängliche Name des Links. Dies ist eine technische Website und Nutzer wissen wahrscheinlich, was die wichtigsten Seiten sind. .
Wie bei allen Linktexten sollte der barrierefreie Name eindeutig angeben, wohin der Link die Nutzenden führt. Das Linkziel sollte am Anfang des
mit dem Hauptinhalt einer Seite. Um dies zu testen, gehen Sie beim Laden der Seite mit der Tabulatortaste zur Seite „Weiter zur Hauptseite“ . Drücke dann auf Enter, damit er „springt“ auf den Hauptinhalt.
Inhaltsverzeichnis
Mit dem Link zum Springen zum Inhalt wird der Hauptinhalt sichtbar 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, eine kurze Beschreibung des Inhalts dieser
. Ob die Inhaltsverzeichnisnavigation vor oder nach der Überschrift in der Codebasis erscheint, hängt von der Breite Ihres Browsers ab.
Wenn Ihr Browser breiter als 80 em ist, erscheint das Inhaltsverzeichnis vor der Überschrift im Markup und ähnelt der folgenden (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 Navigationsbereiche: Es informiert den Screenreader und die Suchmaschine automatisch.
dass ein Bereich die Rolle navigation, eine Sehenswürdigkeit, hat.
Einschließlich des Attributs aria-label
beschreibt kurz den Zweck der Navigation. In diesem Fall ist der Wert des Attributs redundant zu
der auf der Seite sichtbar ist, empfehlen wir die Verwendung von aria-labelledby
um auf den sichtbaren Text zu verweisen.
Wir können das nicht semantische <div> in einen Absatz <p> ändern und dann ein id hinzufügen, damit darauf verwiesen werden kann. Dann verwenden wir aria-labelledby:
<nav aria-labelledby="tocTitle">
<p id="tocTitle">On this page</p>
Sichtbarer Text wird nicht nur redundant, sondern von Übersetzungsdiensten übersetzt, was bei Attributwerten nicht der Fall ist. Wenn möglicher Text vorhanden ist, der eine angemessene Beschriftung ermöglicht, sollte dieser Text dem Attributtext vorgezogen werden.
Diese Navigation ist das Inhaltsverzeichnis. Wenn Sie die aria-label verwenden möchten, geben Sie diese Informationen an, anstatt sichtbaren Text zu wiederholen:
<nav aria-label="Table of Contents">
<p>On this page</p>
Geben Sie bei der Angabe eines barrierefreien Namens für ein Element nicht den Namen des Elements an. Screenreader stellen den Nutzenden diese Informationen zur Verfügung.
Gib beispielsweise bei Verwendung des Elements <nav> nicht „navigation“ an. dass diese Informationen bei
semantischen Elementen enthalten sind.
Die Links selbst befinden sich in einer unsortierten Liste. Obwohl sie nicht in einer Liste verschachtelt sein müssen, können Nutzer von Screenreadern durch die Verwendung einer Liste erkennen, wie viele Listenelemente und damit Links sind eine einzelne Liste in einer Navigation.
<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 Ihr Browser weniger als 80 Meter breit ist, wird der Abschnitt „Auf dieser Seite“ befindet sich unter der Überschrift und der Kurzinfo. Dies geschieht, indem
Zwei Navigationskomponenten mit einem Inhaltsverzeichnis und Blenden einer der beiden Navigationskomponenten mit der CSS-Datei display: none; basierend auf einer Medienabfrage aus.
Die Verwendung von zwei identischen Widgets, um nur eines zu zeigen, ist ein Anti-Muster. Die zusätzlichen Byte sind vernachlässigbar. HTML-Inhalte werden ausgeblendet vor
mithilfe des CSS-display: nones für alle Nutzer geeignet ist. Das Problem ist, dass auf Breitbildbildschirmen das Inhaltsverzeichnis vor #main steht.
Bei kleineren Bildschirmen ist das Inhaltsverzeichnis in #main verschachtelt. Wenn Sie mit der Tastatur zum Inhalt springen, wird die Tabelle mit den
Inhalte auf einem Breitbildbildschirm anzeigen. Nutzer sind es zwar gewohnt, dass Inhalte responsiv sind und den Standort ändern, wenn sie das Gerät oder
die Schriftgröße erhöhen, erwarten sie nicht, dass sich die Tab-Reihenfolge dadurch ändert. Seitenlayouts sollten barrierefrei, vorhersehbar
und einheitlich auf einer Website. Hier ist die Position des Inhaltsverzeichnisses nicht vorhersehbar.
Navigationspfade auf der Seite
Navigationspfade bieten eine sekundäre Navigation, die Nutzenden helfen zu 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. Die Website-Struktur kann sich aus Sicht der Nutzer unterscheiden. aus der Dateistruktur auf dem Server. Das ist in Ordnung. Die Nutzenden müssen nicht wissen, wie Sie Ihre Dateien organisieren, aber sie müssen in der Lage sein, durch Ihre Inhalte navigieren können.
Navigationspfade helfen Nutzern dabei, sich auf Ihrer Website zurechtzufinden und die Organisation zu verstehen, sodass sie schnell zu beliebigen Vorgängerseiten navigieren können.
ohne die vorherige besuchte Seite durchlaufen zu müssen, um mit 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 der Navigationspfad häufig aus eines Links zum Home bzw. Hostnamen mit einem Link zur Indexdatei jedes Verzeichnisses im Pfadnamen der URL. Die Einbeziehung der aktuelle Seite ist optional und erfordert etwas 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 alle dazwischen liegenden Ebenen angezeigt werden.
Jede Seite des HTML-Lernmoduls hat denselben Navigationspfad, der die Hierarchie der HTML-Lektionen innerhalb des
Bereich learn von web.dev. Der Code ähnelt dem folgenden, wobei die 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 wird das <nav>-Element verwendet, eine Orientierungshilfe, sodass die Hilfstechnologien die Navigationspfade als Navigationselement auf der Seite darstellen.
Der zugängliche Name der „Navigationspfade“, der mit dem aria-label bereitgestellt wird, unterscheidet ihn von den anderen Navigationsmarkierungen im aktuellen Dokument.
Zwischen den Links gibt es von CSS generierte Inhaltstrennzeichen. Das Trennzeichen steht vor jedem Listenelement, das mit dem zweiten <li> beginnt.
[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“ nicht Das ist die Best Practice: Trennzeichen zwischen Navigationspfadlinks sollten vor Screenreadern verborgen werden. Außerdem müssen sie einen ausreichenden Kontrast zum Hintergrund haben, der dem normalen Text entspricht.
Diese Version verwendet eine ungeordnete Liste und Listenelemente. Eine geordnete Liste ist vorzuziehen, da geordnete Listenelemente aufgezählt werden.
Es handelt sich auch um eine Liste: role="list" wurde wieder hinzugefügt, weil bei einigen CSS-Werten für Anzeigeeigenschaften die Semantik einiger Elemente entfernt wird.
Im Allgemeinen sollte der Link zur Startseite in einem Navigationspfad „home“ lauten. und nicht das Logo der Website mit dem Namen der Website in Label hinzufügen. Da sich der Navigationspfad jedoch oben im Dokument befindet und das Logo das einzige Vorkommen auf der Seite ist, ist es sinnvoll. warum dieses Anti-Muster verwendet wurde.
Das letzte Element ist ein benutzerdefiniertes <share-action>-Element. Benutzerdefinierte Elemente werden in Abschnitt 15 erläutert. Während dieses benutzerdefinierte Element
ist nicht Teil des Navigationspfads. Ein irrelevantes Element in einem <nav> ist zulässig, solange die Einbeziehung auf allen Seiten einheitlich ist.
Aktuelle Seite
Die aktuelle Seite, „Navigation“, ist nicht im Navigationspfad enthalten. Wenn die aktuelle Seite in einem
Navigationspfad ist, sollte der Text möglichst kein Link sein und aria-current="page" sollte im
Listenelement. Ist dies nicht der Fall, sollten Sie angeben, dass die folgende Überschrift der aktuellen Seite mit einem
oder ein anderes Symbol.
Sollte sich das Design ändern, kann 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 gedacht. Dies kann z. B. eine Liste mit dem Pfad sein, über den der Nutzer zur aktuellen Seite gelangt ist, oder der
Die Liste der Schritte, die bis zu diesem Punkt in einem Schema gefolgt sind, kann in einem <nav> verschachtelt sein, sollte jedoch nicht als Navigationspfad gekennzeichnet werden.
Lokale Navigation
Diese Seite enthält eine weitere Navigationskomponente. Auf einem Breitbildbildschirm befindet sich links eine Seitenleiste mit dem „HTML lernen“ das Logo, eine Suchleiste und Links zu jedem der 20 Abschnitte in der HTML-Hilfe. Jeder Link enthält die Kapitelnummer, den Titel des Abschnitts und ein Häkchen rechts neben Bereichen, die Sie bereits besucht haben – möglicherweise dieses, wenn Sie die Seite verlassen haben und wieder zurückgekehrt sind. Die Links zu allen Abschnitten von Learn HTML, zusammen mit der Kopfzeile für die Suche und der lokalen Kopfzeile, stellen die Standortnavigation dar.
Wenn du diese Website auf einem Tablet oder Mobilgerät besuchst oder wenn du einen schmaleren Bildschirm verwendest, wird die Seitenleiste beim Laden dieser Seite ausgeblendet. Sie können sie über das Dreistrich-Menü in der oberen Navigationsleiste sichtbar machen. Ja, die Kopfzeile ist ein benutzerdefiniertes <web-header>-Element, für das role="navigation" festgelegt wurde.
Der Hauptunterschied zwischen der permanenten lokalen Navigation im Breitbildformat und der lokalen Navigation auf kleineren Bildschirmen, die ein- und ausgeblendet werden kann, ist die Anzeige der Schließen-Schaltfläche in der Version, die ausgeblendet werden kann. Dieses Symbol wird auf Breitbildbildschirmen mit display: none; ausgeblendet.
Der Link zu diesem Dokument, Abschnitt 010, unterscheidet sich leicht von den anderen Links in der lokalen Navigation, um sehenden Nutzern anzuzeigen, dass dies die aktuelle Seite ist. Dieser visuelle Unterschied wird mit CSS erzeugt. Die aktuelle Seite wird auch durch das Attribut aria-current="page" gekennzeichnet. Dadurch werden assistive Technologien darüber informiert, dass es sich um einen Link zur aktuellen Seite handelt. Der HTML-Code für dieses Listenelement innerhalb 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 besuchen, ist das Häkchen nicht sichtbar. Wenn Sie diese Seite schon einmal besucht haben,
Das benutzerdefinierte Attribut data-complete ist auf true festgelegt und das Häkchen wird angezeigt. Das Häkchen ist enthalten
in jedem Link, aber CSS blendet das Kästchen für Nutzer, die diese Seite zuvor noch nicht besucht haben, über display: none aus, da das Attribut
Attribut und Wert data-complete="true":
.course .stack-nav a:not([data-complete="true"]) svg {
display: none;
}
Wenn display auf etwas anderes als none festgelegt ist, informiert role die Hilfstechnologien darüber, dass das Inline-SVG ein Bild ist.
aria-label fungiert als alt-Attribut für <img>.
Globale Navigation
Die globale Navigation ist der Navigationsbereich, der zu den Seiten der obersten Ebene einer Website führt, die auf jeder Seite einer Website identisch sind.
Die globale Navigation einer Website kann auch aus Tabs bestehen, die verschachtelte Listen mit Links öffnen, die auf alle Unterbereiche einer Website oder andere Menüs verweisen.
Sie kann Abschnitte mit Titel, Schaltflächen und Such-Widgets enthalten. Diese zusätzlichen Funktionen sind nicht erforderlich. Was erforderlich ist, ist,
Die Navigation erscheint auf jeder Seite
und ist auf jeder Seite gleich. mit aria-current="page" in allen Links zur aktuellen Seite.
Die globale Navigation bietet eine einheitliche Möglichkeit, sich innerhalb der App oder Website zu bewegen. Google bietet keine globalen oben auf der Seite. Yahoo! macht. Obwohl alle wesentlichen Yahoo! unterschiedliche Stile haben, kann der Inhalt sind die meisten Abschnitte gleich.
Der Inhalt der globalen Navigationsüberschriften „Nachrichten“ und „Sport“ ist identisch. Das Symbol zeigt jedoch, dass sich der Nutzer gerade den Kontrast zum Thema Sport nicht groß genug, um barrierefrei zu sein; auch für Besucher ohne Sehschwäche. Beide Bereiche haben ein globales mit einer bereichsspezifischen lokalen Navigation darunter.
Ähnlich wie bei der globalen Navigation sollten Fußzeilen auf allen Seiten identisch sein. Aber das ist die einzige Ähnlichkeit. Globale Navigation die Navigation zu allen Teilen der Website aus Produktperspektive ermöglichen. Für Navigationselemente in einer Fußzeile gelten keine besonderen Anforderungen. In der Regel enthält die Fußzeile Unternehmenslinks, z. B. rechtliche Hinweise, Informationen zum Unternehmen und Karrieremöglichkeiten, und kann zu externen Nutzern führen. etwa Social-Media-Symbole.
Die Fußzeile dieser Seite enthält drei zusätzliche <nav>-Elemente: die Navigation in der Fußzeile, Google Developers sowie Nutzungsbedingungen und Richtlinien.
wobei jeder ein Link ist. In der Fußzeile finden Sie Informationen dazu, wie Sie zu web.dev auf GitHub beitragen können. Weitere Lerninhalte von
Google außerhalb von web.dev und externe Anleitung zum Herstellen einer Verbindung Links.
Diese drei Navigationen in der <footer> sind <nav>-Elemente mit einem aria-label, der einen barrierefreien Namen für diese Orientierungsrollen angibt.
Alle bisherigen Navigationspfade waren Links, die in Listen innerhalb eines Navigationsbereichs verschachtelt sind. Wir haben alles behandelt, was Sie wissen müssen, um Ihre eigenen Navigationen zu erstellen.
Als Nächstes schauen wir uns das Auszeichnen von Datentabellen an.
Wissen testen
Testen Sie Ihr Wissen über Navigation.
Welches Element wird verwendet, um die Hauptnavigation einer Website auszuzeichnen?
<navigation><breadcrumb><nav>Kann eine Seite mehrere Navigationselemente enthalten?