1x Gold für darmkrebs.at – ausführende Agentur: verdino.com

1x Silber für hauptbahnhof-wien.at – ausführende Agentur: wienfluss.net
1x Bronze für biogas-netzeinspeisung.at – ausführende Agentur: wienfluss.net

1x Silber für linz.at – ausführende Agentur: cyberhouse.at

Alle 19 Preisträger finden sich auf der Website des Biene-Awards.

Auch die hohe Zahl an erfolgreichen Teilnehmern aus Österreich zeigt, wie sich der Gedanke der Barrierefreiheit verbreitet, schreibt die Pressestelle der Aktion Mensch.

Das klingt ein wenig so, als sei Barrierefreiheit in Deutschland erfunden worden. Tatsächlich sind wir ein wenig hinterhergehinkt, aber mittlerweile gibt es eine sehr engagierte und professionelle Accessibility Community in Österreich, besonders in Wien und Linz, wo man das Fach auch akademisch betreut.

Ein wenig kleinstaatlicher Nationalstolz darf sein: wir gewinnen neuerdings nicht nur Schimedaillen, was Tradition hat, sondern auch Literaturpreise, Oscars und Bienen für Profi Websites zuhauf. Im Fußball werden wir eines Tages auch noch gefährlich.

Kreativere, verspieltere Layout Ansätze eignen sich zugegebenermaßen eher für kleine Webauftritte. Ungewöhnliche Designs mit fixer Breite sind Inhalt des heutigen Schaukastens.

Französischer Chic

In Frankreich gibt es ein Qualitätslabel für Barrierefreiheit: AccessiWeb. Aus dessen Galerie hier zwei aktuelle Beispiele:

Beispiel 1: cnsa.fr

Caisse Nationale de solidarité pour l’autonomie, AccessiWeb label Argent 2008

Nett ist die grafische Hintergrundgestaltung, die die Webseite aussehen lässt wie eine aufgeklappte Mappe mit Spiralbindung, so abstrahiert allerdings, dass es nicht kitschig wird.

Beispiel 2: tibus.fr

Le réseau des transports interurbains, des Costarmoricains, AccessiWeb label Argent 2008

Eine unkonventionell gestaltete Webseite für das Tibus Fernverkehrsnetz an der Côtes d’Armor mit barrierefreier Busliniensuche. Das Design sieht aus wie eine Kinderbuchillustration und die Seite wirkt deshalb auch kleiner als sie ist.

Wiener Stil

Was die Kollegen so machen… 3 Beispiele kleiner Webauftritte, die mir gerade ins Auge gestochen sind.
Hier stand Barrierefreiheit vermutlich nicht im Pflichtenheft, sondern wurde im Qualitätspack mitgeliefert, mit vertretbaren Abstrichen.

Die Kontraste errreichen nicht in allen Fällen die WCAG 2.0 Vorgabe von 5:1. Auf konsequente Sprachauszeichnung kann man sich nicht verlassen. Schriftvergrößerung (bei nur Text Zoom) ist möglich, aber meist nicht bis zu den in den WCAG 2.0 gewünschten 200%, weil die Navigationsspalten dafür zu schmal sind. In zoomfähigen Browsern zoombar sind sie natürlich alle. Die gleichen Abstriche gelten übrigens auch für viele mit diversen Accessibility Labels versehene Websites in Europa.

Beispiel 3: trainingsvorsprung.at

Interessant ist hier der Umgang mit verschiedenen Bildschirmbreiten (von 800, 1024, 1280 bis 1680px und mehr). Ein schmales Layout kann auf einem großen Bildschirm recht mager aussehen, wenn nicht auch der Hintergrund mitgestaltet wird.

Beispiel 4: gruenesgeld.at

Hübsche Seite, auf die man stößt, wenn man als Selbständige eine Vorsorgekasse sucht.

Beispiel 5: dornbachnetworks.at

Ein Beispiel für ein Layout mit dunklem Hintergrund…wenn mans mag, einfach und wirkungsvoll.

Kompromisse

100% barrierefrei gibt es nicht…
Zwei Projekte, an denen ich selbst mitgearbeitet, sind hier auch noch vertreten. Nicht um Eigenwerbung zu betreiben, denn sie sind nicht perfekt und die Layouts sind nicht von mir. Ich möchte vermitteln, warum auch in punkto Barrierefreiheit ambitionierte Webprojekte oft so unperfekt sind, wie sie sind.

Beispiel 6: asap.at

Eine Webseite für einen Personalberater mit Stellenanzeigen, nominiert für den ebiz egovernment “Sonderpreis Barrierefreiheit in der IT” 2008, immerhin.
Dazu eine kleine Anekdote: Nach der Einreichung im letzten Moment prüfe ich die Webseite noch einmal nach und sie strotzt plötzlich vor Validierungsfehlern und font Elementen, alle Überschriften verschwunden… Ich denke mir wieder einmal, das Leben von WebdesignerInnen wäre viel viel einfacher, wenn es die Kunden nicht gäbe, die ihre Seiten selber warten wollen.
Beflissen repariere ich jede Seite (nachts und gratis) für die Jury (die die Seiten ebenfalls nachts und gratis überprüft), rufe am nächsten Tag den Kunden an, und er sagt, oh je ganz schlecht!!
Das hätte er jetzt gerade absichtlich so gemacht. Die Stellenanzeigen auf seiner Seite werden automatisch bei einer großen Stellenbörse eingelesen und dort wollten sie die font Tags haben und keine Überschriften.

Beispiel 3: jak-stat.at

Ein Beispiel aus der Kleinagenturszene, wo mehrere selbständige Partner zusammenarbeiten: Ein Layout wird von Agentur Nr. 1 – ohne besonderen Accessibility Fokus – geliefert, HTML Umsetzung im Subauftrag von Agentur Nr. 2 (von mir WCAG konform), bei der Typo3 Implementierung in Agentur Nr. 3 bleiben trotz Hinweis wieder ein paar Kriterien auf der Strecke, sogar so einfach umsetzbare wie ein Sprachattribut im HTML Element. Nennen wir es standard-konform und barrierearm.

Programmiertechnisch interessant an dieser Webseite für ein Forschungsprogramm war die Menügestaltung. Die mit einem großen Hintergrundbild bündigen Submenüs können bei Schriftvergrößerung nach unten wachsen, das Metamenü daneben nach oben.

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.