Hauptnavigation für eine Website erstellen

In diesem Tutorial 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, und zwar hinsichtlich Stil, Funktionalität sowie der zugrunde liegenden Auszeichnung und semantischen Informationen. Wenn die Implementierung zu minimalistisch ist, funktioniert sie für die meisten Nutzer, aber die User Experience (UX) ist möglicherweise nicht besonders gut. Eine übermäßige Software würde Nutzer verwirren oder sogar daran hindern, auf sie zuzugreifen.

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

Gebäudeebene für Ebene

In dieser Anleitung beginnen Sie mit einer grundlegenden Einrichtung und fügen Elemente Ebene für Ebene hinzu, bis Sie gerade genug Informationen, Stile und Funktionen bereitstellen, die für die meisten Nutzer zufrieden sind. 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 sie auf die zugrunde liegende Ebene zurückgreift.

Grundstruktur

Für eine grundlegende Navigation benötigst du zwei Dinge: <a>-Elemente und ein paar CSS-Zeilen, um den Standardstil und das Standardlayout deiner 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);
}
Ansicht Schritt 1: Grundlegender HTML- und CSS-Code" auf CodePen.

Dies 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 Touch-Gerät oder einem Screenreader zugänglich, es gibt jedoch Verbesserungspotenzial. Sie können die Nutzererfahrung verbessern, indem Sie dieses Basismuster um zusätzliche Funktionen und Informationen erweitern.

Sie haben folgende Möglichkeiten:

  • Markieren Sie die aktive Seite.
  • Informieren Sie Nutzer von Screenreadern über die Anzahl der Elemente.
  • Sehenswürdigkeiten hinzufügen und Nutzern von Screenreadern ermöglichen, über eine Verknüpfung direkt auf die Navigation zuzugreifen.
  • Navigation bei schmalen Darstellungsbereichen ausblenden.
  • Fokussierung verbessern

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 besteht darin, dass die Informationen, zu denen der Link aktiv ist, rein visuell vermittelt werden. Nutzer eines blinden Screenreaders konnten den Unterschied zwischen der aktiven und anderen Seite nicht erkennen. Glücklicherweise bietet der Standard Accessible Rich Internet Applications (ARIA) eine Möglichkeit, diese Informationen auch semantisch zu übermitteln. Verwenden Sie anstelle einer Klasse das Attribut und den Wert aria-current=&quot;page&quot;.

<ph type="x-smartling-placeholder">
</ph> aria-current (Status) gibt das Element an, das das aktuelle Element innerhalb eines Containers oder einer Gruppe verwandter 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 sagt Ihnen ein Screenreader jetzt beispielsweise „Aktuelle Seite, Link, Über uns“ vor. statt nur „Link, Über uns“.

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

Ein praktischer Nebeneffekt besteht darin, dass Sie das Attribut verwenden können, um den aktiven Link in CSS auszuwählen, wodurch die Klasse active-page überflüssig 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 auf CodePen markieren an.

Anzahl der Elemente ansagen

Sehende Nutzer erkennen an der Navigation, dass sie nur vier Links enthält. Nutzer eines blinden Screenreaders können diese Informationen nicht so schnell erhalten. Möglicherweise müssen sie sich durch die gesamte Liste der Links arbeiten. Dies ist möglicherweise kein Problem, wenn die Liste wie in diesem Beispiel kurz ist, aber wenn sie 40 Links enthält, kann dies umständlich sein. Wenn ein Screenreader-Nutzer von Anfang an weiß, dass die Navigation viele Links enthält, könnte er sich für eine andere, effizientere Art der Navigation entscheiden, z. B. die Website-Suche.
Eine gute Möglichkeit, die Anzahl der Artikel im Voraus zu kommunizieren, ist das Einbinden jedes Links in einen Listeneintrag (<li>), der in einer unsortierten 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 Screenreader-Nutzer die Liste findet, meldet die Software beispielsweise „Liste, 4 Elemente“.

Hier ist eine Demo der Navigation, die mit dem Screenreader NVDA unter Windows verwendet wird.

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 bietet Nutzern von Screenreadern viele Vorteile:

  • Sie können die Gesamtzahl der Elemente abrufen, bevor sie mit den Elementen interagieren.
  • Sie können Tastenkombinationen verwenden, um von Listeneinträgen zu Listeneinträgen zu wechseln.
  • Sie können Tastenkombinationen verwenden, um von Liste zu Liste zu springen.
  • Der Screenreader meldet möglicherweise den Index des aktuellen Elements an, z. B. „Listeneintrag, zwei von vier“.

Wenn die Seite ohne CSS präsentiert wird, werden die Links in der Liste außerdem als kohärente Gruppe von Elementen und nicht nur als Ansammlung von Links angezeigt.

