Dieser Artikel ist ursprünglich erschienen als INFO 1859 bei ![[extern, deutsch]](../../lib/img/de.gif)
Wissen im Internet, Mai 2005. Dort finden Sie auch weitere Veröffentlichungen zum Thema "Barrierefreiheit".
Die ![[intern]](../../lib/img/intern.gif){kind=small}
Barrierefreie Informationstechnik-Verordnung (BITV) stellt verschiedenartige Anforderungen an einen Webauftritt. Einem großen Teil dieser Anforderungen kann durch die eingesetzte Technik, etwa Redaktionssysteme oder die Verwendung zugänglicher Vorlagen, genügt werden. Weitere Anforderungen werden durch die Konzeption eines Gesamtauftrittes und durch das grafische Design abgedeckt. Dennoch sind einige Anforderungen aus der BITV nur durch die Webredaktion selbst erfüllbar. Auch wenn hierbei die Technik in vielen Fällen für eine Lösung sorgen kann, ist die Generierung barrierefreier Seiten "auf Knopfdruck" nicht möglich.
Im Folgenden werden Inhalte, die typischerweise von den Redakteurinnen und Redakteuren einer Webredaktion eingestellt werden, hinsichtlich der BITV-Anforderungen beschrieben. Weitere Anforderungen, die sich etwa aus dem Internet Styleguide der Bundesregierung (ISB) und Standards und Architekturen für E-Government-Anwendungen (SAGA) ergeben, werden hier nicht berücksichtigt. Bei den Ausführungen handelt es sich um eine Einführung für Webredaktionen. Weiterführende Literaturhinweise finden sich am Ende des Beitrages. Da Autorenwerkzeuge unterschiedliche Funktionen und Darstellungsformen aufweisen, werden Beispiele für die barrierefreie Gestaltung von Webinhalten als Quellcode dargestellt.
Bilder sagen mehr als tausend Worte - aber nur, wenn die Bilder gut wahrgenommen werden können. Mögliche Barrieren im Zusammenhang mit Bildern sind:
Damit ein Bild am Bildschirm wahrgenommen werden kann, muss bereits bei der Bildauswahl auf gute Kontraste geachtet werden. Zur Beurteilung kann eine Graustufendarstellung hilfreich sein. Des Weiteren können transparente Bereiche eines Bildes in benutzerdefinierten Farbschemata zur Unleserlichkeit führen. Problematisch ist es auch, wenn sich Bilder nur unzureichend vergrößern lassen. Bildinformationen müssen deshalb im Originalzustand eine gewisse Mindestgröße haben.
Zwei Darstellungen einer (teilweise transparenten) Grafik: bei Standardfarben sind die Kontraste deutlich; bei benutzerdefinierten Farbeinstellungen gehen Informationen verloren.
In alternativen Ausgabemedien, etwa Sprachausgaben oder Braille-Zeilen, kann der Inhalt eines Bildes nur anhand des Alternativtextes erschlossen werden. Im Quellcode wird der Alternativtext mittels des alt-Attributs für das IMG-Element eingebunden:
<img src="bilddatei.png" alt="Knappe Beschreibung" />
Was in den Alternativtext gehört, richtet sich nach Funktion und Inhalt des Bildes. In jedem Fall muss sichergestellt sein, dass die Inhalte des Bildes möglichst knapp durch den Alternativtext wiedergegeben werden.
Fotos benötigen kurze Angaben etwa zum dargestellten Gegenstand, den Namen einer dargestellten Person oder Merkmale einer dargestellten Szenerie. Die Inhalte des Alternativtextes sind immer im Zusammenhang mit dem textlichen Inhalt der Seite zu sehen. Insgesamt sollten Alternativtexte kurz und prägnant sein, weitschweifige Formulierungen wie "Dies ist ein Bild mit ..." gehören nicht in den Alternativtext.
Für Bilder wie Anfahrtsskizzen oder Diagramme, die nicht in knappen Worten zu beschreiben sind, müssen andere Wege für den Transport der Inhalte gefunden werden. Möglichkeiten sind z.B.:
longdesc-Attributs verknüpft werden:<img src="bilddatei.png" alt="Knappe Beschreibung" longdesc="lange_beschreibung.txt" />Schließlich gibt es Bilder, die keinen Informationsgehalt und ausschließlich Schmuckcharakter haben. Solche Bilder benötigen einen leeren Alternativtext, damit sie von alternativer Zugangssoftware ignoriert werden:
<img src="schmuckgrafik.png" alt="" />
Inhalte im Web sollten strukturiert werden, indem z. B. Absätze als Absätze, Überschriften als Überschriften, Listen mit einem der verschiedenen Listentypen usw. ausgezeichnet werden. Strukturierte Inhalte können nicht nur besser mit alternativer Zugangssoftware erschlossen werden, sie lassen sich auch leichter in andere Anwendungen exportieren. Die Formatierung für die Webinhalte erfolgt entsprechend den Vorgaben zur Trennung von Inhalt und Layout mittels Cascading Style Sheets (CSS).
Absätze sollten einzeln mit <p> ... </p> ausgezeichnet werden. Wenn mehrere Absätze aufeinander folgen, sollten sie nicht mit einfachen Zeilenumbrüchen getrennt werden. Alternative Zugangssoftware erkennt den Beginn eines jeden Blockelements wie Absatz, Überschrift usw. und macht ein Dokument auf dieser Weise navigierbar.
Überschriften-Elemente - in (X)HTML werden sechs Ebenen von Überschrift 1 <h1> bis Überschrift 6 <h6> angeboten - sollten ebenfalls verwendet werden. Die inhaltsbezogene Überschrift sollte Überschrift 1 <h1> sein. Die weitere Gliederung eines Dokuments sollte mit <h2>, <h3> usw. hierarchisch aufgebaut werden.
Ein komplexes Thema bei der Strukturierung von Webinhalten ist die Gestaltung von Datentabellen. Wichtig ist zunächst, dass Tabellenüberschriften korrekt mit <th> statt <td> ausgezeichnet werden. Um die Nutzbarkeit in alternativen Medien zu verbessern, kann es bei langen Spalten- und Reihenüberschriften sinnvoll sein, eine verkürzte Variante der Überschrift anzubieten:
<th abbr="Summe ohne Steuer">Summe der gezahlten Beträge abzüglich der Mehrwertsteuer</th>
Eine weitere Vorgabe aus der BITV ist die Bereitstellung von Zusammenfassungen für komplette Tabellen. Demnach sollte der Inhalt einer Datentabelle wie folgt zusammengefasst werden:
<table summary="In der linken Spalte finden Sie ...Die zweite Spalte enthält jeweils zwei Angaben ...">
Gleichwohl ist die Verwendung von Elementen und Attributen, die für die Strukturierung und die Texthinterlegung von Datentabellen vorgesehen sind, für Layout-Tabellen nicht zulässig.
Hervorhebungen sind eine wichtige Gestaltungsmöglichkeit bei der Bereitstellung von Informationen. Wie bei den Angaben zu Bildern ist auch bei Hervorhebungen in Texten darauf zu achten, dass sie am Bildschirm und in alternativen Ausgabemedien wahrgenommen werden können.
Hervorhebungen von Links, Überschriften, eines wichtigen Wortes im Fließtext oder in sonstigen Informationsbereichen ausschließlich durch Farbe sind nach der BITV nicht zulässig. Grund dafür ist, dass Farben verloren gehen, wenn der Nutzer bestimmte Bildschirmfarben eingestellt hat. Die Hervorhebung muss also noch durch ein weiteres Attribut wie z.B. fett, kursiv, Kapitälchen, durch ein zusätzliches Symbol oder durch weiteren Text gekennzeichnet werden.
Ergänzung von Farbformatierungen: die Überschrift ist in Großbuchstaben dargestellt; die Links sind fett und unterstrichen sowie mit einem vorangestellten Symbol gekennzeichnet.
Bei Links gilt die Unterstreichung als ausreichendes Merkmal, um sie vom sonstigen Text zu unterscheiden. Wenn aber die Unterstreichung unterdrückt wird, muss der Link sich vom restlichen Text durch mehr als die Farbe unterscheiden.
Allgemein gilt, dass sich Inhalte auch durch ihre Positionierung von anderen Inhalten (ohne Farbwahrnehmung) unterscheiden lassen. Beispielsweise ist die Unterdrückung von Unterstreichungen bei Links in der Navigation kein Verstoß gegen die BITV, weil die gesonderte Positionierung am Rand des Bildschirms die Funktion bereits vermittelt. Dies gilt auch für Linklisten im Text.
Damit Hervorhebungen auch in alternativen Ausgabemedien wie Sprachausgaben zugänglich sind, sind Strukturelemente zu verwenden. Zum Beispiel können die Elemente <strong> und <em> verwendet werden, die übrigens auch individuell in den CSS gestaltet werden können. Nicht geeignet für die Hervorhebung ist die Verwendung von <span>. Links müssen allerdings nicht zusätzlich für alternative Ausgabemedien gekennzeichnet werden, denn die Software erkennt den Link bereits durch das A-Element.
Links müssen eindeutig oder "sprechend" formuliert sein. Für die Barrierefreiheit ist es wichtig, dass alle Links außerhalb ihres Kontextes für sich stehen können, damit z.B. in Sprachausgaben die Navigation mit der Tabulatorentaste möglich ist.
Wenn mehrere Textbeiträge auf einer Seite angerissen werden und im Anschluss der Teaser ein Link mit der Bezeichnung "mehr" zu weiteren Informationen führt, so sind die "mehr"-Links nicht eindeutig. Eindeutig wird der Link, indem
title-Attribut mit der genaueren Bezeichnung erhält:<a href="ziel.html" title="Artikel XY">mehr </a>Auch im Fließtext müssen alle Links außerhalb ihres Kontextes einen sinnvollen Bezug haben. Wenn also Text verlinkt wird, dann sollen die verlinkten Begriffe "für sich" stehen. Beispielsweise ist in einem Satz "Die Grundsatzrede finden Sie auch in unserem Archiv." das Wort "Grundsatzrede" vermutlich eindeutiger als "Archiv".
Übrigens: Wenn sich Links in einem neuen Fenster öffnen, kann die Technik mit title verwendet werden: der Nutzer ist nach der BITV darüber zu informieren, z.B. durch den Hinweis "Im neuen Fenster: Startseite des Bundesverwaltungsamtes".
Bei verlinkten Bildern ist der Alternativtext des Bildes ausschlaggebend. Hier spielt die Funktion des Bildes eine wichtige Rolle. Wenn beispielsweise die Darstellung eines Druckers verlinkt ist und der Link zur Druckversion führt, sollte der Alternativtext "Druckversion" heißen und nicht "Stilisierte Darstellung eines Druckers".
Eine weitere Anforderung aus der BITV ist die Auflösung von Abkürzungen und Akronymen, wenn sie zum ersten Mal auf einer Seite erscheinen. Üblicherweise wird das Wort beim ersten Auftreten ausgeschrieben und die Abkürzung in Klammern dahinter gesetzt. (X)HTML bietet darüber hinaus besondere Elemente hierfür: <acronym> und <abbr>.
<acronym title="Deutsche Demokratische Republik">DDR</acronym>
Es ist sinnvoll, diese Technik auch über das erste Auftreten hinaus anzuwenden. Wenn etwa die Abkürzung "z. B." mit (X)HTML ausgezeichnet wird, so liest eine Sprachausgabe statt "Zett Punkt Beh Punkt" dann "zum Beispiel":
<abbr title="zum Beispiel">z. B.</abbr>
Sofern ein datenbankgestütztes Redaktionssystem im Einsatz ist, lässt sich die Umwandlung der Abkürzungen automatisieren. Anderenfalls sollten alle Begriffe, vor allem Fachbegriffe, zumindest beim ersten Auftreten mit den vorgesehenen Elementen ausgezeichnet oder im Fließtext ausgeschrieben werden.
Wörter aus dem englischsprachigen Raum, so genannte Anglizismen, sind im deutschen Sprachgebrauch längst keine Seltenheit mehr. Wenn es sich dabei um eher ungeläufige Wörter oder Fachbegriffe handelt, können sie zu Kommunikationsproblemen führen. Für Sprachausgaben ergibt sich ein weiteres Problem: Sprachausgaben können die Begriffe nicht nach ihrer Sprache unterscheiden und lesen deshalb alles in der voreingestellten Sprache, in der Regel Deutsch. So ist die Kennzeichnung fremdsprachiger Begriffe nach der BITV erforderlich:
... deutschsprachiger Text <span lang="en" xml:lang="en">english word</span> deutschsprachiger Text ....
Derzeit werden die gängigsten westeuropäischen Sprachen von den Sprachausgaben unterstützt. Die Angabe der Sprache folgt den Internetstandards (en = englisch, fr = französisch, es = spanisch usw.)
Wenn zusammengesetzte Wörter nur in einem Teil deutschsprachig sind, z.B. "Webauftritt", so ist auf die Kennzeichnung eines Wortteils als fremdsprachig zu verzichten.
Darüber hinaus fordert die BITV auch die einfachste und klarste Sprache für jeden Text auf Webauftritten. Eine Möglichkeit, diesen Aspekt der Barrierefreiheit sicherzustellen, ist die Anwendung des Hamburger Verständlichkeitskonzepts. Demnach werden Texte nach vier Merkmalen beurteilt:
Ausführlichere Informationen zu diesem Thema finden Sie auf http://bf-w.de/knowhow/verstaendlicher-text oder im Arbeitshandbuch Bürgernahe Verwaltungssprache.
Dieser Artikel wurde im Mai 2005 von Jan Eric Hellbusch verfasst. Hellbusch ist Autor der beiden gleichnamigen Titel " Barrierefreies Webdesign". Mit "2bweb.de" bietet er Schulung und Beratung für barrierefreies Internet.
Lesen Sie, warum ich mich an die Standards halte und warum das Layout mit Cascading Style Sheets statt Tabellen oder Frames gestaltet wurde. Sollten Sie Probleme mit dem Layout haben, so finden Sie in der Liste standardkonformer Browser Links zu entsprechenden Download-Seiten.
Die ![[intern]](../../lib/img/intern_hellblau.gif){kind=small}
Gesamtübersicht dieses Webauftrittes erreichen Sie jederzeit über das AccessKey-Pad mit Alt+6.
Verwenden Sie Tastenkürzel, etwa Alt mit der entsprechenden Zahl, um auf diesem Webauftritt zu navigieren.
![[intern]](../../lib/img/intern_dunkelblau.gif){kind=small}
