Hauptnavigation für eine Website erstellen

In dieser Anleitung wird beschrieben, wie Sie eine barrierefreie Hauptnavigation einer Website erstellen. Sie erfahren mehr über semantisches HTML, Zugänglichkeit und wie die Verwendung von ARIA-Attributen manchmal mehr Schaden als Nutzen bringt.

Manuel Matuzović
Manuel Matuzović
X

Es gibt viele verschiedene Möglichkeiten, die Hauptnavigation einer Website zu erstellen, was Stil, Funktionalität und das zugrunde liegende Markup und die semantischen Informationen angeht. Wenn die Implementierung zu minimalistisch ist, funktioniert sie zwar für die meisten Nutzer, die Nutzererfahrung (User Experience, UX) ist jedoch möglicherweise nicht optimal. Wenn sie zu kompliziert ist, kann das Nutzer verwirren oder sie sogar daran hindern, überhaupt darauf zuzugreifen.

Für die meisten Websites ist es wichtig, etwas zu entwickeln, das weder zu einfach noch zu kompliziert ist.

Schicht für Schicht bauen

In dieser Anleitung beginnen Sie mit einer einfachen Einrichtung und fügen nach und nach Funktionen hinzu, bis Sie genau die Informationen, das Design und die Funktionen anbieten, die den meisten Nutzern gefallen. Um dies zu erreichen, nutzen Sie das Prinzip der progressiven Verbesserung, das besagt, dass Sie mit der grundlegendsten und robustesten Lösung beginnen und nach und nach Funktionsebenen hinzufügen. Wenn eine Ebene aus irgendeinem Grund nicht funktioniert, funktioniert die Navigation trotzdem, da automatisch auf die darunter liegende Ebene zurückgegriffen wird.

Grundstruktur

Für eine grundlegende Navigation benötigen Sie zwei Dinge: <a>-Elemente und ein paar Zeilen CSS, um das Standard-Styling und -Layout Ihrer Links zu verbessern. 

<a href="/home">Home</a>
<a href="/about-us">About us</a>
<a href="/pricing">Pricing</a>
<a href="/contact">Contact</a>

/* Define variables for your colors */
:root {
  --color-shades-dark: rgb(25, 25, 25);
}

/* Use the alternative box model
Details: <https://web.dev/learn/css/box-model/> */
*{
  box-sizing: border-box;
}

/* Basic font styling */
body {
  font-family: Segoe UI, system-ui, -apple-system, sans-serif;
  font-size: 1.6rem;
}

/* Link styling */
a {
  --text-color: var(--color-shades-dark);
  border-block-end: 3px solid var(--border-color, transparent);
  color: var(--text-color);
  display: inline-block;
  margin-block-end: 0.5rem; /* See note at the bottom of this chapter */
  margin-inline-end: 0.5rem;
  padding: 0.1rem;
  text-decoration: none;
}

/* Change the border-color on :hover and :focus */
a:where(:hover, :focus) {
  --border-color: var(--text-color);
}
Sehen Sie sich Schritt 1: Einfache HTML- und CSS-Code auf CodePen an.

Das funktioniert für die meisten Nutzer gut, unabhängig davon, wie sie auf die Website zugreifen. Die Navigation ist mit einer Maus, einer Tastatur, einem Touchgerät oder einem Screenreader zugänglich, es gibt aber Verbesserungsmöglichkeiten. Sie können dieses grundlegende Muster mit zusätzlichen Funktionen und Informationen erweitern.

Sie haben folgende Möglichkeiten:

  • Markieren Sie die aktive Seite.
  • Informieren Sie Nutzer von Screenreadern über die Anzahl der Elemente.
  • Fügen Sie eine Markierung hinzu und ermöglichen Sie Nutzern von Screenreadern, über eine Tastenkombination direkt auf die Navigation zuzugreifen.
  • Blenden Sie die Navigation auf schmalen Ansichten aus.
  • Die Darstellung des Fokus wurde verbessert.

Aktive Seite markieren

Um die aktive Seite hervorzuheben, können Sie dem entsprechenden Link einen Kurs hinzufügen.

<a href="/about-us" class="active-page">About us</a>

