Digitale Barrierefreiheit in Imperia

Alle Inhalte, die mit dem Redaktionssystem Imperia erstellt werden, müssen barrierefrei sein. Das Designsystem von Berlin.de und Imperia sind für eine Bereitstellung von barrierefreien Inhalten vorbereitet. Anpassungen und Optimierungen werden fortlaufend vorgenommen. Technische Lösungen zur Erstellung von barrierefreien Webinhalten in Imperia werden, soweit möglich und sinnvoll, implementiert. Sie sollen die Barrierefreiheit der Inhalte sicherstellen und Redakteur*innen bei der Umsetzung von digitaler Barrierefreiheit unterstützen. In den Imperia-Schulungen sind Aspekte der digitalen Barrierefreiheit berücksichtigt.

Nachfolgend erhalten Sie einen Überblick, welche Aspekte der digitalen Barrierefreiheit Sie in Ihrer redaktionellen Arbeit in Imperia zwingend berücksichtigen müssen. Der überwiegende Teil der Inhalte wurde von der Kompetenzstelle für digitale Barrierefreiheit und Usability in der Senatskanzlei entwickelt und mit der Landesredaktion abgestimmt. Zentrale Vorgaben zu digitaler Barrierefreiheit für Online-Angebote der umittelbaren Verwaltung finden Sie im Bereich Vorgaben.

Auftritte, Anwendungen und Apps der Berliner Verwaltung müssen eine Barrierefreiheitserklärung in ihrem Angebot in einem barrierefreien und maschinenlesbaren Format führen. Für Angebote, die mit Imperia erstellt werden, steht ein eigenes Template für die Erklärung zur Verfügung.

Außerdem ist auch eine Erläuterung der wesentlichen Inhalte der Erklärung zur Barrierefreiheit in Leichter Sprache und Deutscher Gebärdensprache (DGS) für alle öffentlichen Stellen verpflichtend. Aus diesem Grund hat die Kompetenzstelle für digitale Barrierefreiheit und Usability ein Video in DGS sowie einen Text in Leichter Sprache produzieren lassen, die allen öffentlichen Stellen zur Verfügung gestellt wurden.

Das Datum der Erstellung bzw. letzten Aktualisierung der Erklärung muss an folgenden Stellen von Ihnen ergänzt werden:

• In dem Text in Leichter Sprache im Abschnitt „Wann wurde die Erklärung zur Barriere-Freiheit zuletzt geändert?“ (Beispiel: Muster Erklärung zur Barriere-Freiheit in Leichter Sprache bei der Landesbeauftragten für digitale Barrierefreiheit)
• Unter dem Video in Textform (Beispiel: DGS-Muster Erklärung zur Barrierefreiheit bei der Landesbeauftragten für digitale Barrierefreiheit)

Benutzen Sie Überschriften, Absätze und Listen, um den Inhalt ihrer Webseite klarer und verständlicher zu gestalten. Verwenden Sie die Überschriften in einer logisch hierarchischen Reihenfolge. Die H1-Überschrift wird automatisch aus der Seitenüberschrift generiert, sie darf es pro Seite nur einmal geben. Erstellen Sie danach in logischer Reihenfolge H2, H3 etc. Lassen Sie keine Überschriftengröße aus.

Verständlichkeit

Verständliche Sprache versucht Alltagsdeutsch zu benutzen und auf Fachsprache oder Amtsdeutsch zu verzichten. Verständliche Sprache wird auch manchmal Klare oder Einfache Sprache genannt. Die verschiedenen Begriffe sind nicht klar voneinander abgegrenzt und beinhalten sehr ähnliche Konzepte und Regeln. Verständliche Sprache richtet sich an alle Menschen, die es lieber einfach mögen oder brauchen. Ungefähr 60 Prozent der Bevölkerung in Deutschland braucht Texte in verständlicher Sprache, um die Inhalte verstehen zu können. Die Berliner Verwaltungen sind angehalten, ihre digitalen Texte in verständlicher oder einfacher Sprache zu schreiben.

• Leitfaden für Verständlichkeit von Texten

Akronyme und Abkürzungen

Wenn möglich, vermeiden Sie Akronyme oder Abkürzungen, die nicht allgemein bekannt sind. Wenn sie nicht vermieden werden können, erklären sie das Akronym oder die Abkürzung im Fließtext auf jeder Seite, wo es zum ersten Mal vorkommt. Zusätzlich soll jedes Akronym mit einem Erklärungstext versehen werden.

