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 unter CMS → Seiten finden, steht Ihnen unser Support zur Verfügung. Sie können uns kontaktieren und anfragen, ob wir eine Seite mit Ihrem Corporate Design (CI) für Sie entwickeln können:

support@appack.de

Erklärung zur Barrierefreiheit

In bestimmten Projekten ist bereits eine Vorlagenseite für die Erklärung zur Barrierefreiheit hinterlegt.

Dies betrifft insbesondere Projekte im Rahmen der Aktion „Digitale Teilhabe stärken: Modellprojekt für barrierefreie Apps in der Selbsthilfe“ des Paritätischen Wohlfahrtsverbands.

Die Erklärung wird als HTML-Seite im CMS gepflegt und über ein Modul in der App angezeigt.

Für andere Projekte ist diese Seite in der Regel nicht relevant, auch wenn sie als Seitenvorlage verfügbar ist.

Platzhalter in der Erklärung ersetzen

Die hinterlegte Vorlage enthält Platzhalter, die durch die herausgebende Organisation ersetzt werden müssen.

Appack befüllt in der Vorlage ausschließlich technische Angaben zur App und zur Barrierefreiheit. Organisatorische und redaktionelle Angaben müssen durch die jeweilige Organisation geprüft, ergänzt und aktuell gehalten werden.

Typische Platzhalter sind:

Platzhalter	Beschreibung
Name der App	Name der veröffentlichten App
Versionsnummer	Aktuelle veröffentlichte App-Version, idealerweise getrennt für iOS und Android
Datum der Veröffentlichung	Veröffentlichungsdatum der jeweiligen App-Version
Datum der ersten Veröffentlichung	Datum, an dem die Erklärung zur Barrierefreiheit erstmals veröffentlicht wurde
Datum der letzten Aktualisierung	Datum der letzten Prüfung oder Aktualisierung der Erklärung
Verantwortliche Kontaktperson / Abteilung	Zuständige Ansprechperson oder Abteilung Ihrer Organisation
E-Mail-Adresse	Kontaktadresse für Rückmeldungen zur Barrierefreiheit
Telefonnummer	Telefonnummer für Rückfragen

Der Abschnitt zur App kann beispielsweise wie folgt formuliert werden:

Diese Erklärung zur Barrierefreiheit gilt für die mobile Anwendung Muster-App in der Version 1.0.0 (iOS), veröffentlicht am TT.MM.JJJJ, sowie in der Version 1.0.0 (Android), veröffentlicht am TT.MM.JJJJ.

Die Angaben zur verantwortlichen Kontaktperson und zu den Kontaktmöglichkeiten sollten durch Ihre Organisation erfolgen, da die Erklärung zur Barrierefreiheit neben technischen Angaben auch redaktionelle und organisatorische Inhalte enthält.

Nachdem die Platzhalter ergänzt wurden, sollte auch das Datum der letzten Aktualisierung entsprechend angepasst werden.

Sollten Nutzerinnen oder Nutzer über die angegebenen Kontaktwege technische Barrieren oder technische Probleme innerhalb der App melden, können diese Anfragen an den Appack-Support weitergeleitet werden.

Weitere Informationen der Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik (BFIT-Bund) finden Sie hier:

https://www.bfit-bund.de/

Hinweise zur Erstellung barrierefreier Seiten

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“.

Barrierefreiheit testen

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 gegebenenfalls erforderliche Anpassungen im Quellcode der Seite vorzunehmen.