© DrHitch/Shutterstock.com
Barrierefreiheit

1 HTML und CSS


1.1 Gute Planung erspart viel Arbeit

Bevor wir nun die Ärmel hochkrempeln und uns endlich mit der Technik und den Möglichkeiten beschäftigen, Barrierefreiheit in die Tat umzusetzen, will ich noch einige Worte über gute Planung verlieren.

Meist gilt in Projekten der Grundsatz: Je besser die Planung, desto effizienter der Weg zu einem guten Ergebnis. Gerade in Bezug auf Barrierefreiheit ist es wichtig, sich bereits im Vorfeld der Umsetzung einer Webanwendung Gedanken über mögliche Hürden und Barrieren zu machen. Sicherlich gehören hierzu erst einmal ein Grundverständnis von Barrierefreiheit und eine gewisse Erfahrung in der Umsetzung der hierfür nötigen Optimierungen. Hat man aber die ersten Webanwendungen auf Barrierefreiheit optimiert, fällt es dem dann geübten Entwickler oder Designer immer leichter, bereits in der Planungsphase Barrieren zu erkennen und elegant zu umschiffen.

Oftmals werden Webanwendungen entwickelt, ohne im Vorfeld die Barrierefreiheit in die Planung oder Umsetzung mit einfließen zu lassen. Die hierfür vorgetragenen Gründe sind meist ein knappes Zeit- oder Finanzbudget. Nach Abschluss eines Projekts und der Freigabe der Anwendung an den Endbenutzer kommen meist nachgelagerte Barrierefreiheitsmaßnahmen auf die Entwickler zu. Diese Welle an zusätzlicher Entwicklungsarbeit übersteigt meist den Rahmen, der hätte aufgewendet werden müssen, wenn man seine Software direkt von Beginn an barrierefrei geplant und umgesetzt hätte. Es ist nicht selten, dass im Nachgang das Layout, die Art der Informationsanordnung oder die Benutzerführung komplett überarbeitet oder gar neu umgesetzt werden müssen. Überlegen Sie sich deshalb gut, ob es nicht sinnvoll ist, die Barrierefreiheit als feste Konstante mit in Ihrer Konzeptionsphase zu verankern und diesen Punkt auch bei Ihrem Kunden sattelfest und als notwendig argumentieren zu können.

1.2 Technologien

In diesem Kapitel möchte ich kurz darauf eingehen, welche Technologien uns als Webentwickler zur Verfügung stehen, welche von diesen Werkzeugen bevorzugt für barrierefreie Webanwendungen eingesetzt werden können und auf welche Kandidaten man besser verzichtet.

HTML, CSS und JavaScript sind sicher die am weitesten verbreiteten Technologien im Webumfeld und lassen sich zweifelsfrei als Standardwerkzeuge definieren. Wer sich rein auf diese drei Technologien beschränkt, setzt im Hinblick auf Barrierefreiheit auf das richtige Pferd, um moderne und komfortable Rich Internet Applications (RIA) zu entwickeln.

Prinzipiell ist auch die Verwendung weiterer Technologien wie z. B. Silverlight, Java Applets oder Flash nicht ausgeschlossen, wenn bestimmte Grundsätze eingehalten werden. Es ist darauf zu achten, dass alle zur Bedienung notwendigen Informationen mittels HTML dargestellt werden. Zudem sollte man sich stets vor Augen führen, dass CSS nur für das optische Layout einer Seite verantwortlich ist und ausschließlich die Darstellung von Elementen für sehende Benutzer steuert. Ein Screen Reader könnte die Anwendung akustisch durchaus in einer anderen Struktur an den Anwender zurückmelden als das bei einem Monitor der Fall ist. Der Einsatz von JavaScript und anderen Plug-ins darf sich nur rein auf die Verbesserung der Usability beschränken. Wird die Darstellung von Informationen jedoch so integriert, dass die Funktionalität von JavaScript, Java, Flash, CSS usw. zwingend notwendig ist, ist das Angebot nicht barrierefrei. Viele der erweiternden Technologien bieten eigenständige Funktionalitäten zur Verbesserung der Zugänglichkeit (Java, Flash), die jedoch oft nicht genutzt bzw. nicht vom Ausgabeprogramm unterstützt werden.

