Accessibility · FWT Dokumentation

Accessibility

Accessibility, Kontrast und Tastaturbedienung

Accessibility bedeutet: Eine Oberfläche soll für möglichst viele Menschen bedienbar, lesbar und verständlich sein. Dazu gehören sichtbarer Fokus, gute Kontraste, sinnvolle Labels, verständliche Fehler und Bedienbarkeit mit Tastatur.

FWT liefert dafür Grundlagen und Muster. Das ersetzt aber keine echte Prüfung am fertigen Projekt.

Wichtig: Barrierefreiheit entsteht nicht durch eine einzelne Klasse. Sie entsteht durch sauberes HTML, gute Texte, passende Kontraste und echte Tests.

Fokus

Sichtbarer Fokus

Wer mit Tastatur arbeitet, muss jederzeit sehen, welches Element gerade aktiv ist. Unsichtbarer Fokus ist ein echtes Bedienproblem.

Live-Beispiel

Fokus sichtbar

Springe mit der Tab-Taste durch diese Elemente. Der Fokus muss klar sichtbar sein.

Link als Button

HTML-Code anzeigen

<div class="fwt-card">
    <h3 class="fwt-card-title">Fokus sichtbar</h3>

    <p class="fwt-card-text">
        Springe mit der Tab-Taste durch diese Elemente. Der Fokus muss klar sichtbar sein.
    </p>

    <div class="fwt-btn-group">
        <a class="fwt-btn fwt-btn-primary" href="#">Link als Button</a>
        <button class="fwt-btn fwt-btn-secondary" type="button">Button</button>
        <input class="fwt-input" type="text" placeholder="Eingabefeld">
    </div>
</div>

Skip-Link

Skip-Link zum Hauptinhalt

Ein Skip-Link hilft Tastaturnutzern, lange Navigationen zu überspringen. Er wird normalerweise erst sichtbar, wenn er fokussiert wird.

Live-Beispiel

Navigation

Der Skip-Link wird sichtbar, sobald er per Tastatur fokussiert wird.

Hauptinhalt

Tastaturnutzer können lange Navigationen überspringen.

HTML-Code anzeigen

<a class="fwt-skip-link" href="#main-content">
    Zum Inhalt springen
</a>

<header class="fwt-alert fwt-alert-info">
    <h3 class="fwt-alert-title">Navigation</h3>
    <p class="fwt-alert-text">
        Der Skip-Link wird sichtbar, sobald er per Tastatur fokussiert wird.
    </p>
</header>

<main id="main-content" class="fwt-card">
    <h3 class="fwt-card-title">Hauptinhalt</h3>
    <p class="fwt-card-text">
        Tastaturnutzer können lange Navigationen überspringen.
    </p>
</main>

Ein Skip-Link sollte möglichst direkt am Anfang der Seite stehen.

Tastatur

Tastaturbedienung erklären

Für komplexere Oberflächen können kurze Tastaturhinweise helfen. Besonders bei Tools, Tabellen, Dialogen oder Editor-Funktionen ist das sinnvoll.

Live-Beispiel

Tastaturbedienung

Mit Tab vorwärts, mit Shift + Tab zurück, mit Enter aktivieren.

HTML-Code anzeigen

<div class="fwt-keyboard-panel">
    <h3 class="fwt-keyboard-panel-title">Tastaturbedienung</h3>

    <p class="fwt-keyboard-hint">
        Mit <kbd class="fwt-kbd">Tab</kbd> vorwärts,
        mit <kbd class="fwt-kbd">Shift</kbd> + <kbd class="fwt-kbd">Tab</kbd> zurück,
        mit <kbd class="fwt-kbd">Enter</kbd> aktivieren.
    </p>

    <div class="fwt-btn-group">
        <button class="fwt-btn fwt-btn-primary" type="button">Aktion</button>
        <button class="fwt-btn fwt-btn-secondary" type="button">Weitere Aktion</button>
    </div>
</div>

Formularfehler

Fehlerzusammenfassung

Bei Formularen sollten Fehler nicht nur am einzelnen Feld stehen. Eine Zusammenfassung oben hilft, die Probleme schnell zu erkennen.

Live-Beispiel

Bitte prüfe die Eingaben