Das Problem bei diesem Ansatz ist, dass die Information, welcher Link aktiv ist, rein visuell vermittelt wird. Ein blinder Nutzer eines Screenreaders konnte keinen Unterschied zwischen der aktiven Seite und anderen Seiten feststellen. Glücklicherweise bietet der ARIA-Standard (Accessible Rich Internet Applications) eine Möglichkeit, diese Informationen auch semantisch zu kommunizieren. Verwenden Sie das Attribut und den Wert aria-current="page" anstelle einer Klasse.

aria-current (Status) gibt das Element an, das das aktuelle Element in einem Container oder einer Gruppe ähnlicher Elemente darstellt. Ein Seitentoken, das verwendet wird, um einen Link innerhalb einer Reihe von Paginierungslinks anzugeben, wobei der Link optisch gestaltet ist, um die aktuell angezeigte Seite darzustellen. [Accessible Rich Internet Applications (WAI-ARIA) 1.1](https://www.w3.org/TR/wai-aria/#aria-current)

Mit dem zusätzlichen Attribut liest ein Screenreader jetzt etwas wie „aktuelle Seite, Link, Über uns“ anstelle von nur „Link, Über uns“ vor.

<a href="/about-us" aria-current="page" class="active-page">About us</a>

Ein praktischer Nebeneffekt ist, dass Sie das Attribut verwenden können, um den aktiven Link in CSS auszuwählen, wodurch die Klasse active-page obsolet wird.

<a href="/home">Home</a>
<a href="/about-us" aria-current="page">About us</a>
<a href="/pricing">Pricing</a>
<a href="/contact">Contact</a>

/* Change border-color and color for the active page */
[aria-current="page"] {
  --border-color: var(--color-highlight);
  --text-color: var(--color-highlight);
}
Sehen Sie sich Schritt 2: Aktive Seite in CodePen hervorheben an.

Anzahl der Elemente ansagen

Sehende Nutzer erkennen an der Navigation, dass sie nur vier Links enthält. Ein blinder Nutzer eines Screenreaders kann diese Informationen nicht so schnell erhalten. Möglicherweise müssen sie sich durch die gesamte Liste der Links arbeiten. Das ist möglicherweise kein Problem, wenn die Liste wie in diesem Beispiel kurz ist. Wenn sie jedoch 40 Links enthält, kann diese Aufgabe mühsam sein. Wenn ein Screenreader-Nutzer im Voraus weiß, dass die Navigation viele Links enthält, kann er sich für eine andere, effizientere Navigationsmethode entscheiden, z. B. die Websitesuche.
Eine gute Möglichkeit, die Anzahl der Elemente vorab zu kommunizieren, besteht darin, jeden Link in ein Listenelement (<li>) einzubetten, das in einer ungeordneten Liste (<ul>) verschachtelt ist.

<ul>
  <li>
     <a href="/home">Home</a>
  </li>
  <li>
    <a href="/about-us" aria-current="page">About us</a>
  </li>
  <li>
    <a href="/pricing">Pricing</a>
  </li>
  <li>
    <a href="/contact">Contact</a>
  </li>
</ul>

Wenn ein Nutzer mit einem Screenreader die Liste findet, sagt seine Software etwas wie „Liste, 4 Elemente“.

Hier sehen Sie eine Demo der Navigation mit dem Screenreader NVDA unter Windows.

Jetzt müssen Sie den Stil anpassen, damit er wie zuvor aussieht.

/* Remove the default list styling and create a flexible layout for the list */
ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Basic link styling */
a {
  --text-color: var(--color-shades-dark);

  border-block-end: 3px solid var(--border-color, transparent);
  color: var(--text-color);
  padding: 0.1rem;
  text-decoration: none;
}

Die Verwendung von Listen kann für Nutzer von Screenreadern viele Vorteile haben:

  • Sie können die Gesamtzahl der Artikel abrufen, bevor sie mit ihnen interagieren.
  • Sie können Tastenkombinationen verwenden, um von einem Listenelement zum nächsten zu springen.
  • Sie können Tastenkürzel verwenden, um von Liste zu Liste zu springen.
  • Der Screenreader kann den Index des aktuellen Elements ansagen (z. B. „Listenelement, zwei von vier“).

Wenn die Seite ohne CSS angezeigt wird, werden die Links in der Liste als zusammenhängende Gruppe von Elementen und nicht nur als Stapel von Links dargestellt.

Ein wichtiges Detail zu VoiceOver in Safari ist, dass Sie alle diese Vorteile verlieren, wenn Sie list-style: none festlegen. Dies geschieht absichtlich. Das WebKit-Team hat beschlossen, die Listensemantik zu entfernen, wenn eine Liste nicht wie eine Liste aussieht. Je nach Komplexität Ihrer Navigation kann dies ein Problem sein oder nicht. Die Navigation ist weiterhin nutzbar und die Änderung betrifft nur VoiceOver in Safari. VoiceOver in Chrome oder Firefox sowie andere Screenreader wie NVDA geben die Anzahl der Elemente weiterhin an. Andererseits können die semantischen Informationen in einigen Situationen sehr nützlich sein. Um diese Entscheidung zu treffen, sollten Sie die Navigation mit echten Screenreader-Nutzern testen und deren Feedback einholen. Wenn Sie möchten, dass VoiceOver in Safari wie alle anderen Screenreader funktioniert, können Sie das Problem umgehen, indem Sie die ARIA-Listenrolle explizit für die <ul> festlegen. Dadurch wird das Verhalten auf den Zustand vor dem Entfernen des Listenstils zurückgesetzt. Optisch bleibt die Liste unverändert.

<ul role="list">
  <li>
     <a href="/home">Home</a>
  </li>
  ...
</ul>
Sehen Sie sich Schritt 3: Anzahl der Elemente in CodePen ansagen an.

Sehenswürdigkeit hinzufügen

Mit wenig Aufwand haben Sie bereits große Verbesserungen für Nutzer von Screenreadern vorgenommen. Es gibt jedoch noch etwas, das Sie tun können. Die Navigation ist semantisch immer noch nur eine Liste von Links und es ist schwer zu erkennen, dass diese Liste die Hauptnavigation Ihrer Website ist. Sie können diese normale Liste in eine Navigationsliste umwandeln, indem Sie das Element <ul> in ein <nav>-Element einschließen.

Die Verwendung des Elements <nav> bietet mehrere Vorteile. Ein Screenreader kündigt beispielsweise „Navigation“ an, wenn der Nutzer damit interagiert, und fügt der Seite eine Markierung hinzu. Markierungen sind spezielle Bereiche auf der Seite, z. B. <header>, <footer> oder <main>, zu denen ein Screenreader springen kann. Markierungen auf einer Seite können hilfreich sein, da Nutzer von Screenreadern so direkt auf wichtige Bereiche der Seite zugreifen können, ohne mit dem Rest der Seite interagieren zu müssen. Sie können beispielsweise in NVDA die Taste D drücken, um von einer Markierung zur nächsten zu springen. In VoiceOver können Sie mit dem Rotor alle Markierungen auf der Seite auflisten. Drücken Sie dazu VO + U.

Eine Liste mit vier Orientierungspunkten: Banner, Navigation, Hauptseite, Inhaltsinformationen.
Rotor in VoiceOver mit einer Liste aller Markierungen auf einer Seite.

In dieser Liste sehen Sie vier Markierungen: Banner ist das Element <header>, Navigation ist das Element <nav>, Haupt ist das Element <main> und Inhaltsinformationen ist das Element <footer>. Diese Liste sollte nicht zu lang sein. Sie sollten nur wichtige Teile Ihrer Benutzeroberfläche als Orientierungspunkte markieren, z. B. die Websitesuche, eine lokale Navigation oder eine Paginierung.

Wenn Sie eine websiteweite Navigation, eine lokale Navigation für die Seite und eine Paginierung auf einer einzelnen Seite haben, können Sie auch drei <nav>-Elemente haben. Das ist in Ordnung, aber jetzt gibt es drei Navigationsmerkmale, die semantisch alle gleich aussehen. Es ist schwer, sie auseinanderzuhalten, solange Sie die Struktur der Seite nicht genau kennen.

Bild mit drei Orientierungspunkten, die alle „Navigation“ heißen.
Der VoiceOver-Rotor mit drei nicht gekennzeichneten Navigationspunkten.

Damit sie sich unterscheiden lassen, sollten Sie sie mit aria-labelledby oder aria-label kennzeichnen.

<nav aria-label="Main">
    <ul>
      <li>
         <a href="/home">Home</a>
      </li>
      ...
  </ul>
</nav>
...
<nav aria-label="Select page">
    <ul>
      <li>
         <a href="/page-1">1</a>
      </li>
      ...
    </ul>
</nav>

Wenn das von Ihnen ausgewählte Label bereits auf der Seite vorhanden ist, können Sie stattdessen aria-labelledby verwenden und mit dem Attribut id auf das vorhandene Label verweisen.

<nav aria-labelledby="pagination_heading">
  <h2 id="pagination_heading">Select a page</h2>
  <ul>
    <li>
       <a href="/page-1">1</a>
    </li>
    ...
  </ul>
</nav>

Ein prägnantes Label reicht aus. Lassen Sie Ausdrücke wie „Navigation“ oder „Menü“ aus, da der Screenreader den Nutzenden diese Informationen bereits zur Verfügung stellt.

Landmarken
Voiceover mit den Markierungen „Banner“, „Hauptnavigation“, „Hauptseite“, „Seitennavigation“, „Seitennavigation auswählen“ und „Inhaltsinformationen“.
Sehen Sie sich Schritt 4: Sehenswürdigkeiten auf CodePen hinzufügen an.

Navigation in schmalen Ansichten ausblenden

Ich persönlich mag es nicht, die Hauptnavigation in schmalen Darstellungsbereichen zu verbergen, aber wenn die Linkliste zu lang wird, führt kein Weg vorbei, um sie zu umgehen. In diesem Fall sehen die Nutzenden statt der Liste eine Schaltfläche mit der Beschriftung "Menü", ein Burgersymbol oder eine Kombination aus beiden. Wenn Sie auf die Schaltfläche klicken, wird die Liste angezeigt oder ausgeblendet. Grundlegende JavaScript- und CSS-Kenntnisse sind machbar, aber in Sachen UX und Barrierefreiheit müssen Sie einiges beachten.

  • Sie müssen die Liste auf zugängliche Art und Weise ausblenden.
  • Die Navigation muss über die Tastatur zugänglich sein.
  • Die Navigation muss klar zeigen, ob sie sichtbar ist oder nicht.

Schaltfläche „Dreistrich-Menü“ hinzufügen

Da Sie das Prinzip der progressiven Verbesserung befolgen, sollten Sie darauf achten, dass Ihre Navigation auch bei deaktiviertem JavaScript funktioniert und Sinn ergibt.
Das erste, was Ihre Navigation benötigt, ist eine Dreistrich-Schaltfläche. Sie erstellen es in HTML in einem Vorlagenelement, klonen es in JavaScript und fügen es der Navigation hinzu.

Eine Seite mit einer Burger-Schaltfläche.
Ergebnis: Anstelle von Links wird in der Navigation auf schmalen Ansichten eine Dreistrich-Schaltfläche angezeigt. 
<nav id="mainnav">
  ...
</nav>

<template id="burger-template">
  <button type="button" aria-expanded="false" aria-label="Menu" aria-controls="mainnav">
    <svg width="24" height="24" aria-hidden="true">
      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z">
    </svg>
  </button>
</template>
  1. Das Attribut aria-expanded gibt der Screenreader-Software an, ob das Element, das die Schaltfläche steuert, maximiert ist oder nicht.
  2. aria-label gibt der Schaltfläche einen so genannten barrierefreien Namen, eine Textalternative zum Burger-Symbol.
  3. Sie verbergen <svg> mit aria-hidden vor Hilfstechnologien, da es bereits ein Textlabel von aria-label hat.
  4. aria-controls gibt Hilfstechnologien, die das Attribut unterstützen (z. B. JAWS), an, welches Element die Schaltfläche steuert.
const nav = document.querySelector('#mainnav')
const list = nav.querySelector('ul');
const burgerClone = document.querySelector('#burger-template').content.cloneNode(true);
const button = burgerClone.querySelector('button');

// Toggle aria-expanded attribute
button.addEventListener('click', e => {
  // aria-expanded="true" signals that the menu is currently open
  const isOpen = button.getAttribute('aria-expanded') === "true"
  button.setAttribute('aria-expanded', !isOpen);
});

// Hide list on keydown Escape
nav.addEventListener('keyup', e => {
  if (e.code === 'Escape') {
    button.setAttribute('aria-expanded', false);
  }
});

// Add the button to the page
nav.insertBefore(burgerClone, list);
  1. Es ist praktisch für die Nutzenden, die Navigation jederzeit schließen zu können, z. B. durch Drücken der Esc-Taste.
  2. Es ist wichtig, insertBefore anstelle von appendChild zu verwenden, da die Schaltfläche das erste Element in der Navigation sein sollte. Wenn ein Nutzer mit Tastatur oder Screenreader nach dem Klicken auf die Schaltfläche die Tabulatortaste drückt, erwartet er, dass der Fokus auf dem ersten Element in der Liste liegt. Wenn die Schaltfläche nach der Liste kommt, ist das nicht der Fall.

Als Nächstes setzen Sie das Standard-Styling der Schaltfläche zurück und sorgen dafür, dass sie nur in schmalen Darstellungsbereichen sichtbar ist.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
  }
}

