Zum Inhalt
Dein Profil
Angemeldet als:

Abmelden
Anmelden

Fokusmanagement

Allgemeine Komponente

Fokusmanagement stellt sicher, dass Nutzer*innen mit Tastatur oder Screenreader jederzeit wissen, wo sie sich befinden und Elemente zuverlässig erreichen können. Eine klare Fokusreihenfolge und gut sichtbare Fokusmarkierungen sind dafür entscheidend.

Die Relevanz von Barrierefreiheit verstehen

Was muss beachtet werden?

Deutsches Gesetz: Anforderungen der Konformitätsstufe A und AA müssen umgesetzt werden.

    • A

    Hohe Priorität

    Die fokussierbaren Elemente auf einer Seite sollten in der Reihenfolge ihren Fokus erhalten, wie sie visuell angeordnet sind.

    Der Fokus springt von oben nach unten und von links nach rechts, damit Nutzer*innen sich gut orientieren können. Die Fokus-Reihenfolge kann überprüft werden, indem mit der Tab-Taste durch die Website navigiert wird.

    Fokus-Reihenfolge manipulieren mithilfe von CSS

    Mit CSS lässt sich die visuelle Reihenfolge der DOM-Elemente verändern, jedoch bleibt die Fokus-Reihenfolge dieselbe und ist somit nicht mehr barrierefrei.

    HTML-Aufbau zur Manipulierung der HTML-Reihenfolge per CSS
    CSS zur Manipulierung der HTML-Reihenfolge per CSS
    Fokus-Reihenfolge manipulieren mithilfe von Tabindex

    Mittels des HTML-Attributes tabindex können HTML-Elemente fokussierbar gestaltet werden, die es eigentlich nativ nicht sind. Dadurch kann die Fokus-Reihenfolge ebenfalls manipuliert werden.

    1. tabindex="-1"

      • Element wird aus der Fokus-Reihenfolge ausgeschlossen, kann aber mithilfe von JavaScript fokussiert werden

      • Sollte nicht auf nativ-interaktive Elemente angewendet werden wie z.B. ein Button

      • Korrektes Anwendungsbeispiel: Fokussierung der Fehlermeldung nach Abschicken eines Formulars

    2. tabindex="0"

      • Element erhält nun Fokus und tritt in der Tab-Reihenfolge entsprechend der Platzierung im DOM ein

      • Sollte nicht auf nativ nicht-interaktive Elemente angewendet werden, die auch weiterhin keine Interaktionsmöglichkeit aufweisen

      • Korrektes Anwendungsbeispiel: Ein Element ist interaktiv, aber ist nicht entsprechend ausgezeichnet.

    3. tabindex="1"

      • Positive Werte manipulieren die Fokus-Reihenfolge. Dies sollte grundsätzlich vermieden werden.

    Code-Beispiele, wie mithilfe des Tabindex die Fokus-Reihenfolge negativ beeinflusst wird.
    WCAG-Richtlinie:

    • A

    Hohe Priorität

    Alle interaktiven Elemente sind per Tastatur ansprechbar und die Aktionen können per Tastatur ausgeführt werden

    Alle interaktiven Elemente müssen per Tastatur erreichbar und eine Fokus erhalten können, sobald diese auch visuell sichtbar sind. Dementsprechend ist es nicht erlaubt, interaktive Elemente per ARIA-Attribut aria-hidden oder per role="presentation" für assistive Technologien auszublenden.

    Weitere Informationen:

    • AA
    • AAA

    Moderate Priorität

    Alle interaktiven Elemente müssen bei erhalt des Fokus visuell hervorgehoben werden mittels eines Fokusrings.

    Fokus Styles bei Konformitätsstufe AA

    Der Fokusring kann mithilfe von CSS erstellt und gestyled werden:

    1. :focus Fokusring wird auch bei Fokussierung mit der Maus angezeigt

    2. :focus-visible Fokusring wird nur mit Tastaturbedienung angezeigt

    Code-Beispiel, wie in CSS Fokus Styles definiert werden können.
    Code-Beispiel, wie die Fokus Styles fälschlicherweise ausgeblendet werden.
    Fokus Styles bei Konformitätsstufe AAA

    Ab Level AAA müssen Fokus-Stile bestimmten Vorgaben entsprechen. Jedes interaktive Element, das den Fokus erhalten kann, muss folgende Anforderungen erfüllen:

    • Einen sichtbaren Rahmen von mindestens 2 px Dicke besitzen.

    • Einen Farbkontrast von mindestens 3:1 zwischen fokussiertem und nicht-fokussiertem Zustand aufweisen.

    Code-Beispiel mit AAA konformen Styleangaben.
    Code-Beispiel mit nicht AAA konformen Styleangaben.
    WCAG-Richtlinien

    • AA
    • AAA

    Niedrige Priorität

    Beim Fokussieren von Elementen gibt es Vorgaben, wie weit das Element im Viewport sichtbar sein muss, damit Nutzer*innen es gut erkennen und bedienen können.

Zuletzt aktualisiert am 12.12.25