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

  1. Überschriften
  2. Listen und Aufzählungen
  3. Tabellen
  4. Abbildungen
  5. Links
  6. Allgemeine Anmerkungen

1. Überschriften

Formatierung als Überschrift

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, 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.

 

2. Listen und Aufzählungen

Listen werden nicht als Liste formatiert

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.

  1. Punkt 1
  2. Punkt 2
  3. Punkt 3

HTML Code:

 <ol><li>Punkt 1</li><li>Punkt 2</li></ol>
 

3. Tabellen

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.

G1-2-fahnen-fu-ilFoto: 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 🙁

  1. Die Kopfzeile wird als Zwischenüberschrift genutzt. (Wie bei der folgende Tabelle bei "Service" und "Recherche")
  2. 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 E-Mail
Produktion Web vorname.nachname
Datensicherheit vorname.nachname
Recherche  
Aufgaben E-Mail
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 🙂

  1. Zwischenüberschriften in den Text als Überschrift (gemäß der richtigen Hierarchie) setzen. (Wie hier im Beispiel bei "Service" und "Recherche")
  2. 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 E-Mail
Produktion Web vorname.nachname
Datensicherheit vorname.nachname
Recherche
Aufgaben E-Mail
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

 

4. Abbildungen

Bildern einen Namen (Alternativtext) geben

Falsch 🙁

Foto: Torsten Silz

Das 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 🙂

Haptischer Hinweis auf einem Handlauf mit der Aufschrift "Zur Mensa" abgebildet als Buchstaben und BrailleschriftFoto: Torsten Silz

In 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:

  1. Entweder entfällt der alternative Text, was dazu führen würde, dass dies beim Validieren der Seite angemerkt würde.
  2. Der alternative Text würde sich auf den allgemeinen Begriff "Illustration" beschränken.
  3. Eine annähernde Bildbeschreibung wird vergeben, um so auch die Intention der Gestaltung zu vermitteln.

Anmerkung zur Vergabe vom "Title" Attribut:

  1. Von ihr profitieren alle Mausnutzer
  2. 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:

Bilder und Grafiken

Transparente Bilder als Positionswerkzeug?

Falsch 🙁

Das Bild wird unsichtbar (tranparentes GIF) als Platz- bzw. Abstandhalter verwendet.

transparentes Gif
Ü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:

    Bilder und Dokumente

 

5. Links richtig vergeben

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:

https://www.fernuni-hagen.de/stz/muenchen/veranstaltungen/wise2223_info_berufsbegleitendstudieren4.shtml

Positivbeispiel:

Veranstaltung "Berufsbegleitend studieren"

Links zu PDF und DOC Dokumenten kennzeichnen

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

PDF/UA Dokumente erzeugen

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.

 

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.

webberatung | 08.03.2024