/* Reset button styling */
button {
  all: unset;
  display: var(--nav-button-display, flex);
}
Sehen Sie sich Schritt 5: Burger-Schaltfläche auf CodePen hinzufügen an.

Liste ausblenden

Bevor Sie die Liste ausblenden, positionieren und gestalten Sie die Navigation und die Liste so, dass das Layout für schmale Ansichten optimiert ist, aber auch auf größeren Bildschirmen gut aussieht.
Entfernen Sie zuerst das <nav> aus dem natürlichen Fluss der Seite und platzieren Sie es oben im Darstellungsbereich.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }
}

nav {
  position: var(--nav-position, fixed);
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}

Ändern Sie als Nächstes das Layout für schmale Darstellungsbereiche, indem Sie eine neue benutzerdefinierte Property (—-nav-list-layout) hinzufügen. Das Layout ist standardmäßig als Spalte konfiguriert und wechselt auf größeren Bildschirmen zu Zeilen.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }

  ul {
    --nav-list-layout: row;
  }
}

ul {
  display: flex;
  flex-direction: var(--nav-list-layout, column);
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

Die Navigation sollte auf schmalen Ansichten in etwa so aussehen.

Die Seite mit der Navigationsliste und der Dreistrich-Schaltfläche.
Sowohl die Burger-Schaltfläche als auch die Liste befinden sich in der oberen Ecke des Darstellungsbereichs.

Für die Liste ist natürlich CSS erforderlich. Wir verschieben ihn in die obere Ecke, lassen ihn den gesamten Bildschirm vertikal ausfüllen, fügen ein background-color und ein box-shadow hinzu.

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }
  
  ul {
    --nav-list-layout: row;
    --nav-list-position: static;
    --nav-list-padding: 0;
    --nav-list-height: auto;
    --nav-list-width: 100%;
    --nav-list-shadow: none;
  }
}

