Fluides, liquides, flexibles Layout…es passt sich der Bildschirmbreite an.
Die Angabe einer Maximalbreite ist zu empfehlen, damit die Textblöcke bei großen Bildschirmen nicht zu breit werden.

Der Vorteil:

Das Layout vergibt nicht unnötig Platz bei größerer Bildschirmauflösung (z.B. 1680px), sondern passt sich prozentuell an.
Bei Schriftvergrößerung müssen Sie, falls Sie keinen Riesenbildschirm haben, nicht so schnell querscrollen wie bei Zoomlayouts.
Lange Begriffe in Navigationsleisten haben – bei größeren Bildschirmen – mehr Spielraum für Vergrößerung als bei fixen Layouts.

Beispiel 1: duesselenergie.de

Ungewöhnliches, niedliches Web 2.0 Design für die Stadtwerke Düsseldorf, Formulare mit klaren, mehrfach markierten Fehlermeldungen und mit JavaSript versteckter Hilfe.

Beispiel 2: holocaust-chronologie.de

Wirkt cool und klar, mit sehr überlegter Programmierung. Zu Schriftvergrößerungs- und Kontrast Switchern mag man stehen, wie man will. Der Kontrast reicht für WCAG 2.0 nicht 100%ig aus, auch nicht in der kontrastreichen Version.
Bronze BIENE Award 2006, Sonderpreis „Barrierefreiheit in der IT“ im Rahmen des österreichischen ebiz egovernment award 2008.

Beispiel 3: linz.at

Eine klare, übersichtlich wirkende, seriöse öffentliche Webseite, Manko: keine Maximalbreite.
Bundespreis „Barrrierefreiheit in der IT“ im Rahmen des österreichischen ebiz egovernment awards 2008.

Für gutes Design gibt es Kriterien, ebenso wie für Barrierefreiheit. 100% seriös wollen wir das hier aber nicht handhaben, sondern strikt blogmäßig subjektiv.
Die gelisteten Beispiele entsprechen also primär meinem Schönheits- und Professionalitätsempfinden. D.h. Sie finden hier Beispiele von Seiten, die mir gefallen.

Machen Sie mit

Damit ich aber nicht schamlos nur für meine Freunde und mich Werbung machen muss, bitte ich Sie um Ihre Teilnahme. Per E-Mail oder per Kommentar könnten Sie barrierefreie Webseiten vorschlagen, die Ihnen wirklich gefallen und möglichst auch noch dazuschreiben, wieso.

Wenn ich Sie dann auch herausragend finde, mache ich einen Screenshot davon.

Ein – nicht zu strenger – Nachweis der Barrierearmut ist allerdings Voraussetzung. Ich zeige hier Seiten, die einen Preis gewonnen haben, ein ernstzunehmendes Label tragen, irgendwo als barrierefrei gelistet sind oder durch die Szene einigermaßen abgesegnet wurden. Und die IMHO schick sind!

Die Kategorien, in die ich die Beispiele stecke, entsprechen der Tageslaune. Heute sind das z.B. die folgenden, aber wer weiß, was uns – gemeinsam – noch einfällt:

• Fixes Layout
• Zoom Layout
• Flexibles Layout
• Dunkler Hintergrund
• Typographie
• Ungewöhnlich
• Webzweinullig übersichtlich
• Seriös
• Jung
• Brave Dropdownmenüs
• Progressive Disclosure
• Widgets
• Gute Formulare
• Gute Datentabellen

Beginnen wir mit Showcase Nr. 1: Flexibles Layout.

Im letzten Technikwürze Podcast, wo von ihm die Rede war, gibts auch sonst noch allerlei Accessibility und Webstandards Neuigkeiten und spaßig Kluges, wie z.B. das web.without.words, mit der Kernfrage, welche Geschichte eine Webseite erzählt.

Ich denke über eine passende Antwort nach und erinnere mich an einen Übungssatz, den mein Lehrer uns seinerzeit als Maschinschreibübung aufgegeben hat. Als bloße Übung gedacht, hat er mich irgendwie mein ganzes Leben begleitet. Er scheint mir als Erläuterung des diesjährigen Titels unserer Veranstaltung ziemlich passend: “Der Kluge horcht in die Vergangenheit, handelt nach der Gegenwart und denkt an die Zukunft.”