Ein bemerkenswerter Hinweis zu VoiceOver in Safari ist, dass alle diese Vorteile verloren gehen, wenn Sie list-style: none festlegen. Dies geschieht absichtlich. Das WebKit-Team hat beschlossen, die Semantik von Listen zu entfernen, wenn eine Liste nicht wie eine Liste aussieht. Je nach Komplexität der Navigation kann dies ein Problem sein. Einerseits ist die Navigation weiterhin nutzbar und wirkt sich nur auf VoiceOver in Safari aus. VoiceOver mit Chrome oder Firefox meldet weiterhin die Anzahl der Elemente sowie andere Screenreader, z. B. NVDA. 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-Nutzenden testen und deren Feedback einholen. Wenn Sie VoiceOver in Safari so benötigen, dass es sich wie alle anderen Screenreader verhält, können Sie das Problem umgehen, indem Sie die Rolle „ARIA list“ explizit auf <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: Ankündigung der Anzahl der Artikel auf CodePen an.

Sehenswürdigkeit hinzufügen

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

Die Verwendung des <nav>-Elements bietet mehrere Vorteile. Beispielsweise sagt ein Screenreader etwas wie „Navigation“ an, wenn der Nutzer damit interagiert, und fügt der Seite eine Markierung hinzu. Sehenswürdigkeiten sind spezielle Bereiche auf der Seite, z. B. <header>, <footer> oder <main>, zu denen ein Screenreader springen kann. Die Verwendung von Markierungen auf einer Seite kann nützlich sein, da Nutzer von Screenreadern so direkt auf wichtige Bereiche auf der Seite zugreifen können, ohne mit dem Rest der Seite interagieren zu müssen. Sie können beispielsweise in NVDA durch Drücken der Taste D von einer Sehenswürdigkeit zu einer Sehenswürdigkeit springen. In Voice Over können Sie mit dem Rotor alle Markierungen auf der Seite auflisten, indem Sie VO + U drücken.

<ph type="x-smartling-placeholder">
</ph> Eine Liste mit vier Orientierungspunkten: Banner, Navigation, Hauptseite, Inhaltsinformationen.
Rotor in VoiceOver, um alle Markierungen auf einer Seite aufzulisten.

In dieser Liste sehen Sie vier Orientierungspunkte: banner ist das <header>-Element, navigation ist <nav>, main das <main>-Element und content (Inhaltsinformationen) <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, haben Sie möglicherweise auch drei <nav>-Elemente. Das ist in Ordnung, aber jetzt gibt es drei Orientierungspunkte für die Navigation, die semantisch alle gleich aussehen. Es ist schwer, sie auseinanderzuhalten, solange Sie die Struktur der Seite nicht genau kennen.

<ph type="x-smartling-placeholder">
</ph> Bild mit drei Orientierungspunkten, auf denen „Navigation“ steht.
Der Rotor in VoiceOver zeigt drei unbeschriftete Navigationsmarkierungen an.

Damit sie unterschieden werden können, 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>

Eine knappe Beschriftung ist ausreichend. Formulieren Sie sie nicht zu ausführlich. Ausdrücke wie „Navigation“ weglassen oder „Menü“ da der Screenreader den Nutzenden diese Informationen bereits zur Verfügung stellt.

<ph type="x-smartling-placeholder">
</ph> Landmarken
VoiceOver mit den Markierungen „Banner“, „Hauptnavigation“, „Hauptnavigation“, „Seitennavigation“ und „Seitennavigation auswählen“ und „Inhaltsinformationen“.
Sehen Sie sich Schritt 4: Sehenswürdigkeiten auf CodePen hinzufügen an.

Navigation bei schmalen Darstellungsbereichen 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 Nutzer statt der Liste eine Schaltfläche mit der Bezeichnung "Menü". oder ein Burger-Symbol oder eine Kombination davon. Wenn Sie auf die Schaltfläche klicken, wird die Liste ein- bzw. 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 per Tastatur zugänglich sein.
  • Die Navigation muss kommunizieren, ob sie sichtbar ist oder nicht.

Schaltfläche zum Hinzufügen eines Burgers

Da Sie sich an das Prinzip der progressiven Verbesserung halten, sollten Sie darauf achten, dass Ihre Navigation auch bei deaktiviertem JavaScript funktioniert und Sinn ergibt.
Als Erstes benötigt die Navigation eine Burger-Schaltfläche. Sie erstellen es in HTML in einem Vorlagenelement, klonen es in JavaScript und fügen es der Navigation hinzu.