1.3 Hypertext Markup Language

Die Hypertext Markup Language (HTML) ist die Grundlage einer jeden Webanwendung. HTML bietet eine Vielzahl an Elementen und dazugehörigen Attributen, die es möglich machen, kreative und mächtige Anwendungen zu realisieren. Die vielfältigen Einsatzmöglichkeiten des Markups und die Möglichkeit, diese mit CSS in Bezug auf ihre optische Darstellung anzupassen, ist Fluch und Segen zugleich. Viele Entwickler und Designer beschränken sich meist auf ein begrenztes Repertoire an HTML-Elementen, die sie immer wieder beim Implementieren von Websoftware einsetzen. Erfüllt ein Tag nicht ganz die Anforderungen des Entwicklers, wird er mit CSS passend gemacht. Oftmals werden so Tags zur Darstellung von Informationen missbraucht, die eigentlich einem ganz anderen Anwendungszweck dienen. Mit CSS lassen sich diese Elemente zwar optisch so anpassen, dass sie die Informationen im richtigen Kontext darstellen, doch wird hierbei oft vergessen, dass Screen Reader CSS nur sehr bedingt zur Interpretation einsetzen und sich vielmehr darauf verlassen, dass Informationen im hierfür vorgesehen HTML-Element untergebracht sind. Es ist deshalb lohnenswert, immer zu hinterfragen, ob die jeweilige Information auch vom dafür vorgesehenen Tag umschlossen wird. Für Inhaltstypen wie z. B. Überschriften, Absätze, Listen, Tabellen, Zitate, Formulare u. v. m. gibt es separate Tags. Gerade im Hinblick auf Barrierefreiheit ist darauf zu achten, HTML-Elemente so bestimmungsnah wie irgend möglich einzusetzen, der blinde Anwender wird es Ihnen danken.

1.3.1 Dokumententitel

Der Titel eines HTML-Dokuments wird im Kopfbereich, innerhalb des <head>-Elements, mittels des <title> Tags definiert. Dieser Tag beschreibt den Titel einer Webseite und steuert zudem die Titelzeile des Browsers (Abb. 1.1). Bei der Vergabe eines Titels ist zu beachten, dass er nicht länger als 40 bis 100 Zeichen, das entspricht in etwa vier bis zehn Worten, sein sollte. Die meisten Browser und Suchmaschinen schneiden nach dieser Zeichenzahl den Titel ab.

Hinweis: Gut gepflegte Metatags auf jeder einzelnen Seite einer Webanwendung tragen zum Suchmaschinenmarketing bei und helfen den Crawlern einer Suchmaschine, die Inhalte der Seite besser indizieren zu können. Der Text innerhalb des <title>-Elements wird von sämtlichen Suchmaschinen in hohem Maße gewichtet.

Abb_4_1.png

Abbildung 1.1: Titel einer Webseite im Browser

Aufgrund der enormen Bedeutung des Seitentitels ist die Nennung der wichtigsten Schlüsselwörter der Webanwendung zu empfehlen. Hierbei ist darauf zu achten, dass man sich nicht nur auf einen suchmaschinenfreundlichen Titel festlegt, sondern auch den eigentlichen Benutzer im Auge behält. So ist eine Aneinanderreihung von Schlüsselwörtern wenig sinnvoll. Listing 1.1 zeigt eine Empfehlung sowie die korrekte Implementierung des Titels im Kopfbereich einer Webseite.

<html>
<head>
<title>Barrierefreiheit: Technische Maßnahmen</title>
</head>

<body>
[...]
</body>
</html>

Listing 1.1: Implementierung des Titels einer Webseite

Der gezielte Einsatz eines Doppelpunkts oder Bindestrichs trägt wesentlich zur Lesbarkeit eines Dokumententitels bei. Behalten Sie immer im Blick, dass der Benutzer bei seiner Suche nach einer Information anhand eines Seitentitels entscheidet, ob die gefundene Seite das Gesuchte enthalten könnte. Der Titel einer Seite wird auch beim Anlegen eines Lesezeichens in den Favoriten als Vorlage für die Bookmark-Bezeichnung verwendet.

1.3.2 Metatags