Generationskonflikte

Betrachtet man die Weblandschaft, scheint es zumindest drei Generationen von Seiten zu geben:

Da sind die “ewig Gestrigen”, die mit festgezurrten Tabellen-Layouts daherkommen, HTML- und andere Standards scheinbar nur vom Hörensagen kennen und daher meist ignorieren. Sie weisen häufig keinerlei strukturierende Elemente wie Überschriften, Absätze oder Listen auf. Dass von Accessibility wenig bis nichts zu finden ist, kann nicht verwundern, zumal diese Seiten auch in keiner Weise dem Stand der heutigen Technik entsprechen. Das trifft nicht nur mich als jemanden hart, der auf Accessibility angewiesen ist, sondern muss darüber hinaus jedem seriösen Webworker wie ein Schlag in die Magengrube vorkommen. Dass etliche dieser Seiten im Jahr 2008 neu entstanden sind, ist geradezu ein Affront.

Eine erfreulicherweise im Wachsen begriffene Generation bemüht sich nicht nur um standardkonformen Code und zeitgemäße Techniken (wie etwa Trennung von Inhalt und Layout), sondern oft auch um die Einhaltung von Accessibility-Richtlinien. Neben der Nutzung technischer Checkprogramme legt man darüber hinaus Wert auf Tests durch NutzerInnen, um vor allem der Surfpraxis gerecht zu werden.

Last but not least sind da noch jene VorreiterInnen modernster Webtechniken, die schon lange ungeduldig in den Startlöchern scharren, um Flash, AJAX & Co zum Nutzen der AnwenderInnen und natürlich auch möglichst barrierearm einsetzen zu können. Moderne Webapplikationen und Accessibility schließen einander nämlich keineswegs aus, soferne man weiß, welche Standards und Richtlinien dabei zu beachten sind.

Gemeinsamer Nenner

Mit der Themenvielfalt der diversen Referate beim A-Tag ‘08 versuchen die VeranstalterInnen den unterschiedlichsten Bedürfnissen unseres heterogenen Publikums und somit allen Generationen der WebgestalterInnen gerecht zu werden. Ob Richtlinien, Standards, Organisation, Checktools oder moderne Webtechnologie – es ist sicher für jeden etwas dabei, das den Generationskonflikt der Weblandschaft verringern helfen kann.

Die Zukunft ist heute steht dafür, dass die Zukunft unserer Weblandschaft vor allem in den Händen der in Ausbildung befindlichen Generation liegt. Darum wendet sich diese Veranstaltung in verstärktem Maße an die Jugend und somit an die SeitenmacherInnen von morgen. Von ihrer Qualifikation und ihrem Wissen um moderne Technik und Accessibility wird es abhängen, ob wir in fünf Jahren bei einem Relaunch ebenso böse Überraschungen erleben können wie im Jahr 2008.

Dafür sind neben Fortbildungsveranstaltungen aber auch entsprechend gut gestaltete Beispielseiten der Generation von heute und eine spürbare Aufholjagd des Schlussfeldes “von gestern” erforderlich.

Der A-Tag ‘08 wird hoffentlich dazu beitragen, diese Kluft zwischen den Generationen von Webseiten zu verringern und vor allem Barrieren in den Köpfen der Menschen abzubauen.

Nähere Infos:

Anmeldung und Programm auf der Website zum A-Tag ‘08: http://atag.accessiblemedia.at
Termin: 21. November 2008, Beginn 9.00 Uhr, Open end.
Ort: TechGate Vienna, Donau-City-Straße 1, 1220 Wien.
Die Veranstaltung ist gratis, die Plätze sind jedoch limitiert.

Eva Papst ist Vorsitzende des Vereins accessible media und wird den A-Tag ‘08 eröffnen.

Seit Jahren ernähre ich mich unter anderem mit dem Verfassen von Accessibility Prüfberichten für Webseiten. Ich schreibe dort z.B. hinein, dass ein versteckter Skiplink “Zum Inhalt” am Anfang einer Seite stehen, bei Tastaturfokus sichtbar werden und in der englischen Version der Seite auch übersetzt werden soll. Oder ich schreibe hinein, dass von den 15 gutgemeinten Skiplinks 14 wieder raus sollen und der eine übriggebliebene nicht mit display:none verborgen werden darf. Solches Barrierefreiheits Basiswissen liegt auch im Internet nur einen Suchbegriff entfernt, aber die Web Frontend EntwicklerInnen haben sichtlich nach wie vor keine Lust, danach zu suchen.

