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 2</strong>
oder
eine Hervorhebung nur durch eine vergrößerte Schrift
<span>Überschrift 1</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 2
HTML Code Beispiel:
<h2>Überschrift 2</h2>
Ü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 🙁
Überschrift zum Thema (H3)
Unter-Überschrift (H5)
Die oben zugewiesene Reihenfolge der Überschriften überspringt eine Ebene (von H3 auf H5) und würde so in der absteigenden Reihenfolge H4 überspringen. 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.
Überschrift (H3)
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
Beispiel 1: Tabellen werden als Positionswerkzeug verwendet.
Falsch 🙁
Tabellenzelleninhalte werden so zusammenhangslos von der Sprachausgabe vorgelesen. Zudem werden überflüssige Zellen- und Spalteninformationen mit jeder Zelle erwähnt. Das gilt auch für Tabellen ohne sichtbare Linien.
 Foto: FernUniversität |
| Testbild "Gebäude von Campus" in Tabelle positioniert |
Hinweis: Das Flexmodul "Bild einfügen" mit entsprechender Bildunterschrift 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.
Dies erleichtert die Zuordnung auf einen Blick und wird auch in dieser Zuordnung vom Screenreader vorgelesen. Wichtig dabei ist, dass die jeweiligen Kopfzeilen <th> entsprechend formatiert werden.
HTML Code: <th>Abschlüsse</th>
Diese kann bei den Tabellen-Eigenschaften im Editor (rechte Maustaste) in Imperia direkt unter Kopfzeile festgelegt werden!
Beispiel für Tabelle
| Abschlüsse 2012 | Abschlüsse 2013 |
|---|---|
| 35 Personen | 45 Personen |
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:
Falsch 🙁
Foto: Torsten SilzDas Bild wird in die Seite ohne einen alternativen Text integriert
Screenreader erkennen zwar, dass dort eine Abbildung ist, können aber nicht vermitteln, was dort abgebildet ist.
Richtig 🙂
Foto: Torsten SilzIn den Bildeigenschaften wird über den alternativen Text der Bildinhalt beschrieben.
Der ALT-Text lautet: "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.
In diesem Fall gibt es drei Möglichkeiten:
- Entweder entfällt der alternative Text, was dazu führen würde, dass dies beim Validieren der Seite angemerkt würde.
- Der alternative Text würde sich auf den allgemeinen Begriff "Illustration" beschränken.
- Eine annähernde Bildbeschreibung wird vergeben, um so auch die Intention der Gestaltung zu vermitteln.
Anmerkung zur Vergabe vom "Title" Attribut:
- Von ihr profitieren alle Mausnutzer
- Wichtige Informationen, die woanders nicht beschrieben werden sollten dort nicht enthalten sein.
Abbildungen im CMS Imperia:
Bilder, die im Content Management System eingefügt werden können über die Flexmodulen eine "alt" Angabe erhalten.
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 zum Thema 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 Gesetzliche Regelungen.
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:
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 wird üblicherweise davon ausgegangen, dass sich eine weitere Webseite öffnet.
Hinweis: Über das CMS 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.
