Barrierefreiheit/erste Schritte

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

HTML ist schon zu einem großen Teil barrierearm. Man sollte darauf achten, keine zusätzlichen Barrieren zu errichten. Die hier aufgeführten ersten Schritte erfordern in aller Regel keinerlei zusätzlichen Aufwand.

valides HTML[Bearbeiten]

Schreiben Sie valides HTML 5 beginnend mit dem richtigen Grundgerüst.

Kopiervorlage:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Titel</title>
  </head>
  <body>

  </body>
</html>

semantisch korrektes HTML[Bearbeiten]

Verwenden Sie die HTML-Elemente bestimmungsgemäß.

main[Bearbeiten]

Verwenden Sie genau ein main-Element, um den Hauptinhalt Ihrer Seite zu kennzeichnen.

label[Bearbeiten]

Beschriften Sie jedes Eingabe-Element.

 <label><input type="checkbox"> Beschriftung</label>
Hauptartikel: HTML/Formulare/label

Alternativen für Inhalte, die keine Texte sind[Bearbeiten]

Jedes Bild, welches nicht nur Verzierung ist, benötigt einen aussagekräftigen Alternativtext, falls es - aus welchen Gründen auch immer - nicht angezeigt werden kann oder soll. Dasselbe gilt für Grafiken, Diagramme und andere grafische Inhalte.

focus[Bearbeiten]

Wann immer Sie die Pseudoklasse :hover einsetzen, verwenden Sie auch die Pseudoklasse :focus um Tastaturbenutzern dasselbe Feedback zu geben.

Entfernen Sie nicht den gepunkteten Rahmen, den die Browser um fokussierte Links oder Buttons zeichnen.

Zeigen Sie für Sehende versteckte aber fokussierbare Elemente an, wenn sie den Fokus erhalten.

click[Bearbeiten]

Setzen Sie click-Events nur für interaktive Elemente ein.

Kontrast[Bearbeiten]

Achten Sie auf einen ausreichenden Kontrast zwischen Vordergrund und Hintergrund.