Metadaten werden zum Beschreiben eines HTML-Dokuments eingesetzt und finden ebenfalls im Kopfbereich einer Seite Platz. Der Inhalt der Metadaten wird in einem grafischen Browser nicht angezeigt. Sowohl Suchmaschinen als auch Screen Reader und andere Hilfsmittel aus dem Bereich der Barrierefreiheit machen sich jedoch diese Informationen häufig zunutze. In HTML5 sind nur noch die Angaben zum Zeichensatz, zum Autor, zur Seitenbeschreibung sowie Schlüsselwörter vorgesehen. Für die Beschreibung einer Seite sollte man rund 150 bis 250 Zeichen verwenden. Bei den Schlüsselworten sind ca. 10 Nennungen empfehlenswert.

Profitipp: Suchmaschinen beziehen die Schlüsselwörter kaum noch in die Indizierung mit ein, da sie häufig von Webseitenbetreibern missbraucht und den Crawlern Inhalte einer Seite angepriesen wurden, die in Wirklichkeit nicht vorhanden waren. Deshalb beziehen sich die Crawler von Suchmaschinen nahezu ausschließlich auf den eigentlichen Inhalt einer Seite.

Metatag

Beschreibung

Zeichensatz (content-type)

Dateityp und Zeichensatz des Dokuments

Autor (author)

Autor der Webseite

Beschreibung (description)

Inhaltliche Beschreibung des Dokuments

Schlüsselwörter (keywords)

Schlüsselwörter, die den Inhalt der Seite klassifizieren

Tabelle 1.1: Mögliche Metatags in HTML5

<html>
<head>
<title>Barrierefreiheit: Technische Maßnahmen</title>

<meta charset=“UTF-8“ />

<meta name=“author“ content=“Timm Bremus“ />

<meta name=“description“
content=“Informationen zum Thema Barrierefreiheit“ />

<meta name=“keywords“
content=“Barrierefreiheit Technische Maßnahmen“ />
</head>
<body>
[...]
</body>
</html>

Listing 1.2: Einsatz von Metatags in HTML

1.3.3 Dateibeziehungen

Das <link>-Element dient der Abbildung von Dokumenten- und Dateirelationen. Das Element wird im Kopfbereich einer Seite deklariert und kann nicht nur für Layoutdateien verwendet werden, sondern verbindet auch inhaltlich zugehörige Dateien miteinander.

Das Einbinden von Layoutdateien (CSS – Cascading Style Sheets) erfolgt über das <link>-Element. Mit dem media-Attribut kann die Anwendung der Styles auf unterschiedliche Medien begrenzt werden.

<head>
[...]

<link rel=“stylesheet“ href=“style.css“
media=“all and (min-width:500px)“ >

[...]
</head>

Listing 1.3: Einbinden von Layoutdateien (CSS)

Listing 1.3 wird jetzt bei einigen Entwicklern, die schon Jahre im Geschäft sind, ein wenig Verwirrung auslösen. Seit der Einführung von HTML5 entfällt die Angabe eines type-Attributs. Zudem ist das media-Attribut deutlich mächtiger geworden als das noch in den Vorgängerversionen der Fall war. Als Wert kann nunmehr nicht nur ein einzelner Medientyp angegeben werden, sondern eine umfangreiche Media Query. Dass eine Layoutdatei nun sowohl für den Bildschirm (screen) als auch für den Druck (print) gültig gemacht werden kann, ist nur ein einfaches Beispiel. Detaillierte Informationen zu Media Queries finden sich auf www.w3.org/TR/css3-mediaqueries/ und werden auch nochmal im Kapitel Mobilgeräte aufgegriffen.

Medientyp

Beschreibung

all

Gültig für alle interpretierenden Endgeräte

aural

Sprachausgaben

braille

Braille-Zeile

handheld

Handheld-Geräte (Kleinstcomputer, wenig Bandbreite)

projection

Projektoren und Beamer

print

Druckvorschau und ausgedruckte Dokumente

Tabelle 1.2: Mögliche Medientypen für Layoutsteuerung

Über das <link>-Element können auch inhaltliche Dokumentenrelationen gesetzt und so einzelne HTML-Dokumente miteinander verknüpft werden. Mit dem rel-Attribut werden die jeweiligen Relationen einer Seite zu anderen Dokumenten abgebildet. Listing 1.4 zeigt an einem praktischen Beispiel, wie eine Hierarchie zwischen einzelnen Webseiten abgebildet wird.