<ph type="x-smartling-placeholder">
</ph> Eine Seite mit einer Burger-Schaltfläche.
Ergebnis: Anstelle von Links wird in schmalen Darstellungsbereichen im Navigationsbereich eine Burger-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 teilt der Screenreader-Software mit, ob das Element, das die Schaltfläche steuert, maximiert ist.
  2. aria-label gibt der Schaltfläche einen so genannten barrierefreien Namen, eine Textalternative zum Burger-Symbol.
  3. Du blendest mit aria-hidden das <svg> für Hilfstechnologien aus, weil es bereits ein von aria-label bereitgestelltes Textlabel hat.
  4. aria-controls teilt Hilfstechnologien mit, die das Attribut (z. B. JAWS) unterstützen, 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 Ihrer Navigation sein sollte. Wenn ein Nutzer mit einer Tastatur oder einem Screenreader die Tabulatortaste drückt, nachdem er auf die Schaltfläche geklickt hat, erwartet er, dass das erste Element in der Liste hervorgehoben wird. Wenn die Schaltfläche auf die Liste folgt, ist das nicht der Fall.

Als Nächstes setzen Sie den Standardstil der Schaltfläche zurück und stellen sicher, 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

Positionieren und gestalten Sie vor dem Ausblenden der Liste die Navigation und die Liste, damit das Layout für schmale Darstellungsbereiche optimiert ist, auf größeren Bildschirmen aber noch gut aussieht.
Entferne zuerst das <nav> aus dem natürlichen Fluss der Seite und platziere es am oberen Ende des Darstellungsbereichs.

@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 die neue benutzerdefinierte Eigenschaft (—-nav-list-layout) hinzufügen. Das Layout ist standardmäßig auf Spalten ausgerichtet und wechselt auf größeren Bildschirmen zur Zeile.

@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;
}

Ihre Navigation sollte bei schmalen Darstellungsbereichen in etwa so aussehen.

<ph type="x-smartling-placeholder">
</ph> Die Seite mit der Navigationsliste und der Burger-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 es nach oben in die obere Ecke, sorgen dafür, dass es den gesamten Bildschirm vertikal ausfüllt, und wenden background-color und box-shadow an.

@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 bei schmalen Darstellungsbereichen etwa so aussehen und eher wie eine Seitenleiste als eine einfache Liste aussehen.

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 beim Ausblenden der Navigation gleichzeitig eine wichtige Sehenswürdigkeit 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 zum 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);
}

Es ist wichtig, eine Eigenschaftsdeklaration wie visibility: hidden oder display: none anstelle von opacity: 0 oder translateX(100%) zu verwenden, um die Liste auszublenden. Diese Eigenschaften stellen sicher, dass die Links nicht fokussierbar sind, wenn die Navigation ausgeblendet ist. Wenn du opacity oder translate verwendest, werden Inhalte visuell entfernt, sodass die Links unsichtbar, aber weiterhin über die Tastatur zugänglich sind, was verwirrend und frustrierend wäre. 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

Wenn Sie visibility: hidden; statt display: none; verwenden sollten, dann können Sie die Sichtbarkeit animieren. Sie hat nur zwei Zustände, hidden und visible, aber Sie können sie mit einer anderen Eigenschaft wie transform oder opacity kombinieren, um einen Ausblendungseffekt zu erzeugen. Das funktioniert nicht mit „display: none“, weil die Property „display“ nicht animierbar ist.

Mit den folgenden CSS-Übergängen opacity erstellen Sie einen Ein- und Ausblendungseffekt.

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 Bewegung animieren möchten, sollten Sie die Eigenschaft transition in eine Medienabfrage des Typs preferd-reduced-motion einbinden, 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 auf CodePen animieren an.

Fokussierung verbessern

Tastaturnutzer verlassen sich bei der Ausrichtung und Navigation auf einer Seite auf Fokusstile von Elementen. Standardfokusstile sind besser als keine Fokusstile (dies ist der Fall, wenn Sie outline: none festlegen), aber wenn benutzerdefinierte Fokusstile besser sichtbar sind, verbessert das die Nutzerfreundlichkeit.

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

Eine blaue 2-Pixel-Umrisslinie um einen hervorgehobenen 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, kann der Browser entscheiden, wann Fokusstile angezeigt werden sollen. :focus-Stile sind für alle Nutzer mit Maus, Tastatur und Touchscreen sichtbar – unabhängig davon, ob sie sie benötigen oder nicht. Bei :focus-visible entscheidet der Browser anhand interner Heuristiken, ob sie nur den Tastaturnutzern oder allen Nutzern angezeigt werden sollen.