Und so verdiene ich jahraus jahrein mein Brot mit den immer gleichen Ratschlägen.

Sie wissen Bescheid

Alle (vermutlich zwangsbeglückt) Beratenen behaupten, eh Bescheid zu wissen, aber sie wissen oft die einfachsten Dinge nicht, wie etwa den sinnvollen Einsatz von alt und title Attributen.
Wie eine Volksschullehrerin vom alten Schlag mit Rotstift sitze ich vor einem Stoß von Webseiten und schüttle beständig konsterniert den Kopf.
Ich wundere mich nicht nur über unnötige Barrieren, sondern auch über generell schlampige Programmierung, bei ganz simplen Seiten etwa über sinnlos aufgeblasene div Konstrukte und sich wiederholende unnötige Inline Styles. Ich erkläre den gescheiten ProgrammiererInnen Anfänger CSS und Internet Explorer Bugs, die jedes Webkind kennt.

Dabei sind es gar nicht Stümper, die ich beraten darf, sondern oft hochbegabte Profis, die nur vor lauter Cleverness anscheinend die Webgrundschule übersprungen haben. Sie haben ihr HTML, CSS, JavaScript Alphabet nie richtig gelernt und Schönschreiben plus Rechtschreiben – Webstandards, zu denen ich auch die Accessibility Guidelines zähle, schon gar nicht.
Vielleicht genieren sie sich dafür und haben auch deshalb Hemmschwellen, sich Grundschulwissen im Nachhinein anzueignen.

…und sie wissen nicht, was sie tun

Sie bauen supercoole, raffinierte, beeindruckende, teure Seiten, mit allen erdenklichen Funktionen, aber ohne Fallback Lösungen bei fehlendem JavaScript für ihre Web 2.0 Widgets, Akkordeons und Tabs, nicht tastaturbedienbar, nicht skalierbar und schludrig im Quellcode. Und die, die sich angeblich mit Accessibility auseinandergesetzt haben, streuen noch großzügig Skiplinks, Accesskeys, Tabindexes und title Attribute, die den Linktext wiederholen, dazu.

Schön, wenn man gebraucht wird…

Es spricht vieles dafür, die Qualitätskontrolle von Websites an externe PrüferInnen auszulagern. Sie sind nicht betriebsblind, objektiv und ExpertInnen in ihrem Fach. Auch wenn es bei uns noch kein offizielles Pickerl gibt, das die Kosten sichtbar legitimiert, lohnt sich eine Überprüfung durch eine extra Kontrollinstanz, nicht zuletzt um AuftragnehmerInnen, die Qualität behaupten, die sie nicht liefern, auf die Finger zu klopfen.

…aber eigentlich möchten wir uns abschaffen

Die sture Ignoranz gegenüber Basisqualitätsanforderungen an eine Website, mit der ich im Beratungsalltag und in Zusammenarbeit mit anderen Agenturen manchmal konfrontiert bin, geht mir aber zunehmend auf die Nerven. Wenn meine Ratschläge dann auch noch in der Schublade verschwinden und auf einer getesteten Seite nach Wochen noch Accesskeys und onfocus:blur Scripts bei jedem Menüpunkt stehen oder wunderbare Tipps von Typo3 im title Attribut von Links wie “opens internal link in current window“, dann würde ich meinen KundInnen das erhaltene Honorar gerne vor die Füße schmeißen.

Während ich den Rohrstock hervorholen möchte, geht ein entspannterer Berufskollege wie Tomas Caspers heiterer mit dem Dilemma um, dass uns ernährt, was uns verrückt macht. Launig wie immer hat er beim Webkongress in Erlangen aus dem Nähkästchen und Berufsalltag eines Accessibility Gurus geplaudert. MP3-Podcast und Folien davon hier.

Als Pflichthausübung für alle, die noch von mir beraten werden möchten: Lesen Sie den WebAIM Artikel Web Accessibility Gone Wild. Jared Smith beschreibt dort typische Fehler, die barrierefreiheitsbemühten Webmenschen regelmäßig unterlaufen.

