Barrierearme Webredaktion in TYPO3

Barrierefreiheit dient dazu, Ihre Seiten möglichst vielen Menschen zugänglich zu machen. Laut dem Behindertengleichstellungsgesetz (BGG) sind Internetseiten dann barrierefrei, wenn sie „für behinderte Menschen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar sind“. Die Aktion Mensch e.V. fasst das in Ihren Informationen zu Barrierefreien Websites so zusammen: 

"Eine Website ist barrierefrei, wenn sich Einschränkungen beim Sehen, Hören, Bewegen oder beim Verarbeiten von Informationen nicht negativ darauf auswirken, wie wir das Web nutzen. Konkrete Barrieren sind zum Beispiel:

• Menschen mit einer Sehbehinderung können Texte oder Formularfelder schlecht erkennen, wenn sie sich nur gering vom Hintergrund abheben.
• Gehörlose und schwerhörige Menschen können Videos nicht nutzen, wenn sie keine Untertitel enthalten.
• Blinde Menschen können Webseiten nicht richtig nutzen, wenn Bilder, Formulare und Buttons nicht textlich beschrieben sind." 

Als öffentliche Einrichtung ist die Universität daher angehalten, ihren Webauftritt sowie andere informationstechnische Webangebote auch für Menschen mit Behinderungen so zugänglich zu machen, dass ihnen eine Nutzung der Webangebote jederzeit möglich ist. Da vollständige Barrierefreiheit in den wenigesten Fällen möglich ist, geht es in der Praxis darum, diesem Ideal möglichst nahe zu kommen, Webseiten also bestmöglich barrierarm zu gestalten.

Für die barrierarme Gestaltung von Webseiten greifen grundsätzlich verschiedene Ebenen ineinander: Technik, Layout, Informationsstruktur und Redaktion. Eine ganze Reihe von Maßnahmen haben Sie als Redakteur:innen im TYPO3-Backend der www.uni-bamberg.de-Webseiten selbst in der Hand:

• Dabei geht es im Wesentlichen um den strukturierten und benutzerfreundlichen Aufbau der Webseiten einschließlich der Beschreibung des Kerninhalts der jeweiligen Seite sowie der Beschreibung von Bildern und Verlinkungen in den Metadaten.
• Diese Maßnahmen wirken sich zugleich auf die Auffindbarkeit und das Ranking der Inhalte auf den Ergebnisseiten von Suchmaschinen günstig aus, d.h. barrierearme Webredaktion und Suchmaschinenoptimierung (SEO) gehen miteinander einher.

Geeigneter Seitentitel

• Der Seitentitel, der automatisch in der Sidebar-Navigation angezeigt wird, sollte nach Möglichkeit nicht zu lang sein und umbrechen.
• Für eine übersichtlichere Darstellung können und sollten die Seitentitel gekürzt werden, indem Sie in den Seiteneigenschaften einen alternativen Navigationstitel eintragen.
• Benennen Sie Ihre Seiten aussagekräftig. Seitentitel sollten selbsterklärend und für die Besucher:innen verständlich sein.
• Bitte verwenden Sie keine Abkürzungen als Seitentitel. Diese sind nicht barrierefrei und behindern zudem das Auffinden Ihrer Seite durch Suchmaschinen.

Sinnvolle und gut lesbare Textstruktur

• Gliedern Sie Ihren Text in semantisch sinnvolle Abschnitte (per Zeilenumbruch, Absatz, Aufzählungen etc.).

Konsistente Überschriften-Hierarchie

• Verwenden Sie für die Gliederung der Seiten Abschnittsüberschriften und beachten Sie dabei die Hierarchie der Überschriftengrößen zueinander.
• Eine Besucherin oder ein Besucher soll sich auf den Seiten unabhängig von visuellen Hervorhebungen orientieren können.
• Gut gewählte Überschriften erleichtern die Navigation auf der Seite, besonders für Screenreader.
• Achten Sie darauf, die richtigen Überschriftenebenen zu verwenden: Beginnen Sie mit einer h1-Überschrift ("h1" steht für “header1”), die im Optimalfall dem Seitentitel entspricht, und verwenden Sie dann h2-, h3- und h4-Überschriften in der richtigen Reihenfolge. Vermeiden Sie es, z. B. eine h4- direkt nach einer h2-Überschrift zu setzen. 

Verwendung der vorgegebenen Formate im HTML-Editor 

• Der Rich-Text-Editor im TYPO3-Backend (= CKEditor) zeichnet Ihren Text automatisch in HTML aus, sobald sie dem Text ein entsprechendes Format zuweisen.
• Nutzen Sie diese HTML-Auszeichnungen bitte konsequent (z.B. das HTML-Format “Aufzählungsliste” statt Aufzählungen mithilfe von einfachen Textabsätzen), um die Erfassung der Inhalte durch Screenreader zu erleichtern und die Auffindbarkeit und Indexierung in Suchmaschhinen zu verbessern.

Berücksichtigung der mobilen Darstellung des Contents 

• Auf den Seiten der Universität Bamberg werden bei einem dreispaltigen Layout auf kleinen Bildschirmen zuerst die Inhalte der mittleren Spalte angezeigt, dann die der rechten Spalte und schließlich die der linken Spalte unterhalb der Navigation. Wichtige Inhalte, die auch mobil sofort gesehen werden sollen, sollten Sie also nicht in die linke oder rechte Spalte einbinden, sondern in die mittlere Spalte.
• Für Screenreader bereiten komplexe oder schlecht aufbereitete Tabellen häufig Probleme, verzichten Sie daher besser auf Tabellen. Das macht auch deshalb Sinn, weil Tabellen auf kleinen Bildschirmen selten gut dargestellt werden können und ihren Zweck - mehr Übersichtlichkeit - mobil somit verfehlen.

Verständliche Sprache

• Nutzen Sie eine einfache und verständliche Sprache, vermeiden Sie verschachtelte Sätze.
• Verwenden Sie möglichst keine Akronyme und Abkürzungen oder schlüsseln Sie diese bei erstmaliger Verwendung im Text einmal auf.
• Damit helfen Sie Menschen mit Lese- und Rechtschreibschwäche, kognitiven Einschränkungen und auch Personen mit Deutsch als Zweitsprache.

Barrierefreie Links

• Ziel und Zweck sollen aus dem Linktext hervorgehen oder aus dem direkten Kontext des Links ermittelbar sein. D.h. Linktexte sollten möglichst aussagekräftig und unterscheidbar beschreiben, worum es im Inhalt geht, auf den der Link verweist, also z.B. „Alles zu Ihrem Start ins Studium“. Das Wort “hier“ oder “mehr” als Link ist nicht barrierefrei, da es keinen Aufschluss darüber gibt, was konkret verlinkt ist. Dies kommt besonders zum Tragen, wenn ein Vorleseprogramm genutzt wird.
• Bei Verlinkungen auf Dateien sollte das Dateiformat angegeben werden.
• Wird mehrfach auf dasselbe Ziel verlinkt, sollte die Bezeichnung dieser Links konsistent/gleichartig sein.

Sprechende Webseitenadressen

• Die URL-Pfade (Uniform Resource Locator) Ihrer Seiten sollten immer sprechend sein, also sinnvoll lesbare Elemente in der Internetadresse haben, z.B. www.uni-bamberg.de/auslandsstudium/ich-moechte-ins-ausland.

Vermeidung von Mixed Content 

• Vermeiden Sie Mixed Content, also etwa eine Vermischung von deutsch- und englischsprachigen Inhalten.
• Die Vermischung kann bei Screenreadern zu falscher Aussprache führen, d.h. ein von einem Vorleseprogramm auf Deutsch vorgelesener fremdsprachiger Text oder Fachbegriff ist nur schwer zu verstehen oder sogar unverständlich.
• TYPO3 unterstützt das Anlegen mehrsprachiger Seiten. Beim Erstellen von Übersetzungen in TYPO3 wird das Label der Sprache automatisch auf die jeweilige Übersetzung angepasst. Damit intepretieren Screenreader und Suchmaschinen diese Sprachen automatisch korrekt.

Bilder

• Auch wenn Alternativtext in TYPO3 optional ist, sollten Sie ihn zugunsten der Barrierefreiheit in der Regel einfügen: So werden auch Nutzer:innen, die den Bildinhalt selbst nicht wahrnehmen können, über seinen Inhalt informiert, denn Screenreader erkennen und lesen die Alternativtexte vor.
• Der Alt-Text sollte den Inhalt des Bildes kurz beschreiben und nur so lang wie unbedingt nötig sein – idealerweise maximal 150 Zeichen. Für Bilder mit sehr vielen Informationen, wie Infografiken oder Diagramme, dürfen die Alt-Texte länger ausfallen. Bei rein dekorativen Bildern ist kein Alternativtext notwendig.
• Verwenden Sie ein title-Attribut (kurze, aussagekräftige Beschreibung des Bildinhalts), wenn Sie den Besucher:innen ermöglichen wollen, beim Hovern über das Bild den hinterlegten Titel als Tooltip zu sehen.
• Vermeiden Sie Schriftgrafiken. Verwenden Sie Schriftgrafiken, z. B. Organigramme, sollten Sie die in der Grafik enthaltenen Informationen zusätzlich auch in einem Text auf der Seite erklären. Urheberrechtliche Angaben, die im Bild enthalten sind, können Sie zusätzlich in die Bildunterschrift aufnehmen, damit sie auch von Screenreadern erfasst werden können.
• Achten Sie bei Bildinhalten auf ein ausreichendes Kontrastverhältnis zwischen Text und Hintergrund, um die Lesbarkeit für Nutzer:innen mit Sehbeeinträchtigungen zu verbessern.

Videos

• Videoinhalte sollten so aufbereitet sein, dass sie für jeden Nutzer zugänglich sind.
• Untertitel oder Text-Transkripte sollten sicherstellen, dass auch Hörgeschädigte den Inhalt verstehen.
• Audiodeskriptionen machen Videos für blinde und stark seheingeschränkte Zuschauer verständlich.
• Verzichten Sie auf die Autoplay-Funktion.

Audioinhalte

• Auch hier vermindert ein Text-Transkript Barrieren.
• Verzichten Sie auf die Autoplay-Funktion.

Bitte beachten Sie hinsichtlich der Verwendung von Tabellen folgende Hinweise:

• Für Screenreader bereiten komplexe oder schlecht aufbereitete Tabellen häufig Probleme, verzichten Sie daher besser auf Tabellen. Das macht auch deshalb Sinn, weil Tabellen auf kleinen Bildschirmen selten gut dargestellt werden können und ihren Zweck - mehr Übersichtlichkeit - mobil somit verfehlen.
• Bei weniger komplexen Darstellungen können Aufzählungen, ggf. auch Akkordeons und Tabs, als Alternative eingesetzt werden.
• Nutzen Sie Tabellen nur für die Darstellung tatsächlicher tabellarischer Daten. Tabellen sollten nicht zur visuellen Gestaltung eingesetzt werden - etwa, um Texte und Bilder zu positionieren.
• Zeichnen Sie Tabellen korrekt aus (= Tabellengenerator des HTML-Editors nutzen). Hierzu gehören Zeilen- und Spaltenüberschriften. Verbinden Sie nach Möglichkeit keine Zellen.
• Wenn die Struktur einer Tabelle fehlerhaft ist, können Zeilen und Spalten vom Screenreader nicht korrekt zugeordnet werden (fehlende Spaltenüberschriften werden bei der Anzeige auf kleinen Bildschirmen z.B. durch Ziffern ersetzt und von einem Screenreader entsprechend als Ziffern vorgelesen..).

Im weiteren Sinne kann auch mangelnder Datenschutz eine Barriere darstellen:

• Achten Sie darauf, bei Formularen immer eine aussagekräftige Einwilligung in die Datenverarbeitung zu integrieren. Andernfalls könnten Besucher:innen wegen datenschutzrechtlicher Bedenken auf die Nutzung des Formulars verzichten.
• Wesentliche bzw. obligatorische Inhalte sollten nicht über externe Anwendungen eingebunden werden. Denn auch das kann aufgrund der unerwünschten Datenweitergabe an Dritte eine Barriere sein, diese Seiten bzw. Anwendungen zu nutzen. Im Hinblick auf Videoinhalte ist die Einbindung von Opencast-Videos, die über den uni-eigenen Server gehostet werden, bezüglich Datenschutz und Barrierefreiheit eine gute Alternative zu externen Anbietern wie etwa YouTube und Vimeo.

Hintergrund:

• Bei der Einbettung externer Anwendungen über das Plugin InlineFrame oder die Funktion “Mediendatei” in der Dateiliste werden beim Zugriff auf die entsprechende Seite in der Regel mittels Skripten und Cookies im Hintergrund personenbezogene Daten wie die IP-Adresse, das zugreifende Gerät und das Nutzerverhalten an externe Server weitergegeben (z.B. bei der Einbindung von Youtube-Videos, GoogleMaps-Karten und Inhalten aus Mediatheken des ÖRR).
• Hier ist es auf der Webseite der Universität Bamberg nicht immer möglich, die Datenweitergabe im Vorfeld zu unterbinden (sie erfolgt bereits beim Laden der Webseite, auf die man zugreift). Wo jedoch aufgrund eines vorgeschalteten Skriptblockers eine unmittelbare Datenweitergabe unterbunden wird, können Nutzer:innen, die sich gegen die Weitergabe der eigenen Daten entscheiden, solche Inhalte dennoch nicht nutzen.

Hier finden Sie eine Übersicht zur Erstellung barrierefreier Dokumente.