Barrierearme Webseiten in TYPO3

Barrierefreiheit dient dazu, möglichst vielen Menschen Ihre Seite zugänglich zu machen. Mögliche Hürden beim Webauftritt gründen sich nicht nur in verschiedenen Behinderungen der Interessierten, sondern auch in den (Fach-)Sprachkenntnissen.

Obwohl das Uni-Design UzK2015 einige Kriterien der Barrierefreiheit umsetzt (zum Beispiel Responsive Design), müssen Sie einige Merkmale selbstständig umsetzen. Auf dieser Seite finden Sie einige Tipps zur barrierearmen Gestaltung Ihrer Webseite in TYPO3. 

Als weitere Empfehlung sollten Sie die genellen Informationen zur Barrierefreiheit lesen:

Textsprache auszeichnen

Vermeiden Sie Mixed Content, also eine Vermischung von deutschem und englischem Inhalt.
Die Mischung von deutschen und englischen Inhalten kann bei Screenreadern zu falscher Aussprache führen.

TYPO3 unterstützt das Anlegen mehrsprachiger Seiten.

Sollten Sie nur einen kleinen Teil (etwa einen Absatz oder wenige Worte) in einer anderen Sprache als der Seitensprache schreiben, können Sie diesen Bereich kennzeichnen. Das ist für Personen, die auf Screenreader angewiesen sind, gut geeignet und hilft Suchmaschinen beim Verständnis der Seiten.

Beim Anfertigen von Übersetzungen in TYPO3 wird das Label der Sprache automatisch angepasst auf die jeweilige Übersetzung. Damit intepretieren Screenreader und Suchmaschnene diese Sprachen automatisch korrekt.

Anleitung zur Kennzeichnung unterschiedlicher Sprachen innerhalb des Textes

1. Markieren Sie zunächst den jeweiligen Bereich mit der Maus.
2. Danach klicken Sie auf die Schaltfläche ganz rechts in der oberen Zeile des Rich-Text-Editors (RTE), welches wie ein asiatisches Schriftzeichen aussieht.
3. Wählen Sie die Sprache des markierten Abschnitts aus dem Drop-Down-Menü aus.

Abkürzungen erläutern

Grundsätzlich ist die Verwendung von Abkürzungen und Akronymen nicht empfehlenswert. In manchen Fällen ist sie jedoch sinnvoll. Damit Begriffe wie Rich-Text-Editor oder Wireless Local Area Network nicht ausgeschrieben werden müssen, können Sie die Bezeichnung als Tooltip anzeigt lassen. Somit wird der ausgeschriebene Name angezeigt, wenn Sie mit der Maus darüber scrollen. Ein Beispiel dafür ist RTE.

TYPO3 wendet dies jedoch nicht automatisch an, wenn Sie die Abkürzung erneut schreiben. Daher müssen Sie diesen Vorgang für alle im Text verwendeten Abkürzungen separat wiederholen.

Anleitung Abkürzungen kennzeichnen in TYPO3

1. Markieren Sie das entsprechende Wort zunächst im Rich-Text-Editor.
2. Dann klicken Sie auf das Buchsymbol in der zweiten Menüzeile des RTE.
3. Dort öffnet sich ein Dialog. In die erste Zeile fügen Sie noch einmal die Abkürzung ein, wie sie im Text stehen soll. In der zweiten Zeile fügen Sie die Langform ein.
4. Bestätigen Sie den Vorgang mit "OK".

Verlinken Sie Text und Bilder richtig in TYPO3

• Linktexte sollten möglichst beschreiben, worum es in dem Inhalt geht, auf den der Link verweist.
• Ausschließlich uneindeutige Begriffe wie „mehr“ oder „hier“ sollten nicht verlinkt werden, stattdessen z.B. „Weitere Infos zu Thema XY“
• Sogenannte "Sprechende Pfade" haben sinnvoll lesbare Elemente in der  Adresse, z.B. https://portal.uni-koeln.de/studium-lehre.

Anleitung Text verlinken in TYPO3

• Klicken Sie auf das kleine Ketten Icon im Rich Text Editor innerhalb von TYPO3.
• Im anschließend aufpoppenden Fenster können Sie verschiedene Optionen auf intere oder extere Seiten wählen.
• Setzen Sie auch hier im Feld "Title" eine aussagekräftige Benennung. Screenreader können diesen vorlesen.

Tabellen im Editor in TYPO3

• Zeichnen Sie Tabellen korrekt aus.
• Hierzu gehören Zeilen- und Spaltenüberschriften („TH-Element“). In TYPO3 helfen Ihnen Tabellengeneratoren beim Aufbau einer Tabelle.
• Bei weniger komplexen Darstellungen sollten auch Listen als Alternative eingesetzt werden.
• Screenreader können sich keine Übersicht über eine Datentabelle machen wie dies ein sehender Mensch kann. Vielmehr wird eine Tabelle strukturell in Zeilen und Spalten erfasst.
• Wenn die Struktur einer Tabelle fehlerhaft ist, können Zeilen und Spalten vom Screenreader nicht korrekt zugeordnet werden.
• Eine einfache Tabelle kann z.B. mittels des Tabellen Icons im Editor in TYPO3 eingefügt werden.