Gute Beispiele - schlechte Beispiele
Wegweiser für barrierefreies Formatieren und Strukturieren
An dieser Stelle wollen wir Ihnen in Form einer Gegenüberstellung aufzeigen, wie häufig angewandte ungünstige Formatierungen durch Formatierungen ersetzt werden, die dann ein barrierefreies Ergebnis ermöglichen.
Die folgenden Themen helfen Ihnen bei der Umsetzung
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:
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
Falsch 🙁
Wenn Tabellen zu Positionierung genutzt werden besteht kein Zusannehang zu Kopfzeile und die Tabellenzelleninhalte werden so zusammenhangslos von der Sprachausgabe vorgelesen. Zudem werden inhaltlich "überflüssige" Zellen- und Spalteninformationen mit jeder Zelle vorgelesen. Dies ist auch bei Tabellen ohne sichtbare Linien der Fall.
Beispiel 1 "Gebäude von Campus" in Tabelle nebeneinander positioniert
 | Um eine Positionierung des Textes neben dem Foto zu ereichen wird eine Tabelle benutzt. |
Beispiel 2 "Gebäude von Campus" in Tabelle untereinander positioniert
| Foto: FernUniversität |
| Campus der FernUniversität |
Hinweis: Eine Formatierung mit Bildunterschrift wäre hier die richtige Wahl.
Richtig 🙂
Tabellen eignen sich, um Sachverhalte spalten- und zeilenweise zuzuordnen.
Nur eine logische Zuordnung der Spalten und Zeilen gewährleistet die Zugänglichkeit.
Jede Zelle benötigt eine entsprechende Kopfzelle um dies zu gewährleisten.
Dies erleichtert zum einen die Zuordnung auf einen Blick, da die Kopfzeile in der Regel entsprechend hervorgehoben gestaltet ist und wird als Zuordnung vom Screenreader entsprechend vorgelesen. Wichtig dabei ist, dass die jeweiligen Kopfzeilen <th> entsprechend formatiert werden.
HTML Code: <th>Abschlüsse</th>
Beispiel für Tabelle
| Abschlüsse 2012 | Abschlüsse 2013 |
|---|---|
| 35 Personen | 45 Personen |
Hinweis zu CMS Imperia an der FernUni
Die Kopfzeilen können bei den Tabellen-Eigenschaften im Editor (rechte Maustaste) in Imperia direkt unter Kopfzeile festgelegt werden!
Beispiel 2: 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 3:
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:
<div class="border-gray">
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 (intern)
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 "Gesetzlichen Regelungen" 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:
/stz/muenchen/veranstaltungen/sose25_startitupsose2025.shtml
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.