Er hat dort auch dem Fachmann in mir ein paar mal auf den Schlips getreten:
Ja, Hinweise auf brave Programmierung mit XHTML, CSS und WCAG auf jeder Seite, die keiner versteht, sind sinnloser Page Clutter.
Ja, ich weiß, dass Schriftvergrößerungsbuttons kein wirklich sinnvolles Accessibility Feature sind, aber unerfahrene InternetnutzerInnen finden sie trotzdem nett.
Und ja, ein Formular mit ja / nein Radiobuttons habe ich neulich auch gebaut, ohne die dazugehörigen kilometerlangen Fragen als Legend zu markieren. Ich stehe dazu!

Bis 6. 2.

Sie werden nicht erschossen, wie im Militär Gefängnis, wenn Sie die Deadline überschreiten und die Online-Umfrage der Aktion Mensch zur Nutzung des Web 2.0 durch Menschen mit Behinderung nicht ausfüllen bis Mittwoch.

Aber schade wärs. Mehr als 500 Leute haben bereits mitgemacht. Der Fragebogen ist ganz gescheit, kann ich sagen und kann dabei auch gleich, bevor die Fastenzeit beginnt, Beichte ablegen, dass ich ihn auch ausgefüllt habe, ohne zur Zielgruppe zu gehören, aus purer professioneller Neugier. Ich schäme mich auch wirklich! Hoffentlich gibt es einen statistischen Messwert, der solche SünderInnen rauskalkuliert!

Machen Sie mit, aber bitte nur, wenn Sie wirklich betroffen sind!! Die Ergebnisse werden im Mai im Rahmen eines Fachkongresses vorgestellt und tragen dazu bei, Barrierefreiheit auch im Web 2.0 zu verankern!

Bis 18. 2.

Wer im Webgeschäft ist, kann – mit Behinderung oder ohne – gerne noch bis 18. 2. bei einer anderen Umfrage mitmachen: der Webworker-Umfrage 2008 der webkrauts. Da haben schon 2500 Leute ausgefüllt, die vermutlich alle wissen wollen, wie wenig sie im Vergleich zu KollegInnen verdienen. Womöglich wird auch da geschummelt und hochgestapelt. Man schämt sich ja schon vor sich selbst im Prekariat.

Bis 22. 2.

Wer WebarbeiterIn auch nicht ist, kann – hmmm – z.B. noch bis 22. Februar bei der Aktion Lebendiges Deutsch Wortvorschläge für: hotline einreichen.

Das ist eine gar nicht blöde Organisation, die ohne Deutschtümelei “für jenes unbefangene Vertrauen in die eigene Muttersprache werben (will), wie es Engländern und Franzosen, Polen, Spaniern und Italienern selbstverständlich ist”. Für Deadline schlagen sie schlicht Termin vor, nicht Stichtag oder Frist(ablauf).

Verpasst

Den Termin für Kommentare zu den WCAG 2.0 haben Sie glücklich verpasst. Jetzt können Sie nachlesen, wer aller konstruktiv gemeckert hat: archive for the WCAG 2.0 public comments mailing list.

Nie zu spät

Dafür können Sie immer noch unterschreiben, dass Sie gegen die Ausweitung der polizeilichen Überwachung auf Handys, Internet und ihre UserInnen sind: SOS Überwachung. Damit erwischst du nur die doofen Bösen, Polizei, nicht die, die wirklich gefährlich sind! Wer nicht selbst katholisch beichten oder sich exhibitionieren will, muss anonym bleiben dürfen.

Für die Nichteingeweihten: das ist die
Last Call Entwurfsversion der Web Content Accessibility Guidelines, die nun noch bis 1. Februar kommentiert und kritisiert werden darf (auch von Ihnen übrigens), bevor sie dann den Status einer Candidate Recommendation erlangen soll. Betreffen tun die WCAG vorallem WebseitenmacherInnen, die sich dran halten sollten, um das Internet auch für Menschen mit Behinderungen gut zugänglich zu machen. Geht schon, ist das Fazit. Damit kann man ganz gut leben, oder doch nicht?