Zwei Felder enthalten Fehler. Die Links führen direkt zu den Feldern.

Name fehlt
E-Mail-Adresse ist ungültig

HTML-Code anzeigen

<div class="fwt-error-summary" role="alert">
    <h3 class="fwt-error-summary-title">
        Bitte prüfe die Eingaben
    </h3>

    <p class="fwt-error-summary-text">
        Zwei Felder enthalten Fehler. Die Links führen direkt zu den Feldern.
    </p>

    <ul class="fwt-error-summary-list">
        <li><a href="#access-name">Name fehlt</a></li>
        <li><a href="#access-email">E-Mail-Adresse ist ungültig</a></li>
    </ul>
</div>

<form class="fwt-form" action="#" method="post">
    <div class="fwt-form-group">
        <label class="fwt-label" for="access-name">
            Name <span class="fwt-required" aria-hidden="true">*</span>
        </label>

        <input
            class="fwt-input"
            id="access-name"
            name="name"
            type="text"
            aria-invalid="true"
            aria-describedby="access-name-error"
        >

        <span class="fwt-field-error" id="access-name-error">
            Bitte gib deinen Namen ein.
        </span>
    </div>

    <div class="fwt-form-group">
        <label class="fwt-label" for="access-email">
            E-Mail <span class="fwt-required" aria-hidden="true">*</span>
        </label>

        <input
            class="fwt-input"
            id="access-email"
            name="email"
            type="email"
            aria-invalid="true"
            aria-describedby="access-email-error"
        >

        <span class="fwt-field-error" id="access-email-error">
            Bitte gib eine gültige E-Mail-Adresse ein.
        </span>
    </div>
</form>

Pflichtfelder

Pflichtfelder und Hilfetexte

Pflichtfelder müssen klar erkennbar sein. Der Stern allein reicht nicht, deshalb sollte eine kurze Erklärung vorhanden sein.

Live-Beispiel

HTML-Code anzeigen

<form class="fwt-form" action="#" method="post">
    <p class="fwt-required-text">
        Felder mit <span class="fwt-required" aria-hidden="true">*</span> sind Pflichtfelder.
    </p>

    <div class="fwt-form-group">
        <label class="fwt-label" for="access-required-topic">
            Thema <span class="fwt-required" aria-hidden="true">*</span>
        </label>

        <select
            class="fwt-select"
            id="access-required-topic"
            name="topic"
            required
            aria-describedby="access-required-topic-help"
        >
            <option value="">Bitte wählen</option>
            <option>Allgemeine Anfrage</option>
            <option>Technische Hilfe</option>
            <option>Webseite</option>
        </select>

        <p class="fwt-help" id="access-required-topic-help">
            Wähle das Thema, damit die Anfrage richtig eingeordnet werden kann.
        </p>
    </div>
</form>

Status

Status- und Live-Bereiche

Dynamische Meldungen können mit role="status", aria-live oder role="alert" unterstützt werden. Das HTML entscheidet hier, die FWT-Klasse gestaltet nur die Fläche.

Live-Beispiel

Gespeichert. Die Änderungen wurden erfolgreich übernommen.

Hinweis. Bitte prüfe die Angaben vor dem Absenden.

Fehler. Die Aktion konnte nicht abgeschlossen werden.

HTML-Code anzeigen

<div class="fwt-live-region fwt-live-region-success" role="status" aria-live="polite">
    <strong>Gespeichert.</strong>
    <span>Die Änderungen wurden erfolgreich übernommen.</span>
</div>

<div class="fwt-live-region fwt-live-region-warning" role="status" aria-live="polite">
    <strong>Hinweis.</strong>
    <span>Bitte prüfe die Angaben vor dem Absenden.</span>
</div>

<div class="fwt-live-region fwt-live-region-danger" role="alert">
    <strong>Fehler.</strong>
    <span>Die Aktion konnte nicht abgeschlossen werden.</span>
</div>

Kontrast

Kontrast und Lesbarkeit

Farben dürfen nicht nur gut aussehen. Texte müssen gut lesbar bleiben. Gerade Warnungen, dunkle Bereiche und farbige Flächen müssen geprüft werden.

Live-Beispiel

Standardfläche

Normaler Text auf heller Fläche.

Gute Lesbarkeit braucht ausreichenden Kontrast und klare Schriftgröße.

Dunkle Fläche

Heller Text auf dunklem Hintergrund.

Dunkle Bereiche müssen besonders sorgfältig geprüft werden.

Warnfläche

Warnung darf nicht nur farblich erkennbar sein.

Text, Icon oder Überschrift müssen die Bedeutung zusätzlich erklären.

HTML-Code anzeigen

<div class="fwt-contrast-demo">
    <div class="fwt-contrast-row">
        <div class="fwt-contrast-swatch">
            <p class="fwt-contrast-label">Standardfläche</p>
            <p class="fwt-contrast-text">Normaler Text auf heller Fläche.</p>
        </div>

        <p class="fwt-card-text">
            Gute Lesbarkeit braucht ausreichenden Kontrast und klare Schriftgröße.
        </p>
    </div>

    <div class="fwt-contrast-row">
        <div class="fwt-contrast-swatch fwt-contrast-swatch-dark">
            <p class="fwt-contrast-label">Dunkle Fläche</p>
            <p class="fwt-contrast-text">Heller Text auf dunklem Hintergrund.</p>
        </div>

        <p class="fwt-card-text">
            Dunkle Bereiche müssen besonders sorgfältig geprüft werden.
        </p>
    </div>

    <div class="fwt-contrast-row">
        <div class="fwt-contrast-swatch fwt-contrast-swatch-warning">
            <p class="fwt-contrast-label">Warnfläche</p>
            <p class="fwt-contrast-text">Warnung darf nicht nur farblich erkennbar sein.</p>
        </div>

        <p class="fwt-card-text">
            Text, Icon oder Überschrift müssen die Bedeutung zusätzlich erklären.
        </p>
    </div>
</div>

Touch

Touch-Ziele und kleine Buttons

Kleine Icon-Buttons sehen elegant aus, sind aber oft schwer zu bedienen. Deshalb brauchen sie eine ausreichende Klick- und Touch-Fläche.

Live-Beispiel

Touch-Ziele

Kleine Icon-Buttons sollten trotzdem ausreichend groß bedienbar sein.

HTML-Code anzeigen

<div class="fwt-card">
    <h3 class="fwt-card-title">Touch-Ziele</h3>

    <p class="fwt-card-text">
        Kleine Icon-Buttons sollten trotzdem ausreichend groß bedienbar sein.
    </p>

    <div class="fwt-btn-group">
        <button class="fwt-btn fwt-btn-light fwt-touch-target" type="button" aria-label="Menü öffnen">
            ☰
        </button>

        <button class="fwt-btn fwt-btn-light fwt-touch-target" type="button" aria-label="Suche öffnen">
            🔍
        </button>

        <button class="fwt-btn fwt-btn-light fwt-touch-target" type="button" aria-label="Hilfe öffnen">
            ?
        </button>
    </div>
</div>

Bewegung

Reduzierte Bewegung

Manche Nutzer reduzieren Animationen im Betriebssystem. FWT berücksichtigt prefers-reduced-motion und reduziert Animationen sowie Übergänge.

Grundregel

Animationen sollten eine Oberfläche unterstützen, aber nicht für das Verständnis oder die Bedienung zwingend notwendig sein.

Prüfung

Was trotzdem geprüft werden muss

Tastaturtest

Jede Funktion muss mit Tab, Enter, Escape und Pfeiltasten sinnvoll erreichbar sein.

Tab-Test auf jeder Seite

Kontrast prüfen

Farben müssen im echten Kontext geprüft werden, nicht nur in der Theorie.

Text / Hintergrund / Zustand

Labels setzen

Formularfelder brauchen verständliche Labels und bei Bedarf Hilfetexte.

<label for="email">E-Mail</label>

Nicht nur Farbe

Fehler, Erfolg und Warnungen brauchen Text oder Symbol zusätzlich zur Farbe.

Fehler: Bitte E-Mail prüfen.

Screenreader testen

Wichtige Abläufe sollten mit Screenreader oder Browser-Tools geprüft werden.

Landmarks / Labels / Reihenfolge

Mobil prüfen

Touch-Ziele, Abstände und Lesbarkeit müssen auf kleinen Bildschirmen funktionieren.

Daumenbedienung beachten