Digitale Barrierefreiheit in Imperia
Allgemeine Informationen
Alle Inhalte, die mit dem Redaktionssystem Imperia erstellt werden, müssen barrierefrei sein. Das Landeslayout bzw. die Landesseiten 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 auf den Landesseiten von Berlin.de sicherstellen und die Imperia-Redakteur_innen bei der Umsetzung von digitaler Barrierefreiheit unterstützen.
In den Imperia-Schulungen sind Aspekte der digitalen Barrierefreiheit berücksichtigt. Über die Verwaltungsakademie können darüber hinaus spezielle Weiterbildungsangebote in Anspruch genommen werden.
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 der Senatsverwaltung für Inneres, Digitalisierung und Sport entwickelt und mit der Landesredaktion abgestimmt.
Barrierefreiheitserklärung
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.
Bilder
Bitte geben Sie jedem Bild Ihrer Webseite einen Alternativ Text. Der Text soll die Aussage oder Information des Bildes beschreiben. Der Text soll kurz und aussagekräftig sein. Copyright-Angaben bitte nicht in den Alternativtext. Formulierungen wie: "Auf dem Bild sehen Sie..." oder "Das Bild zeigt..." weglassen. Ist die Aussage oder Information länger als 10 bis 15 Wörter, soll der Text unter das Bild geschrieben werden und im Alternativ Text darauf verwiesen werden. Beachten Sie besonders beim Einstellen von Flyern, Diagrammen und Ähnlichem, dass die Informationen in Textform bereitgestellt werden müssen.
Videos und Multimedia
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 blinde Menschen alle Informationen erhalten. Wenn dies nicht möglich ist, stellen Sie alle wichtigen Informationen, inklusive der visuellen, in Textformat zur Verfügung.
- schlechtes Beispiel
- In dem Video werden Personen interviewt. Deren Name und weitere Angaben werden nur visuell eingeblendet, aber nicht vorher sprachlich wiedergegeben.
- gutes Beispiel
- Die Personen werden auch sprachlich vorgestellt.
Information nicht nur durch Farbe
Stellen Sie sicher, dass Information nie nur mithilfe von Farbe vermittelt wird.
- Beispiel für eine schlechte Darstellung
- In diesem Tortendiagramm sind die Informationen nur durch Farbe dargestellt. Ein kleineres Tortenstück ist blau, das größere ist orange. In der Legende wird beschrieben dass der blaue Bereich barrierefrei ist, der orangene nicht barrierefrei ist. Die Aussage wird nur mithilfe von Farbe getroffen.
- Beispiel für eine gute Darstellung
- Die Informationen sollen nicht nur über die Farbe erkennbar sein. In diesem Tortendiagramm sind die Informationen direkt mit den %-Angaben in den jeweiligen Tortenabschnitten beschrieben. Daneben gibt es zusätzlich eine Legende.
Tabellen
Tabellen sind auf mobilen Geräten nicht gebrauchstauglich und zum Teil nicht barrierefrei.
- Wenn möglich, vermeiden Sie Tabellen.
- Wenn Sie das Modul zweispaltige Liste verwenden, vermeiden Sie eine rein visuelle Darstellung von logischen Beziehungen (siehe unteres Beispiel 1).
- Benutzen Sie keine Layout Tabellen (siehe unteres Beispiel 2).
- Wenn Sie eine Tabelle benutzen, geben Sie allen Spalten und/oder Reihen Überschriften. Lassen Sie keine Zelle leer (siehe unteres Beispiel 3).
- 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 (siehe unteres Beispiel 3).
- Schlechtes Beispiel 1
- Das Listenmodul wird falsch verwendet. Die zwei oberen Listeneinträge sehen aus wie Spaltenüberschriften, sind strukturell aber nur Listenelemente. Ein Screenreader liest Zeile für Zeile, ohne den logischen Bezug zur oberen Liste herstellen zu können.
- Schlechtes Beispiel 2
- Hier wird eine Tabelle verwendet um die Inhalte nebeneinander zu platzieren (Layouttabelle).
- Schlechtes Beispiel 3
- Es fehlen Spaltenüberschriften für die logische Verknüpfung von Informationen. Nur 3 der 6 Spalten haben eine Überschrift.
- Schlechtes Beispiel 4
- Überschriften werden in verbundene Tabellenzellen geschrieben.
iFrame Title
Füllen Sie das Feld "iFrame-Titel für Screenreader" aus. Geben Sie dem iFrame bitte einen aussagekräftigen und beschreibenden Titel.
Formulare
Bitte geben Sie allen Formularfeldern einen klaren und beschreibenden Text, damit die Menschen 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.
Seitentitel, die beschreibend und eindeutig sind
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“.
Link Text, der beschreibend und eindeutig ist
Geben Sie jedem Link einen beschreibenden und eindeutigen Text. Der Link Text soll verstanden werden, auch wenn man die Seite nicht kennt. Gleicher Link Text soll zum gleichen Link Ort führen. Gleicher Ort soll durch gleichen Link Text angesprochen werden. In den Link Text 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. Benutzen Sie das Download Modul für Dokumente. Wenn das Download-Modul nicht einsetzbar ist, verlinken Sie bitte wie oben beschrieben. Im Link Text soll dann auch das Dateiformat angegeben werden, z.B. „Bezirksbroschüre XY (PDF)“. Weitere Informationen zu Links
Beispiele für schlechte Linktexte
- Link Text wie "hier" oder "Mehr"
- URL ausgeschrieben: https://www.berlin.de/sen/inneres/moderne-verwaltung/digitale-barrierefreiheit/berliner-standards/artikel.807680.php
- Einen Link für einen Antrag mit „Antrag“ und einen anderer Link zum gleichen Ziel mit „Formular“ beschreiben.
Beispiele für gute Linktexte:
- Konkrete Link Texte 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).
Das Teaser Modul arbeitet auch mit dem Link Text "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.
- Beispiel für einen Teaser
Link Title
Beim Link erstellen wird in Imperia ein Eingabefeld angezeigt: "Link Title". Das Feld kann leergelassen werden, da der Link Text schon aussagekräftig sein muss. Keine Doppellungen zum Link Title eingeben! Die Informationen erscheinen nur für Sehende als Zusatzinformation, wenn man mit dem Mauscursor über den Link streicht. Bei Screen Reader-User muss das Vorlesen des title-Attributs aktiv eingeschaltet werden.
Farbkontrast
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, z. B.
- Contrastchecker
- Colour Contrast Analyser wird geprüft, um in der nächsten IKT-Architekturliste als Standard aufgenommen zu werden.
Barrierefreie Dokumente
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.
- Bitte prüfen Sie, ob die Dokumente auf Ihrer Webseite noch benötigt werden oder gelöscht werden können.
- Bitte überdenken Sie, ob die Dokumente auch als Artikelseite zur Verfügung gestellt werden können (und damit barrierefrei sind).
- 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.
Strukturierter Inhalt
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.
- Gutes Beispiel für Struktur
- Alle Überschriftenebenen werden aufeinanderfolgend und logisch genutzt
- Schlechtes Beispiel für Struktur.
- Die zweite Ebene wird übersprungen
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. Erklärung zu Akronymen im Support-Wiki
- Beispiel für ein Akronym
- Die Standards für die Informations-und Kommunikationstechnik (IKT) wird durch die Senatsverwaltung festgeschrieben.
Text in anderer Sprache kennzeichnen
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 Screen Reader, 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.
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.
Verständlichkeit der Texte
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.
Gestaltung der Texte
Vermeiden Sie Versalien (Wörter in GROSSBUCHSTABEN geschrieben). Die Wörter lassen sich so schlecht lesen.
Schulungen zu digitaler Barrierefreiheit
Die Verwaltungsakademie (VAk) bietet verschiedene Schulungen zum Thema Digitale Barrierefreiheit an, u.a. Erstellen von barrierefreien Dokumenten, Prüfen der Barrierefreiheit von Webseiten und Sensibilisierung für digitale Barrieren.