Verbesserung der Zugänglichkeit von Websites mit Bypass-Navigation

Eine Bypass-Navigation auf Webseiten ist eine Navigationshilfe für Benutzer, die aufgrund einer Beeinträchtigung oder einer anderen Einschränkung Schwierigkeiten haben, die Navigation einer Website zu nutzen. Eine Bypass-Navigation ermöglicht es Benutzern, den Hauptinhalt einer Seite zu überspringen und direkt zu bestimmten Abschnitten oder Inhalten zu springen, die für sie relevant sind.

Kompass auf alter Landkarte. — Bild von Dorothe über die Plattform Pixabay

Typischerweise wird eine Bypass-Navigation am Anfang einer Webseite platziert und ist nur für Bildschirmleser und Tastaturnutzer zugänglich. Wenn ein Benutzer auf eine Taste wie "Zum Inhalt springen" klickt, springt der Fokus direkt zum Hauptinhalt der Seite. Auf diese Weise können Benutzer mit motorischen oder visuellen Beeinträchtigungen die Navigation der Website schneller und effektiver durchführen, da sie nicht durch die gesamte Navigation navigieren müssen.

Eine Bypass-Navigation ist eine wichtige Funktion für die Barrierefreiheit von Webseiten und hilft sicherzustellen, dass alle Benutzer unabhängig von ihren Einschränkungen Zugang zu den Inhalten der Website haben.

Weitere Bezeichnungen und Namen

Wie so oft gibt es eine Vielzahl an Bezeichnungen/Namen für solch eine Bypass Navigation. Hier sind einige (deutsche) mögliche Begriffe die ebenfalls Verwendung finden:

Schnellzugriff
Direktzugriff
Tastatur-Navigation
Sprungnavigation
Versteckte Navigation
Verborgene Navigation
Zugänglichkeits-Navigation
Barrierefreie Navigation

Im World Wide Web und vor allem in der Webentwicklung wird sehr häufig englisch genutzt, und auch im englischen gibt es natürlich eine Reihe an Bezeichnungen für solch eine Art der Webseiten-Navigation bzw. um die eigentliche Navigation optional zu umgehen. Auch hier habe ich einige Beispiele aufgeführt:

Englische Bezeichnungen

Skip Navigation
Skip to Content
Accessible Navigation
Hidden Navigation
Bypass Links
Keyboard Navigation
Direct Access
Quick Access
Jump Navigation
Invisible Navigation
Screen Reader Navigation
Assistive Technology Navigation

Bedeutung für die Barrierefreiheit und Tipps zur Implementierung

Eine Bypass-Navigation sollte immer dann verwendet werden, wenn es auf einer Webseite lange Inhaltsbereiche oder Navigationsmenüs gibt, die für Menschen mit motorischen oder visuellen Beeinträchtigungen schwer zugänglich sind. Durch die Bypass-Navigation wird es diesen Nutzern ermöglicht, schnell und einfach zu den relevanten Inhalten auf der Webseite zu springen, ohne sich durch den gesamten Inhalt scrollen oder durch mehrere Menüs navigieren zu müssen.

Typische Beispiele für Inhaltsbereiche, auf die eine Bypass-Navigation angewendet werden kann, sind Header, Navigation, Suchfelder oder Seitenspalten. Eine Bypass-Navigation ist auch dann sinnvoll, wenn die Webseite über eine Vielzahl von Links oder Schaltflächen verfügt, die nicht in einer klaren Reihenfolge angeordnet sind.

In der Regel sollte eine Bypass-Navigation auf jeder Seite der Webseite vorhanden sein, damit sie für alle Nutzer zugänglich ist. Es ist jedoch auch möglich, sie nur auf den Seiten einzufügen, die lange Inhaltsbereiche oder komplexe Navigationen haben.

Tipps für die Implementierung einer Bypass-Navigation auf einer Webseite

Bei der Implementierung einer Bypass-Navigation auf einer Webseite sollten HTML- und CSS-Entwickler einige wichtige Dinge beachten:

Verwendung der ARIA-Attribute: Verwende ARIA-Attribute (Accessible Rich Internet Applications) wie role und aria-label, um sicherzustellen, dass die Bypass-Navigation von Bildschirmlesern erkannt wird und ihre Funktion deutlich gemacht wird.
Korrekte Tab-Reihenfolge: Stelle sicher, dass die Bypass-Navigation in der korrekten Tab-Reihenfolge erscheint, damit Benutzer mit Tastaturzugriff sie leicht erreichen können.
CSS-Design: Stelle sicher, dass die Bypass-Navigation durch CSS-Design klar erkennbar ist und sich visuell von anderen Navigationsbereichen der Webseite abhebt.
Platzierung: Platziere die Bypass-Navigation in der Nähe des Seitenkopfs, damit Benutzer schnell darauf zugreifen können.
Einfache und klare Benennung: Benenne die Bypass-Navigation einfach und klar, damit Benutzer verstehen können, was sie tut.
Testing: Teste die Bypass-Navigation sorgfältig, um sicherzustellen, dass sie von Benutzern mit verschiedenen Einschränkungen und Geräten verwendet werden kann.

