{"id":230,"date":"2017-02-18T13:59:03","date_gmt":"2017-02-18T12:59:03","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=230"},"modified":"2017-02-18T13:59:03","modified_gmt":"2017-02-18T12:59:03","slug":"barrierefreiheit-fuer-den-hausgebrauch","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2017\/02\/18\/barrierefreiheit-fuer-den-hausgebrauch\/","title":{"rendered":"Barrierefreiheit f\u00fcr den Hausgebrauch: Strukturierung"},"content":{"rendered":"

Ich stehe beim gro\u00dfen Thema Barrierefreiheit zugegeben erst am Anfang, da gibt es noch viel zu lernen. Aber ich hatte tatkr\u00e4ftige Hilfe von der Stiftung Pfennigparade, die erfahrenen Programmierer dort haben mir viele wertvolle Tipps gegeben, so da\u00df ich mein Inselfisch-Kochbuch<\/a> zumindest barrierearm und auch f\u00fcr Menschen mit Handicap gut zug\u00e4nglich gestalten konnte. Das war f\u00fcr mich ein gro\u00dfer pers\u00f6nlicher Erfolg, und ich freue mich \u00fcber stetig wachsende Besucherzahlen. Es war aber auch ein Haufen Arbeit, und ich m\u00f6chte hier einige Tipps geben, die es anderen WordPress-Entwicklern und auch privaten Anwendern vielleicht leichter machen, barrierearme Webseiten zu erstellen.<\/p>\n

Von Anfang an gut strukturieren: HTML Bascis<\/h2>\n

Die allermeiste Heidenarbeit war es, die Beitr\u00e4ge in meinem Kochbuch im nachhinein durchzustrukturieren und sinnvoll zu formatieren. Ich habe \u00fcber 200 Rezepte manuell anfassen m\u00fcssen, weil ich sie im Lauf der Jahre einfach so als Flie\u00dftexte erfasst hatte und keine vern\u00fcnftige Dokumentstruktur drin hatte. Dabei ist es eigentlich ganz einfach: l\u00e4ngere Textpassagen sind mit Zwischen\u00fcberschriften 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\u00fcr die meisten Zwecke reichen zwei \u00dcberschriften-Ebenen vollkommen aus. Der Flie\u00dftext dazwischen wird sinnvollerweise als Absatz (<p>) formatiert. F\u00fcr Aufz\u00e4hlungen nimmt man ein <ul>, f\u00fcr nummerierte Listen ein <ol>. Reinstes HTML-Basic! All diese Strukturierungselemente stehen im visuellen Editor einwandfrei zur Verf\u00fcgung, nur benutzen mu\u00df man sie auch!<\/p>\n

Anwendungsbeispiel Kochrezept<\/h2>\n

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\u00df die eigentliche \u00dcberschrift mit im Flie\u00dftext 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.<\/p>\n

Das unstrukturierte Rezept<\/h2>\n
\n

Curry-Bananen-Dip<\/strong> zum Fondue, oder auch zu Gegrilltem. Man braucht daf\u00fcr eine richtig reife Banane, am Besten schon ein paar Tage vorher kaufen und reifen lassen, bis sie sch\u00f6n weich ist und cremig wird. Banane mit Limettensaft mit einer Gabel fein zermusen, Salz und soviel Currypulver darangeben da\u00df es deutlich scharf, aber noch angenehm schmeckt. Sofort servieren, oder den Dip mit zus\u00e4tzlich etwas Limettensaft betr\u00e4ufeln, er verf\u00e4rbt sich sonst braun. Nach einem guten, w\u00fcrzigen aber nicht penetranten Currypulver mu\u00df man ein wenig suchen, die aus dem Supermarkt sind meistens nicht so \u00fcberragend. Wenn man kein anderes kriegt, eher weniger Currypulver verwenden und die n\u00f6tige Sch\u00e4rfe mit ein paar Tropfen Tabasco oder etwas Sambal Oelek herbeizaubern.<\/span><\/p>\n

\n

Da mu\u00df Struktur rein! Ein Kochrezept besteht ja bei mir meistens aus 4 Komponenten:<\/p>\n

    \n
  1. einer Einleitung, in der ich ein paar nette Worte \u00fcber Herkunft und Besonderheiten des Rezeptes erz\u00e4hle,<\/li>\n
  2. einer Zutatenliste,<\/li>\n
  3. der eigentlichen Zubereitung<\/li>\n
  4. und dann noch ein oder mehrere Tipps zum Rezept.<\/li>\n<\/ol>\n

    Ja dunnerlittchen, da sind mir vielleicht die Schuppen aus den Haaren gefallen, als mir der nette Herr Programmierer von der Pfennigparade erkl\u00e4rte, da\u00df das als Strukturierung vollst\u00e4ndig ausreichte, ich m\u00fc\u00dfte es nur auch in HTML umsetzen!<\/p>\n

    Und das geht so: Zwischen\u00fcberschriften rein und mit \u00dcberschrift 2 formatieren, \u00dcberschrift 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:<\/p>\n

    Das gut strukturierte Rezept:<\/h2>\n
    \n
    \n

    Curry-Bananen-Dip<\/h1>\n<\/header>\n
    \n
    \n

    Einleitung<\/h2>\n

    Zum Fondue, oder auch zu Gegrilltem. Man braucht daf\u00fcr eine richtig reife Banane, am Besten schon ein paar Tage vorher kaufen und reifen lassen, bis sie sch\u00f6n weich ist und cremig wird.<\/p>\n

    Zutaten<\/h2>\n

    1 reife Banane, Saft 1 Limette, wenig Salz, 1-2 Teel. gutes Currypulver.<\/p>\n

    Zubereitung<\/h2>\n

    Banane mit dem Limettensaft mit einer Gabel fein zermusen, Salz und soviel Currypulver darangeben da\u00df es deutlich scharf, aber noch angenehm schmeckt. Sofort servieren, oder den Dip mit zus\u00e4tzlich etwas Limettensaft betr\u00e4ufeln, er verf\u00e4rbt sich sonst braun.<\/p>\n

    Tipp:<\/h2>\n

    Nach einem guten, w\u00fcrzigen aber nicht penetranten Currypulver mu\u00df man ein wenig suchen, die aus dem Supermarkt sind meistens nicht so \u00fcberragend. Wenn man kein anderes kriegt, eher weniger Currypulver verwenden und die n\u00f6tige Sch\u00e4rfe mit ein paar Tropfen Tabasco oder etwas Sambal Oelek herbeizaubern.<\/p>\n

    \n

    Fazit<\/h2>\n

    Da staunste, was? Die Strukturierung im Sinne der Barrierefreieheit hat das Rezept wesentlich \u00fcbersichtlicher gemacht und auch f\u00fcr „normale“ Besucher besser zu lesen. Das ist \u00fcbrigens ein angenehmer Nebeneffekt bei der Gestaltung im Sinne der Accessibility, wie das auf neudeutsch hei\u00dft: es tut der Lesbarkeit und der Verst\u00e4ndlichkeit der meisten Texte gut, wenn man auf eine saubere Strukturierung achtet.<\/p>\n

    Aber trotzdem, 200 Rezepte nachtr\u00e4glich strukturieren, das mach ich nicht nochmal, das war eine Mordsarbeit. Jetzt schau ich halt, da\u00df ich die Rezepte gleich von Anfang an richtig strukturiere und formatiere, und gut ists.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    Ich stehe beim gro\u00dfen Thema Barrierefreiheit zugegeben erst am Anfang, da gibt es noch viel zu lernen. Aber ich hatte tatkr\u00e4ftige Hilfe von der Stiftung Pfennigparade, die erfahrenen Programmierer dort haben mir viele wertvolle Tipps gegeben, so da\u00df ich mein Inselfisch-Kochbuch zumindest barrierearm und auch f\u00fcr Menschen mit Handicap gut zug\u00e4nglich gestalten konnte. Das war […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,15,11,2],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/230"}],"collection":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/comments?post=230"}],"version-history":[{"count":2,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/230\/revisions"}],"predecessor-version":[{"id":232,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/230\/revisions\/232"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}