Publikationen
Webdesign und Webentwicklung:
Bericht von der Baustelle WWW (Jan. 2007)
1. Teil: Style Guide für eine Website
2. Teil: CSS-Code Organisation erleichtert Übersicht und Unterhalt
3. Teil: (X)HTML- und CSS-Richtlinien
Bericht von der Baustelle WWW
Die Maschinen sind für den Menschen geschaffen und nicht umgekehrt. Dieser eigentlich banale aber wichtige Glaubenssatz geht gelegentlich im Alltag vergessen, besonders im Umgang mit Computern. Viel zu rasch werden Einschränkungen in der Benutz- und Bedienbarkeit gemacht und hingenommen. Die Entwickler des Web waren sich dessen aber sehr bewusst:
«The power of the Web is in its universality.
Access by everyone regardless of disability
is an essential aspect.»
«Die Macht des Web ist seine Universalität.
Zugang für jeden ohne Einschränkung durch
Behinderung ist ein grundlegender Aspekt.»
Ein Zitat von Tim Berners Lee, dannzumal Wissenschaftler am CERN im Jahre 1994, als er das World Wide Web für den öffentlichen Gebrauch erschloss. Die Wirkungsweite und die Wirkungskraft des Web standen zu diesem Zeitpunkt noch in den Sternen, sind heute aber unbestritten und für Menschen mit Mobilitäts-, körperlichen und geistigen Einschränkungen besonders wichtig. Gerade diesen Bevölkerungsgruppen bietet das Web enorme Möglichkeiten bei der Teilhabe an den Prozessen der Gesellschaft. Das Web ist unter diesem Aspekt betrachtet eine Technik, welche die Demokratisierung und Emanzipation direkt und wirksam fördert.
Zurück zu den Anfängen
Dreizehn Jahre nach der Einführung der Web-Technologie stehen wir an einem Punkt, an welchem den ursprünglichen Absichten sehr gut zum Durchbruch verholfen werden kann. Denn es gibt einerseits ein Behinderten Gleichstellungsgesetz (BehiG) welches mit seiner Verordnung die zugängliche Information den öffentlichen Anbietern vorschreibt und es gibt andererseits internationale technische Standards die ausgereift genug sind, damit diese Anforderungen in einem sinnvollen Rahmen umgesetzt werden können. Die aktuellen Webbrowser können erstmals in der Geschichte des Web mit exakten Angaben zur Seitenformatierung umgehen, ohne die geräteunabhängige Lesbarkeit des Inhaltes zu behindern. Notabene datieren die Web-Standards auf welche sich das Gesetz beruft aus dem Jahre 1997 (WCAG 1.0) und die technischen Standards zur Seitengestaltung datieren aus dem Jahre 1998 (CSS 2.0).
Das Alter der Standards spielt aber keine Rolle, wenn sie klug und realisierbar sind. Die Akzeptanz der Standards musste aber zuerst erkämpft werden. Der Siegeszug der demokratischen Innovation ist zahlreichen Entwicklern zu verdanken, die rund um den Erdball an der Vision der Realisierbarkeit der Webstandards gearbeitet haben. Über Firmengrenzen hinweg. So auch einige Entwickler der Firma Microsoft, hierzu eine Anekdote aus dem Jahre 1998: Der Leiter des Webbrowser-Teams Internet Explorer 5 für Macintosh, Tantek Celik, wurde firmenintern kaltgestellt da der Mac-Browser als erster aufzeigte, welches Potential und welche Design-Möglichkeiten in den Webstandards stecken. Unangnehme Fragen nach der Qualität des Windows-Pendants (IEX 4.5) passten nicht ins Firmenkonzept. Celik blieb ein engagierter Web-Entwickler und die Webgemeinschaft hat mit alternativen Browsern (Opera, Mozilla, Firefox und weitere) den eingeschlagenen Weg weitergeführt und den anfänglichen Ideen zum Durchbruch verholfen.
Webdesign für Blinde?
Grosse Augen (oder richtiger: Ohren) machten die Studenten für visuelle Kommunikation an der Hochschule für Gestaltung und Kunst in Luzern, als ich in einem Gastreferat erklärte, das Web sei primär ein Textmedium und ohne Worte funktioniere gar nichts. Demonstriert wurde diese Behauptung eindrücklich vom Ko-Referenten Urs Kaiser, blind, mit seinem Bildschirmleseprogramm: Er bediente damit elegant seinen Laptop, surfte im Internet und eindrücklich konnten alle mithören, wie da genauso die Post abgeht – aber eben nicht als Bilder- und Farbregen, sondern als Wortschwall. Nachvollziehbar für die zur visuellen Sensitivität und optischen Strukturierung Trainierten, wurden die Anforderungen von Urs, als er vorspielte, wie visuell schöne Webseiten auch den Text gut strukturiert anbieten können und wie gut das für einen Blinden klingt. Oder wie es eben rauscht, wenn das nicht der Fall ist. Eine junge Grafikdesignerin verglich dies mit dem Zeitvertrieb bei ihren täglichen Bahnreisen: Sie hat sich angewöhnt Hörspiele auf einen MP3-Player zu laden und findet dies zunehmend berührend – was wäre ein Hörspiel ohne Struktur, ohne Betonungen und ohne Pausen.
Wenn das Wissen da ist, warum und wie eine Website schön für das Auge und zugleich auch benutzbar für alle gemacht wird, ist die Realisierbarkeit plötzlich einfach. Idealerweise würde dies bereits in der Ausbildung den Designern und Entwicklern beigebracht.
Die eingesetzten technischen Konzepte – z.B. die Trennung von strukturiertem Inhalt und Darstellung – wirken in viele Richtungen positiv. Eine umfangreiche Studie von Forrester Research im Auftrag von Microsoft, stellte 2003 unter anderem fest: Von Barrierefreiem Webdesign profitieren 60% aller Internetnutzer. Andere Studien belegen die Wirtschaftlichkeit der Investition in eine barrierefreie Firmenwebsite bei einem Redesign.
Webstandards als Voraussetzung für universelles Design
Vorteile der modernen Layoutmethode sind die konsequente Trennung des strukturierten Inhaltes von der Darstellung. Damit ist die Ausgabe der Dokumente auf unterschiedlichen Ausgabemedien möglich. Eine Webseite kann somit auch auf einem Handheld oder einem Handy betrachtet werden. Für den Ausdruck können unwichtige Elemente wie etwa die Navigation ausgeblendet werden.
Eindrücklich sichtbar oder treffender hörbar, werden die Vorteile wenn einem Blinden über die Schulter geschaut werden kann. Er verzichtet mit seinem Hilfsgerät «Screen-Reader» vollständig auf Layout und lässt sich das Textdokument seriell vorlesen. Ein reicher Funktionsumfang erschliesst ihm über die Struktur der Texte den Zugang zum Inhalt. So kann etwa mit einem Tastenbefehl eine Liste mit allen Haupttiteln eingeblendet werden, was eine rasche Übersicht auch in umfangreichen Webseiten ermöglicht.
Erfreulicherweise bieten die gegenwärtig verbreiteten und anerkannten Techniken (HTML 4.01 und CSS 2.1) und die verbreiteten Browser, erstmals die Möglichkeit dieses Konzept ohne Abstriche an marketingorientiertes Design umsetzen zu können. Längst sind barrierefreie Websites nicht mehr langweilig und schlacksig, im Gegenteil.
Barrierefreies Webdesign ist modern
Auch wirtschaftliche Pluspunkte sorgen dafür, dass sich diese Standards auch bei den Websites der grossen internationalen Firmen durchsetzen und nicht nur bei den Bundesämtern, Kantonen und Gemeinden, die gesetzlich verpflichtet sind. Referenzen dafür sind die zertifizierten barrierefreien Websites durch die Stiftung «Zugang für alle». In nächster Zeit werden zahlreiche Schweizer Firmen diesem Trend freiwillig folgen und sind derzeit mit der Umstellung beschäftigt.
Wann ist eine Seite barrierefrei? Wer kann das schlüssig beantworten? Schliesslich gibt es eine Vielzahl sehr subjektiver Beeinträchtigungen und die internationalen Richtlinien, auf welchen das Gesetz beruht (WCAG 1.0), sind interpretationsbedürftig.
Eine demokratische Innovation ist das Zertifizierungsverfahren barrierefreie Website der Stiftung «Zugang für alle». Dieses kluge Zertifizierungsverfahren rückt geschulte Accessibility-Spezialistinnen und -Spezialisten mit Behinderung in den Mittelpunkt des Testverfahrens. Es wird seit August 2006 erfolgreich angeboten und hat internationalen Beispielcharakter.
Was ist neu am Web 2.0 ?
Die Anwort ist nicht kurz zu fassen. Google hat erst 2006 den Video-Tauschdienst Youtube für 1,65 Milliarden Dollar geschluckt. Die jugendlichen Gründer der Website auf welcher Amateur-Videos getauscht werden können, begannen erst im Februar 2005 mit dem Slogan «Broadcast yourself» (engl. für sende dich selber). In vielen Medien wird der Handel als exemplarisch für den Höhenflug des neuen Web 2.0 gepriesen. Doch was bedeutet Web 2.0 eigentlich?
Eine Entwicklung lässt sich herausfiltern: der Wandel vom anbieterzentrierten zum anwendererstellten Inhalt. Einer der Vorreiter ist der Buchhändler Amazon. Der Konsument kann nicht nur unkompliziert online einkaufen, sondern auch Artikel benoten und rezensieren und kann von Amazon kontextsensitive Links präsentiert bekommen, die in das Bild des Konsumenten passen. Hier wird der Anwender zum Mitautor soweit es das Marketing nützlich findet.
Als weiterer Vorreiter gilt das Projekt Wikipedia.org die freie Online-Enzyklopädie. Hier können Benutzer Autoren werden und somit verantwortlicher Teil einer neuen Art Wissen zu dokumentieren und zugleich zu publizieren. Die Erneuerung der lexikalischen Einträge ist erstmals in einem Lexikon immanent. Diesem neuen Umstand wurde einerseits mit Schabernack und andererseits mit Anerkennung Respekt gezollt und es scheint eines von vielen, oft sehr themenspezifischen, Wikis zu sein, das bereits nicht mehr wegzudenken ist. Bereits werden neue Freiwilligen-Projekte aufgegleist, auf Wikia gibt es sowohl für die technischen wie auch die Gemeinschafts-Aspekte des Betriebes einer Wiki-Gemeinschaft kostenlose Unterstützung.
Für viele lebt das Web 2.0 mit den Blogs auf. Als Blog werden die Web-Tagebücher mehr oder weniger interessanter Zeitgenossen bezeichnet die in beliebiger Regelmässigkeit und Qualität Beiträge im Web publizieren. Nicht zu unterschätzen ist deren Bedeutung – sichtbar geworden beispielsweise im Israel-Libanon Krieg 2006. Bilder des Fotoreporters Adnan Hajj wurden der kriegshetzerischen Manipulation überführt indem in einem Blog die Originale und die retuschierten Fälschungen publiziert wurden.
Das Geschäftsmodell das vielen Web 2.0 Anwendungen zugrunde liegt, überträgt die Lösung eines schwierigen Problems einem Freiwilligenheer. Wer die «Weisheit der Massen» zu nutzen weiss, der kann sich mit dem «Croudsourcing» genannten Vorgang eine goldene Nase verdienen oder politischen Druck erzeugen. Es wäre falsch dieses Phänomen als «Schwarmintelligenz» abzuwerten und in die Nähe von etwas Insektenhaftem zu rücken, denn es überwiegt die Demokratisierung der Innovation.
Kurzer Augenschein auf die Kerntechnologien des Web 2.0
Eine weitere beispielhafte Anwendung für «Rich User Experiences» (engl. für reichhaltige Benutzer Erlebnisse) sind Google maps. Eine Weltkarte mit grossem Zoomfaktor steht bereit um in alle möglichen Anwendungen eingebaut oder mit solchen verlinkt zu werden.
Die Technik, welche die bedienungsfreundliche Nutzung dieser riesigen Landkarte ermöglicht heisst Ajax. Die Karte kann mit Mausklick geschoben und gezoomt werden, das erinnert sehr stark an die Möglichkeiten wie sie bisher nur von Software-Pakten geboten wurden, nachdem diese auf dem lokalen PC installiert worden sind und hunderte Megabytes Speicherplatz belegt haben. Richtig spannend wird es, wenn die ersten Web-Anwendungen ausgereift genug sind, um die überteuerten und überladenen Softwarepakete im Office-Bereich abzulösen.
Steffen Mischkat, Ajax-Entwickler bei Google, beschrieb Ajax an einer Podiumsrunde des «Forum für Open Source Software» an der ETH Zürich im September 2006 so: «Wenn wir es mit Musik vergleichen, so haben wir komplexe klassische Musik und wir haben ebenso komplexen Jazz und dann gibt es die Pop-Musik. Sie ist in der Musik etwa das was Ajax in den Web-Techniken darstellt.»
Dieser Vergleich ist treffend, denn wie bei der Popmusik nimmt Ajax diejenigen Elemente die gerade nützlich sind und mischt sie interessant zusammen. Ajax ist das Kürzel der Wortfolge «Asynchronous JavaScript and XML». Alles sind Techniken die bereits seit Jahren im Web eingesetzt werden, asynchron ist das Web sowieso. Neu ist einzig die Methode, diese Techniken in Bereichen einer Webseite durchzuführen, ohne die ganze Webseite nachzuladen. Klug angewendet, werden vom Nutzer angeforderte Daten unmittelbar geladen. Dies wird bespielsweise sichtbar in einem Suchformular: Wird bereits nach der Eingabe von drei Buchstaben eine Liste mit verzeichneten möglichen Treffern aufgelistet, so ist Ajax mit im Spiel.
Diese Funktionen sind mehr als Spielereien, sie sind oft ausgesprochen benutzerfreundlich und erhöhen die Bedienbarkeit der bisweilen umfangreichen Webanwendungen enorm, notabene erstmal nur für «normale Mausklicker».
Eine neue Klippe am digitalen Graben
Wie bei Popmusik üblich, ist der Glimmer sehr oberflächlich. Schaut man genauer hin, so werden Standards gerade soweit beachtet als unmittelbar ein Nutzen ersichtlich ist. Enorm ist der Aufwand bei der Entwicklung und im Unterhalt, um allen gängigen Browsern ähnliche Designs und Funktionalitäten anbieten zu können und dankbar darf man sein, wenn solche Websites mit assistiver Technik, etwa einem Screen-Reader, gerade noch bedienbar sind. Eine eigenartige Qualitätsvorstellung, welche sich derzeit glücklicherweise nur wenige Firmen leisten können. Die Gefahr, mit diesen «mashups» (engl. für Vermanschung) das gerade mal eben in greifbare Nähe gerückte andere Ende des digitalen Grabens erneut in weite Ferne zu rücken, ist gross.
Standards im Wandel
Doch die Gefahr ist erkannt. Einige Entwicklungen sind zu beachten und ermöglichen eine differenziertere Beurteilung. Zum ersten ist der Grundtenor in der Community der Designer und Entwickler dieser neuen Web-Techniken auf Standardkonformität und Accessibility eingestimmt. Es ist uncool oder ganz einfach unprofessionell, Lösungen zu präsentieren, die dagegen verstossen. Es gibt Dutzende Blogs und Websites, die sich mit Ajax und Accessibility befassen und bereits kursieren zahlreiche gute Rezepte.
Zum zweiten sind die Erneuerungszyklen aller Technikkomponenten heute enorm kurz. Der Webbrowser Firefox etwa wird beinahe monatlich mit kleinen und halbjährlich mit grossen Updates angepasst. Beinahe gleich rasch werden assistive Technologien erneuert. Zum Beispiel der Screen-Reader «Jaws» der Firma «Freedom Scientific», mit welchem über 80% der Blinden in der Schweiz ihren PC bedienen und im Internet surfen. Noch vor drei Jahren konnte das Programm mit JavaScript nichts anfangen oder verweigerte sogar den Dienst. Die aktuelle Version kann bereits mit zahlreichen JavaScript-Funktionen, wie sie etwa zur Bedienungsvereinfachung von Formularen in vielen Webseiten genutzt werden, richtig umgehen.
Als weitere erfreuliche Entwicklung gilt die Gründung der «OpenAjax Initiative». Hier engagieren sich IBM, Google, Adobe und weitere richtungsweisende Firmen. Bereits aktiv ist ein Forum, das der Sammlung und dem Austausch von Erfahrungen dient. IBM und Google bringen viel Wissen ein. Ziel ist die Schaffung eines Regelwerks unter Open Source Lizenz, welches die Standardkompatibilität und – unter anderem – auch die Accessibility verbessern soll.
Wie das World Wide Web Consortium (W3C) diese und weitere Vorschläge aufnehmen wird und ob es die dringend nötige Aktualiserung und Konsolidierung der vielen beteiligten Standards in absehbarer Zeit bewältigen wird, ist derzeit leider noch unklar. Gut möglich ist, dass die für Ende 2007 angekündigten Vorschläge der «WHAT Working Group» den trägen und zu akademischen Konzepten des W3C vorgreifen und Standards präsentieren wird, die vor allem den Browser-Entwicklern passen und deshalb auch rasch Verbreitung finden werden.
Fazit
Für Webdesigner ist die konkrete Auseinandersetzung mit den unterschiedlichen Accessibility-Anforderungen eine grosse Herausforderung und eine sehr gehaltvolle praktische Erfahrung. Die Menschen stehen im Mittelpunkt und das macht Projekte sehr abwechslungsreich – Benutzerzentriertes Design einmal nicht als Schlagwort aus dem Fachbuch, sondern ganz konkret. Eine Mensch-Maschine Schnittstelle die dank den für die Zertifizierung notwendigen Benutzer-Tests rasch Feedback gibt, ob das Interaktionsdesign gut ist oder noch nicht.
Das Phänomen Web 2.0 ist unter dem Strich betrachtet eine sehr anwenderorientierte, dynamische und heterogene Erscheinung. Es lohnt sich, das Positive herauszufiltern, zu nutzen und aktiv daran teilzunehmen. Dies kann auf viele Arten geschehen. Wie wärs mit einem eigenen, auf Youtube.com publizierten Kurzvideo? Oder einem eigenen Blog? Bilden Sie ein kleines Redaktionsteam, das ideale Werkzeug lässt sich finden. Die Blog-Software «WordPress» beispielsweise ist dafür wie geschaffen: Sie ist standardkonform codiert und damit barrierefrei bedienbar. Darüber hinaus ist sie nicht nur gratis, sondern bei vielen Providern vorinstalliert, sodass Sie nach einigen Mausklicks loslegen können. Quintessenz: Der Weg zur trendigen, aber auch barrierefreien Website ist heute fast schon ein Kinderspiel.
Erwähnte Links:
- Behinderten Gleichstellungsgesetz BehiG, siehe: http://www.label4all.ch/de/testverfahren/04_internationalguidlines.html#gesetz
- Studie von Forrester Research im Auftrag von Microsoft, 2003: http://www.microsoft.com/enable/research/computerusers.aspx
- Schweizer Zertifikat barrierefreie Website: www.label4all.ch
- WCAG1.0, Web Content Accessibility Guidlines 1.0, deutsche Übersetzung mit Anmerkungen: http://www.label4all.ch/de/testverfahren/03_richtlinien.html
- Wikia: Neben Software sollen diejenigen, die über OpenServing ihre Wikis und Blogs betreiben, kostenlos Speicherplatz, Bandbreite und weiteres erhalten:
http://www.wikia.com/wiki/Wikia - Der libanesiche Fotograf und Bilderfälscher: http://de.wikipedia.org/wiki/Adnan_Hajj
- «Die Weisheit der Vielen, Warum Gruppen klüger sind als Einzelne und wie wir das kollektive Wissen für unser wirtschaftliches, soziales und politisches Handeln nützen können» Autor: James Surowiecki, erschienen 2004, Buchbesprechung:
http://de.wikipedia.org/wiki/Die_Weisheit_der_Vielen - «Weisheit der Massen, Quelle für wissenschaftliche Arbeiten?» Artikel im Online-Magazin Telepolis 01.09.06, Autoren: Karin Wehn und Martin Welker: http://www.heise.de/tp/r4/artikel/23/23435/1.html
- ETH Zürich, Forum für Open Source Software: foss.ethz.ch
- Das World Wide Web Consortium: http://www.w3.org/
- «Web Hypertext Application Technology Working Group»: http://whatwg.org/
- Interview mit Håkon Wium Lie, technischem Leiter des Browserherstellers Opera. 1994 stellte er dem W3C sein Konzept für Stylesheets vor und gestaltete die CSS-Spezifikationen entscheidend mit. 2004 schloss er sich der Arbeitsgruppe WHAT WG an und wirkte an deren Entwürfen mit.
http://www.heise.de/ct/Redaktion/heb/w3c/lie_deutsch.html - Blogsoftware WordPress: http://de.wordpress.com/