Eine gut gestaltete Bypass-Navigation ist ein wichtiger Bestandteil der Barrierefreiheit einer Webseite und kann dazu beitragen, dass Benutzer mit Einschränkungen die Navigation einer Webseite schnell und einfach durchführen können.

Wichtige Aspekte der Barrierefreiheit bei der Implementierung einer Bypass-Navigation auf einer Webseite

Eine Bypass-Navigation ist ein wichtiges Instrument zur Verbesserung der Barrierefreiheit von Webseiten. Bei der Implementierung sollte man daher bestimmte Dinge beachten, um sicherzustellen, dass die Bypass-Navigation den Anforderungen an Barrierefreiheit entspricht. Hier sind einige wichtige Aspekte, die man beachten sollte:

Zugänglichkeit: Stelle sicher, dass die Bypass-Navigation von allen Benutzern leicht zugänglich ist, insbesondere von denen, die aufgrund von Einschränkungen Schwierigkeiten mit der Navigation der Webseite haben.
Klarheit und Verständlichkeit: Die Bypass-Navigation sollte klar und verständlich benannt werden, damit Benutzer verstehen können, welche Funktion sie hat.
Einfache Bedienbarkeit: Die Bedienung der Bypass-Navigation sollte einfach und unkompliziert sein, damit Benutzer schnell darauf zugreifen und sie verwenden können.
Konsistenz: Die Bypass-Navigation sollte konsistent mit anderen Navigationsbereichen der Webseite sein und das gleiche Erscheinungsbild und die gleiche Funktion aufweisen.
Testen: Teste die Bypass-Navigation sorgfältig, um sicherzustellen, dass sie von Benutzern mit verschiedenen Einschränkungen und Geräten verwendet werden kann.

HTML-Code

Der HTML-Code für eine Bypass-Navigation könnte wie folgt aussehen:

<body>
  <nav class="bypass-navigation">
    <ul>
      <li><a href="#main-content">Zum Hauptinhalt springen</a></li>
      <li><a href="#navigation">Zur Hauptnavigation springen</a></li>
      <li><a href="#search">Zur Suche springen</a></li>
    </ul>
  </nav>

  <header id="header">
    <!-- Hauptnavigation -->
  </header>

  <main id="main-content">
    <!-- Hauptinhalt der Webseite -->
  </main>

  <aside id="search">
    <!-- Suchfunktion -->
  </aside>

  <footer>
    <!-- Footer der Webseite -->
  </footer>
</body>

In diesem Beispiel wird die Bypass-Navigation innerhalb eines nav-Elements mit der Klasse "bypass-navigation" platziert. Die einzelnen Navigationselemente werden als li-Elemente in einer ungeordneten Liste (ul) dargestellt und jeweils mit einer a-Verknüpfung versehen, die auf den entsprechenden Abschnitt der Seite verweist, auf den der Benutzer springen soll (z.B. "#main-content" für den Hauptinhalt der Webseite).

Um sicherzustellen, dass die Bypass-Navigation von Screenreadern erkannt wird, kann man die ARIA-Attribute role="navigation" und aria-label="Bypass-Navigation" hinzufügen.

Stylesheets (CSS)

Das CSS für eine Bypass-Navigation könnte wie folgt aussehen:

.bypass-navigation {
  position: absolute;
  top: -1000px;
  left: -1000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bypass-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bypass-navigation li {
  display: inline-block;
  margin-right: 10px;
}

.bypass-navigation a {
  display: inline-block;
  padding: 5px;
  text-decoration: underline;
  color: #000;
  background-color: #fff;
  border: 1px solid #000;
}

.bypass-navigation a:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  z-index: 999;
  top: 10px;
  left: 10px;
  background-color: #ccc;
}

In diesem Beispiel wird die Bypass-Navigation mit position: absolute; top: -1000px; left: -1000px; ausgeblendet und somit für visuell beeinträchtigte Nutzer dennoch zugänglich gemacht. Die Breite und Höhe werden auf 1px gesetzt und der Inhalt wird mit overflow: hidden; ausgeblendet. Auf die einzelnen Navigationselemente wird ein Focus-Stil angewendet, der beim Fokussieren des Elements durch den Benutzer aktiviert wird. Hier wird das Element sichtbar und erhält eine Hintergrundfarbe, um es vom restlichen Inhalt der Seite abzuheben.

Wichtig ist, dass man die Bypass-Navigation nur für Nutzer mit Einschränkungen sichtbar macht und für den normalen Gebrauch der Webseite ausgeblendet lässt. So wird sichergestellt, dass die Navigation nicht störend oder verwirrend für den normalen Gebrauch der Webseite ist.