Sie sind hier: Start > Artikel

Barrierefrei zum Mitnehmen

Hier finden Sie eine ganze Reihe von Vorlagen, die Sie für Ihre Arbeit einsetzen und damit einen wichtigen ersten Schritt in Richtung Barrierefreiheit machen können.

Tags: ,

Stand: 26.02.2007, Autor: tc

Ein Argument gegen barrierefreie Layouts war bisher immer das langweilige Aussehen und mangelnde Unterstützung der Accessibility-Features durch die verschiedenen Browser.

Wie so oft zeigt sich das Web auch hier wieder von seiner besten Seite: mittlerweile haben viele Webdesigner stabile Layouts entwickelt, die teilweise sogar bis zu den 4er- und 5er-Browsern abwärtskompatibel sind. Layouts, die ein modernes Aussehen der Seiten auf den gängigsten Browsern garantieren und für kommerzielle Anbieter auch werblich einsetzbare Lösungen bieten. Und das Beste daran ist: die Entwickler stellen diese sogar kostenlos zur Verfügung, so daß Sie diese Bausteine für Ihren Webauftritt nutzen können.

Sie finden hier eine ganze Reihe von Vorlagen, die Sie für Ihre Arbeit einsetzen können. Diese Dateien haben alle eines gemeinsam:

Trennung von Inhalt und Verpackung:
Sie sind konsequent ohne Tabellen aufgebaut und nutzen so die Standards HTML und CSS komplett aus, um eine anspruchsvolle und doch flexible Darstellung zu ermöglichen.
Lesen Sie hier, warum die Trennung von Inhalt und Verpackung eine gute Idee ist und mehr Zugänglichkeit bringt.
Linearisierung der Inhalte:
Tabellen, insbesondere wenn sie zum Spaltensatz benutzt werden, zerstören die inhaltliche Struktur eines Textes und damit die logische Abfolge der Inhalte, die transportiert werden müssen. Mit CSS erhalten Sie ebendiese Struktur im Quelltext der Seite und machen sie somit nicht nur für alternativen Medien wie Sprachausgabe zugänglich.
Mehr über die Linearisierung von Inhalten

CSS-Layouts, geprüft und für gut befunden:

Die Style-Informationen sind bei den einfacheren Templates – zwecks leichterer Weiterverarbeitung – meistens eingebettet. So müssen Sie nur eine Datei speichern und sich nicht noch auf die Suche nach dem verlinkten Style Sheet machen.

YAML (X)HTML/CSS Framework
»Yet Another Multicolumn Layout« (kurz YAML) ist ein (X)HTML/CSS-Framework zur Erstellung moderner und flexibler Layouts. Dabei stehen ein möglichst hohes Maß an Flexibilität für den Webdesigner und Zugänglichkeit für die Nutzer im Vordergrund. Innerhalb eines Tutorials wird die Funktionsweise der einzelnen Bausteine erläutert.
ALA: Practical CSS Layout Techniques
Schritt-für-Schritt Anleitung zum CSS Layout.
CSS Edge - MeyerWeb.com
Herausragende Beispiele kreativer CSS-Positionierung von Eric Meyer.
CSS Enterprise
Eine Sammlung von Netscape 4-tauglichen dreispaltigen Layouts, CSS Experimenten, Hacks und Bugs.
Glish.com - CSS Layout Techniques
Mehrsplatige Layouts, auf den nötigsten Code reduziert. Quelltext wird mit in den Seiten angezeigt.
CSS Page Layout Templates
Seitentemplates mit XHTML 1 und CSS 2. Mehrere verschiedene Layouts.
ImaginaryWorld CSS Templates
Mehrere ein- und zweispaltige Layouts.
Little Boxes
CSS Layouts mit Workarounds für verschiedene Browserfehler.
Ruthsarian Layouts
Einfache Zwei- und Dreispalter, mit Beispiel eines horizontalen Menüs mit Rollover-Effekt.
The Layout Reservoir
Mehrspaltige Layouts und CSS-Techniken.
Three Column Layouts
Mehrere dreispaltige CSS-Layouts, teilweise Netscape 4-kompatibel.
WebDev - CSS Layout Templates
CSS Layout mit alternativen Style Sheets und Transparenz-Effekten.

Templates für Weblog-Systeme und CMSe

Inspiration: CSS-Galerien

Templates für Editoren

Auch die Hersteller von Editoren haben den Trend erkannt und bieten mittlerweile Vorlagen an, mit denen man in Ihren Tools barrierefreie Webseiten entwickeln kann. Das hat für viele den Vorteil, sich nicht erst noch in Sprachen wie XHTML und CSS einarbeiten zu müssen. Hier finden Sie eine Reihe von mehr oder weniger barrierefreien Templates, die Sie in Ihrer Arbeit mit Dreamweaver einsetzen können. Für Nutzer älterer Dreamweaver-Versionen gibt es eine englischsprachige Anleitung bei webaim.org.

Selbst für das vielgeschmähte Frontpage hat der Hersteller Microsoft mittlerweile eine Anleitung veröffnetlicht, wie man diesem Editor WCAG 1-konforme Seiten entlocken kann: www.microsoftfrontpage.com.