12. November 2008, von Maria Putzhuber
Showcase 2 – Kreative Fixe
Barrierefreie Webseiten finden sich häufig im öffentlichen Bereich, weil hier eine gesetzliche Verpflichtung besteht. Diesen großen, inhaltsreichen Seiten liegt oft das typische 3 Spalten Raster zugrunde.
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.
Über dieses Blog