Lädt...

HTML Accessibility

Zuvor verdrahtete datalist Vorschläge für ein Eingabefeld. Accessibility ist breiter: die ganze Seite mit Tastatur, Screenreadern und Zoom nutzbar. Gutes HTML — Landmarks, Labels, Alt, Überschriften, echte Buttons — ist die Basis.

Warum Accessibility zählt

Manche surfen ohne Maus, vergrößern Text oder hören die Seite. Ein Diagramm ohne Alt ist stumm; Suche ohne Label namenlos; ein klickbares div bekommt vielleicht keinen Fokus. Inklusives Markup hilft allen. Meist Gewohnheiten beim Schreiben von HTML.

Direkte Antwort

1) Semantische Regionen und native Controls. 2) Label für jedes Feld mit for/id. 3) Sinnvoller Alt für informative Bilder; leerer Alt nur dekorativ. 4) Klarer h1 und logische Verschachtelung ohne wilde Sprünge. 5) Mit Tab Links und Buttons erreichen. 6) ARIA nur wenn natives HTML nicht reicht — Struktur zuerst.

📊 Accessibility habits beginners use

Habit Why it helps Beginner tip
Semantic landmarks Tools jump to regions Prefer main/nav over anonymous divs
Labels on controls Names fields clearly for= must match the control id
Alt on images Describes non-text content Say what the image communicates
Logical headings Outlines the page Do not jump h1 → h4 for style
Keyboard-operable controls Not everyone uses a pointer Prefer button/a over clickable divs
Native before ARIA Roles come built-in Repair HTML; do not wallpaper broken markup

Beschriftete Suche mit Landmark

Kleiner Suchstreifen: nav mit zugänglichem Namen, beschriftetes Feld und echter Submit-Button. Screenreader melden Region und Feldname; Tab erreicht Input und Button.

Labeled search in a nav

html 
<nav aria-label="Site">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button type="submit">Search</button>
</nav>

Such-Demo lesen

  • nav ist Navigations-Landmark; aria-label unterscheidet mehrere navs
  • label for + input id geben den zugänglichen Namen
  • name ist fürs Absenden — getrennt vom zugänglichen Namen
  • type=search ist nativ
  • echter button mit Enter/Space
  • Vorherige Lektion: Vorschläge; hier Benennung und Erreichbarkeit

Überschriften, Alt und echter Button

Zweites Snippet: h1, verschachteltes h2, informatives Bild mit beschreibendem Alt und Aktion als button. Gegenteil von „hier klicken“ und stummen Charts.

Headings alt and button

html 
<main>
<h1>Monthly sales</h1>
<h2>Q1 results</h2>
<img src="chart.png" alt="Bar chart: sales rose from 10 to 18">
<p>Sales climbed through March.</p>
<button type="button">Download report</button>
</main>

Struktur-Demo lesen

  • Ein h1 setzt das Thema; h2 darunter ohne Sprung zu h4
  • Alt des Charts nennt die Aussage, nicht nur „Bild“
  • Dekorativ: leerer Alt; dieses Chart ist informativ
  • Aktion ist button, nicht div
  • main markiert den Hauptinhalt
  • Nächste Lektion JavaScript — diese HTML-Gewohnheiten behalten

Was zuerst reparieren

  • Namenlose Felder: Label vor Fancy-Placeholder
  • Stumme informative Bilder: Alt schreiben
  • Fake-Controls: klickbares div durch button/a ersetzen
  • Überschriften-Chaos: logische Outline herstellen
  • Nur-ARIA-Patches: natives Element nutzen wenn möglich
  • Tastatur-Sackgassen: alles Klickbare per Tab erreichbar

Übung — seitenweite Gewohnheiten

  1. Such-Demo; Label entfernen, dann for/id wiederherstellen
  2. Zweites nav mit eigenem aria-label
  3. Chart-Alt leeren, dann sinnvollen Alt zurück
  4. Absichtlich h1→h4, dann h1→h2 fixen
  5. Button durch div ersetzen, dann echten button und Tab
  6. Satz: Accessibility beginnt mit HTML-Struktur, nicht ARIA-Tapete
  7. Nächste Lektion Script — Labels und Buttons behalten

Typische Fehler

  • „Hier klicken“-Links ohne Kontext
  • Informative Bilder ohne oder mit leerem Alt
  • Klickbare divs ohne Tastatur
  • Überschriftenebenen nur für Optik
  • Placeholder statt Label
  • ARIA-Rollen auf kaputtem Markup
  • Vergessen, dass datalist auch ein Label brauchte

Zusammenfassung

  • Accessibility = nutzbare Struktur für mehr Menschen und Tools
  • Landmarks, Labels, Alt, Überschriften, native Buttons zählen
  • Tastaturzugriff gehört dazu
  • Solides HTML vor schwerem ARIA
  • Datalist war ein Control; diese Lektion zoomen auf die Seite
  • Weiter: JavaScript in HTML-Seiten

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
5
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 57 von 68
Html Tutorial