Die Level A Erfolgskriterien tun nicht arg weh, AA schon mehr, aber im Normalfall ist das alles machbar mit etwas Engagement.

Außer es scheitert bereits an grundlegenden Sachzwängen, für die die bereits vielgeprügelten Richtlinien EntwerferInnen nichts können. Gescholten wurden sie bislang weniger für zu strenge Vorgaben, mehr für Umständlichkeit, Unverständlichkeit und Verzettelung. Seit 2002 versucht sich die WAI – und mit ihr viel zu viele verschiedene InteressensvertreterInnen – an einer Neuauflage der Web-Zugänglichkeits-Richtlinien WCAG 1.0 von 1999. Was nun vorliegt, ist ein gutes Konsensprodukt, nach einem langen, mühevollen Prozess.

Der Level AAA wird wie auch bisher schönes Kann Ziel für besonders Ambitionierte und PreisanwärterInnen bleiben. Einige der Kriterien davon sind sehr einfach erfüllbar, andere im Weballtag aber ziemlich unrealistisch.

Standards für Profis

Leicht verdaulich sind die Dokumente (normative Richtlinien mit Erfolgskriterien, dazu nichtnormative technische Best Practice Info und Verständnishilfen) immer noch nicht. Es ist aber auch kein leicht verdauliches Thema, und Webgestaltung ist generell ein anspruchsvolles Berufsfeld, in dem sich viel zu viele AmateurInnen wichtig machen. Wer also über die unzumutbar gewundene Formulierung von technischen Standards Dokumenten jammert, muss sich womöglich auch selbstkritisch fragen, ob der eigene professionelle Standard genügt.

Ein paar Problempunkte

Hier nun ein paar schnelle Anmerkungen, zu Punkten, wo ich auch bei meinen eigenen Webprojekten auf Probleme stoße. Vielleicht dient es als Diskussionsanstoß….

1.1 Textalternativen bieten

Über Textalternativen, Alternativtexte für Bilder im speziellen, sollte man eigentlich kein Wort mehr verlieren müssen. Sie sollten selbstverständlich sein. Sie sind es im Weballtag aber keineswegs: für häufig aktualisierte Bildergalerien beispielsweise oder User Uploads von großen Bildermengen wird es vermutlich niemals zur Regel werden, dass sinnvolle Alternativtexte vergeben werden.
Das sind nun vielleicht für blinde UserInnen auch keine sehr relevanten Inhalte, WCAG konform kann und wird es aber niemals sein.

Akustische Alternativen für grafische CAPCHAS werden nur Standard, wenn sie out of the box – in Formulargeneratoren, CMS Plugins – bereits vorhanden sind. Ebenso müssten sich kurze Textalternativen für eingebundene Medien in den vorgegebenen Player Plugins leicht vergeben lassen. Niemand bindet Audio und Video Files oder Flashanimationen heute noch manuell ein.

1.2 Synchronized Media zugänglich machen

Die WAI verwendet nun den Begriff “Synchronized Media” anstelle von Multimedia, um wer weiß welche spitzfindigen Fälle abzufangen. Jedes Wort ist in diesen Richtlinien wohl mittlerweile 2x umgedreht und abgewogen worden und man kommt sich etwas destruktiv vor, da wieder herumzukritisieren, aber eine Standardsorganisation wirkt lebensfremd, wenn sie Fachtermini festlegt, die die Fachwelt nicht verwendet. Lustig: im Google bin ich mit der Übersetzung “Synchronisierte Medien” an erste Stelle gerutscht (die einzige bin ich aber doch nicht). Diese Übersetzung ist sicher falsch und ich bin die Blöde. Ich kanns nicht übersetzen und bitte um Hilfe!

Mit WAI AA Konformität wird sich die Webwelt bei diesem Punkt – wie ja auch bisher schon – schwer tun, weil Live Video- und Audioinhalte rasant zunehmen. Aber es ist klar, ein Video mit Ton ist ohne Untertitel, Textalternative oder Audiobeschreibung unzugänglich für gehörlose und blinde Menschen. Bei multimedialen Inhalten müsste meines Erachtens aber die Wichtigkeit gewertet werden. Bei alltäglicher Schnellproduktion sind Untertitel und Transkriptionen häufig nicht drin.

1.4 Unterscheidbar sein

