WIE FUNKTIONIERT EIGENTLICH... Wie funktioniert eigentlich … HTML & barrierefreie Webseiten gestalten? In Deutschland verlangen die „Barrierefreie Informationstechnik-Verordnung“ BITV sowie die Landesgleichstellungsgesetze, dass die Webseiten von Bund und Ländern sowie deren Behörden, Anstalten und Körperschaften barrierefrei zu gestalten sind. Das bedeutet, die Internetangebote müssen für Menschen mit Behinderungen „in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar“ sein. Kommunale Behörden und privatwirtschaftliche Unternehmen sind aufgefordert, dem Beispiel zu folgen. Und das sollte im Besonderen für das Gesundheitswesen gelten. Heute erfahren Sie mehr über barrierefreie Webseiten. Haben Sie schon einmal einen Sehbehinderten oder Blinden getroffen, der im Internet surft? Dabei zugehört, wie ein Screenreader den Text der Webseiten in einer (für uns Normalsehende) nicht verständlichen Geschwindigkeit vorliest? Leider ist für die Blinden trotz Screenreaders das „Lesen“ vieler Internetseiten eine frustrierende Erfahrung. Weil Seiteninhalte ausschließlich als Bilder angezeigt werden, bleiben Informationen und Links unsichtbar. Für die Blinden stellen sich Webseiten oft als ein unstrukturiertes riesiges Meer aus Text dar. Ein gezieltes Finden von Informationen ist für sie zumindest sehr aufwendig. Als absurd erscheint dabei die Tatsache, dass es einfach wäre, die Webseiten für Sehbehinderte lesbar zu gestalten. Gleichzeitig 34 Ausgabe 6/2008 könnten sogar die Autoren und Webentwickler profitieren. Doch mehr dazu später. HTML Browser wie der Internet Explorer, Firefox oder Safari sind Programme, die HTML-Code, der von einem Webserver zu Ihrem Computer übertragen wird, als Webseite darstellen. Eine Webseite besteht ähnlich wie Bücher aus einem Inhalt (Fließtext, Bilder), Struktur (bei Büchern z.B. aus Kapiteln, Absätzen, Sätzen) und dem Layout (Schriftarten, Positionen, Farben usw.). HTML (Hypertext Markup Language) zählt zu den Markup-Sprachen, den Auszeichnungssprachen. Möchte man den Text „Gesundheitswesen“ als Überschrift kenntlich machen (auszeichnen), so nutzt man so genannte Tags, das sind Kennzeichnungen (hier fett dargestellt): <h1>Gesundheitswesen</h1>. Wie Sie sehen, gibt es ein so genanntes öffnendes (<h1>) und ein schließendes Tag (</h1>). Im Sprachumfang von HTML wird definiert, welche Tags es gibt. Hierzu zählen ● <h1>, <h2>, <h6>: berschriften ( heading ) der Hierarchieebenen 1 bis 6 ● <p>: Textabsätze (paragraph ) ● <li>: Listenelemente ● <table>: Tabellen Abb.1: Darstellung der Webseite im Browser. Prof. Dr. Christian Johner, Institut für Informationstechnologien im Gesundheitswesen: „Prüfen Sie Ihre Webseiten auf Barrierefreiheit! Sie sind es sich, Ihrem Geldbeutel und Ihrer Ethik schuldig.“ Weiterhin besteht jedes HTMLDokument, also jede Webseite, aus einem Head (<head>) und einen Body (<body>). Ein einfaches HTML-Dokument könnte wie folgt aussehen: <html> <head> ... </head> <body> <h1>KH-IT-Journal</h1> <p>Diese Zeitschrift ist gut, weil sie<p> <ul> <li>praxisnah ist</li> <li>alles Wichtige enthält</li> </ul> </body> </html> Abbildung 1 zeigt, wie der Browser diesen HTML-Code als Webseite darstellt. Sie können das selbst nachvollziehen: Legen Sie mit Notepad eine Textdatei an, fügen Sie den Text ein, speichern Sie die Datei soluten Größenangaben für Schriften. Nutzen Sie also Einheiten wie „em“ oder Prozent, aber nicht Pixel. Damit erschweren Sie Sehbehinderten die Anpassung der Schriftgröße. ● Abbildung 2: Die gleiche Seite, diesmal mit CSS formatiert mit der Endung html und öffnen Sie dann die Datei mit dem Browser (Abb.1). CSS Wie Sie sehen, hat der Browser die Überschrift bereits groß und fett dargestellt. Möchten wir weiteren Einfluss auf die Formatierung nehmen, beispielsweise auf Farben und Schriftarten, so geschieht dies mit Hilfe von Stylesheets. Das sind (ebenfalls) Textdateien, meist mit der Dateiendung css. Um dies zu illustrieren, erstellen wir eine Datei style.css: body {font-family: Verdana; fontstyle:italic; background-color:red;} h1 {text-transform:uppercase;} p {letter-spacing:0.5em;} li {margin-left:100px; Binden Sie dieses Stylesheet im Head der HTML Datei ein. Damit sieht die Seite wie in Abbildung 2 aus. Durch Anwendung dieses CSS wird der Text rot und kursiv, die Überschrift in Großbuchstaben, der Absatz gesperrt und die Liste eingerückt dargestellt. Bitte definieren Sie das Layout (Schriften, Abstände, Farben, Positionen usw.) ausschließlich in der cssDatei und nicht im HTML-Code selbst. Für Blinde sind Layout-Informationen unwichtig. Beachten Sie: Eine Überschrift wird für Blinde dadurch zur Überschrift, dass Sie sie als solche definieren (mit <h1>) und nicht dadurch, dass Sie einen Text in einer größeren Schriftart darstellen. Checkliste für barrierefreie Webseiten Prüfen Sie Ihren Webauftritt anhand der offiziellen Checkliste, die im Anhang 1 des BITV zu finden ist. Diese enthält 66 Punkte. Sie erfüllen die meisten dieser Anforderungen, wenn Sie bei der Gestaltung der Webseite auf Folgendes achten: ● Trennen Sie das Layout von Inhalt und Struktur der Seite: Zur Struktur zählen die Überschriften verschiedener Hierarchieebenen, Textabsätze, Tabellen und Aufzählungen. Zum Layout zählt man Farben, Schriftarten, Positionen und Abstände. Nur die CSS-Dateien bestimmen das Layout. Die HTML-Datei enthält lediglich Inhalt und Struktur. Sie wissen bereits, dass ein Text dadurch zu einer Überschrift wird, dass man ihn explizit als Strukturelement „Überschrift“ einschließt (in HTML mit <h1>, <h2> usw.) und nicht dadurch, dass man ihn groß und fett darstellt. Das Layout, die Formatierung der Überschrift, beispielsweise Schriftart und Schriftgröße, ist Aufgabe des Stylesheets. ● Die Trennung des Layout von Struktur und Inhalt bedeutet auch, dass Tabellen der Darstellung tabellarisch strukturierter Inhalte dienen und nicht der Positionierung von Texten und Bildern dienen sollen. ● Lagern Sie Formatierungsanweisungen in die Stylesheets aus und erliegen Sie nicht der Versuchung, das Layout direkt in der HTML-Datei zu manipulieren. ● Für alle multimedialen Inhalte (z.B. Bilder, Imagemaps, Videos) müssen Alternativen in Form von Texten geschaffen sein. Das gleiche gilt für „programmierte Elemente“ wie Skripts und Applets, es sein denn, es sind Möglichkeiten geschaffen, dass sie über „assistive Technologien“ (z. B. Screenreader) zugänglich sind. Verwenden Sie keine ab- Schreiben Sie gültigen HTML-Code und prüfen Sie dies mit Werkzeugen wie HTML Tidy oder dem Validator der W3C. Werkzeuge wie die „Web Accessibility Toolbar“ sind hilfreich: Sie erlauben es, den Text ohne Stylesheet zu lesen, so wie ein Screenreader dies tut. Sie simulieren die visuellen Eindrücke, die Menschen von Ihrer Webseite bekommen, welche an Augenkrankheiten (Grauer Star, Farbenblindheit usw.) leiden. Das vermittelt Ihnen einen Eindruck und macht Ihnen den Wert Ihres Augenlichts bewusst. Gegen diese Regeln zu verstoßen, ist aus mehreren Gründen unklug. Denn wer dies tut ● verstößt gegen Gesetze, ● diskriminiert Sehbehinderte und Blinde, ● verweigert es potentiellen Patienten/Kunden, sich über das Angebot zu informieren, ● verschwendet Geld, weil der Webauftritt nicht durch den simplen Austausch eines Stylesheets (css-Datei) neu gestaltet werden kann, sondern man auf die Hilfe von Webprogrammierern angewiesen ist. Die Seite www.csszengarden.com demonstriert auf wunderbare Weise, wie vielgestaltig sich eine Webseite (d.h. identischer HTMLCode) mit CSS-Dateien darstellen lässt. Prüfen Sie Ihre Webseiten auf Barrierefreiheit! Sie sind es sich, Ihrem Geldbeutel und Ihrer Ethik schuldig. Quellen im Internet http://www.gesetze-im-internet.de/bitv/ http://www.barrierefreies-webdesign.de http://de.selfhtml.org http://tidy.sourceforge.net/ http://validator.w3.org/ http://www.visionaustralia.org.au/info.aspx?page=614 (Web-Accessibility Toolbar) www.johner.org 35 Ausgabe 6/2008