ul {
  background: rgb(255, 255, 255);
  box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));
  display: flex;
  flex-direction: var(--nav-list-layout, column);
  flex-wrap: wrap;
  gap: 1rem;
  height: var(--nav-list-height, 100vh);
  list-style: none;
  margin: 0;
  padding: var(--nav-list-padding, 2rem);
  position: var(--nav-list-position, fixed);
  inset-block-start: 0; /* Logical property. Equivalent to top: 0; */
  inset-inline-end: 0; /* Logical property. Equivalent to right: 0; */
  width: var(--nav-list-width, min(22rem, 100vw));
}

button {
  all: unset;
  display: var(--nav-button-display, flex);
  position: relative;
  z-index: 1;
}

Die Liste sollte auf schmalen Ansichten in etwa so aussehen, also eher wie eine Seitenleiste als eine einfache Liste.

Die Navigationsliste wird geöffnet.

Schließlich wird die Liste ausgeblendet. Sie wird nur angezeigt, wenn der Nutzer einmal auf die Schaltfläche klickt, und blendet sie aus, wenn der Nutzer erneut auf die Schaltfläche klickt. Es ist wichtig, nur die Liste und nicht die gesamte Navigation auszublenden, da das Ausblenden der Navigation auch bedeutet, dass ein wichtiges Orientierungsmerkmal ausgeblendet wird.