Ein Beispiel für ein Akronym ist: Die Standards für die Informations- und Kommunikationstechnik (IKT) im Land Berlin werden durch die Senatskanzlei festgeschrieben.

Gestaltung

Vermeiden Sie Versalien (Wörter in GROSSBUCHSTABEN geschrieben). Die Wörter lassen sich so schlecht lesen.

Phrasen oder Absätze in anderer Sprache

Werden längere Phrasen oder ganze Absätze innerhalb eines Textes in einer anderen Sprache geschrieben, muss der Sprachwechsel gekennzeichnet werden. Nur so weiß der Screenreader, dass er diesen Absatz anders aussprechen muss. Einzelne Wörter in einer anderen Sprache müssen nicht ausgewiesen werden. In dem Modul Überschriften ist keine eigene Sprachauszeichnung möglich.

• Informationen im Support-Wiki zu Sprachvarianten in Textfeldern

Ganze Seiten in anderen Sprachen

Ganze Seiten in anderen Sprachen müssen über die Spracheinstellungen in den Meta-Daten konfiguriert werden. Mehrere fremdsprachige Seiten sollten als eigener Sprachauftritt erscheinen.

• Informationen im Support-Wiki zu Seiten in einer anderen Sprache

Bilder

Bitte geben Sie jedem Bild Ihrer Webseite einen Alternativtext. Der Text soll die Aussage oder Information des Bildes beschreiben. Der Text soll kurz und aussagekräftig sein. Formulierungen wie: “Auf dem Bild sehen Sie…” oder “Das Bild zeigt…” lassen Sie weg. Ist die Aussage oder Information länger als 10 bis 15 Wörter, soll der Text unter das Bild geschrieben werden und im Alternativtext darauf verwiesen werden. Beachten Sie besonders beim Einstellen von Flyern, Diagrammen und Ähnlichem, dass die Informationen in Textform bereitgestellt werden müssen.

• Mehr Informationen zu Alternativtexten

Video und Audio

Wenn Sie Videos auf Ihrer Webseite benutzen, stellen Sie sicher, dass alle Videos Untertitel haben. Wenn Sie dafür eine automatische Untertitelung benutzen (wie z.B. von YouTube), prüfen Sie nach, ob die Untertitel korrekt sind. Stellen Sie sicher, dass alle wichtigen visuellen Informationen im Video sprachlich wiedergegeben werden oder eine Audiodeskription bereitgestellt wird. Nur so können alle Menschen alle Informationen erhalten. Wenn dies nicht möglich ist, stellen Sie alle wichtigen Informationen, inklusive der visuellen, in Textformat zur Verfügung.

Bei Audiodateien müssen Sie eine Transkription in maschinenlesbarem Text zur Verfügung stellen.

• Mehr Informationen zu Multimedia

Stellen Sie sicher, dass Information nie nur mithilfe von Farbe vermittelt wird.

Wenn Sie Bilder mit Schrift einfügen, müssen Sie den Kontrast beachten. Zwischen Text und Hintergrund muss genügend Kontrast sein. Das Kontrastverhältnis muss mindestens einen Wert von 4,5:1 haben, mehr Kontrast ist besser. Der Kontrast muss natürlich auch bei allen eingefügten Dokumenten beachtet werden. Den Kontrast können Sie mit einem Tool messen, zum Beispiel:

• Contrastchecker
• Colour Contrast Analyser

Mehr Informationen zu Farben und Kontrasten

Tabellen sind auf mobilen Geräten nicht gebrauchstauglich und zum Teil nicht barrierefrei. Wenn möglich, vermeiden Sie Tabellen.

Falls Sie doch eine Tabelle auf Ihre Seiten bringen wollen, bietet Ihnen Imperia drei Möglichkeiten für eine möglichst barrierefreie Darstellung:

1. Textile für kleine Tabellen (empfohlen sind bis zu drei Spalten)
2. Anlegen einer Tabelle in datawrapper, Darstellung über das Datawrapper-Modul auf den Imperia-Seiten
3. SimpleSearch für eine tabellarische Darstellung größerer Datensätze

Bitte beachten Sie bei der Erstellung von Tabellen folgende Grundsätze:

• Vermeiden Sie eine rein visuelle Darstellung von logischen Beziehungen
• Benutzen Sie keine Tabellen, um Seiten zu layouten bzw. Inhalte anzuordnen
• Geben Sie allen Spalten und/oder Reihen Überschriften. Lassen Sie keine Zelle leer.
• Schreiben Sie keine Informationstexte über mehrere Zellen oder durchbrechen anders die logische Zuordnung der Zellen zu den Überschriften. Benutzen Sie keine verschachtelten Tabellen, sondern erstellen lieber mehrere Tabellen

