Barrierefrei­heit

Damit die Inhalte auf den Webseiten der TU Dresden für alle zugänglich sind, möchten wir Sie zum Thema Barrierefreiheit informieren. Nachfolgend erfahren Sie, was bei der Erstellung barrierefreier Inhalte beachtet werden muss. Die Beispiele sollen Ihnen bei der korrekten redaktionellen Umsetzung helfen.

Inhaltsverzeichnis

1. 1. Überschriften
   2. Links
   3. Listen und Aufzählungen
   4. Tabellen
   5. Abbildungen
   6. Barrierefreie Dokumente

Überschriften

Überschriften dienen der Strukturierung von Texten und verbessern die Lesbarkeit. Damit auch Nutzende, die sich die Bildschirminhalte von Screenreadern vorlesen lassen Überschriften als solche erkennen, verwenden Sie bitte die dafür vorgesehenen Formatvorlagen im Editor. Vermeiden Sie Formatierungen wie das Schreiben mit VERSALIEN oder fett hervorgehobenem Text, um diesen wie eine Überschrift wirken zu lassen. Außerdem muss die Reihenfolge der Überschriftenhierarchien beachtet werden. Eine Überschrift H2 steht demnach an erster Stelle gefolgt von Überschriften in H3 und Überschriften in H4.

Falsch:

Überschrift (fett)

Richtig:

Überschrift (Format Überschrift 4)

Barrierefreie Überschriften sollen einen Überblick über den nachfolgenden Inhalt geben und das Textverständnis fördern. Deshalb ist es ratsam aussagekräftige und beschreibende Texte zu verfassen. Sie helfen Nutzenden, die nur langsam lesen können oder die Seiten vorgelesen bekommen.

Schlechte Formulierung:

Herzlich Willkommen auf unseren Seiten

Gute Formulierung:

Studienberatung

Zusätzlich ist bei langen Inhaltsseiten und der Verwendung vieler Überschriften das Anlegen eines Inhaltsverzeichnisses hilfreich. Dies erlaubt ein erstes Scannen der Inhalte und eine schnelle Navigation auf der Seite. Achten Sie deshalb darauf die vorgegeben Überschriftenhierarchien einzuhalten.

Links

Verlinkungen müssen aussagekräftig und kontextbezogen bezeichnet werden. Nutzende sollen anhand der Linkbezeichnung erkennen, was sie beim Aufruf des Links erwartet. Stellen Sie sich also die Fragen: Wohin führt der Link? Was vermittelt er?

Schlechte Formulierung: 

Aktuelle Informationen erhalten Sie hier.

Gute Formulierung:

Aktuelle Informationen erhalten Sie in der Newsübersicht zum WebCMS.

Listen und Aufzählungen

Damit Listen von Screenreadern als solche erkannt werden, ist es wichtig sie dementsprechend zu formatieren. Bitte nutzen Sie dazu die entsprechende Formatierung im Editor (mithilfe der Listen-Buttons) und verzichten Sie auf händisches Anlegen durch Bindestriche in Kombination mit Zeilenumbrüchen. Dies ist auch für die korrekte Einrückung von längeren Texten oder bei der Anzeige auf schmalen Displays (z.B. bei Smartphones) wichtig.

Falsch:

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
- At vero eos et accusam et justo duo dolores et ea rebum

Richtig:

• Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
• At vero eos et accusam et justo duo dolores et ea rebum

Tabellen

Tabellen sollten nur zur Darstellung von dafür geeigneten Daten benutzt werden. Ein Einsatz für Layoutzwecke ist zu vermeiden. Daten die für Tabellen geeignet sind, lassen sich einer Spalten- und/oder Zeilenüberschrift zuordnen. Tabellen sollten demnach immer über Spalten- und/oder Zeilenüberschriften verfügen, welche auch als solche formatiert sind. Erst dann werden sie sinnvoll von Screenreadern vorgelesen und Nutzende können die Daten zuordnen und besser verstehen. Jede Angabe sollte einer separaten Zelle zugeordnet sein. Verzichten Sie auf Zeilenumbrüche zur Trennung von Informationen und fügen Sie stattdessen neue Zellen ein. Bitte vermeiden Sie außerdem leere Zellen. Diese können die Verständlichkeit und den Gesamtüberblick stören.

Falsch:

Beispiel für eine Tabelle für Layoutzwecke ohne Tabellenkopf:

Max Mustermann Musterstr. 15 00000 Musterhausen Tel.: xxxxxx

Erika Mustermann Musterstr. 25 00000 Musterhausen Tel.: xxxxxx

Richtig:

Beispiel für eine Datentabelle mit korrekt formatiertem Tabellenkopf:

Jahr	Beschäftigte	Veränderung gegenüber dem Vorjahr
2016	3.000	200
2017	3.320	320

Zu beachten ist auch, dass Tabellen auf mobilen Endgeräten schnell unübersichtlich werden können. Aufgrund des beschränkten Platzes kann sich der Scrollaufwand erhöhen. Oft wird horizontales Scrollen erforderlich. Fragen Sie sich also auch unter diesem Aspekt, ob zur Präsentation der Inhalte eine tabellarische Darstellung notwendig ist.

Falsch:

Beispiel für Tabelle mit falsch formatiertem Tabellenkopf:

Projekt	Ziel	Dauer	zuständige Professur
Projekt A	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.	2 Jahre	Professur A
Projekt B	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.	2 Jahre	Professur B
Projekt C	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.	3 Jahre	Professur A

Richtig:

Beispiel für aufgeteilte Datentabellen mit korrekt formatiertem Tabellenkopf:

Projekte der Professur A

Projekt	Ziel	Dauer
Projekt A	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.	2 Jahre
Projekt C	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.	3 Jahre

Projekte der Professur B

Projekt	Ziel	Dauer
Projekt B	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.	2 Jahre

Abbildungen

Um Abbildungen wie Bilder und Grafiken auch für sehbehinderte Personen zugänglich zu machen, ist die Angabe eines alternativen Textes Pflicht. Dieser wird von Screenreadern vorgelesen und soll beschreiben, was auf der Abbildung zu sehen ist. Der Text sollte kurz und prägnant formuliert werden. Bitte geben Sie zu Beginn immer an, um welche Art von Bild (Foto, Illustration, Diagramm, usw.) es sich handelt. Umschreibungen wie "Dies ist ein Bild, dass ..." sollten jedoch vermieden werden. Nennen Sie die Gegenstände und Merkmale der dargestellten Situation, sodass Nutzende eine Vorstellung davon erhalten. Interpretationen sind nur in Ausnahmefällen und nur als Zusatz zulässig. Sie müssen zudem als eigene Meinung gekennzeichnet werden. Bei Logos und Textgrafiken sollten die Begriffe im Alternativtext wiedergegeben werden. Aus der Grafik zitierte Begriffe sollten immer in Anführungszeichen gesetzt werden. Komplexere Darstellungen wie Anfahrtsskizzen oder Diagramme sollten zusätzlich zu einem knappen Alternativtext auch eine genauere Beschreibung als Fließtext erhalten (Richtwert: ab 80 - 100 Zeichen).

Falsch:

Alternativtext: Laborszene

Richtig:

Alternativtext: Foto einer Frau im Labor. Sie sitzt an einem Tisch und arbeitet am Mikroskop.

Hilfreich zu Erstellung von Alternativtexten ist das Video „Bildbeschreibung“ in OPAL. Das Video entstand als Beitrag der Diversity MOOCs zum Thema Inklusion im Lehralltag.

Barrierefreie Dokumente

Auch bei der Erstellung von Dokumenten sollte das Thema Barrierefreiheit berücksichtigt werden. Für Menschen mit einer Behinderung stellen PDF-Dateien und Office-Dokumente oft große Hürden dar. Werden beispielsweise Inhalte eingescannt oder Grafiken ohne Alternativtexte verwendet, dann können diese nicht von Screenreadern vorgelesen werden.

Um Inhalte in Dokumenten für eine breite Nutzer:innengruppe zugänglich zu machen, sollten Sie die bereits erläuterten Aspekte zu Überschriften, Links, Abbildungen, Auflistungen und Tabellen auch hierfür berücksichtigen. Zusätzlich spielt bei der Erstellung von Dokumenten die Farbgebung eine wichtige Rolle. Da Sie dort selbst über die farbliche Gestaltung entscheiden, ist es wichtig barrierefreie Textfarben und ausreichende Kontraste zu verwenden. Zudem sollten Informationen nicht nur über die Farbgebung vermittelt werden. Darüber hinaus gibt es noch weitere Mittel, um die Zugänglichkeit zu erhöhen, beispielsweise den Einsatz von Lesezeichen. Um Sie bei der Erstellung von barrierefreien Dokumenten zu unterstützen, bietet die Arbeitsgruppe Studium für Blinde und Sehbehinderte (AG SBS) der TU Dresden hilfreiche Leitfäden zum Thema an. Zudem finden sich bei den Software-Anbieter:innen detaillierte Anleitungen und Tools zur Sicherstellung der Barrierefreiheit.