Sie haben der Schaltfläche bereits ein Klickereignis hinzugefügt, um den Wert des Attributs aria-expanded umzuschalten. Sie können diese Informationen als Bedingung für das Ein- und Ausblenden der Liste in CSS verwenden.

@media (min-width: 48em) {
  ul {
    --nav-list-visibility: visible;
  }
}

ul {
  visibility: var(--nav-list-visibility, visible);
}

/* Hide the list on narrow viewports, if it comes after an element with
   aria-expanded set to "false". */
[aria-expanded="false"] + ul {
  visibility: var(--nav-list-visibility, hidden);
}

Verwenden Sie zum Ausblenden der Liste eine Property-Deklaration wie visibility: hidden oder display: none anstelle von opacity: 0 oder translateX(100%). So wird sichergestellt, dass die Links nicht fokussiert werden können, wenn die Navigation ausgeblendet ist. Wenn Sie opacity oder translate verwenden, werden die Inhalte visuell entfernt. Die Links sind dann zwar nicht sichtbar, aber über die Tastatur weiterhin zugänglich. Das kann verwirrend und frustrierend sein. Wenn Sie visibility oder display verwenden, wird sie visuell ausgeblendet und ist nicht mehr zugänglich, d. h., sie wird für alle Nutzer ausgeblendet.

