---
title: "A: Die Seite hat eine logische Tab-Reihenfolge (WCAG 2.4.3)"
description: Erfahren Sie, warum eine logische Tab-Reihenfolge wichtig ist und wie Sie sicherstellen, dass die Tastaturnavigation dem visuellen Aufbau der Seite folgt, um WCAG 2.4.3 zu erfüllen.
---

[Zu Content springen](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/logical-tab-order#main-content)

- [Deutsch](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/logical-tab-order)
- [English](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/logical-tab-order)

Deutsch

Untermenü für Übersetzungen anzeigen

![SiteCockpit Logo](https://help.sitecockpit.com/hs-fs/hubfs/siteCockpit%20mit%20claim_rgb.png?width=328&height=92&name=siteCockpit%20mit%20claim_rgb.png)

- [Tickets](https://hub.sitecockpit.com/portal)
- [Dokumentation](https://help.sitecockpit.com/de/dokumentation)
- [Abmelden](https://146086235.hs-sites-eu1.com/_hcms/mem/logout)

Hauptnavigation öffnen

Hauptnavigation schließen

- [Tickets](https://hub.sitecockpit.com/portal)
- [Dokumentation](https://help.sitecockpit.com/de/dokumentation)
- [Abmelden](https://146086235.hs-sites-eu1.com/_hcms/mem/logout)
- - [Deutsch](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/logical-tab-order)
    - [English](https://help.sitecockpit.com/en/documentation/easymonitoring-checks/manual-checks/logical-tab-order)
  
  
  
  
  
  
  Deutsch
  
  Untermenü für Übersetzungen anzeigen
- [Kontakt](mailto:kontakt@sitecockpit.com)

[Kontakt](mailto:kontakt@sitecockpit.com)

 Wie können wir Ihnen helfen?

- Es gibt keine Vorschläge, da das Suchfeld leer ist.

1. [Dokumentation](https://help.sitecockpit.com/de/dokumentation?hsLang=de)
2. [Backend](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de)
3. [easyMonitorung manuelle Prüfpunkte](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easymonitorung-manuelle-pr%C3%BCfpunkte)

# A: Die Seite hat eine logische Tab-Reihenfolge (WCAG 2.4.3)

## logical-tab-order

- [**Bedeutung**](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/logical-tab-order#Das-bedeutet)
- [**Auswirkung**](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/logical-tab-order#Auswirkung)
- [**Empfehlung**](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/logical-tab-order#Empfehlung)
- [**Beispiele**](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/logical-tab-order#Beispiele)
- [**Hinweis**](https://help.sitecockpit.com/de/dokumentation/easymonitoring-checks/manuelle-pruefungen/logical-tab-order#Hinweis)

### **Das bedeutet**

Beim Navigieren mit der Tastatur müssen Nutzer und Nutzerinnen den Inhalt einer Seite in einer **logischen Reihenfolge** durchlaufen können. Die Reihenfolge, in der per Tabulator zwischen interaktiven Elementen gewechselt wird, sollte dem **visuellen Aufbau und der inhaltlichen Struktur** entsprechen. Der Fokus darf nicht auf unsichtbare oder außerhalb des Bildschirms liegende Elemente springen.

### **Auswirkung**

Wenn die Tab-Reihenfolge unlogisch ist, verlieren Nutzer und Nutzerinnen die Orientierung. Der Fokus springt scheinbar zufällig über die Seite oder bleibt in versteckten Bereichen hängen. Das **erschwert die Bedienung erheblich und kann wichtige Inhalte oder Funktionen unzugänglich machen**. Der Fehler verletzt WCAG 2.4.3 (A) *Fokusreihenfolge*.

### **Empfehlung**

- Ordnen Sie interaktive Elemente so an, dass sie im DOM der visuellen Reihenfolge entsprechen.
- Verwenden Sie *tabindex* nur, wenn die natürliche Reihenfolge angepasst werden muss – und nur sparsam.
- Vermeiden Sie negative *tabindex*-Werte (*tabindex="-1"*) für sichtbare Inhalte, da diese mit der Tastatur nicht mehr erreichbar sind.
- Prüfen Sie, ob modale Fenster, Menüs oder Overlays beim Öffnen den Fokus korrekt setzen und beim Schließen wieder zurückgeben.

### **Beispiele**

*Problematisch:*

```
<header><a href="#main">Zum Inhalt springen</a></header><main><button tabindex="5">Absenden</button><a href="#">Mehr erfahren</a><input type="text" placeholder="Ihr Name"></main>
```

Hier ist die Tab-Reihenfolge willkürlich, da *tabindex* die natürliche Reihenfolge überschreibt.

*Besser:*

```
<header><a href="#main">Zum Inhalt springen</a></header><main><input type="text" placeholder="Ihr Name"><a href="#">Mehr erfahren</a><button>Absenden</button></main>
```

Eine sinnvolle Tab-Reihenfolge sollte so aussehen:![](https://help.sitecockpit.com/hs-fs/hubfs/image-png-4.png?width=670&height=301&name=image-png-4.png)

Die Reihenfolge folgt der visuellen Struktur. Nutzer und Nutzerinnen können intuitiv per Tab durch die Inhalte navigieren.

### **Hinweis**

Die logische Fokusreihenfolge ist entscheidend für Tastatur- und Screenreader-Navigation. Besonders bei komplexen Layouts mit flexbox oder Grid sollte regelmäßig überprüft werden, ob die Reihenfolge im DOM der sichtbaren Darstellung entspricht.

**Verknüpftes WCAG-Kriterium:**  
[WCAG 2.4.3 – Fokusreihenfolge](https://www.w3.org/TR/WCAG22/#focus-order)<https://www.w3.org/TR/WCAG22/#focus-order>

- [Allgemeines](https://help.sitecockpit.com/de/dokumentation/allgemeines?hsLang=de#main-content)
  
  
  
  
  
    - [Informationen](https://help.sitecockpit.com/de/dokumentation/allgemeines?hsLang=de#informationen)
    - [Dashboard](https://help.sitecockpit.com/de/dokumentation/allgemeines?hsLang=de#dashboard)
- [Backend](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#main-content)
  
  
  
  
  
    - [easyVision](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easyvision)
    - [easyMonitoring](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easymonitoring)
    - [easyMonitorung manuelle Prüfpunkte](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easymonitorung-manuelle-pr%C3%BCfpunkte)
    - [easyMonitorung automatische Prüfpunkte](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easymonitorung-automatische-pr%C3%BCfpunkte)
    - [easyAI](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easyai)
    - [easyStatement](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easystatement)
    - [Contrast Checker](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#contrast-checker)
    - [easyLanguage](https://help.sitecockpit.com/de/dokumentation/backend?hsLang=de#easylanguage)
- [Integration easyVision](https://help.sitecockpit.com/de/dokumentation/integration-easyvision?hsLang=de#main-content)
  
  
  
  
  
    - [Einrichtung](https://help.sitecockpit.com/de/dokumentation/integration-easyvision?hsLang=de#einrichtung)
    - [Installation](https://help.sitecockpit.com/de/dokumentation/integration-easyvision?hsLang=de#installation)
    - [Browser Erweiterungen](https://help.sitecockpit.com/de/dokumentation/integration-easyvision?hsLang=de#browser-erweiterungen)
- [Servicepartner](https://help.sitecockpit.com/de/dokumentation/servicepartner?hsLang=de#main-content)
  
  
  
  
  
    - [Allgemeine Informationen](https://help.sitecockpit.com/de/dokumentation/servicepartner?hsLang=de#allgemeine-informationen)
    - [Stripe](https://help.sitecockpit.com/de/dokumentation/servicepartner?hsLang=de#stripe)
- [Support](https://help.sitecockpit.com/de/dokumentation/support?hsLang=de#main-content)
  
  
  
  
  
    - [FAQ](https://help.sitecockpit.com/de/dokumentation/support?hsLang=de#faq)
    - [Ticketsystem](https://help.sitecockpit.com/de/dokumentation/support?hsLang=de#ticketsystem)

[![siteCockpit rgb](https://help.sitecockpit.com/hs-fs/hubfs/siteCockpit%20rgb.png?width=200&height=42&name=siteCockpit%20rgb.png "siteCockpit rgb")](https://www.sitecockpit.com/)

Telefon: +49(0)30 403 64 98 98  
E-Mail: kontakt@sitecockpit.com

<https://www.facebook.com/sitecockpit/> <https://de.linkedin.com/company/sitecockpit> <https://www.instagram.com/sitecockpit/> <https://www.youtube.com/@SiteCockpit> [mailto:kontakt@sitecockpit.com](mailto:kontakt@sitecockpit.com)

Copyright © 2025, Site Cockpit GmbH