Bitte geben Sie allen Formularfeldern einen klaren und beschreibenden Text, damit die Benutzer*innen später genau wissen, was sie im Formular eintragen sollen. Achten Sie auf eine logische und klare Anordnung der Felder und Informationen. Gruppieren Sie die Themen mit Blocktrenner und tragen Sie eine Überschrift in das Modul ein. Nur mit Überschriften werden Sinnabschnitte hergestellt. Benutzen Sie für jede Information ein Feld (z. B. Straße und Hausnummer getrennt). Beschreiben Sie Schaltflächen mit vertrauten und konsistenten Begriffen.

Geben Sie jeder Webseite eine beschreibende und eindeutige Seitenüberschrift. Diese kann im Reiter Metadaten bearbeitet werden und wird in Imperia automatisch die Überschrift H1. Es soll zum Beispiel nicht mehrmals „Bürgeramt“ vergeben werden, sondern die konkrete Seitenüberschrift, wie „Öffnungszeiten des Bürgeramts Mitte“.

Geben Sie jedem Link einen beschreibenden und eindeutigen Text. Der Linktext soll verstanden werden, auch wenn man die Seite nicht kennt. Gleicher Linktext soll zum gleichen Link-Ziel führen. Gleiches Linkziel soll durch gleichen Linktext angesprochen werden. In den Linktext soll nicht die URL angegeben werden, da sie komplett vorgelesen wird. Nur, wenn die URL als Marke zum Einprägen bestimmt ist, soll sie ausgeschrieben werden.

Beispiele für schlechte Linktexte

• Linktext wie “hier” oder “Mehr”
• URL ausgeschrieben: https://www.berlin.de/lb/digitale-barrierefreiheit/anforderungen/berliner-standards/
• Einen Link für einen Antrag mit „Antrag“ und einen anderen Link zum gleichen Ziel mit „Formular“ beschreiben.

Beispiele für gute Linktexte

• Konkrete Linktexte wie „Formular für Reisekostenabrechnung“ oder „Weitere Informationen zum Wohngeldantrag“
• URL als Marke: www.berlin.de
• E-Mail an das Bürgeramt Mitte
• Immer die gleiche Formulierung zum gleichen Link Ziel (zum „Antragsformular“ immer wieder verwenden).

Barrierefreiheit von Multi-Teasern

Das Flex-Modul Multi-Teaser arbeitet auch mit dem Linktext “Weitere Informationen”. Allerdings wird hier automatisch der Text von der Überschrift genommen und an “Mehr Informationen” angefügt. Dies passiert im Code und ist nicht sichtbar, wird aber vorgelesen.

Verlinkung von Download-Dokumenten

Benutzen Sie das Download-Multi-Modul für Dokumente. Wenn das Modul nicht einsetzbar ist, verlinken Sie bitte wie oben beschrieben. Im Linktext soll dann auch das Dateiformat angegeben werden, z.B. „Bezirksbroschüre XY (PDF)“.

Link-Title in Imperia

Beim Erstellen eines Links in Imperia wird ein Eingabefeld angezeigt: “Link Title”. Das Feld kann leergelassen werden, da der Linktext schon aussagekräftig sein muss. Bitte wiederholen Sie hier nicht den Linktext. Die Informationen erscheinen nur für Sehende als Zusatzinformation, wenn man mit einem Zeigegerät (z.B. Mouse) über den Link streicht. Bei Screenreadern muss das Vorlesen des title-Attributs aktiv eingeschaltet werden. 

Bitte stellen Sie sicher, dass alle Dokumente (u.a. PDF, Word, PowerPoint) auf Ihrer Webseite ebenfalls barrierefrei sind. Benutzen Sie das Download-Modul für Dokumente.

1. Bitte prüfen Sie, ob die Dokumente auf Ihrer Webseite noch benötigt werden oder gelöscht werden können.
2. Bitte überdenken Sie, ob die Dokumente auch als Artikelseite zur Verfügung gestellt werden können (und damit barrierefrei sind).
3. Wenn viele Ihrer Dokumente nicht barrierefrei sind, erstellen Sie eine Prioritätenliste (Häufigkeit der Abfrage, Wichtigkeit des Dokumentes). Nach dieser Priorität sollten die Dokumente überarbeitet werden.

• Berliner Standards zu barrierefreien Dokumenten