Links per Tastatur erreichen

Damit Links per Tastatur erreichbar sind, gibt es einige wichtige Punkte, die du sicherstellen kannst. Grundsätzlich sind <a>-Tags automatisch für die Tastaturnavigation geeignet, aber es gibt einige technische Details und Best Practices, um sicherzustellen, dass wirklich alle Links und interaktiven Elemente gut per Tastatur erreichbar und benutzbar sind.

1. Tab-Reihenfolge prüfen

Links und andere interaktive Elemente sollten sich logisch und intuitiv durch die Tab-Taste erreichen lassen. Standardmäßig werden <a>-Tags automatisch in die Tabulator-Reihenfolge (Tab-Reihenfolge) einbezogen, sodass der Nutzer sie erreichen und aktivieren kann.

2. tabindex-Attribut nur gezielt nutzen

Normalerweise sind HTML-Elemente wie <a>, <button>, <input>, und <textarea> von Haus aus „fokussierbar“, d. h., sie sind in der Tab-Reihenfolge, ohne dass du etwas hinzufügen musst. Für andere Elemente wie <div> oder <span>, die keine eigenen interaktiven Eigenschaften haben, ist das tabindex="0" nützlich, wenn du sie per JavaScript interaktiv gemacht hast.

Beispiel:

<div role="button" tabindex="0" onclick="doSomething()">Interaktive Fläche</div>

Hinweis: Vermeide tabindex-Werte größer als 0, da dies die natürliche Tab-Reihenfolge durcheinanderbringen kann. Stattdessen bleibt tabindex="0" die beste Option für Nicht-Standard-HTML-Elemente.

3. Vermeidung von „unfokussierbaren“ Links

Es kommt manchmal vor, dass <a>-Tags ohne href verwendet werden. Links ohne href sind standardmäßig nicht fokussierbar, was bedeutet, dass sie per Tastatur nicht zugänglich sind. Wenn du einen Link ohne Ziel verwendest, setze href="#", damit der Link auch per Tastatur fokussierbar bleibt, oder nutze ein button-Element, falls es sich um eine Schaltfläche handelt.

Beispiel für einen korrekten Link:

<a href="#ziel">Zum Ziel springen</a>

Beispiel für eine falsche Nutzung von Links:

<a>Linktext ohne href</a> <!-- Nicht per Tastatur erreichbar -->

4. Fokus-Design für sichtbare Orientierung

Um die Benutzerfreundlichkeit für Tastaturnutzer zu verbessern, ist es wichtig, dass der Fokus eines Elements optisch hervorgehoben wird. So wissen Nutzer, welches Element gerade aktiviert wird.

In CSS kannst du eine benutzerdefinierte Fokus-Hervorhebung definieren:

a:focus,
button:focus {
  outline: 2px solid #005fcc; /* Beispiel: eine blaue Kontur */
  outline-offset: 2px;
}

5. Verwenden von Skip-Links

Skip-Links sind spezielle Links, die es Nutzern ermöglichen, direkt zum Hauptinhalt der Seite zu springen, ohne erst durch die gesamte Navigation zu tabben. Sie sollten das erste fokussierbare Element auf der Seite sein und können oft mit der Tab-Taste aktiviert werden.

Beispiel für einen Skip-Link:

<a href="#maincontent" class="skip-link">Zum Hauptinhalt springen</a>

Hier ist das CSS für Skip-Links, damit sie nur sichtbar sind, wenn sie fokussiert werden:

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #005fcc;
  color: white;
  padding: 8px;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}

6. ARIA-Attribute für eine bessere Navigation

Falls du erweiterte Navigationselemente oder modale Dialoge nutzt, die ein- oder ausgeblendet werden, setze das Attribut aria-hidden="true" für ausgeblendete Inhalte. Dadurch werden sie nicht nur visuell, sondern auch per Tastatur „ausgeblendet“. Das Attribut aria-hidden="false" schaltest du dann auf sichtbar.

Beispiel für ein Menü mit aria-hidden:

<button onclick="toggleMenu()" aria-expanded="false" aria-controls="menu">Menü öffnen</button>
<nav id="menu" aria-hidden="true">
  <a href="#home">Startseite</a>
  <a href="#about">Über uns</a>
</nav>

<script>
  function toggleMenu() {
    const menu = document.getElementById("menu");
    const isHidden = menu.getAttribute("aria-hidden") === "true";
    menu.setAttribute("aria-hidden", !isHidden);
    document.querySelector("button[aria-controls='menu']").setAttribute("aria-expanded", isHidden);
  }
</script>

Zusammenfassung: Checkliste für tastaturfreundliche Links

  1. Verwende das href-Attribut bei allen Links, auch wenn das Ziel # ist.

  2. Verwende tabindex="0" nur, wenn du ein Element ohne Standard-Interaktivität zugänglich machen möchtest.

  3. Definiere Fokus-Stile in CSS, um klar zu zeigen, welches Element im Fokus ist.

  4. Implementiere Skip-Links, um Nutzern das schnelle Navigieren zum Hauptinhalt zu ermöglichen.

  5. Nutze ARIA-Attribute für ein- und ausgeblendete Inhalte, um die Tastaturnavigation klar und verständlich zu machen.

Mit diesen Techniken stellst du sicher, dass alle Links und interaktiven Elemente gut per Tastatur erreichbar sind und die Seite optimal für Tastaturnutzer zugänglich ist!

VorherigeWAI-ARIA-AttributeNächsteARIA-Live-Regionen

Zuletzt aktualisiert