Barrierefreiheit (Accessibility)

Barrierefreiheit (englisch: Accessibility, kurz a11y) bedeutet, dass deine Webseite von allen Menschen genutzt werden kann — einschliesslich Menschen mit Behinderungen. Das sind weltweit ueber 1 Milliarde Menschen. Barrierefreiheit ist nicht nur ethisch richtig, sondern auch gesetzlich oft vorgeschrieben und gut fuers SEO.

Warum Barrierefreiheit?

Grund	Erklaerung
Ethik	Jeder Mensch hat das Recht auf Zugang zu Informationen
Gesetz	EU-Richtlinie, BFSG (ab 2025), ADA, etc.
Business	15% der Weltbevoelkerung hat eine Behinderung
SEO	Barrierefreie Seiten ranken besser
UX	Was fuer a11y gut ist, ist fuer ALLE besser

Die vier Prinzipien (POUR)

Die Web Content Accessibility Guidelines (WCAG) definieren vier Prinzipien:

1. Perceivable (Wahrnehmbar) — Inhalte muessen wahrnehmbar sein
2. Operable (Bedienbar) — Die Seite muss bedienbar sein
3. Understandable (Verstaendlich) — Inhalte muessen verstaendlich sein
4. Robust (Robust) — Die Seite muss mit verschiedenen Technologien funktionieren

Semantisches HTML ist die Basis

Die wichtigste Massnahme fuer Barrierefreiheit ist korrektes, semantisches HTML:

<!-- Schlecht: Screenreader erkennt keinen Button -->
<div class="button" onclick="submit()">Absenden</div>

<!-- Gut: Nativ zugaenglich -->
<button type="submit">Absenden</button>

Native HTML-Elemente bringen kostenlose Barrierefreiheit mit:

• <button> ist mit Tastatur bedienbar
• <a> ist fokussierbar und hat eine Rolle
• <input> unterstuetzt Screenreader nativ
• <h1> bis <h6> erzeugen eine navigierbare Struktur

Alt-Texte fuer Bilder

Jedes Bild braucht einen sinnvollen Alt-Text:

<!-- Informatives Bild: Beschreibe den Inhalt -->
<img src="team.jpg" alt="Unser Team: 5 laechelnde Mitarbeiter vor dem Buero">

<!-- Funktionales Bild (in einem Link): Beschreibe die Aktion -->
<a href="/">
    <img src="logo.png" alt="Zur Startseite von WebDev Blog">
</a>

<!-- Dekoratives Bild: Leerer Alt-Text -->
<img src="border-decoration.png" alt="">

<!-- Komplexes Bild mit ausfuehrlicher Beschreibung -->
<figure>
    <img src="diagramm.png" alt="Kreisdiagramm der Browsernutzung 2026">
    <figcaption>
        Browsernutzung 2026: Chrome 62%, Safari 20%, Firefox 8%,
        Edge 6%, Sonstige 4%.
    </figcaption>
</figure>

Alt-Text Regeln

Bildtyp	Alt-Text	Beispiel
Informativ	Beschreibe den Inhalt	”Sonnenuntergang ueber dem Meer”
Funktional	Beschreibe die Funktion	”Suche starten”
Dekorativ	Leerer Alt-Text	alt=""
Text im Bild	Wiederhole den Text	Exakter Text des Bildes
Komplex	Kurze Zusammenfassung + Details	Alt + figcaption

ARIA-Attribute

ARIA (Accessible Rich Internet Applications) ergaenzt HTML mit zusaetzlichen Informationen fuer assistive Technologien:

aria-label

<!-- Beschreibung fuer Elemente ohne sichtbaren Text -->
<button aria-label="Menue oeffnen">
    <svg><!-- Hamburger-Icon --></svg>
</button>

<!-- Unterscheidung mehrerer Navigationen -->
<nav aria-label="Hauptnavigation">...</nav>
<nav aria-label="Footer-Navigation">...</nav>

aria-labelledby und aria-describedby

<!-- Label von einem anderen Element -->
<h2 id="section-title">Unsere Produkte</h2>
<section aria-labelledby="section-title">
    <!-- Inhalt -->
</section>

<!-- Zusaetzliche Beschreibung -->
<input type="password" id="pw" aria-describedby="pw-hint">
<p id="pw-hint">Mindestens 8 Zeichen, eine Zahl und ein Sonderzeichen.</p>

aria-live fuer dynamische Inhalte

<!-- Screenreader liest Aenderungen vor -->
<div aria-live="polite" id="status">
    <!-- Wird dynamisch aktualisiert -->
</div>

<!-- Wichtige Nachrichten sofort vorlesen -->
<div aria-live="assertive" role="alert">
    Fehler: Bitte fuellen Sie alle Pflichtfelder aus.
</div>

aria-hidden

<!-- Dekoratives Element vor Screenreadern verstecken -->
<span aria-hidden="true">★</span>
<span>Bewertung: 4 von 5 Sternen</span>

Wichtige ARIA-Rollen

<div role="alert">Fehlermeldung</div>
<div role="status">3 Ergebnisse gefunden</div>
<div role="dialog" aria-modal="true">Modal-Inhalt</div>
<div role="tablist">
    <button role="tab" aria-selected="true">Tab 1</button>
    <button role="tab" aria-selected="false">Tab 2</button>
</div>

Goldene Regel: Verwende native HTML-Elemente, wann immer moeglich. ARIA nur als Ergaenzung, nicht als Ersatz!

Tastatur-Navigation

Viele Menschen navigieren nur mit der Tastatur — ohne Maus. Stelle sicher, dass alles erreichbar ist:

Fokus-Reihenfolge

<!-- Die Tab-Reihenfolge folgt dem HTML-Code -->
<input type="text">      <!-- Tab 1 -->
<input type="email">      <!-- Tab 2 -->
<button>Absenden</button>  <!-- Tab 3 -->

Sichtbarer Fokus

/* NIEMALS den Fokus komplett entfernen! */
/* Schlecht: */
*:focus { outline: none; }

/* Gut: Eigenen Fokus-Style definieren */
:focus-visible {
    outline: 2px solid #264de4;
    outline-offset: 2px;
}

Skip-Navigation

<!-- Ermoeglicht Tastaturnutzern, die Navigation zu ueberspringen -->
<body>
    <a href="#main-content" class="skip-link">
        Zum Hauptinhalt springen
    </a>
    <header>
        <nav><!-- Lange Navigation --></nav>
    </header>
    <main id="main-content">
        <!-- Hauptinhalt -->
    </main>
</body>

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: #264de4;
    color: white;
    padding: 0.5rem 1rem;
    z-index: 10000;
}

.skip-link:focus {
    top: 0;
}

tabindex

<!-- tabindex="0": In die natuerliche Tab-Reihenfolge einfuegen -->
<div tabindex="0" role="button">Klickbarer Bereich</div>

<!-- tabindex="-1": Programmgesteuert fokussierbar, aber nicht per Tab -->
<div tabindex="-1" id="error-message">Fehlermeldung</div>

<!-- tabindex > 0: VERMEIDEN! Aendert die natuerliche Reihenfolge -->

Barrierefreie Formulare

<form>
    <div>
        <label for="name">
            Name <span aria-hidden="true">*</span>
            <span class="sr-only">(Pflichtfeld)</span>
        </label>
        <input type="text" id="name" name="name" required
               autocomplete="name"
               aria-describedby="name-error">
        <p id="name-error" class="error" role="alert" hidden>
            Bitte gib deinen Namen ein.
        </p>
    </div>

    <div>
        <label for="email">E-Mail</label>
        <input type="email" id="email" name="email" required
               autocomplete="email"
               aria-describedby="email-hint">
        <p id="email-hint" class="hint">
            Wir geben deine E-Mail nicht weiter.
        </p>
    </div>

    <fieldset>
        <legend>Benachrichtigungen</legend>
        <label>
            <input type="checkbox" name="newsletter">
            Newsletter erhalten
        </label>
    </fieldset>

    <button type="submit">Absenden</button>
</form>

Farbkontrast

Text muss ausreichend Kontrast zum Hintergrund haben:

/* WCAG AA: Mindestkontrast 4.5:1 fuer normalen Text */
.good-contrast {
    color: #1a1a2e;          /* Dunkel auf Hell */
    background: #ffffff;      /* Kontrast: ~16:1 */
}

/* WCAG AA: Mindestkontrast 3:1 fuer grossen Text (>18px bold) */
.large-text {
    color: #4a5568;
    background: #ffffff;
    font-size: 1.5rem;
    font-weight: bold;
}

/* Schlecht: Zu wenig Kontrast */
.bad-contrast {
    color: #999999;          /* Zu hell auf Weiss */
    background: #ffffff;      /* Kontrast: ~2.8:1 */
}

Nicht nur auf Farbe verlassen

<!-- Schlecht: Nur Farbe zeigt den Fehler -->
<input style="border-color: red;">

<!-- Gut: Farbe + Icon + Text -->
<input class="error" aria-describedby="error-msg">
<p id="error-msg" class="error-text">
    ⚠ Bitte gib eine gueltige E-Mail-Adresse ein.
</p>

Screenreader-only Text

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

<!-- Zusaetzliche Info nur fuer Screenreader -->
<a href="bericht.pdf">
    Jahresbericht herunterladen
    <span class="sr-only">(PDF, 2.4 MB, neues Fenster)</span>
</a>

<button>
    <svg><!-- X-Icon --></svg>
    <span class="sr-only">Dialog schliessen</span>
</button>

Uebungen

Uebung 1: Accessibility-Audit

Pruefe eine deiner Webseiten mit dem Browser-Tool “Lighthouse” (DevTools -> Lighthouse -> Accessibility) und behebe die gefundenen Probleme.

Uebung 2: Tastatur-Test

Navigiere eine beliebige Webseite nur mit der Tastatur (Tab, Enter, Escape, Pfeiltasten). Notiere, wo Probleme auftreten.

Uebung 3: Barrierefreies Formular

Erstelle ein vollstaendig barrierefreies Kontaktformular mit:

• Labels fuer alle Felder
• Pflichtfeld-Markierungen
• Fehlermeldungen mit aria-describedby
• Skip-Navigation
• Sichtbaren Fokus-Styles

Was kommt als Naechstes?

Im naechsten Kapitel lernst du die SEO-Grundlagen fuer HTML:

• Meta-Tags fuer Suchmaschinen
• Strukturierte Daten
• Open Graph Tags fuer Social Media

Zusammenfassung

• Semantisches HTML ist die wichtigste Basis fuer Barrierefreiheit
• Alt-Texte beschreiben Bilder fuer Screenreader und Suchmaschinen
• ARIA-Attribute ergaenzen HTML, ersetzen es aber nicht
• Tastatur-Navigation muss vollstaendig funktionieren
• Farbkontrast muss mindestens 4.5:1 fuer normalen Text betragen
• :focus-visible sorgt fuer sichtbaren Fokus bei Tastatur-Navigation
• Skip-Links ersparen Tastaturnutzern langes Tabben durch die Navigation

---