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


Falsch falsch

Herzlich Willkommen

Die Überschrift „Herzlich Willkommen“ verwendet keinen relevanten Suchbegriff ist also nicht suchmaschinengerecht (seo optimiert)

Richtig richtg

Das Konzept des „Blended Learning“

Die Überschrift enthält wichtige Suchbegriffe nach denen in den Suchmaschinen gesucht werden könnte.

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

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>
 

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.

Nur eine logische Zuordnung der Spalten und Zeilen gewährleistet die Zugänglichkeit.

Beispiel:

Geländer mit Brailleschrift
Hervorgehobene Brailleschrift mit dem Text "zur Mensa" auf einem Treppengeländer des FernUni-Campus

Hinweis: Das Flexmodul "Bild einfügen" mit entsprechender Bildunterschrift die richtige Wahl.

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>
Diese kann bei den Tabellen-Eigenschaften im Editor (rechte Maustaste) in Imperia direkt unter Kopfzeile festgelegt werden!

Hilfreich ist eine Beschreibung in einer Inhaltsübersicht (HTML Code:<table summary="Tabelle stellt die Abschlüsse aus den Jahren 2012 und 2013 dar">). Die nicht angezeigte, aber vorgelesene Information erleichtert es, zu verstehen, worum es sich in der Tabelle handelt.

Beispiel für Tabelle

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

Falsch falsch

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

Beispiel für Textrahmen ohne Tabelle mit class="border-gray"

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.

4. Abbildungen

Bildern einen Namen (Alternativtext) geben

Falsch 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 richtig

Barrierefrei, BlindenschriftFoto: Torsten Silz

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.

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.

Richtige Vergabe von "Alternativ"- und "Title" Angaben:

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 das Flexmodule "Abstand/ Zeilenumbruch" zur Verfügung.


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.

Hinweis: Die nach dem Webrelaunch mit Imperia erzeugten Seiten erzeugen automatisch ein Zeichen hinter dem Link, der den externen Link kennzeichnet.

Richtig richtig

Weitere Informationen zum Thema finden Sie in der Internetpräsenz des WDR.

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 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 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 525 KB)

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 | 15.07.2020