Semantik & Barrierefreiheit
Barrierefreiheit beginnt nicht mit ARIA, sondern mit passendem HTML. Semantische Elemente geben Screenreadern, Tastatur und Suchmaschinen verlässliche Hinweise.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Landmarken und Überschriften
header, nav, main, aside und footer bilden Landmarken.
Screenreader können direkt zu ihnen springen, wenn die Struktur eindeutig ist.
Eine Seite hat genau ein main. Die Überschriftenfolge beschreibt den Inhalt; ein Skip-Link hilft Tastaturnutzern, die Navigation zu überspringen.
<a href="#inhalt">Zum Inhalt springen</a>
<header>...</header>
<nav aria-label="Hauptnavigation">...</nav>
<main id="inhalt">
<h1>Produktübersicht</h1>
</main>Namen, Alternativen und Fokus
Jedes Eingabefeld braucht eine sichtbare Beschriftung über label.
Ein Platzhalter ist kein Ersatz, weil er beim Tippen verschwindet.
Bilder brauchen einen hilfreichen alt-Text. Rein dekorative Bilder bekommen alt="". Buttons enthalten Text oder ein aria-label, und der Tastaturfokus muss sichtbar bleiben.
<label for="suche">Suche</label>
<input id="suche" type="search">
<button type="submit">Suchen</button>
<img src="team.jpg" alt="Vier Personen im Besprechungsraum">
<img src="deko.svg" alt="">ARIA richtig einsetzen
ARIA beschreibt Rollen, Zustände und Namen, wenn HTML das nicht abdeckt.
Ein div mit role="button" ist trotzdem kein echter Button: Tastaturverhalten und Fokus fehlen.
aria-label gibt einen zugänglichen Namen, aria-labelledby verweist auf sichtbaren Text. Prüfe das Ergebnis mit Tastatur und Screenreader, statt nur den Code zu lesen.
<nav aria-label="Hauptnavigation">...</nav>
<section aria-labelledby="preise-titel">
<h2 id="preise-titel">Preise</h2>
</section>
<button type="button" aria-label="Dialog schließen">×</button>Vertiefung
Zuerst HTML, dann ARIA
Barrierefreiheit ist kein Zusatz, sondern eine Eigenschaft der Struktur. Landmarken, echte Buttons, beschriftete Felder und sinnvolle alt-Texte funktionieren mit Tastatur und Screenreader, ohne dass du Verhalten nachbauen musst.
ARIA ist für Fälle gedacht, die natives HTML nicht abdeckt. Eine Rolle ersetzt kein Verhalten: Ein div mit role="button" braucht trotzdem Tastatursteuerung und Fokus. Teste mit Tab-Taste und einem Screenreader, bevor du dich auf den Code verlässt.
<!-- unsicher -->
<div onclick="bestellen()">Bestellen</div>
<img src="produkt.jpg">
<input placeholder="E-Mail">
<!-- zugänglich -->
<button type="button" onclick="bestellen()">Bestellen</button>
<img src="produkt.jpg" alt="Roter Rucksack mit Laptopfach">
<label for="mail">E-Mail</label>
<input id="mail" type="email">Merksatz: Native Elemente lösen die meisten Barrierefreiheitsprobleme. ARIA ergänzt Namen und Beziehungen, ersetzt aber niemals Tastaturverhalten.
Übungsaufgabe
Barrierefreiheits-Audit
Repariere die folgende Seite: Sie hat keine Sprache, keine Landmarken, eine falsche Überschrift, ein Bild ohne Alt-Text, ein unbeschriftetes Feld und einen div-Button.
Das soll dein Programm können
- lang am html-Element ergänzen
- nav und main als Landmarken verwenden
- Genau eine h1 und passende h2
- Alt-Text für das Produktbild
- Label für das Eingabefeld
- Echten button statt div mit onclick
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Ersetze die Container durch nav und main, ergänze lang="de", nutze eine h1, beschrifte das Bild und das Feld und mache aus dem div-Button ein echtes button-Element.
Lösung anzeigen
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Shop</title>
</head>
<body>
<nav aria-label="Hauptnavigation">
<a href="/">Start</a>
</nav>
<main>
<h1>Produkte</h1>
<img src="produkt.jpg" alt="Roter Rucksack mit Laptopfach">
<label for="mail">E-Mail</label>
<input id="mail" type="email">
<button type="button" onclick="bestellen()">Bestellen</button>
</main>
</body>
</html>Warum funktioniert das?
Landmarken und Überschriften geben Orientierung. Alt-Text und Label liefern zugängliche Namen. Der echte button bringt Tastaturbedienung und Fokus mit, die ein div nicht hat.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Barrierefreie Rezeptseite
Baue eine Rezeptseite mit Navigation, Bild, Zutatenliste und Formular für Kommentare. Prüfe die Seite anschließend nur mit Tastatur und einem Screenreader.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.