Sehen Sie sich Schritt 6: Liste ausblenden an.

Liste animieren

Warum Sie visibility: hidden; anstelle von display: none; verwenden sollten? Weil Sie die Sichtbarkeit animieren können. Es hat nur zwei Zustände, hidden und visible, kann aber mit einer anderen Eigenschaft wie transform oder opacity kombiniert werden, um einen Einblend- oder Einblendungseffekt zu erzielen. Das funktioniert nicht mit „display: none“, weil die Property „display“ nicht animierbar ist.

Mit den folgenden CSS-Übergängen opacity wird ein Ein- und Ausblendungseffekt erzeugt.

ul {
  transition: opacity 0.6s linear, visibility 0.3s linear;
  visibility: var(--nav-list-visibility, visible);
}

[aria-expanded="false"] + ul {
  opacity: 0;
  visibility: var(--nav-list-visibility, hidden);
}

Wenn Sie stattdessen Bewegungen animieren möchten, sollten Sie die Eigenschaft transition in eine Medienabfrage vom Typ preferd-reduced-motion einschließen, da Animationen bei einigen Nutzern Übelkeit, Schwindel und Kopfschmerzen auslösen können.

ul {
  visibility: var(--nav-list-visibility, visible);
}

@media (prefers-reduced-motion: no-preference) {
  ul {
    transition: transform 0.6s cubic-bezier(.68,-0.55,.27,1.55), visibility 0.3s linear;
  }
}

[aria-expanded="false"] + ul {
  transform: var(--nav-list-transform, translateX(100%));
  visibility: var(--nav-list-visibility, hidden);
}

So wird sichergestellt, dass nur Personen, die keine Bewegungselemente bevorzugen, die Animation sehen können.

Sehen Sie sich Schritt 7: Liste in CodePen animieren an.

Fokus-Styling verbessern

Tastaturnutzer verlassen sich bei der Ausrichtung und Navigation auf einer Seite auf Fokusstile von Elementen. Standard-Akzentstile sind besser als gar keine Akzentstile (was passiert, wenn Sie outline: none festlegen). Deutlicher sichtbare benutzerdefinierte Akzentstile verbessern jedoch die Nutzerfreundlichkeit.

So sehen die Standardfokusstile für den Link in Chrome 103 aus.

Ein blauer 2-Pixel-Umriss um einen fokussierten Link in Chrome 103

Sie können dies verbessern, indem Sie Ihre eigenen Stile in Ihren eigenen Farben bereitstellen. Wenn Sie :focus-visible anstelle von :focus verwenden, entscheidet der Browser, wann Fokusstile angezeigt werden sollen. :focus-Stile sind für alle Nutzer sichtbar, unabhängig davon, ob sie eine Maus, eine Tastatur oder ein Touchgerät verwenden und ob sie die Stile benötigen oder nicht. Bei :focus-visible entscheidet der Browser anhand interner Heuristiken, ob sie nur Nutzern mit Tastatur oder allen Nutzern angezeigt werden.

