{"id":672,"date":"2018-03-22T16:03:08","date_gmt":"2018-03-22T14:03:08","guid":{"rendered":"http:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=672"},"modified":"2023-07-24T19:10:02","modified_gmt":"2023-07-24T17:10:02","slug":"design-patterns-und-best-practices","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-patterns-und-best-practices\/","title":{"rendered":"Prinzipien, Design Patterns und Best Practices"},"content":{"rendered":"<p>Wer neu in den Komplex barrierefreies Internet einsteigt ist sehr bald mit einem gro\u00dfen Regelwerk und unz\u00e4hligen Abk\u00fcrzungen konfrontiert. Das WAI hat sich sicherlich sehr viel M\u00fche gegeben, aber die eher <a href=\"https:\/\/w3c.github.io\/wai-website\/\">textlastigen Seiten<\/a> laden nicht zum St\u00f6bern ein. Eine Alternative zu Richtlinien und Anleitungen k\u00f6nnen Best Practice Beispiele und Design Patterns sein. Design Patterns werden auch als Entwurfsmuster bezeichnet. Die Entwurfsmuster machen sich die Mustererkennung zunutze, die ich <a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/hilfstechnik-und-mensch-maschine-interaktion\/rolle-der-muster-erkennung\/\">anderer Stelle beschrieben habe<\/a>.<br \/>\nDie <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\">WCAG<\/a> selbst l\u00e4dt ebenfalls nicht zur Lekt\u00fcre ein, ebenso k\u00f6nnte man das Telefonbuch von Bonn lesen, um etwas \u00fcber die Stadt Bonn zu erfahren, steht ja alles drin.<br \/>\nDas eigentliche Problem ist folgendes: Der Entwickler steht vor einem konkreten Problem, dass er \u2013 wahrscheinlich sogar  unter Zeitdruck \u2013 l\u00f6sen muss. Auch wenn er wollte h\u00e4tte er nicht die Mu\u00dfe, die WCAG zu lesen oder sich umfassend in die Barrierefreiheit einzuarbeiten.<br \/>\nDie WCAG ist zwar in logische Abschnitte gegliedert, aber sie ist gleichzeitig so aufgebaut, dass man sie mehr oder weniger vollst\u00e4ndig kennen oder zumindest ihre Logik verstehen muss, um ein konkretes Problem zu l\u00f6sen. Nehmen wir an, ich m\u00f6chte ein barrierefreies Bestelformular erstellen. Es gibt daf\u00fcr keine Regel in der WCAG und auch keinen Regelkomplex, in Wirklichkeit muss ich sehr viele unterschiedliche Regeln und ihr Zusammenspiel verstehen, um meiner Aufgabe nachzukommen.<br \/>\nAber auch wenn man sich mit der WCAG angefreundet hat, ist man noch nicht fertig. Es gibt eine Verschr\u00e4nkung der WCAG mit anderen Dokumenten, die man ebenso kennen sollte, die <a href=\"https:\/\/www.w3.org\/TR\/WCAG-TECHS\/\">Techniques<\/a> zum Beispiel. Zudem erfordert es eine Kenntnis der Hilfsmittel, insbesondere des Verhaltens g\u00e4ngiger Screenreader. Viele Webdesigner regen sich schon dar\u00fcber auf, wenn sie f\u00fcr verschiedene Browser entwickeln m\u00fcssen, die Komplexit\u00e4t der Barrierefreiheit ist noch wesentlich h\u00f6er.<br \/>\nIm Ergebnis f\u00fchrt das dazu, dass Barrierefreiheit spezielles Expertenwissen bleibt. In den Lehrpl\u00e4nen von Webdesignern und Entwicklern spielt sie kaum eine Rolle und selbst wenn sie das t\u00e4te w\u00fcrden sich diese Menschen wohl nicht damit herumschlagen. Wer von euch hat das letzte Mal in die Spezifikationen von HTML 4.01 oder CSS 2.1 reingeguckt? <\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-patterns-und-best-practices\/#Patterns_und_Best_Practices\" >Patterns und Best Practices<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-patterns-und-best-practices\/#Vor-_und_Nachteile\" >Vor- und Nachteile<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-patterns-und-best-practices\/#Auf_der_Suche_nach_der_Loesung\" >Auf der Suche nach der L\u00f6sung<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Patterns_und_Best_Practices\"><\/span>Patterns und Best Practices<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Als Alternative bieten sich zwei L\u00f6sungswege an: Design Patterns und Best Practice-Beispiele.<\/p>\n<p>eine Best Practice ist eine fertige L\u00f6sung, die sich in der Praxis bew\u00e4hrt hat. Jeder stand sicher mal vor einem Problem und stie\u00df auf eine derma\u00dfen elegante L\u00f6sung, dass er sie einfach \u00fcbernommen hat. Das ist nicht mit Klauen oder Plagieren zu verwechseln, man kann ein konkretes Design sch\u00fctzen, aber nicht eine Idee.<br \/>\nW\u00e4hrend eine Best Practice eine fertige L\u00f6sung ist beschreibt ein Entwurfsmuster den L\u00f6sungsweg, ohne eine finale L\u00f6sung vorzugeben. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Vor-_und_Nachteile\"><\/span>Vor- und Nachteile<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Eine Best Practice hat den Vorteil, dass sie sich in der Praxis bereits bew\u00e4hrt hat. Da fast alle denkbaren Probleme in der Praxis schon einmal gel\u00f6st wurden w\u00e4re es schlicht Zeitverschwendung, eine neue L\u00f6sung zu entwickeln, die gegen\u00fcber der alten keine Vorteile hat. Die bestehende L\u00f6sung kann an die jeweiligen Anforderungen angepasst werden.<br \/>\nNachteile gibt es nat\u00fcrlich auch. So ist es bei einer Best Practice L\u00f6sung recht einfach, den Code zu klauen. Jeder kann \u00fcber den Browser HTML und JavaScript einsehen, sich den Code kopieren, ein wenig ver\u00e4ndern und hat sich viel Arbeit gespart. Das ist allerdings der Preis eines freien Webs und kommt meines Wissens nicht so h\u00e4ufig vor.<br \/>\nZudem kann es nat\u00fcrlich immer passieren, dass man gerade f\u00fcr das eigene Problem nicht die beste, sondern die erstbeste L\u00f6sung findet. Vor allem, wenn man nicht gro\u00df Ahnung von Barrierefreiheit hat und die Qualit\u00e4t der L\u00f6sung nicht beurteilen kann richtet man eventuell mehr Schaden als Nutzen an. Da es viele mit dem Testen auch nicht so genau nehmen d\u00fcrfte das in der Praxis h\u00e4ufiger vorkommen.<br \/>\nHier greifen Design Patterns. Sie beschreiben die konkreten Anforderungen an eine L\u00f6sung, der Entwickler muss sich also mit dem Problem besch\u00e4ftigen und kann anhand der Vorgaben evaluieren, ob seine L\u00f6sung die Anforderungen erf\u00fcllt. Ein Nachteil kann sein, dass er daf\u00fcr mehr Zeit aufwenden muss als wenn er die L\u00f6sung einfach von einer Best Practice kopiert. Ich behaupte aber mal, der Lerneffekt ist bei Patterns h\u00f6her als bei Best Practices. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Auf_der_Suche_nach_der_Loesung\"><\/span>Auf der Suche nach der L\u00f6sung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wie schon beschrieben besteht das Kernproblem im geringen Wissen der Verantwortlichen zur Barrierefreiheit. Der Einstieg in das Thema ist recht schwierig, so dass f\u00fcr die schnelle L\u00f6sung zwischendurch ein hoher Bedarf besteht.<br \/>\nDas Problem ist nun, dass es im deutschsprachigen Web keine zentrale Anlaufstelle f\u00fcr Best Practice oder Patterns gibt. Sich die L\u00f6sungen \u00fcber eine Suchmaschine zu suchen ist \u00e4u\u00dferst schwierig. Eine Suchmaschine kann nicht beurteilen, ob eine L\u00f6sung gut ist oder dem aktuellen Stand entspricht.<br \/>\nDa die deutschsprachige Diskussion zum barrierefreien Web ohnehin ins Stocken geraten ist scheint man heute ohnehin gezwungen zu sein, auf das englischsprachige Web auszuweichen. Auch hier ist mir keine zentrale Anlaufstelle bekannt. Die Techniques scheinen eine gute Basis zu sein, allerdings ist fraglich, ob man dort alle L\u00f6sungen findet.<br \/>\nUm den Entwicklern unter die Arme zu greifen w\u00e4re daher eine zentrale Datenbank hilfreich, die alle L\u00f6sungen sammelt bzw. verlinkt. Die Experten und andere Entwickler k\u00f6nnten die L\u00f6sungen oder Patterns bewerten, anpassen, erg\u00e4nzen und weiter entwickeln, sofern das n\u00f6tig ist.<br \/>\n<a href=\"https:\/\/netz-barrierefrei.de\/en\/design-pattern.html\">Design Patterns for digital accessibility<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wer neu in den Komplex barrierefreies Internet einsteigt ist sehr bald mit einem gro\u00dfen Regelwerk und unz\u00e4hligen Abk\u00fcrzungen konfrontiert. Das WAI hat sich sicherlich sehr&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-patterns-und-best-practices\/\">Weiterlesen<span class=\"screen-reader-text\">Prinzipien, Design Patterns und Best Practices<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":663,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-672","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/comments?post=672"}],"version-history":[{"count":14,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/672\/revisions"}],"predecessor-version":[{"id":8152,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/672\/revisions\/8152"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/663"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}