Ich stehe beim großen Thema Barrierefreiheit zugegeben erst am Anfang, da gibt es noch viel zu lernen. Aber ich hatte tatkräftige Hilfe von der Stiftung Pfennigparade, die erfahrenen Programmierer dort haben mir viele wertvolle Tipps gegeben, so daß ich mein Inselfisch-Kochbuch zumindest barrierearm und auch für Menschen mit Handicap gut zugänglich gestalten konnte. Das war für mich ein großer persönlicher Erfolg, und ich freue mich über stetig wachsende Besucherzahlen. Es war aber auch ein Haufen Arbeit, und ich möchte hier einige Tipps geben, die es anderen WordPress-Entwicklern und auch privaten Anwendern vielleicht leichter machen, barrierearme Webseiten zu erstellen.

Von Anfang an gut strukturieren: HTML Bascis

Die allermeiste Heidenarbeit war es, die Beiträge in meinem Kochbuch im nachhinein durchzustrukturieren und sinnvoll zu formatieren. Ich habe über 200 Rezepte manuell anfassen müssen, weil ich sie im Lauf der Jahre einfach so als Fließtexte erfasst hatte und keine vernünftige Dokumentstruktur drin hatte. Dabei ist es eigentlich ganz einfach: längere Textpassagen sind mit Zwischenüberschriften zu untergliedern, und diese sind in HTML ganz schlicht als h1, h2, h3… h6 auszuzeichnen. Wobei ich mehr als h3 noch nie gebraucht habe, für die meisten Zwecke reichen zwei Überschriften-Ebenen vollkommen aus. Der Fließtext dazwischen wird sinnvollerweise als Absatz (<p>) formatiert. Für Aufzählungen nimmt man ein <ul>, für nummerierte Listen ein <ol>. Reinstes HTML-Basic! All diese Strukturierungselemente stehen im visuellen Editor einwandfrei zur Verfügung, nur benutzen muß man sie auch!

Anwendungsbeispiel Kochrezept

Ich zeige zuerst einmal, wie man es nicht macht. Dieser Rezepttext wurde einfach so heruntergeschrieben und mag jedem einigermassen erfahrenen Hobbykoch etwas sagen, aber er ist grottenschlecht im Sinne der Barrierefreiheit weil gar nicht strukturiert. Das geht schon damit los, daß die eigentliche Überschrift mit im Fließtext klemmt und nur fett hervorgehoben wurde. Auch der Rest des Rezepts ist schlicht gar nicht strukturiert, das wird einfach so heruntergeplaudert und man kann schlecht erkennen, wo es jetzt um die Zutaten und wo es um die Zubereitung geht, und was da sonst noch stehen mag.

Das unstrukturierte Rezept

Curry-Bananen-Dip zum Fondue, oder auch zu Gegrilltem. Man braucht dafür eine richtig reife Banane, am Besten schon ein paar Tage vorher kaufen und reifen lassen, bis sie schön weich ist und cremig wird. Banane mit Limettensaft mit einer Gabel fein zermusen, Salz und soviel Currypulver darangeben daß es deutlich scharf, aber noch angenehm schmeckt. Sofort servieren, oder den Dip mit zusätzlich etwas Limettensaft beträufeln, er verfärbt sich sonst braun. Nach einem guten, würzigen aber nicht penetranten Currypulver muß man ein wenig suchen, die aus dem Supermarkt sind meistens nicht so überragend. Wenn man kein anderes kriegt, eher weniger Currypulver verwenden und die nötige Schärfe mit ein paar Tropfen Tabasco oder etwas Sambal Oelek herbeizaubern.

Da muß Struktur rein! Ein Kochrezept besteht ja bei mir meistens aus 4 Komponenten:

1. einer Einleitung, in der ich ein paar nette Worte über Herkunft und Besonderheiten des Rezeptes erzähle,
2. einer Zutatenliste,
3. der eigentlichen Zubereitung
4. und dann noch ein oder mehrere Tipps zum Rezept.

Ja dunnerlittchen, da sind mir vielleicht die Schuppen aus den Haaren gefallen, als mir der nette Herr Programmierer von der Pfennigparade erklärte, daß das als Strukturierung vollständig ausreichte, ich müßte es nur auch in HTML umsetzen!

Und das geht so: Zwischenüberschriften rein und mit Überschrift 2 formatieren, Überschrift 1 ist schon vergeben, die hat in WordPress der Beitragstitel. Zutaten und Zubereitung klar trennen, die Tipps einzeln ans Ende setzen. Das sieht dann so aus:

Das gut strukturierte Rezept: