DevPanicZone Logo DevPanicZone! Cheatsheets.

HTML Barrierefreiheit im Web

Barrierefreiheit in HTML ist kein Extra, sondern gutes Webdesign.

Warum Barrierefreiheit wichtig ist

Barrierefreiheit (Accessibility oder kurz „a11y“) sorgt dafür, dass Websites von allen Menschen nutzbar sind – unabhängig von körperlichen, technischen oder situativen Einschränkungen.

Eine barrierefreie Website ist nicht nur ein ethisches oder gesetzliches Thema, sondern auch ein Zeichen für gute Nutzerfreundlichkeit (UX). Sie hilft:

  • Menschen mit Seh-, Hör- oder motorischen Einschränkungen,
  • Menschen mit kognitiven Einschränkungen oder Reizüberflutung,
  • und allen anderen, die in bestimmten Situationen (z. B. auf dem Handy bei Sonne oder ohne Maus) eingeschränkt sind.
Gute Accessibility bedeutet also

Inhalte sind verständlich, steuerbar, wahrnehmbar und robust - die vier Prinzipien der WCAG (Web Content Accessibility Guidelines).

Wahrnehmbarkeit: Farben, Kontraste & Schriftgrößen

Inhalte müssen so gestaltet sein, dass sie von allen Nutzern gesehen oder gehört werden können. Wichtig sind dabei vor allem:

  • Kontrastverhältnis: Text sollte ein Kontrastverhältnis von mindestens 4.5:1 (normaler Text) bzw. 3:1 (großer Text) zum Hintergrund haben.
  • Keine Information nur durch Farbe: Farben sollten nie allein Information tragen (z. B. rot = Fehler). Ergänze Symbole oder Text.
  • Flexible Schriftgrößen: Verwende relative Einheiten wie em oder rem statt Pixel, damit Nutzer ihre Schriftgröße selbst anpassen können.
HTML 
<p style="font-size: 1.2rem; color: #222; background: #f1f1f1;">
    Gut lesbarer Text mit ausreichendem Kontrast
</p>

Gut lesbarer Text mit ausreichendem Kontrast

Bedienbarkeit: Tastatur, Fokus und sichtbare Navigation

Alle Funktionen sollten auch ohne Maus erreichbar sein. Nutzer navigieren oft mit der Tab -Taste (vorwärts) und Shift + Tab (rückwärts). Der Fokus sollte dabei sichtbar bleiben.

HTML 
<button>Klick mich</button>
<style>
    button:focus {
    outline: 3px solid orange; /* Sichtbarer Fokusrahmen */
    outline-offset: 2px;
    }
</style>

Falls du eigene Elemente z. B. mit <div> interaktiv machst, setze tabindex="0" , damit sie per Tab erreichbar sind:

HTML 
<div role="button" tabindex="0">
    Interaktives Element
</div>

Verständlichkeit: Klare Struktur & sinnvolle Alternativen

  • Verwende semantische HTML-Elemente - z. B. <nav> , <main> , <footer> - damit Screenreader den Aufbau verstehen.
  • Gib Bildern alt -Texte, die den Inhalt beschreiben.
  • Beschrifte Formulare eindeutig - <label> .
  • Nutze aussagekräftige Linktexte („Mehr über Barrierefreiheit erfahren“ statt „Hier klicken“).
HTML 
<img src="diagramm.png" alt="Diagramm mit steigenden Umsätzen 2025">
                        
<label for="email">E-Mail-Adresse:</label>
<input type="email" id="email" name="email">

Robustheit: Kompatibilität mit Technologien

Inhalte sollten mit verschiedenen Geräten, Browsern und Assistenzsystemen funktionieren – besonders Screenreadern. Hier kommen ARIA-Attribute ins Spiel:

Rolle Beschreibung Beispiel
role="button" Markiert ein Element als Schaltfläche <div role="button">OK</div>
role="navigation" Kennzeichnet den Hauptnavigationsbereich <nav role="navigation">...</nav>
aria-label Beschreibt ein Element für Screenreader <button aria-label="Menü öffnen">☰</button>
aria-hidden="true" Verbirgt ein Element vor Screenreadern <span aria-hidden="true">★</span>
aria-live Screenreader werden über Änderungen informiert <div aria-live="polite">Neue Nachricht</div>
aria-expanded Zeigt an, ob ein aufklappbares Element geöffnet oder geschlossen ist <button aria-expanded="false">Menü</button>

Checkliste: Barrierefreiheit verbessern

  • ☐ Fokus ist sichtbar (Tastaturbedienung testen)
  • ☐ Bilder haben sinnvolle alt -Texte
  • ☐ Überschriften sind logisch verschachtelt h1 – h6
  • ☐ Texte sind gut lesbar (Kontrast & Schriftgröße)
  • ☐ Formularfelder sind beschriftet
  • ☐ Keine Information nur durch Farbe vermittelt
  • ☐ Eigene Widgets haben passende role -Attribute
  • ☐ Inhalte funktionieren mit Screenreadern
Hilfreiches Tool

Die DevTools Extension axe DevTools hilft dir, die Probleme auf deiner Seite zu erkennen.

Weitere zentrale Themen zu HTML & Barrierefreiheit

Barrierefreiheit endet nicht bei semantischen Tags oder ARIA-Rollen. Hier findest du weitere wichtige Punkte, die das Nutzererlebnis für alle verbessern – unabhängig von Gerät oder Einschränkung.

Sprache richtig angeben

Mit dem lang -Attribut teilst du Screenreadern mit, in welcher Sprache der Inhalt vorgelesen werden soll. Das gilt sowohl für das gesamte Dokument als auch für einzelne fremdsprachige Wörter.

HTML 
<html lang="de">
<body>
    <p>Dieses Tutorial ist auf <span lang="en">accessibility</span> spezialisiert.</p>
</body>
</html>

Multimedia-Inhalte zugänglich machen

Audio- und Video-Inhalte benötigen Alternativen, damit sie auch für Menschen mit Hör- oder Sehbeeinträchtigungen verständlich sind. Dazu gehören Untertitel, Transkripte oder Audiodeskriptionen.

HTML 
<video controls>
    <source src="video.mp4" type="video/mp4">
    <track src="untertitel.vtt" kind="subtitles" srclang="de" label="Deutsch">
</video>

Skip-Links - „Springe zum Inhalt“

Mit sogenannten Skip-Links können Nutzer, die per Tastatur navigieren, direkt zum Hauptinhalt springen, ohne sich durch die Navigation zu tabben.

HTML 
<a href="#main" class="skip-link">Direkt zum Inhalt springen</a>
                            
<main id="main">
    <h1>Seiteninhalt</h1>
</main>

<style>
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: .5em;
    z-index: 100;
}
.skip-link:focus {
    top: 0;
}
</style>

Dynamische Inhalte und ARIA live regions

Wenn du mit JavaScript Inhalte aktualisierst, solltest du sicherstellen, dass Screenreader diese Änderungen automatisch erfassen. Dafür gibt es die aria-live -Regionen.

HTML 
<div aria-live="polite">Neue Nachricht: Keine</div>

Wird der Inhalt dieses Elements per JavaScript geändert, liest der Screenreader die neue Nachricht automatisch vor.

Designentscheidungen mitdenken

  • Genügend Abstand zwischen Buttons und Links, damit sie auch per Touch gut bedienbar sind.
  • Verwende keinen Text als Bild – lieber echten Text mit CSS gestalten.
  • Vermeide blinkende Animationen oder Effekte, die ablenken oder schaden können.
  • Stelle sicher, dass Kontrast und Schriftgröße auf allen Geräten gut lesbar sind.

Animationen respektvoll einsetzen

Manche Nutzer haben in ihrem Betriebssystem eingestellt, dass sie möglichst wenig Bewegung auf dem Bildschirm sehen möchten – z. B. bei Gleichgewichtsstörungen oder Epilepsie. Mit der CSS-Media-Query prefers-reduced-motion kannst du das respektieren:

CSS 
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

Das ist kein vollständiger Ersatz für barrierefreies Design, aber ein einfacher erster Schritt, um Nutzerwünsche zu respektieren.

Tool-Tipp: Accessibility-Checks im Browser

In den Entwicklertools von Chrome, Firefox oder Edge findest du unter dem Reiter „Accessibility“ oder „Lighthouse“ automatische Prüfungen. Sie zeigen dir schnell, ob Alternativtexte fehlen oder Kontraste zu gering sind.

So kannst du deine Seite direkt im Browser auf Barrierefreiheit testen – ganz ohne zusätzliche Tools.

Teste es selbst

Wende das Gelernte direkt an - probiere die Codes aus dem Tutorial aus oder experimentiere mit eigenen Ideen.

Editor öffnen

Mehr aus HTML

Tutorials werden geladen...