Kurzanleitung: Grundsätze der Web-Barrierefreiheit

Anmerkung

Diese Ressource wurde entwickelt, um als einseitige PDF-Datei gedruckt zu werden. Eine HTML-Version steht ebenso zur Verfügung.

Grundlagen der Barrierefreiheit

Erkennbar – verfügbar über sehen, hören oder berühren.
Bedienbar – kompatibel mit Tastatur oder Maus.
Verständlich – benutzerfreundlich, einfach zu verstehen.
Robust – funktioniert in verschiedenen Browsern, assistiven Technologien, mobilen Geräten, alten Geräten/Browser etc. . Hält Standards ein.

Jedes kein-Text Element benötigt eine Textalternative (Alt-Text), welche ein Äquivalent zu dem Bildinhalt bietet.
Der Alt-Text sollte Inhalt sowie Funktion und nicht notwendigerweise eine Beschreibung des Bildes darstellen.
Wenn ein Bild über keinen relevanten Inhalt bzw. keine relevante Funktion verfügt, dekorativ ist oder der alternative Text im benachbarten Text steht, sollte das Bild einen leeren Alternativtext als Wert haben (alt="").
Wenn ein Bild als Hyperlink (oder Hotspot) verwendet wird, muss der Alt-Text die Funktion des Hyperlinks beschreiben.
Vermeiden Sie Wörter wie „Bild von“ oder „Hyperlink zu“.
Verwenden Sie möglichst wenige Wörter.

Benutzen Sie die einfachste Sprache, welche Ihrem Inhalt angemessen ist.
Organisieren Sie Ihre Inhalte mithilfe von echten Überschriften (z.B. <h1>) und Listen.
Verwenden Sie leere (weiße) Absätze, um die Lesbarkeit zu verbessern.
Verwenden Sie Illustrationen, Icons etc. zur Ergänzung des Textes.
Überprüfen Sie Rechtschreibung, Grammatik und Lesbarkeit.

Bieten Sie einen Hyperlink an, der es dem Benutzer erlaubt, die Navigationselemente zu überspringen und zum Hauptinhalt der Seite zu gelangen.
Verwenden Sie echte Überschriften, um den Inhalt zu organisieren.

Machen Sie alle Überschriften von Datentabellen mit dem <th> -Element eindeutig erkennbar.
Bieten Sie ein entsprechendes „Scope“-Attribut an: <th scope="col"> für die Spaltenüberschriften oder <th scope="row"> für Zeilenüberschriften.
Wenn angebracht, fügen Sie eine Tabellen-<caption> zur Datentabelle hinzu.

Der Einsatz von Farben kann das Verständnis verbessern, verlassen Sie sich jedoch nicht nur auf Farben, um Informationen zu vermitteln. Seien Sie hierbei besonders bei rot/grün-Farbkombinationen vorsichtig.
Stellen Sie sicher, dass der Farbkontrast hoch ist, insbesondere zwischen Text und Hintergrund.

Positionieren Sie Formular-Beschriftungen neben oder in der Nähe der zugehörigen Steuerelemente, sodass die Beschriftungen visuell mit diesen verbunden sind.
Verwenden Sie das <label> -Element, um Beschriftungen und Steuerelemente zu verbinden.
Gruppen von ähnlichen Elementen (wie beispielsweise Checkboxen oder Radio-Buttons) sollten zusammen das <fieldset> -Attribut verwenden.
Machen Sie Formular-Pflichtfelder klar erkennbar. Machen Sie ein Formularfeld nicht verpflichtend, wenn dies nicht zwingend notwendig ist. Stellen Sie sicher, dass alle Anweisungen und Hinweise leicht zugänglich sind.
Wenn es Fehler in einem bereits abgeschickten Formular gibt, benachrichtigen Sie den Benutzer darüber auf einem barrierefreien Weg (insbesondere bei einem Screenreader-Benutzer) und gestalten Sie es einfach, die falschen Angaben zu korrigieren sowie das Formular erneut abzuschicken.

Vermeiden Sie Sätze wie „Hier klicken“, „Hier“, „Mehr“, „Mehr Informationen“, „Weiterlesen“ und „Weiter“.
Die URL an sich sollte als Linktext in der Regel vermieden werden, es sei denn, die URL beinhaltet selbst relevante Inhalte.

Videos und Audio-Inhalte müssen über Bildunterschriften und Transkripte verfügen. Für archivierte Audioinhalte ist ein Transkript ausreichend.
Bildunterschriften sollten synchronisiert, gleichbedeutend und zugänglich sein.

HTML- Inhalte werden fast immer barrierefreier sein als Inhalte in beliebigen anderen Formaten.
PDF, Microsoft Word und PowerPoint Dateien, OpenOffice.org und Adobe Flash bieten grundlegende barrierefreie Features.
Bieten Sie zugängliche Alternativen, wenn nicht-HTML Inhalte nicht völlig barrierefrei gestaltet werden können.
Testen Sie die Zugänglichkeit von nicht-HTML Inhalten für assisitiven Technologien.

Stellen Sie sicher, dass die Seite ebenso lesbar sowie benutzbar ist, wenn die Schrift um 150 – 200% vergrößert wurde.
Bieten Sie einen aussagekräftigen Seiten-<title>.
Wenn Sie Scripting verwenden, stellen Sie sicher, dass alle Abläufe sowohl per Tastatur als auch per Maus verfügbar sind. Machen Sie alle gescripteten Inhalte und Seiten -Updates/-Änderungen für Screenreader verfügbar.
Begrenzen Sie die Verwendung von Pop-Ups und benachrichtigen Sie die Benutzer, falls diese verwendet werden.
Bieten Sie für alle Frames einen aussagekräftigen Titel (z.B. <frame title="navigation">).
Befolgen Sie HTML- sowie CSS- Standards.