Barrierefreiheit im Internet
Wieso ist der Abbau von digitalen Barrieren wichtig?
Der Inhalt des Webauftritts sollte von möglichst vielen Menschen verstanden werden. In einer alternden und vielfältigeren Gesellschaft ist es eine wichtige Grundlage, um erfolgreich zu kommunizieren. Dafür benötigt es neben redaktionellen To-dos auch ein gutes Bedienkonzept. Eine schlüssige Nutzerführung und einfache Bedienbarkeit machen Inhalte für alle Nutzer zugänglich und erleichtern die Navigation. Zudem werden barrierearme Websites von Suchmaschinen besser bewertet, sind leichter auffindbar und erzielen bessere Positionen in den Suchergebnissen.
Barriereabbau überschneidet sich auch mit anderen Themen wie responsivem Design, SEO, Usability, Design für Älter und Geräteunabhängigkeit.
Seien Sie ein Vorbild und ermöglichen Sie digitale Teilhabe!
Redaktionelle/Textliche To-Dos
- Schreiben Sie kurze Texte.
- Stellen Sie Texte in Leichter Sprache zur Verfügung.
- Vermeiden Sie komplexe Sätze.
- Erklären Sie Fachtermini.
- Hinterlegen Sie Abkürzungen in einer Datenbank oder erklären Sie diese im Text.
- Texte werden linksbündig und im Flattersatz formatiert. (Automatische) Silbentrennung und Blocksatz sind tabu.
- Für Abstände zwischen Textbereichen die Formatierung „Abstandabsatz“ verwenden. Keine leere Absätze verwenden.
- Für horizontale Abstände werden Tab-Stopps verwendet – keine Leerzeichen.
- Downloadbare Dateien müssen entsprechend gekennzeichnet werden, sodass für die Nutzer*inner sofort erkennbar ist, um welchen Dateityp es sich handelt. (pdf, word, jpeg,…)
- Texte sollten die Vier Merkmale der Verständlichkeit berücksichtigen.
Textalternativen für Grafiken
- Bilder illustrieren und dekorieren Texte. Grafiken können Inhalte verständlicher und zugänglicher machen. Grundsätzlich benötigen alle Bilder eine knappe und objektive Beschreibung, die den Zweck einer Grafik angibt.
- Der Alternativtext ist immer im Kontext der Grafik zu formulieren. Dabei ist es wichtig zu unterscheiden, ob es sich um eine illustrierende Grafik, eine informative Grafik, eine dekorative Grafik oder um ein aktives Element handelt.
Textalternativen für Videos
- Videos sollten möglichst mit Untertitel versehen werden.
- Eine zusätzliche Beschreibung/ Zusammenfassung des Videos in Textform gibt Aufschluss über den Inhalt.
- Zudem stellt eine Transkription des Videos alle Informationen vollumfänglich zur Verfügung. (Videobearbeitungsprogramme wie Adobe Premiere Pro können automatisch Untertitel und Transkripte bereitstellen)
- Zusätzlich sollte eine separate Audiospur zum Download bereitstehen.
Körperliche Reaktionen und Anfälle
- Webseiten enthalten nichts, was öfter als dreimal in einem eine Sekunde dauernden Zeitraum blitzt.
- Videos/ Animationen etc., welche für Benutzende potenziell gefährlich sein können, sollte am besten nicht eingebunden werden.
- Gibt es keine passende Alternative muss zwingend ein Warnhinweis vermerkt werden.
Nutzerführung
Nutzen Sie strukturierende Elemente wie Überschriften <h1>, <h2> etc. Sie erlauben Screenreadern das hin und her springen zwischen Abschnitten.
Seitentitel: Der Titel einer Webseite spielt bei der Orientierung innerhalb eines Webauftritts eine wichtige Rolle. Vor allem das Thema bzw. der Zweck der Seite sollte im Titel beschrieben werden. Ein beschreibender Titel erlaubt es den Inhalt einer Seite besser inhaltlich und im Kontext einzuordnen. Der Seitentitel wird in viele Fällen ohne Kontext angezeigt. Es liegt also nahe, den Seitentitel bezogen auf den Inhalt zu formulieren und von generischen Titel abzusehen.
Sprechende Links: Verlinkungen in Texten müssen eindeutig bzw. sprechend formuliert sein, sodass sie auch außerhalb des Kontexts für sich stehen können. Wenn also im Text verlinkt wird, dann sollen die verlinkten Begriffe „für sich“ stehen. Beispielsweise ist in einem Satz „Das Grußwort des Präsidenten finden Sie auch in unserem Archiv.“ Der Satzteil „Grußwort des Präsidenten“ ist eindeutiger als „Archiv“.
Hervorhebungen: Hervorhebungen sind elementare Gestaltungsmöglichkeiten bei der Bereitstellung von Inhalten. Hervorhebungen von Links, Überschriften oder eines wichtigen Wortes im Text nur durch eine farbliche Markierung ist nicht zulässig. Farben können durch bestimmte Bildschirmeinstellungen verloren gehen. Die Hervorhebung muss durch ein zusätzliches Attribut etwa fett, kursiv oder durch ein Icon gekennzeichnet werden.
Abkürzungen und Akronyme: Abkürzungen und Akronyme sollten immer erklärt werden.
Bedienbarkeit
Die Website muss auch für Nutzende ohne Maus über die Tastatur bedienbar sein. Ein sichtbarer Tastaturfokus muss gegeben sein. Tastaturfallen müssen ausgeschlossen werden.
Bei Tastaturbedienung: Durch drücken der Tabulator-Taste sollte sich oberhalb des Hauptmenüs ein weiteres Kontextmenü öffnen mit verschiedenen Sprungmarken (zum Hauptmenü, zum Inhalt, Direkt zur Navigation am Seitenende).
Änderung des Kontrasts: Texte und Bilder haben ein Kontrastverhältnis von mindestens 4,5:1.
Der Kontrast kann auf das Verhältnis von 7:1 erhöht werden
Veränderbare Textgröße: Texte sollte bis auf 200 % vergrößert werden können.
Zeilenabstand: Der Zeilenabstand innerhalb eines Abschnitts ist mindestens 1,5, der Abschnittsabstand mindestens 1,5-fach so groß wie der Zeilenabstand.