Barrierefreiheit - Handwerkszeug und technisches Verständnis: Handwerkszeug und technisches Verständnis

Von Timm Bremus

Barrierefreie Webanwendungen, davon profitieren nicht nur Menschen mit Sehschwäche und körperlicher Behinderung. Vielmehr haben alle Benutzer von Webanwendungen etwas von Barrierefreiheit, auch wenn man es auf den ersten Blick nicht gleich erkennt. Dieser shortcut gibt Ihnen konkrete Werkzeuge an die Hand und schildert die nötigen Handgriffe, die Ihre Anwendung letztlich in einem barrierefreien Glanz erscheinen lassen.

• Sprache: Deutsch
• Herausgeber: entwickler.press
• Erscheinungsdatum: 23. Okt. 2013
• ISBN: 9783868024821

Buchvorschau

Timm Bremus

Barrierefreiheit

Handwerkszeug und technisches Verständnis

ISBN: 978-3-86802-482-1

© 2013 entwickler.press

Ein Imprint der Software & Support Media GmbH

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 -Elements, mittels des 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