Teamarbeit
Ein gutes Design ist die Grundlage für die Barrierefreiheit. Daher sollten Programmierer und Designer eng zusammenarbeiten. Bereits in der Gestaltungsphase sollte geklärt werden, ob Sie als Programmierer den Entwurf problemlos barrierefrei umsetzen können. Bieten Sie Online-Redakteuren, die eine Website langfristig pflegen, Unterstützung an. Wenn möglich, sollten Sie das CMS so anpassen, dass fehlerhafte Eingaben vermieden werden.
Checkliste zur Auswahl eines barrierefreien CMS (PDF-Datei, 109 kB)
Umsetzung des Layouts
Das Layout sollten Sie durch Cascading Stylesheets (CSS) umsetzen. So können Sie die Seite an die Bedürfnisse verschiedener Nutzer anpassen. Positionieren Sie Bilder und andere Elemente durch Stylesheets. Verzichten Sie möglichst auf Layout-Tabellen und Layout-Grafiken. Falls Sie Layout-Tabellen verwenden, achten Sie darauf, dass die Reihenfolge der Tabellenzellen logisch ist. Das ist wichtig, weil Screenreader Zelle für Zelle von links nach rechts und von oben nach unten vorlesen. Falls Sie Layout-Grafiken einsetzen, sollten die Bilder ein leeres alt-Attribut erhalten. So kann vermieden werden, dass Screenreader unnötige Informationen vorlesen.
Flexibel programmieren
Viele sehbehinderte Menschen wählen niedrigere Auflösungen als 1024 mal 768 Pixel. Daher sollten Programmierer die Auflösungen 800 mal 600 Pixel und 640 mal 480 Pixel berücksichtigen. Bei 800 mal 600 Pixel sollte kein horizontaler Scrollbalken erscheinen. Bei 640 mal 480 Pixel muss zumindest der Text ohne Scrollen lesbar sein. Zu bedenken ist, dass ein Fließtext nicht gut lesbar ist, wenn nur ein Wort in einer Zeile erscheint. Die Website sollte sich auch nach der Vergrößerung von Schriften flexibel ändern. Achten Sie darauf, dass sich Texte und andere Bereiche nicht überlagern. Programmieren Sie die Seiten nicht nur für Ihren Lieblingsbrowser. Testen Sie die Seiten auf den verbreiteten Browsern. Falls Sie nicht mehrere Browser installieren wollen, können Sie mit Hilfe eines Browser-Emulators herausfinden, wie Ihre Website in verschiedenen Umgebungen dargestellt wird.
Text für alle
Nutzer mit verschiedenen Behinderungen sollen die gewünschten Informationen erhalten. Alle Elemente, die kein Text sind, brauchen daher eine Alternative. Blinde Nutzer benötigen Beschreibungen von Bildern, weil Screenreader nur Text vorlesen können. Gehörlose Menschen sind auf Beschreibungen von Tönen und Audio-Dateien angewiesen. Bei Filmen sollten Alternativen für gehörlose und blinde Menschen vorgesehen werden.
Informationen sollten immer als Text bereitstehen. Text sollte nicht in Form von Grafiken auf der Seite erscheinen. Alternative Beschreibungen der Schriftgrafiken genügen nicht, weil die Schrift für sehbehinderte Nutzer nicht verlustfrei vergrößert werden kann. Die Schrift ist dann unscharf und nur mit Mühe lesbar.
Navigieren unterstützen
Links sollen zeigen, wohin sie führen. Nur wenn Bezeichnungen von Links eindeutig sind, können Linklisten blinde Nutzer beim Navigieren unterstützen. Die Linklisten werden in einem extra Fenster und ohne Bezug zum Fließtext angezeigt. Wenn unklare Linktexte (zum Beispiel „mehr“ oder „weiter“) verwendet werden, können Programmierer Informationen über das Ziel in dem Link-Title ergänzen. Optimal ist, wenn Title und Linktext aussagekräftig sind, da Screenreader verschiedene Einstellungen ermöglichen.
Für blinde Nutzer können Sprungmarken das Navigieren erleichtern. Setzen Sie Anker, die das Umgehen von Bereichen ermöglichen. Am Anfang einer jeden Seite sollte mindestens eine Sprungmarke angeboten werden, die direkt zum Inhalt führt. Der Link sollte auch für Tastaturnutzer erkennbar sein. Stellen Sie an das Seitenende einen Link zum Seitenanfang. Bei längeren Texten sollte der Link nach oben nicht nur am Seitenende stehen, sondern auch nach längeren Absätzen. Dieser Link ist auch für manuell eingeschränkte Nutzer wichtig.
Beachten Sie bei der Webgestaltung, dass viele Menschen nur mit der Tastatur navigieren. Nicht jeder kann eine Maus bedienen. Alle Links und Menüpunkte sollten daher ohne Maus erreichbar und bedienbar sein. Wer nur mit der Tastatur navigiert, sollte den aktiven Link optisch gut erkennen. Auch ohne Farbe. Ändern Sie dafür die Gestaltung des Links über die Pseudoklasse „focus“ im CSS.
Accesskeys können Menschen mit manuellen Einschränkungen beim Navigieren unterstützen. Über die Tastenkombinationen können Menüpunkte einfach erreicht werden. Accesskeys sollten sparsam und nur für häufig benutzte Navigationspunkte verwendet werden (zum Beispiel für das Inhaltsverzeichnis oder die Startseite). Auf Tastenkombinationen mit Buchstaben sollten Sie verzichten. Weisen Sie Ihre Besucher auf die Bedienung der Accesskeys hin.
Gliederung von Inhalten
Unterteilen Sie lange Texte durch Überschriften (H1, H2, Hx) und Absätze (P). Aufzählungen werden überschaubar durch Listen (LI). Wichtig ist, dass Sie logische Tags verwenden. Optische Überschriften, die durch den BOLD-Tag ausgezeichnet sind, können blinde Nutzer nicht wahrnehmen. Auch umfassende Formulare können unterteilt werden. Verwenden Sie hierfür FIELDSET-Tags und für die Beschreibung das LEGEND-Element.
Zu empfehlen ist die Gliederung von Telefonnummern. Nach dem Einfügen von Leerzeichen werden die Zahlen verständlich vom Screenreader vorgelesen. Zweistellige Zahlen können sich Menschen besser merken als sechs- oder siebenstellige Zahlen.
An Standards ausrichten
Setzen Sie HTML und CSS korrekt ein. Richten Sie sich nach den Standards des W3Cs. Vermeiden Sie veraltete Elemente. Nicht eingesetzt werden sollten zum Beispiel die Tags font, blink oder applet. Ob Ihre Website valide ist, können Sie online überprüfen über:
Weiterführende Informationen zu den internationalen Standards der Barrierefreiheit finden Sie auf den Seiten der Web Accessibility Initiative (WAI).