Barrierefrei im Web

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

Falsch falsch

Überschrift

Die Überschrift wird über <strong> einfach fett gesetzt

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 Struktur ab.

Richtig richtg

Den Überschriften wird über die Auswahl der Überschriftformatierung eine Struktur gegeben.

Überschrift 2

HTML Code Beispiel:

 <h2>Überschrift 2</h2>

Zudem müssen die Überschriften hierarchisch vergeben werden.

Beispiel:

Überschrift 2

Überschrift 3

Überschrift 4


Überschriften im CMS Imperia:

Auf den Webseiten, die mit IMPERIA gestaltet werden, ist der Titel immer als Überschrift 1 gesetzt.
Überschrift 1 kommt immer nur einmal zu Anfang der Seite als Titel vor.
In den Vorgaben werden erst ab der 2. Ebene Überschriften angeboten.

Zur Formatierung von Überschriften wird zum einen das Element Überschrift angeboten, zum anderen lassen sich diese im Editor entsprechend formatieren.

2. Listen und Aufzählungen

Falsch falsch

- Punkt 1

- Punkt 2

- Punkt 3

Die Auflistung wird einfach mit einem Zeilenumbruch und einem davor gesetzten Bindestrich untereinandergeschrieben.

Richtig 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

HTML Code

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

Listen und Aufzählungen im CMS Imperia:

Sie können im Editor Listen und Aufzählungen formatieren. Zudem werden spezielle Flexmodule angeboten wie Liste/Linkliste.

3. Tabellen

Falsch falsch

Tabellen werden als Positionswerkzeug verwendet.

Tabellenzelleninhalte werden so zusammenhangslos von einem Screenreader vorgelesen. Zudem werden überflüssige Zellen- und Spalteninformationen mit jeder Zelle erwähnt. Das gilt auch für Tabellen ohne sichtbare Linien.

Beispiel:

Herbstblatt Jedes Jahr spriessen im Frühling grüne Blätter an den Bäumen. Das Blatt hängt so lange an einen Baum, bis der Herbst kommt. Erst verfärbt es sich gelb, dann rot und oder braun, bis es irgendwann zu Boden fällt.
Wenn es Frühling wird, kommen nach der langen Winterpause wieder neue Blätter.

oder:

Der Text wird in eine Tabelle gepackt, um so einen Textrahmen zu erzeugen.

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.

Richtig richtig

Tabellen eignen sich, um Sachverhalte spalten- und zeilenweise zuzuordnen.

Dies erleichtert die Zuordnung auf einen Blick und wird auch in dieser Zuordnung vom Screenreader vorgelesen.

Wichtig dabei ist, dass die jeweiligen Kopfzeilen entsprechend formatiert werden.

HTML Code:

 <th>Abschlüsse</th>

Hilfreich ist eine Beschreibung in einer Inhaltsübersicht (HTML Code:<table summary="Tabelle stellt die Abschlüsse aus den Jahren 2012 und 2013 dar">). Diese wird zwar nicht angezeigt, aber vorgelesen und erleichtert es, zu verstehen, worum es sich in der Tabelle handelt, ohne die Tabelle vor Augen zu haben.

Beispiel für Tabelle

Abschlüsse 2012 Abschlüsse 2013
35 Personen 45 Personen

Beispiel für Textrahmen ohne Tabelle

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.


Tabellen im CMS Imperia:

Sie können im Editor Tabellen formatieren. Zudem werden spezielle Flexmodule angeboten wie Tabellen.

Tipps:

Abbildungen vom Text umfliessen lassen (dazu mehr unter dem Stichwort: Bild/Foto/Unterschrift im Imperiaportal).

Rahmen mit Border über das CSS lösen wie:

<div class="border-gray"> oder, wenn möglich in Imperia die Voreinstellung beim Editor eingeben. Stichwort: Auswahlmöglichkeiten zur Formatierung vor dem Öffnen des Editors

4. Abbildungen

Bildern einen Namen (Alternativtext) geben

Falsch falsch

Das Bild wird einfach in die Seite integriert ohne einen alternativen Text zu vergeben

Screenreader erkennen zwar, dass dort eine Abbildung ist, können aber nicht vermitteln, was dort abgebildet ist.

Richtig richtig

Beispiel: Herbstblatt

In den Bildeigenschaften wird über den alternativen Text der Bildinhalt beschrieben

Eine zusätzliche Titelvergabe ist ebenfalls hilfreich, da so das Bild beim "Überfahren" mit der Maus auch mit Worten angezeigt wird.


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.

Richtige Vergabe von Alternativ und Titleangaben:

Informationen hierzu unter anderem unter:


Abbildungen im CMS Imperia:

Bilder, die in den Editor gezogen werden, können so über die rechte Maustaste einen "alt" und /oder eine "title" Angabe erhalten.
Bei sonstigen Abbildungen in den Flexmodulen wird ein Fenster zur Vergabe angeboten.

Transparente Bilder als Positionswerkzeug?

Falsch 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 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 in IMPERIA verschiedene Elemente zur Verfügung (z.B. "Abstand nach"), die auf Basis des Cascading Style Sheets (css) auf der zu erstellenden Seite angewandt werden können. Eine Möglichkeit zur Formatierung finden Sie im Imperiaportal mit dem Modul Abstand/Zeilenumbruch.



5. Links richtig vergeben

Aussagekraft der Verlinkung verstärken

Falsch falsch

Weitere Informationen zum Thema finden Sie hier.

Der gesetzte Link hat keinerlei Aussagekraft (wohin führt er, was wird er vermitteln?).

Richtig richtig

Weitere Informationen zum Thema finden Sie unter Gesetzliche Regelungen.

Es wird deutlich, dass der Link in diesem Fall zu einer Seite mit "Gesetzlichen Regelungen" führt.


Externe Links kennzeichnen

Falsch falsch

Weitere Informationen zum Thema finden Sie im WDR.

Der gesetzte Link verlinkt zu einer externen Seite, die nicht kenntlich gemacht ist.

Richtig richtig

Weitere Informationen zum Thema finden Sie in der Internetpräsenz des WDR [externer Link].

Es wird bereits beim Lesen deutlich, dass durch das Betätigen des Links das bisherige Webangebot verlassen und man auf eine andere Internetpräsenz gelangt.


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.

Beispiel: http://www.fernuni-hagen.de/universitaet/veranstaltungen/2013-08-26-ver-infernumtag-21092013.shtml

Links zu PDF Dokumenten kennzeichnen

Falsch falsch

Weitere Informationen zum Thema finden Sie unter:

Erstellung barrierefreier PDF Dokumente

Bei dieser Darstellung wird üblicherweise davon ausgegangen, dass sich eine weitere Webseite öffnet.

Richtig richtig

Die Information, dass es sich nicht um ein HTML Dokument handelt, wird sofort dargestellt.
Erstellung barrierefreier PDF Dokumente (pdf)

Es ist sofort klar, worauf ich mich einlasse, wenn ich diesen Link betätige. Dieses Verfahren lässt sich auch auf alle anderen Formate, wie doc, ppt übertragen.


8. 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 Webseite.

CSS-Dateien zu verändern, ist nur administrativen Personen möglich. Eine manuelle (Nach-) Formatierung wird auf den Webseiten nicht übernommen.

Nur so kann z.B. verhindert werden, dass Webseiten mit "gelber Schrift auf weißem Untergrund" gestaltet werden, welches eine Barriere hinsichtlich des Kontrastes darstellen würde.

Zudem wird so vermieden, dass die Webseiten der FernUni eine "bunte Mischung" unterschiedlichster Gestaltungsvarianten darstellen.

webberatung | 22.05.2017
FernUni-LogoFernUniversität in Hagen, ZMI, 58084 Hagen