1.4.3 Ein Kontrastverhältnis von 5:1 für AA Conformance: da scheitert bald mal eine Seite, das ist aber auch nicht Neues. Es sind geprüfte Werte, wer sie nicht einhalten kann, ist nicht barrierefrei für viele UserInnen mit Sehbehinderung.

1.4.4 Eine Textvergrößerung von 200% verträgt vermutlich kein businessübliches Design. Zoomen ist kein Problem, aber nur Textvergrößerung funktioniert auch bei gut programmierten Seiten oft maximal 2 Stufen. Bei 1.0em ist 200% jedenfalls 2.0em, nicht 1.2em. Der Punkt ist etwas unklar formuliert.

2.2 Genügend Zeit geben

2.2.2 Bewegung, Blinken, Scrollen oder automatischer Update von Information können unterbrochen werden, wenn sie länger als 3 sec. dauern.

Werbung ist wohl nicht mitgemeint, oder? Genügt ein Werbeblocker? Ansonsten kann keine Seite, die animierte Werbung schaltet, Barrierefreiheit beanspruchen.

3.1 Lesbar und verständlich sein

3.1.2 Sprachauszeichnung für fremdsprachige Passagen und Begriffe, mit einigen Ausnahmen. Die Vorgaben in den WCAG 2.0 sind deutlich moderater als bislang und akzeptabel. In der freien Wildbahn wird sie aber nach wie vor keiner machen und also strenggenommen nicht AA konform sein.

Information zu nicht W3C Techniken

Technische Hilfestellungen zur Erreichung von WCAG Konformität gibt es von der WAI derzeit nur zu HTML, CSS, ECMAScript, SMIL, ARIA und Web Servern. Proprietäre Formate wie PDF oder Flash werden nicht erwähnt. Die klaren Accessibility Richtlinien hierzu müssen von den Herstellern selbst kommen. Ich hätte trotzdem gerne von der WAI eine klare Ansage, wie die z.B.: PDFs im Web müssen getaggt werden zur Erreichung von Level So und So. Ansonsten verstehe ich, PDFs müssen nur als Text verfügbar sein.

Fazit: Barrierefreiheit kostet nach wie vor Zeit und Geld und Einsatz

Die neuen Richtlinien sind besser als die bestehenden. Und weiterhin wird nur ein Bruchteil aller Webseiten sie ganz erfüllen. Jeder und jede im Webgeschäft sollte sich aber damit auseinandersetzen, weil es Qualitätskriterien sind, die man mit etwas Berufsethos im Leib kennen muss, um dann auch bewußt entscheiden zu können, das ist für mich machbar und das ist es nicht.

Webseiten, die unters E-Government Gesetz fallen, sind zwar in den Inhalten umfangreich, aber meist einfacher gestrickt. Hier gibt es zudem klare Budgets und klare Verpflichtung. Barrierefreiheit ist damit leistbar. Business Seiten lassen sich weniger leicht über einen Kamm scheren, aber auch hier handelt es sich in der Regel um simplen Content, der mit Qualitätsbewußtsein im Hinterkopf ziemlich gut zugänglich gestaltbar ist.

Formulargestaltung mit Eingabehilfen, Fehlerhandling und Kontrollmöglichkeit ist einfach eine Sache professioneller Programmierung.

Interaktive Seiten – E-Commerce, News- und Community Seiten sind aufwendig. Es muss gar nicht um Ajax Barrierefreiheitshürden gehen, simple Produkt und Inhaltsvielfalt, ständige Aktualisierung unter Zeitdruck und Multimedialisierung genügen, um die hehren Barrierefreiheitskriterien für im Alltag nicht mehr machbar zu halten.

Positiv: Die Trennung von Struktur und Layout – das ist so logisch, dass es gängiger Standard werden muss.

Standard Konformität – die Internet Explorer Entwickler freuten sich wie die Schneekönige, weil der kommende IE8 den Webstandards Acid2 Test bestanden hat. Sie haben anscheinend den Spagat geschafft, einen standardkonformen Browser zu schaffen, der gleichzeitig die Fehlerhaftigkeit und Fehlertoleranz bisheriger IE-Versionen weiter unterstützt. Hier geht auch mal der Mainstream in die richtige Richtung.