/* Remove the default :focus outline */
*:focus {
  outline: none;
}

/* Show a custom outline on :focus-visible */
*:focus-visible {
  outline: 2px solid var(--color-shades-dark);
  outline-offset: 4px;
}

Browserunterstützung für :focus-visible

Unterstützte Browser

  • Chrome: 86.
  • Edge: 86.
  • Firefox: 85.
  • Safari: 15.4.

Quelle

Gut sichtbarer dunkler Umriss von 2 Pixeln mit Innenabständen.

Es gibt verschiedene Möglichkeiten, Elemente hervorzuheben, wenn sie den Fokus haben. Die Verwendung der Eigenschaft outline wird empfohlen, da sie das Layout nicht stört, was bei border passieren kann. Außerdem funktioniert sie gut mit dem Modus mit hohem Kontrast unter Windows. Die Properties background-color oder box-shadow funktionieren nicht gut, da sie bei benutzerdefinierten Kontrasteinstellungen möglicherweise gar nicht angezeigt werden.

Eine Website mit dunklem Hintergrund, auf der der Fokus lila hervorgehoben ist.
Sehen Sie sich Schritt 8: Fokusstile in CodePen verbessern an.

Glückwunsch! Sie haben eine nach und nach optimierte, semantisch umfangreiche, zugängliche und für Mobilgeräte optimierte Hauptnavigation erstellt.

Es gibt immer etwas, das verbessert werden kann, z. B.:

Erinnern Sie sich noch an den Anfang dieses Artikels mit dem Ziel, die Lösung „weder zu einfach noch zu kompliziert“ zu sein“? Dann ist das der Punkt, an dem wir uns befinden. Es ist jedoch möglich, eine Navigation zu überarbeiten.

Es gibt einen klaren Unterschied zwischen Navigation und Menüs. Navigationen sind Sammlungen von Links, die die Navigation zu ähnlichen Dokumenten ermöglichen. Menüs enthalten Aktionen, die in einem Dokument ausgeführt werden können. Manchmal überschneiden sich diese Aufgaben. Möglicherweise haben Sie eine Navigation, die auch eine Schaltfläche enthält, über die eine Aktion ausgeführt wird, z. B. das Öffnen eines modalen Fensters. Möglicherweise haben Sie auch ein Menü, bei dem eine Aktion zu einer anderen Seite führt, z. B. zu einer Hilfeseite. In diesem Fall ist es wichtig, dass Sie ARIA-Rollen nicht zusammenführen, sondern den Hauptzweck Ihrer Komponente ermitteln und das Markup und die Rollen entsprechend auswählen.

Das Element <nav> hat die implizite ARIA-Rolle „navigation“, die ausreicht, um zu kommunizieren, dass es sich um ein Navigationselement handelt. Auf Websites werden jedoch häufig auch „menu“, „menubar“ und „menuitem“ verwendet. Da wir diese Begriffe manchmal synonym verwenden, denken wir, dass es sinnvoll wäre, sie zu kombinieren, um die Nutzung von Screenreadern zu verbessern. Bevor wir uns ansehen, warum das in der Regel nicht der Fall ist, sehen wir uns die offizielle Definition dieser Rollen an.

Die Navigationsrolle

Eine Sammlung von Navigationselementen (in der Regel Links), mit denen Sie sich im Dokument oder in ähnlichen Dokumenten bewegen können.

navigation (Rolle) WAI-ARIA 1.1

Die Menürolle

Ein Menü enthält oft eine Liste gängiger Aktionen oder Funktionen, die der Nutzer ausführen kann. Die Rolle „Menü“ ist geeignet, wenn eine Liste von Menüpunkten ähnlich wie ein Menü in einer Desktopanwendung dargestellt wird.

menu (Rolle) WAI-ARIA 1.1

Rolle der Menüleiste

Eine Darstellung eines Menüs, die normalerweise sichtbar bleibt und normalerweise horizontal angezeigt wird. Die Menüleistenrolle wird zum Erstellen einer Menüleiste verwendet, die denen in Windows-, Mac- und Gnome-Desktopanwendungen ähnelt. Eine Menüleiste dient dazu, einen einheitlichen Satz häufig verwendeter Befehle zu erstellen. Die Interaktion mit der Menüleiste sollte der Interaktion mit der Menüleiste auf einer Desktop-Benutzeroberfläche ähneln.

menubar (Rolle) WAI-ARIA 1.1

Die Rolle des Menüelements

Eine Option in einer Auswahl, die in einem Menü oder einer Menüleiste enthalten ist.

menuitem (role) WAI-ARIA 1.1

Die Spezifikation ist hier sehr klar: Verwenden Sie die Navigation, um sich im Dokument oder in ähnlichen Dokumenten zu bewegen, und das Menü nur für eine Liste von Aktionen oder Funktionen, die denen in Desktopanwendungen ähneln. Wenn Sie nicht die nächste Version von Google Docs entwickeln, benötigen Sie wahrscheinlich keine der Menürollen für die Hauptnavigation.

Wann ist ein Menü angebracht?

Menüpunkte dienen in erster Linie nicht der Navigation, sondern der Ausführung von Aktionen. Angenommen, Sie haben eine Liste oder Tabelle mit Daten und Nutzer können für jeden Eintrag in der Liste bestimmte Aktionen ausführen. Sie könnten jeder Zeile eine Schaltfläche hinzufügen, um die Aktionen anzuzeigen, wenn die Nutzenden auf die Schaltfläche klicken.

<ul>
  <li>
    Product 1

    <button aria-expanded="false" aria-controls="options1">Edit</button>

    <div role="menu" id="options1">
      <button role="menuitem">
        Duplicate
      </button>
      <button role="menuitem">
        Delete
      </button>
      <button role="menuitem">
        Disable
      </button>
    </div>
  </li>
  <li>
    Product 2
    ...
  </li>
</ul>

Auswirkungen der Verwendung von Menürollen

Es ist sehr wichtig, diese Menürollen mit Bedacht zu verwenden, da viel schiefgehen kann.

Menüs erfordern eine bestimmte DOM-Struktur. menuitem muss ein direktes untergeordnetes Element von menu sein. Der folgende Code könnte das semantische Verhalten beeinträchtigen:

 <!-- Wrong, don't do this -->
<ul role="menu">
  <li>
    <a href="#" role="menuitem">Item 1</a>
  </li>
</ul>

Erfahrene Nutzer erwarten, dass bestimmte Tastenkombinationen mit Menüs und Menüleisten funktionieren. Laut ARIA Authoring Practices Guide (APG) umfasst dies Folgendes:

  • Mit der Eingabetaste und der Leertaste können Sie Menüpunkte auswählen.
  • Mit den Pfeiltasten in alle Richtungen können Sie zwischen den Elementen wechseln.
  • Mit den Tasten Pos1 und Ende können Sie den Fokus auf das erste bzw. letzte Element setzen.
  • a–z, um den Fokus auf den nächsten Menüpunkt mit einem Label zu verschieben, das mit dem eingegebenen Zeichen beginnt.
  • Esc, um das Menü zu schließen.

Wenn ein Screenreader ein Menü erkennt, ändert die Software möglicherweise automatisch den Browsermodus, sodass die oben genannten Tastenkürzel verwendet werden können. Unerfahrene Screenreader-Nutzer können das Menü möglicherweise nicht verwenden, weil sie diese Tastenkombinationen nicht kennen oder nicht wissen, wie sie verwendet werden.

Das gilt auch für Nutzer von Tastaturen, die davon ausgehen könnten, dass sie die Umschalttaste und die Umschalttaste + Tabulatortaste verwenden können.

Bei der Erstellung von Menüs und Menüleisten gibt es einiges zu bedenken, ob es sinnvoll ist, diese von vornherein zu verwenden. Wenn Sie eine typische Website erstellen, benötigen Sie nur das Navigationselement mit einer Liste und Links. Dazu gehören auch Single-Page-Anwendungen (SPA) oder Webanwendungen. Der zugrunde liegende Stack spielt keine Rolle. Verwenden Sie keine Menürollen, es sei denn, Sie entwickeln eine App, die einer Desktopanwendung sehr ähnlich ist.

Zusätzliche Ressourcen

Hero-Image von Mick Haupt