Digitale Barrierefreiheit in Imperia: Unterschied zwischen den Versionen

Aus Imperia Support Wiki
 
Zeile 4: Zeile 4:
 
== Allgemeine Informationen ==
 
== Allgemeine Informationen ==
  
Alle Inhalte, die mit dem Redaktionssystem Imperia erstellt werden, [[Digitale Barrierefreiheit allgemein|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.
+
Alle Inhalte, die mit dem Redaktionssystem Imperia erstellt werden, [[Digitale Barrierefreiheit allgemein|müssen barrierefrei]] sein. Das Design-System 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 [https://www.berlin.de/vak/evak/?search=-IT-5&target=qresults spezielle Weiterbildungsangebote] in Anspruch genommen werden.  
 
In den Imperia-Schulungen sind Aspekte der digitalen Barrierefreiheit berücksichtigt. Über die Verwaltungsakademie können darüber hinaus [https://www.berlin.de/vak/evak/?search=-IT-5&target=qresults spezielle Weiterbildungsangebote] in Anspruch genommen werden.  

Aktuelle Version vom 20. Oktober 2021, 13:29 Uhr


Allgemeine Informationen

Alle Inhalte, die mit dem Redaktionssystem Imperia erstellt werden, müssen barrierefrei sein. Das Design-System 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. Für Copyright-Angaben bitte nicht in den Alternativtext, dafür gibt es ein spezielles Feld. 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.

Infografik nicht barrierefrei.PNG

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.

Infografik barrierefrei.PNG

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. 

Tabelle nicht barrierefrei.jpg

Schlechtes Beispiel 2
Hier wird eine Tabelle verwendet um die Inhalte nebeneinander zu platzieren (Layouttabelle).

Tabelle2 nicht barrierefrei.jpg

Schlechtes Beispiel 3
Es fehlen Spaltenüberschriften für die logische Verknüpfung von Informationen. Nur 3 der 6 Spalten haben eine Überschrift.

Tabelle3 nicht barrierefrei.jpg

Schlechtes Beispiel 4
Überschriften werden in verbundene Tabellenzellen geschrieben.

Tabelle4 nicht barrierefrei.jpg.png

iFrame Title

Füllen Sie das Feld "iFrame-Titel für Screenreader" aus. Geben Sie dem iFrame bitte einen aussagekräftigen und beschreibenden Titel.

Iframe barrierefrei.png

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

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

Teaser

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
Teaser barrierefrei.png

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. 

Eingabefeld öffnet sich bei Klick des Link-Buttons über den Freitextfeldern

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.

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.

  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.

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

Struktur barrierefrei.png

Schlechtes Beispiel für Struktur.
Die zweite Ebene wird übersprungen

Struktur barriere.png

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.

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.

Weitere Ressourcen in diesem Wiki