Barrierefreie HTML Seiten

Die Implementierung von Barrierefreiheit in einer App stellt eine anspruchsvolle Aufgabe dar. Diese Hilfestellung beansprucht nicht, alle notwendigen Aspekte im Detail zu erklären, die unter Umständen erforderlich sind, um eine Seite vollständig barrierefrei zu gestalten.

Dennoch können mit wenigen, gezielten Maßnahmen oft die Barrierefreiheit einer Seite hergestellt oder deutlich verbessert werden.

Überprüfen Sie zuerst, ob in Ihrer App bereits eine barrierefreie Vorlagenseite vorhanden ist. Das Duplizieren und Anpassen dieser Seite spart Zeit beim Erstellen einer neuen barrierefreien Seite.

Falls Sie keine entsprechende Vorlage im CMS / Seitenbereich finden, steht Ihnen unser Support zur Verfügung. Sie können uns kontaktieren und anfragen, ob wir eine Seite mit Ihrem Corporate Identity (CI) für Sie entwickeln können: support@appack.de

Nach dem Duplizieren der Seite sollten Sie auf folgende Punkte achten:

• Verwenden Sie für Überschriften bereits formatierte Stile und passen Sie nicht manuell die Schriftgröße der einzelnen Elemente an:

• Falls eine Änderung der Schriftart erforderlich ist, nutzen Sie serifenlose Schriftarten:

• Unterteilen Sie den Text in einzelne Sätze und verwenden Sie idealerweise nach einem bis zwei Sätzen einen Zeilenumbruch. Dies erleichtert sehbehinderten Personen, die auf assistive Technologien angewiesen sind, das Verständnis der Informationen, da ein langer Text die Aufmerksamkeit verringern kann.

• Vermeiden Sie Silbentrennungen am Ende der Zeilen.

• Stellen Sie sicher, dass die Reihenfolge des Textes die logische Lesereihenfolge widerspiegelt.

• Verwenden Sie einfache und leicht verständliche Sprache. Bieten Sie Erklärungen oder Definitionen für Fachbegriffe an, wenn nötig.

• Stellen Sie sicher, dass alle Elemente mit klaren und leicht verständlichen Beschriftungen versehen sind. Dies ist wichtig, insbesondere für Benutzer mit kognitiven Beeinträchtigungen.

• Schlechtes Beispiel: „Treten Sie unserer Community bei und starten Sie jetzt“

• Gutes Beispiel: „Jetzt starten“, "Registrieren"

• Beschreiben Sie interaktive Elemente nicht nur durch Farbe. Vermeiden Sie Sätze wie „Klicken Sie auf den grünen Kreis“, da Menschen mit Farbsehschwäche Schwierigkeiten haben könnten.

• Achten Sie auf ausreichende Kontraste zwischen Text und Hintergrundfarben, um die Lesbarkeit für Menschen mit Sehbehinderungen zu verbessern. Einige Nutzer verlassen sich auf Schwarzweiß-Monitore. Hier ist ein Tool, mit dem Sie den Kontrast testen können: https://www.leserlich.info/werkzeuge/kontrastrechner/index.php

• Versehen Sie Bilder immer mit einem "Alternativen Text", um Nutzern von Bildschirmlesern zu helfen. Versuchen Sie, die Bilder bestmöglich zu beschreiben, zum Beispiel: "Eine Gruppe von Menschen mit und ohne sichtbare Behinderung" statt "Bild mit Menschen". Um einen Alternativtext hinzuzufügen, klicken Sie doppelt auf das jeweilige Bild und fügen Sie dann den zu lesenden Text in das Feld "Alternativer Text" ein. Bestätigen Sie die vorgenommenen Anpassungen durch Klicken auf die Schaltfläche "OK".

• Beachten Sie auch, dass die Breite der Bilder in Prozent angegeben wird. Es wird empfohlen, für die Breite des Bildes 100% zu verwenden und das Feld "Höhe" leer zu lassen.

• Ergänzen Sie Audio- und Videodateien durch schriftliche (idealerweise auch synchronisierte) Beschreibungen in „Leichter Sprache“.

Bitte berücksichtigen Sie diese Richtlinien, um sicherzustellen, dass Ihre HTML-Seite barrierefrei für Nutzer zugänglich ist. Führen Sie am besten einen Barrierefreiheitstest mithilfe von https://www.experte.de/barrierefreiheit durch.

Geben Sie einfach den Link Ihrer Seite in die Suchleiste ein und starten Sie den Test. Den Link können Sie leicht im CMS kopieren, indem Sie auf die drei Punkte hinter der jeweiligen Seite klicken und dann auf "URL in die Zwischenablage kopieren".

Sollte der Test einen Wert unter 100% ergeben, nehmen Sie gerne Kontakt mit uns auf (support@appack.de), um ggf. erforderliche Anpassungen im Quellcode der Seite vorzunehmen.