<head>
[...]

<link rel=“start“ href=“index.html“ title=“Startseite“ />

<link rel=“up“ href=“barrierefreiheit.html“
title=“Übergeordnetes Kapitel: Barrierefreiheit“ >

<link rel=“prev“ href=“fakten.html“
title=“Vorheriges Kapitel: Fakten“ >

<link rel=“next“ href=“didaktik.html“
title=“Nächstes Kapitel: Didaktische Maßnahmen“ >

<link rel=“contents“ href=“sitemap.html“
title=“Inhaltsverzeichnis“ >

<link rel=“index“ href=“glossar.html“
title=“Stichwortverzeichnis“ >

<link rel=“chapter“ href=“technik.html“
title=“Aktuell: Technische Maßnahmen“ >

[...]
</head>

Listing 1.4: Dokumentenrelationen

Für viele optische Browser steht ein Add-on zur Verfügung, um Dokumentenrelationen sichtbar und verwendbar zu machen. Aber selbst ohne ein solches Plug-in ist der Aufwand, der durch die Implementierung der Relationen entsteht, keinesfalls umsonst. Gerade der Screen Reader oder auch eine Suchmaschine arbeiten aktiv mit derartigen Seitenverknüpfungen. Blinden Anwendern wird die Navigation durch eine Webanwendung so deutlich vereinfacht und ein weiterer Schritt in Richtung Barrierefreiheit ist getan.

1.3.4 Frames

Frames sind zum Segmentieren des Browserfensters gedacht und wie Seitenbereiche zu verstehen. Mehrere Frames werden unter einem Frameset zusammengefasst. In jedem Frame wird eine eigenständige HTML-Seite geladen und somit die Navigation vom eigentlichen Inhalt gekapselt. Diese Art und Weise, eine Webseite zu strukturieren, ist nicht im Sinne der Barrierefreiheit. Hier ist gänzlich auf Frames zu verzichten. Frames erschweren es dem Screen-Reader-Benutzer, eine Seite als Ganzes zu erfassen, da sie technisch aus mehreren Dateien besteht, die nacheinander vorgelesen werden. Textbrowser können Frames erst gar nicht darstellen. Auch das Erstellen eines Lesezeichens kann sich bei einer mit Frames strukturierten Seite als problematisch erweisen.

Manchmal lässt es sich nicht verhindern, ein Frameset in einer Webanwendung zum Einsatz kommen zu lassen. In diesem Fall ist darauf zu achten, dass ein <noframes>-Bereich unterhalb eines Framesets implementiert wird, um wenigstens ein wenig die Barrierefreiheit zu wahren. Listing 1.5 zeigt eine beispielhafte barrierearme Implementierung eines Framesets.

<!DOCTYPE HTML>
<html>
<head>
<title>Barrierearmes Frameset</title>
</head>

<body>
<frameset cols=“100,*“>
<frame name=“Navigation“
title=“Zur Navigation“ src=“menu.html“ />

<frame name=“Inhalt“
title=“Zum aktuellen Inhalt“ src=“inhalt.html“ />

<noframes>
<body>
<ul>
<li><a href=“menu.html“>
zur Navigation
</a></li>

<li><a href=“inhalt.html“>
Zum aktuellen Inhalt
</a></li>

<li><a href=“sitemap.html“>
Zum Inhaltsverzeichnis
</a></li>
</ul>
</body>
</noframes>
</frameset>
</body>
</html>

Listing 1.5: Barrierearmes Frameset

Wie ein barrierefreies Layout ohne Frames gestaltet und implementiert werden kann, wird im Kapitel Layout und Struktur veranschaulicht.

1.3.5 Überschriften

Überschriften sind ein wichtiges Inhaltselement auf einer Webseite und das beste Hilfsmittel, um Inhalte zu strukturieren. HTML stellt uns für die Kennzeichnung von Überschriften die Tags <h1> bis <h6> zur Verfügung.

Blinde Surfer scannen eine Webseite mit einem Screen Reader und nutzen die Überschriften, um sich einen Überblick über die Seite zu verschaffen. Zudem werden die Überschrif...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang