EMZETT.
Login

Emzett Wiki

HTML + CSS: Barrierefreies HTML

Properties1
tagsprogrammiersprachen, html-css

4 Min. Lesezeit

Kurz: Barrierefreiheit (Accessibility, kurz a11y) bedeutet, dass Menschen mit unterschiedlichen Fähigkeiten deine Seite nutzen können.

Teil des Kurses HTML + CSS

Kapitel 12 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Barrierefreiheit (Accessibility, kurz a11y) bedeutet, dass Menschen mit unterschiedlichen Fähigkeiten deine Seite nutzen können: blinde Menschen mit Screenreader, Menschen mit Sehschwäche, Gehörlose, Menschen mit motorischen Einschränkungen (nur Tastatur) und viele mehr. Davon profitieren alle, etwa wer ein Handy im Sonnenlicht nutzt.

In Deutschland und der EU ist Barrierefreiheit für viele Angebote gesetzlich vorgeschrieben (Barrierefreiheitsstärkungsgesetz, seit Juni 2025). Grundlage sind die WCAG (Web Content Accessibility Guidelines) mit den Prinzipien: wahrnehmbar, bedienbar, verständlich, robust.

Die wichtigsten Regeln

  1. Semantisches HTML verwenden (button, a, nav, main, h1 bis h6, label)
  2. Alternativtexte für Bilder (alt), Untertitel für Video
  3. Genug Kontrast (mindestens 4,5:1 für normalen Text)
  4. Alles per Tastatur bedienbar, mit sichtbarem Fokus
  5. Nicht nur Farbe als Information (zusätzlich Text oder Symbol)
  6. Klare Sprache und sinnvolle Überschriften
  7. Seiteninhalte bei 200 % Zoom nutzbar

Tastaturbedienung

Probiere deine Seite nur mit Tab, Shift+Tab, Enter, Leertaste und den Pfeiltasten. Kommst du überall hin? Siehst du, wo der Fokus ist?

<style>
  a, button, input { outline-offset: 2px; }
  /* Fokus sichtbar machen: nie 'outline: none' ohne Ersatz! */
  :focus-visible { outline: 3px solid #1d4ed8; }
  .karte { display: inline-block; padding: 10px 14px; border: 1px solid #94a3b8; margin: 4px; }
</style>
<p>Drücke Tab:</p>
<a class="karte" href="#">Link 1</a>
<button class="karte">Button</button>
<input class="karte" placeholder="Eingabe">
  • Nimm <button> für Aktionen und <a href> für Navigation. Sie sind automatisch fokussierbar und per Tastatur bedienbar.
  • tabindex="0" macht ein Element fokussierbar, tabindex="-1" nur per Skript. Positive Werte (tabindex="3") vermeiden.
  • Entferne den Fokusrahmen nie ohne gleichwertigen Ersatz.

Kontrast

<style>
  p { padding: 8px; margin: 4px 0; }
  .schlecht { background: #fff; color: #bbb; }       /* Kontrast ca. 1,9:1 */
  .gut      { background: #fff; color: #444; }       /* Kontrast ca. 9,7:1 */
</style>
<p class="schlecht">Schlecht lesbar: hellgrau auf weiß</p>
<p class="gut">Gut lesbar: dunkelgrau auf weiß</p>

Werkzeuge: der Kontrast-Rechner in den Browser-Entwicklerwerkzeugen oder die Seite webaim.org/resources/contrastchecker.

ARIA: nur wenn nötig

ARIA (Accessible Rich Internet Applications) ergänzt Informationen für Hilfstechnologien, wenn HTML allein nicht reicht. Die erste Regel lautet: Nutze zuerst natives HTML. Ein <button> braucht kein role="button".

AttributZweckBeispiel
aria-labelName, wenn kein sichtbarer Text da ist<button aria-label="Menü schließen">×</button>
aria-labelledbyName aus anderem ElementDialog über seine Überschrift benennen
aria-describedbyZusatzbeschreibungFehlertext zum Feld
aria-expandedauf-/zugeklapptMenü- und Akkordeon-Knöpfe
aria-currentaktuelle Seite/Schrittaria-current="page"
aria-liveÄnderungen ankündigenrole="status", role="alert"
aria-hidden="true"vor Screenreadern verbergenDekoration
roleRollerole="tablist" bei eigenen Widgets
<button id="b" aria-expanded="false" aria-controls="inhalt">Mehr anzeigen</button>
<div id="inhalt" hidden><p>Zusätzlicher Inhalt.</p></div>
<p id="meldung" role="status"></p>
<script>
  const b = document.getElementById("b"), c = document.getElementById("inhalt");
  b.addEventListener("click", () => {
    const offen = b.getAttribute("aria-expanded") === "true";
    b.setAttribute("aria-expanded", String(!offen));
    c.hidden = offen;
    b.textContent = offen ? "Mehr anzeigen" : "Weniger anzeigen";
    document.getElementById("meldung").textContent = offen ? "Bereich eingeklappt" : "Bereich ausgeklappt";
  });
</script>

Achtung

Falsch eingesetztes ARIA ist schlimmer als gar keins. “No ARIA is better than bad ARIA.”

Formulare

  • Jedes Feld hat ein <label>
  • Fehlermeldungen als Text, verknüpft mit aria-describedby, bei ungültigen Feldern aria-invalid="true"
  • Pflichtfelder im Label kennzeichnen (“Name (Pflicht)”)
  • Autovervollständigung mit autocomplete erleichtert vielen Menschen die Eingabe

Bewegung und Medien

  • prefers-reduced-motion respektieren und Animationen dann reduzieren (siehe CSS-Kapitel)
  • Nichts blinkt oder bewegt sich länger als 5 Sekunden ohne Pausemöglichkeit
  • Videos mit Untertiteln, Audio mit Transkript

Testen

  1. Tastatur: komplette Seite ohne Maus bedienen
  2. Screenreader ausprobieren: NVDA (Windows, kostenlos), VoiceOver (Mac/iPhone), TalkBack (Android)
  3. Automatische Tests: Lighthouse (in Chrome), axe DevTools, WAVE. Sie finden etwa ein Drittel der Probleme
  4. Zoom auf 200 %, Textgröße vergrößern, Hochkontrast-Modus
  5. Echte Nutzerinnen und Nutzer fragen

Merke

  • Natives, semantisches HTML ist die Basis der Barrierefreiheit
  • Alt-Texte, Labels, Überschriften, Kontrast, sichtbarer Fokus
  • Alles muss per Tastatur gehen
  • ARIA nur ergänzend und korrekt
  • Teste mit Tastatur, Screenreader und Werkzeugen wie Lighthouse

Übungsaufgabe

Prüfe eine eigene Seite nur mit der Tastatur und mit Lighthouse. Notiere drei Probleme und behebe sie.

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: Head, Meta-Angaben und globale Attribute

Weiter: CSS: Grundlagen

Alle Kapitel: HTML + CSS im Überblick

Graphansicht

Backlinks