/* 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 <ph type="x-smartling-placeholder">
  • Edge: 86. <ph type="x-smartling-placeholder">
  • Firefox: 85 <ph type="x-smartling-placeholder">
  • Safari: 15.4 <ph type="x-smartling-placeholder">

Quelle

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

Es gibt verschiedene Möglichkeiten, um fokussierte Elemente hervorzuheben. Die Verwendung des Attributs outline wird empfohlen, da es das Layout nicht zerstört, wie es bei border passieren könnte. Außerdem funktioniert es gut mit dem Modus mit hohem Kontrast unter Windows. Eigenschaften, mit denen sich weniger gut eignen, sind background-color oder box-shadow, weil sie mit benutzerdefinierten Kontrasteinstellungen möglicherweise überhaupt nicht angezeigt werden.

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

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

Es gibt immer etwas, was verbessert werden kann, zum Beispiel:

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. Navigation sind Sammlungen von Links zum Navigieren zu verwandten Dokumenten. Menüs sind Sammlungen von Aktionen, die in einem Dokument ausgeführt werden sollen. Manchmal überschneiden sich diese Aufgaben. Sie haben möglicherweise eine Navigation, die auch eine Schaltfläche zum Ausführen einer Aktion enthält, z. B. das Öffnen eines modalen Fensters, oder Sie haben ein Menü, über das eine Aktion zu einer anderen Seite führt, z. B. einer Hilfeseite. In diesem Fall ist es wichtig, dass Sie die ARIA-Rollen nicht kombinieren, sondern den Hauptzweck Ihrer Komponente ermitteln und das Markup und die Rollen entsprechend auswählen.

Das <nav>-Element hat eine implizite ARIA-Rolle für die Navigation, die ausreicht, um zu signalisieren, dass es sich bei dem Element um eine Navigation handelt. Häufig verwenden Websites aber auch Menü, Menüleiste und Menüpunkt. 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 erfahren, warum das normalerweise nicht der Fall ist, werfen wir einen Blick auf die offizielle Definition dieser Rollen.

Navigationsrolle

Eine Sammlung von Navigationselementen (normalerweise Links) für die Navigation im Dokument oder zu zugehörigen Dokumenten.

Navigation (Rolle) WAI-ARIA 1.1

Menürolle

Ein Menü ist oft eine Liste allgemeiner Aktionen oder Funktionen, die der Nutzer aufrufen kann. Die role (Menürolle) ist geeignet, wenn eine Liste von Menüelementen ähnlich wie ein Menü in einer Desktopanwendung dargestellt wird.

menu (role) WAI-ARIA 1.1

Die Rolle der Menüleiste

Eine Darstellung eines Menüs, das 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. Autoren sollten darauf achten, dass die Interaktion mit der Menüleiste der üblichen Interaktion über die Menüleiste in einer Desktop-Benutzeroberfläche ähnelt.

Menüleiste (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 (Rolle) WAI-ARIA 1.1

Die Spezifikation ist hier sehr klar. Verwenden Sie die Navigation zum Navigieren im Dokument oder verwandten Dokumenten und zum Menü nur für eine Liste von Aktionen oder Funktionen, die Menüs in Desktopanwendungen ähneln. Wenn Sie nicht das nächste Google-Dokument erstellen, benötigen Sie wahrscheinlich keine der Menürollen für die Hauptnavigation.

Wann ist eine Speisekarte angemessen?

Menüelemente dienen hauptsächlich nicht der Navigation, sondern zum Ausführen von Aktionen. Angenommen, Sie haben eine Datenliste oder -tabelle und Nutzer können für jedes Element 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 wirklich wichtig, diese Menürollen mit Bedacht einzusetzen, denn viel kann schiefgehen.

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 in Menüs und Menüleisten funktionieren. Laut ARIA Authoring Practices Guide (APG) umfasst dies Folgendes:

  • Drücken Sie die Eingabetaste und die Leertaste, um Menüpunkte auszuwä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 verschieben.
  • a–z, um den Fokus auf den nächsten Menüpunkt mit einem Label zu verschieben, das mit dem eingegebenen Zeichen beginnt.
  • Drücken Sie die Esc-Taste, um das Menü zu schließen.

Wenn ein Screenreader ein Menü erkennt, ändert die Software möglicherweise automatisch den Browsermodus, sodass die zuvor genannten Tastenkombinationen verwendet werden können. Unerfahrene Screenreader-Nutzer können das Menü möglicherweise nicht verwenden, weil sie die Tastenkombinationen oder deren Verwendung nicht kennen.

Dasselbe gilt für Nutzer mit der Tastatur, die möglicherweise erwarten, dass sie Umschalttaste und 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 lediglich ein Navigationselement mit einer Liste und Links. Dazu gehören auch Single-Page-Anwendungen (SPA) oder Web-Apps. Der zugrunde liegende Stack spielt keine Rolle. Vermeiden Sie Menürollen, es sei denn, Sie erstellen etwas, das einer Desktop-Anwendung sehr ähnlich ist.

Zusätzliche Ressourcen

Hero-Image von Mick Haupt