Anwendungsbeispiele
Wegweiser für barrierefreies Formatieren und Strukturieren
Diese Gegenüberstellung zeigt Beispiele von typischen ungünstigen Formatierungen, die nicht barrierefrei sind, und auf der anderen Seite die Lösung, um ein barrierefreies Ergebnis zu erhalten.
Beispiele zu:
Falsch 🙁
Die Überschrift wird über <strong> einfach fett gesetzt
Überschrift
HTML Code Beispiel:
<strong>Überschrift</strong>
oder
eine Hervorhebung nur durch eine vergrößerte Schrift
<span>Überschrift</span>
Beide Beispiele wirken zwar wie eine Überschrift, bilden jedoch im HTMLCode keine Überschrift ab, sondern fette Schrift, die beim Screenreader keine Struktur erkennen lässt.
Richtig 🙂
Den Überschriften wird über die Formatierung Überschrift als echte Überschrift dargestellt.
Überschrift 3
HTML Code Beispiel:
<h3>Überschrift 3</h3>
Überschriften sind ein wichtiges Strukturmerkmal, die der Erfassung der Webseiteninhalte mit dem Screenreader eine große Hilfe ist.
Um die Struktur des Seiteninhalts besser nachzuvollziehen, werden Überschriften hierarchisch vergeben.
Einhaltung der Überschriften-Hierarchie
Falsch 🙁
Einleitende Überschrift (H5)
Überschrift zum Thema (H3)
Die oben zugewiesene Reihenfolge der Überschriften leitet mit H5 ein und würde so die absteigenden Reihenfolge nicht nicht einhalten. Die Überschriftensprünge würden die hierarchische Anordnung des Navigierens erschweren und die gewünschte Struktur nicht sinngemäß wiedergeben.
Andersrum darf in der aufsteigenden Reihenfolge eine Ebene übersprungen werden. Zum Beispiel dann, wenn ein neues Thema begonnen wird.
Richtig 🙂
Bei der Zuweisung der Überschriften ist es wichtig, dass eine absteigende Hierarchie ohne Sprünge entsteht.
Überschrift zum Thema 1 (H2)
Unter-Überschrift 1.1 (H3)
Unter-Überschrift 1.1.1 (H4)
Unter-Überschrift 1.1.2 (H4)
Unter-Überschrift 1.1.2 .1 (H5)
Überschrift zum Thema 2 (H2)
Unter-Überschrift 2.1 (H3)
Inhaltsvergabe in der Überschrift
Falsch 🙁
Herzlich Willkommen
Die Überschrift „Herzlich Willkommen“ verwendet keinen relevanten Suchbegriff, ist also nicht suchmaschinengerecht (SEO optimiert)
Richtig 🙂
Studieren im Alter
Die Überschrift enthält wichtige Suchbegriffe nach denen in den Suchmaschinen gesucht werden kann.
Überschriften im CMS Imperia:
Auf den Webseiten der FernUniversität, die mit Imperia gestaltet werden, ist der Titel immer als Überschrift 1 (also H1) gesetzt. Dies ist für die Struktur und Aufbau der Seite enorm wichtig, da Sie immer als erstes vergeben werden muss.
Überschrift 1 kommt immer nur einmal zu Anfang der Seite als Titel vor.
In den Vorgaben werden erst ab der 2-ten Ebene Überschriften angeboten.
-
Infos zu Überschriften mit CMS Imperia finden Mitarbeitende der FernUni in der Webpflege unter:
Blogbeiträge zum Thema Überschriften
Zum Thema Überschriften finden Sie in unserem ZLI-Blog zwei Artikel:
Falsch 🙁
- Punkt 1
- Punkt 2
- Punkt 3
Die Auflistung wird einfach mit einem Zeilenumbruch und einem davor gesetzten Bindestrich untereinandergeschrieben.
Problem: Die Liste wird nicht als Liste im HTML dargestellt. Die Sprachausgabe liest dies nicht als Liste vor.
Richtig 🙂
- Punkt 1
- Punkt 2
- Punkt 3
Die Listen werden über das Listensymbol oder das Listentemplate als Liste formatiert.
HTML Code:
<ul> <li>Punkt 1</li> <li>Punkt 2</li> </ul>
Vorgehensweise bei Aufzählungen:
Bei Aufzählungen die Nummerierung der Listenpunkte nicht manuell eingeben. Die Nummerierung erfolgt durch die Formatierung über das Aufzählungssymbol.
- Punkt 1
- Punkt 2
- Punkt 3
HTML Code:
<ol><li>Punkt 1</li><li>Punkt 2</li></ol>
-
Infos zur Listengestaltung im Web mit CMS Imperia finden Mitarbeitende der FernUni unter:
- Listen
- Arbeiten mit dem Editor - Kapitel "Aufzählungen und Listen"
- Texte barrierefrei formatiert
3. Tabellen
Tabellen sollten so strukturiert sein, dass Programme wie Screenreader die Beziehungen zwischen Überschriften und Datenzellen eindeutig erkennen
Beispiel 1: Tabellen nicht als Positionswerkzeug verwenden
Hinweis zur Eingabe in CMS Imperia an der FernUni
Die Kopfzeilen können bei den Tabellen-Eigenschaften im Editor (rechte Maustaste) in Imperia direkt unter Kopfzeile festgelegt werden!
Falsch 🙁
Wenn Tabellen zur Positionierung genutzt werden, werden Tabellenzelleninhalte von der Sprachausgabe ohne Zuordnung der Inhalte vorgelesen. Zudem werden Zellen- und Spalteninformationen mitgeliefert, die inhaltlich überflüssig sind.
Bild und Text in Tabellenzellen nebeneinander positioniert
 Foto: FernUniversität | Um eine Positionierung des Textes neben dem Foto zu erreichen, wurde eine Tabelle benutzt. |
Tabellenzellen untereinander positioniert
| Foto: FernUniversität |
| Campus der FernUniversität Detail vom Campus der FernUniversität mit Blick von der Universitätsstraße auf die Mensa, Gebäude 1 und Gebäude 2, davor die Fahnen der Fakültäten |
Richtig 🙂
Zur Positionierung eines Layouts sind Tabellen nicht geeignet. Um Layouts zu realisieren sind andere Umsetzungen um den Text oder auch Bilder zu positionieren besser geeignet.
„Bild einfügen“ und mit dem „Editor“ Text rechts umfließen lassen
Foto: FernUniversitätUm den Text neben dem Foto zu positionieren wurde hier der Text umfließend neben das Bild angeordnet
Formatierung durch Bildunterschrift
Foto: FernUniversitätBeispiel 2: Tabellen ohne Kopfzeilen
Falsch 🙁
Beispiel für Tabelle ohne Kopfzeilen
| Jahr | Abschluss | Kein Abschluss |
| 2024 | 45 | 10 |
| 2025 | 36 | 17 |
| 2026 | 78 | 12 |
Werden Tabellen ohne Kopfzeilen erstellt, besteht kein Zusammenhang zur Kopfzeile und die Tabellenzelleninhalte werden so zusammenhangslos von der Sprachausgabe vorgelesen oder falsch zugeordnet. Somit ist die Zuordnung der Daten nicht gewährleistet.
Fett gesetzter Text, ersetzt keine definierte Kopfzeile!
Richtig 🙂
Beispiel für Tabelle mit Kopfzeilen
| Jahr | Abschluss | Kein Abschluss |
|---|---|---|
| 2024 | 45 | 10 |
| 2025 | 36 | 17 |
| 2026 | 78 | 12 |
Definierte Kopfzeilen gewährleisten eine logische Zuordnung der Inhalte und somit die Zugänglichkeit.
Dies erleichtert die Zuordnung auf einen Blick, da die Kopfzeile in der Regel entsprechend hervorgehoben gestaltet ist.
Die Zuordnung zum Überbegriff in der Kopfzeile wird vom Screenreader entsprechend vorgelesen.
Wichtig dabei ist, dass die jeweiligen Kopfzeilen <th scope="col"> entsprechend formatiert werden.
-
Monatliche Verkaufszahlen 2026
Monat Umsatz Januar 5.000 € Februar 6.500 € HTML- Code:
<table> <caption>Monatliche Verkaufszahlen 2026</caption> <thead> <tr> <th scope="col">Monat</th> <th scope="col">Umsatz</th> </tr> </thead> <tbody> <tr> <th scope="row">Januar</th> <td>5.000 €</td> </tr> <tr> <th scope="row">Februar</th> <td>6.500 €</td> </tr> </tbody> </table>
Tipp: Eine Liste als Alternative zur Tabelle
Ist für die Umsetzung der Inhalte wirklich eine Tabelle notwendig oder wäre eine andere Umsetzung möglich und sinnvoll?
Beispiel für Tabelle
| Abschluss 2012 | Abschluss 2013 |
|---|---|
| 35 Personen | 45 Personen |
Beispiel für Umsetzung als Liste
- Abschluss 2012, 35 Personen
- Abschluss 2013, 45 Personen
Beispiel 3: Die Kopfzeile wird nicht korrekt vergeben
Falsch 🙁
- Die Kopfzeile wird als Zwischenüberschrift genutzt. (Wie bei der folgende Tabelle bei "Service" und "Recherche")
- Die Schrift wird in einer Zeile einfach fett gesetzt, welches nur den Anschein einer Kopfzeile erweckt. (Wie bei der folgenden Tabelle bei "Aufgaben" und "E-Mail")
| Service | |
|---|---|
| Aufgaben | |
| Produktion Web | vorname.nachname |
| Datensicherheit | vorname.nachname |
| Recherche | |
|---|---|
| Aufgaben | |
| Diskettensichtung | vorname.nachname |
| Kurse archivieren | vorname.nachname |
Problem: Der zu sortierende Überbegriff "Aufgaben" und "E-Mail" erscheint nicht in der Kopfzeile. Die darunterliegenden Spalten können dieser Information so nicht zugeordnet werden.
Richtig 🙂
- Zwischenüberschriften in den Text als Überschrift (gemäß der richtigen Hierarchie) setzen. (Wie hier im Beispiel bei "Service" und "Recherche")
- Kopfzeilen erzeugen (Im CMS über die rechte Maustaste auf Tabelle und über Tabelleneigenschaften den zuzuordnenden Text bzw. Bereich setzen (wie im folgenden Beispiel bei "Aufgabe" und "E-Mail" realisiert).
Service
| Aufgabe | |
|---|---|
| Produktion Web | vorname.nachname |
| Datensicherheit | vorname.nachname |
Recherche
| Aufgaben | |
|---|---|
| Diskettensichtung | vorname.nachname |
| Kurse archivieren | vorname.nachname |
Hinweis: Vermeiden Sie große Tabellen mit verbundenen Zellen und versuchen Sie mehrere kleine Tabellen mit Zwischenüberschriften umzusetzen.
Beispiel 4:
Der Text wird in eine Tabelle mit einer Zelle gepackt, um so einen Textrahmen zu erzeugen
Falsch 🙁
Eine Tabelle mit einer Zelle wird formatiert, um so den Textabschnitt hervorzuheben
| Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. |
Problem: Die Tabelle wird als Umsetzung für Layout angewandt. Dies verkompliziert unnötig das Lesen mit einer Sprachausgabe.
Richtig 🙂
Textrahmen ohne Tabelle mit Layout über das Stylesheet
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.
HTML Code:
Das heisst für CMS Imperia: Im Flexmodul des Editors wird "Box, graue Rahmen" verwendet.
-
Infos zur Tabellengestaltung im Web mit CMS Imperia finden Mitarbeitende der FernUni unter:
Tabellen gestalten (interner Zugang)
Tabellen in Word-Dokumenten
Die Umsetzung der Tabellen in Word- Dokumenten folgt inhaltlich den bereits beschriebenen Prinzipien, also
- keine Layoutgestaltung über Tabellen realisieren
- Tabellen nur für Datentabellen verwenden
- Kopfzeilen definieren, dass zwischen Überschriften und Datenzellen eindeutig die Zuordnung gewährleisten
- keine leeren Zellen
- Komplexe Tabellen vermeiden
- Verbundene oder geteilte Zellen vermeiden
Die Eigenschaften der Tabellen kann nach dem Einfügen der Tabelle unter Tabellenentwurf entsprechend angepasst werden. Dort können die gewünschten Kopfzeilen vergeben werden. Ebenfalls von Relevanz ist in Tabelleneigenschaften die Einstellmöglichkeit „Kopfzeile auf jeder Seite wiederholen“, die besonders bei langen, mehrseitigen Tabellen hilft den Zusammenhang zwischen den Datenwerten und der jeweiligen Spaltenüberschrift korrekt zuzuordnen und wiederzugeben.
Falsch 🙁
Das Bild wird in die Seite ohne einen alternativen Text integriert
Foto: Torsten SilzScreenreader erkennen zwar, dass dort eine Abbildung ist, können aber nicht vermitteln, was dort abgebildet ist.
Richtig 🙂
Über den alternativen Text wird der Bildinhalt beschrieben
Foto: Torsten SilzAlternativtext als Quelltext:
alt="Haptischer Hinweis auf einem Handlauf mit der Aufschrift "Zur Mensa" abgebildet als Buchstaben und Brailleschrift"
Anmerkung zur Vergabe vom "alt" Attribut:
- Es gibt Abbildungen, die rein illustrativen Charakter haben, aber nicht zur besseren Verständlichkeit des Inhalts dienen. Ist das der Fall, können die Abbildungen als dekorativ markiert werden. Dies sollte allerdings nicht zu weit gefasst werden. "Lieber einen Alternativtext zuviel, als keinen!"
- Wenn mit Bildern, wie Icons eine Funktion, wie zum Beispiel ein Link verbunden ist, muss die Funktion beschrieben werden.
Dies wäre bei einem Logo, welches auf ein anderes Web verlinkt der Fall:-
alt: "Zur Startseite von XYZ"
-
- Ausführliche Bildbeschreibungen, deren Beschreibung im Alternativtext zu umfangreich wäre können nahe des Bildes auf der Webseite eingegeben werden. Dies macht zum Beispiel bei einem komplexen Flussdiagramen Sinn.
Bildbeschreibung
Anmerkung zur Vergabe vom "Title" Attribut:
- Von ihr profitieren alle Mausnutzer, die beim Mouseover den Titel eingeblendet bekommen.
- Wichtige Informationen, die woanders nicht beschrieben werden sollten dort nicht enthalten sein.
Abbildungen im FernUni-Web in CMS Imperia:
Bilder, die im Content Management System eingefügt werden erhalten über die Flexmodulen eine "alt" Angabe.
Zudem können sie dort als dekorativ gekennzeichnet werden.
Weitere Infos:
Transparente Bilder als Positionswerkzeug?
Falsch 🙁
Das Bild wird unsichtbar (tranparentes GIF) als Platz- bzw. Abstandhalter verwendet.
Über diesem Text ist ein transparentes GIF.
Dies ist ein Trick, um einen Abstand vorzutäuschen, allerdings nicht zur barrierefreien Umsetzung geeignet, da ein scheinbar unsichtbares Bild vom Screenreader genau wie ein sichtbares vorgelesen wird.
Richtig 🙂
Textabstände sollten über die Formatierung des HTML-Codes bzw. über das CSS vergeben werden.
Beispiel:
Htmlcode <div class="unten30">
Beispieltext mit Abstand 30 px nach unten
Dazu stellen wir im CMS IMPERIA das Flexmodule "Abstand/ Zeilenumbruch" zur Verfügung.
-
Infos zu Bildern im Web mit CMS Imperia finden Mitarbeitende der FernUni unter:
Aussagekraft der Verlinkung verstärken
Falsch 🙁
Weitere Informationen finden Sie hier.
Der gesetzte Link hat keinerlei Aussagekraft (wohin führt er, was wird er vermitteln?).
Richtig 🙂
Im Link ist eine Aussage zum Linkziel formuliert
Weitere Informationen zum Thema finden Sie unter:
Es wird deutlich, dass der Link in diesem Fall zu der Webseite mit "Prinzpien zur Umsetzung" führt.
Externe Links kennzeichnen
Falsch 🙁
Weitere Informationen zum Thema finden Sie im WDR
Der gesetzte Link verlinkt zu einer externen Seite, die nicht kenntlich gemacht ist.
Hinweis: Die nach dem Webrelaunch mit Imperia erzeugten Seiten erzeugen automatisch ein Zeichen hinter dem Link, der den externen Link kennzeichnet. Ein externer Link ohne Kennzeichnung ist daher nicht möglich.
Richtig 🙂
Weitere Informationen zum Thema finden Sie in der Internetpräsenz des WDR.
Es wird durch das nachgelagerte "Externer Link Icon" deutlich, dass durch das Betätigen des Links das bisherige Webangebot verlassen- und eine andere Internetpräsenz geöffnet wird.
Hinweis:
Im Webangebot der FernUni, welches mit CMS Imperia gepflegt wird erscheint dieser Icon automatisch, sobald ein externer Link gesetzt wird.
Hyperlinks als url:
Ebenso fragwürdig ist die direkte Eingabe des Hyperlinks, zu dem die Seite verweist, da so nicht zwingend das Thema des Links und wohin er führt, deutlich gemacht wird.
Zudem sind diese Links oft viel zu lang, schlecht zu handhaben und nerven einfach nur, wenn sie, womöglich noch kryptisch, vorgelesen werden.
Negativbeispiel:
Positivbeispiel:
Inzwischen wurde der Vorgang zur Erzeugung einer entsprechenden Endung im imperiabasierten Webangebot automatisiert. Das heisst, sobald ich ein PDF Dokument mit Text verknüpfe wird die Endung (PDF) mit entsprechender Größe in KB automatisch hinzugefügt.
Falsch 🙁
Link ohne Kennzeichnung des PDF
Bei dieser Darstellung ohne Formathinweis wird üblicherweise davon ausgegangen, dass sich eine weitere Webseite öffnet.
Hinweis zu CMS Imperia an der FernUni:
Über Imperia wird der Anhang (PDF und Dateigröße) automatisch ergänzt. Sie müssen also nichts weiter tun, wenn das Dokument hochgeladen wird.
Richtig 🙂
Der Link wird mit Informationen über das Dateiformat und Dateigröße ergänzt.
PDF/UA Dokumente erzeugen (PDF 1 MB)
Es ist sofort klar, worauf ich mich einlasse, wenn ich diesen Link betätige und dass es sich nicht um ein HTML Webseite handelt.
Dieses Verfahren wird automatisch im CMS auf alle anderen Formate, wie pdf, doc, ppt angewendet.
-
Infos zur Linkvergabe im Web mit CMS Imperia finden Mitarbeitende der FernUni unter:
6. Allgemeine Anmerkungen
Eigene Formatierungen im Editor bzw. im HTML-Fenster des Editors in Imperia
Um dem Layout einer Webseite eine gewisse "Stabilität" zu geben und die Maßnahmen zur Barrierefreiheit zu gewährleisten, werden Formatierungen über eine Style Sheet Datei (.css) gesteuert. Über ID- und Class-Angaben im Quelltext der HTML-Seite gestalten diese die einzelnen Layoutmodule.
CSS-Dateien zu verändern, ist nur administrativen Personen möglich. Eine manuelle (Nach-) Formatierung wird auf den Webseiten nicht übernommen.
Nur so kann eingegrenzt werden, dass Webseiten beliebig gestaltet und so bespielsweise Farbkontraste eingehalten werden. So wäre "hellgraue oder gelbe Schrift auf weißem Untergrund" nicht möglich, da dies eine Barriere hinsichtlich des Kontrastes darstellen würde.
Zudem wird so vermieden, dass die Webseiten der FernUni eine "bunte Mischung" unterschiedlichster Gestaltungsvarianten darstellen.
