{"id":5397,"date":"2021-04-23T19:01:28","date_gmt":"2021-04-23T17:01:28","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=5397"},"modified":"2022-07-17T18:56:35","modified_gmt":"2022-07-17T16:56:35","slug":"design-konzept-barrierefrei","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-konzept-barrierefrei\/","title":{"rendered":"Barrierefreies Web-Design und Web-Konzeption"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/webdesign.jpg\" alt=\"webdesign\" width=\"960\" height=\"640\" class=\"alignleft size-full wp-image-2985\" srcset=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/webdesign.jpg 960w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/webdesign-300x200.jpg 300w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/webdesign-768x512.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/>Die meisten Artikel zur digitalen Barrierefreiheit und barrierefreien Webseiten besch\u00e4ftigen sich mit HTML, am Rande mit CSS und JavaScript, aber es gibt relativ wenige Informationen zur barrierefreien Web-Konzeption und Design. Das m\u00f6chten wir in diesem Artikel anders machen. <a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/visuelle-text-gestaltung\/\">Barrierefreie Typografie<\/a>.<br \/>\nBarrierefreie Webseiten gelten zu unrecht als unattraktiv. Tats\u00e4chlich gibt es in den Web content Accessibility Guidelines, den ma\u00dfgeblichen Richtlinien, so gut wie keine harten Vorgaben f\u00fcr die visuelle Gestaltung von Webseiten. Das Meiste spielt sich unter der Oberfl\u00e4che ab, also im HTML.<br \/>\nDieser Beitrag wendet sich ausdr\u00fccklich an Personen, die das Design\/die Konzeption von Benutzer-Oberfl\u00e4chen \u00fcbernehmen. Nat\u00fcrlich ist es dennoch wichtig, eine kompetente Web-Entwickler:In zu haben, die nicht nur hier und da ein wenig ARIA hinzuf\u00fcgt.<br \/>\nDer Einfachheit halber gehen wir hier davon aus, dass Konzept und Design von einer Person gestaltet werden. <\/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-konzept-barrierefrei\/#Die_WCAG-Dokumente\" >Die WCAG-Dokumente<\/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-konzept-barrierefrei\/#111_Non-text_Content_Level_A\" >1.1.1 Non-text Content (Level A)<\/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-konzept-barrierefrei\/#131_Info_and_Relationships_Level_A\" >1.3.1 Info and Relationships (Level A)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-konzept-barrierefrei\/#133_Sensory_Characteristics_A\" >1.3.3 Sensory Characteristics (A)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-konzept-barrierefrei\/#134_Orientation\" >1.3.4 Orientation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-konzept-barrierefrei\/#141_Use_of_Color_a\" >1.4.1 Use of Color (a)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-konzept-barrierefrei\/#143_Contrast_Minimum_AA\" >1.4.3 Contrast (Minimum) (AA)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-konzept-barrierefrei\/#145_Images_of_Text_AA\" >1.4.5 Images of Text (AA)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-konzept-barrierefrei\/#148_Visual_Presentation_AAA\" >1.4.8 Visual Presentation (AAA)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-konzept-barrierefrei\/#149_Images_of_Text_No_Exception_AAA\" >1.4.9 Images of Text (No Exception) (AAA<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-konzept-barrierefrei\/#1412_Text_Spacing_AA\" >1.4.12 Text Spacing (AA)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-konzept-barrierefrei\/#Zustaende_bedenken\" >Zust\u00e4nde bedenken<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-konzept-barrierefrei\/#Checkliste_barrierefreies_Webdesign_und_Konzeption\" >Checkliste barrierefreies Webdesign und Konzeption<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Die_WCAG-Dokumente\"><\/span>Die WCAG-Dokumente<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Dieser Leitfaden kann nat\u00fcrlich nur eine erste Einf\u00fchrung sein. Wir empfehlen auf jeden Fall immer, in die relevanten Dokumente reinzuschauen. Dort werden die Aussagen spezifiziert, au\u00dferdem gibt es auch Hinweise auf Besonderheiten und Ausnahmen, die wir hier aus Platzgr\u00fcnden weglassen.<br \/>\nNoch eine kleine Einf\u00fchrung in die Dokumente. Ma\u00dfgeblich ist die WCAG in der jeweils aktuellen Form. Die WCAG ist kanonisch, sie wird also selten ge\u00e4ndert. Sie ist au\u00dferdem technik-agnostisch, das hei\u00dft, sie ist im Prinzip auf alle denkbaren User Interfaces und Dokument-Formen anwendbar. Sie besteht aus allgemeinen Prinzipien und Guidelines. Interessant sind aber die Erfolgskriterien\/Success Criteria, weil dort konkrete Anforderungen formuliert werden.<br \/>\nJedes Erfolgskriterium ist mit verschiedenen anderen Dokumenten verkn\u00fcpft. So gibt es die Dokumente &#8222;Understanding WCAG 2.x&#8220; und &#8222;How to meet WCAG 2.x&#8220;. Darin werden die Anforderungen in Bezug auf das Web konkretisiert, Techniken zur Umsetzung gezeigt sowie h\u00e4ufige Fehler.<br \/>\nWeiterhin wichtig sind die Erfolgsstufen\/Levels. Alle Erfolgskriterien sind den Levels A, AA und AAA zugeordnet. M\u00f6chte man ein Minimum an Barrierefreiheit\/Konformanz erreichen, m\u00fcssen alle Anforderungen auf Level A erf\u00fcllt werden. Basis-Standard in den meisten L\u00e4ndern der Welt ist Level AA. Das hei\u00dft, es m\u00fcssen alle Anforderungen von A und AA erf\u00fcllt werden. Level AAA ist der Goldstandard, es m\u00fcssen alle Erfolgskriterien der WCAG erf\u00fcllt werden. In der Praxis wird Level AAA f\u00fcr einen gesamten Web-Auftritt nicht angestrebt, da die Anforderungen nicht immer umsetzbar sind und sich teilweise widersprechen.<br \/>\nIn den WCAG gibt es relativ wenige konkrete Anforderungen an Konzept und Design. Das h\u00e4ngt damit zusammen, dass alle Erfolgskriterien testbar sein m\u00fcssen. Es ist aber schwierig zu sagen, ob eine bestimmte Schriftart lesbar ist und eine andere nicht. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"111_Non-text_Content_Level_A\"><\/span>1.1.1 Non-text Content (Level A)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Dieses Erfolgskriterium ist einfach zu beschreiben. Ihr m\u00fcsst sicherstellen, dass alle Nicht-Text-Elemente, das hei\u00dft insbesondere Bilder im Contentbereich, Informationsgrafiken, als Grafik eingebundene Buttons sowie verlinkte Grafiken eine textliche Beschreibung erhalten.<br \/>\nGerne vergessen wird das bei Social-Media-Buttons.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"131_Info_and_Relationships_Level_A\"><\/span>1.3.1 Info and Relationships (Level A)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Stehen Elemente in einem visuell erkennbaren Verh\u00e4ltnis zueinander, ist diese Struktur auch technisch erkennbar oder wird in Textform beschrieben.<br \/>\nF\u00fcr Blinde oder Sehbehinderte ist die visuelle Anordnung von Elementen nicht erkennbar. Sie ben\u00f6tigen zus\u00e4tzliche Informationen, um zu erkenne, ob und wie Elemente miteinander verkn\u00fcpft sind.<br \/>\nHier gibt es zahlreiche M\u00f6glichkeiten. Wichtig ist vor allem semantischer Code, um etwa Navigation, Fu\u00dfzeiele und so weiter zu kennzeichnen.<br \/>\nF\u00fcr Sehbehinderte k\u00f6nnt ihr ausprobieren, was passiert, wenn ihr die Stylesheets der Seite ausschaltet. Sind Element-Bl\u00f6cke noch erkennbar?<\/p>\n<h2><span class=\"ez-toc-section\" id=\"133_Sensory_Characteristics_A\"><\/span>1.3.3 Sensory Characteristics (A)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Eine Information oder Funktion wird nicht \u00fcber ein einzelnes sensorisches Merkmal vermittelt, z.B. \u00fcber Farbe, Form, Position und so weiter.<br \/>\nDer Hintergrund ist, dass Blinde, Sehbehinderte oder Personen mit anderen Sinnes-Einschr\u00e4nkungen eine Information eventuell nicht wahrnehmen oder interpretieren k\u00f6nnen, wenn sie \u00fcber eine visuelle Form vermittelt wird.<br \/>\nEs ist nicht verboten, Farben, Formen oder die Position von Elementen zur Kommunikation zu verwenden. Es sollte aber zumindest eine weitere, nicht auf dem gleiche Prinzip basierende Information vermittelt werden. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"134_Orientation\"><\/span>1.3.4 Orientation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Webseiten sollten so gestaltet sein, dass sie nicht auf eine bestimmte Bildschirm-Ausrichtung beschr\u00e4nkt sind. Die Nutzer:In sollte also nicht gezwungen sein, ihr Display auf eine bestimmte Weise zu halten, damit sie eine Webseite oder App nutzen kann.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"141_Use_of_Color_a\"><\/span>1.4.1 Use of Color (a)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Farbe wird nicht als einziges Mittel verwendet, um Information zu vermitteln. Es ist also nicht verboten, Farbe einzusetzen. Es muss aber mindestens ein weiterer Weg zur Informations-Vermittlung verwendet werden. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"143_Contrast_Minimum_AA\"><\/span>1.4.3 Contrast (Minimum) (AA)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Texte und visuelle Beschriftungen etwa bei Bedien-Elementen oder Informationsgrafiken sollen ein Kontrast-Verh\u00e4ltnis von mindestens 4,5:1 haben. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"145_Images_of_Text_AA\"><\/span>1.4.5 Images of Text (AA)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Sind Texte in Raster-Grafiken enthalten oder werden Texte \u00fcber Bilder dargestellt, sollte eine Text-Alternative bereit gestellt werden. Blinde, Seh- und lese-eingeschr\u00e4nkte Personen sind nicht bzw. nur schwer in der Lage, Text in Grafiken oder anderweitig verfremdeten Text zu lesen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"148_Visual_Presentation_AAA\"><\/span>1.4.8 Visual Presentation (AAA)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Hier gibt es strenge Vorgaben f\u00fcr die Darstellung von Text. So wird gefordert, dass eine Zeile maximal 80 Zeichen lang sein sollte , Text soll nicht als Blocksatz gesetzt sein und die Farbe von Text oder Hintergrund m\u00fcssen von der Nutzer*In einstellbar sein.<br \/>\nWie oben gesagt ist AAA relativ selten der Default-STandard, insofern muss diese Anforderung nur bei sehr hohen Anspr\u00fcchen an die Barrierefreiheit erf\u00fcllt werden.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"149_Images_of_Text_No_Exception_AAA\"><\/span>1.4.9 Images of Text (No Exception) (AAA<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bilder von Text sind nur bei bestimmten Ausnahmen wie Logos erlaubt und ansonsten verboten.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"1412_Text_Spacing_AA\"><\/span>1.4.12 Text Spacing (AA)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>An dieser Stelle gibt es einige Vorgaben zur visuellen Textgestaltung. Text soll lesbar sein, wenn er um 200 Prozent vergr\u00f6\u00dfert wird, daneben gibt es konkrete Vorgaben zu Zeichen-, Wort- und Zeilenabstand. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Zustaende_bedenken\"><\/span>Zust\u00e4nde bedenken<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die Vorgaben zu Kontrast und Farbe gelten bei allen Zust\u00e4nden, es sei denn, das jeweilige Element ist nicht aktivierbar. Das hei\u00dft, Kontraste und Farb-Vorgaben m\u00fcssen etwa auch im aktivierten Zustand, bei Fokus oder Maus Over erf\u00fcllt sein. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Checkliste_barrierefreies_Webdesign_und_Konzeption\"><\/span>Checkliste barrierefreies Webdesign und Konzeption<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Trennen Sie Struktur HTML, Layout Css un Verhalten JavaScript<br \/>\n\u00dcberlegen Sie stets, ob sich eine gew\u00fcnschte Funktion mit HTML erledigen l\u00e4sst, bevor Sie zu JavaScript greifen<br \/>\nSetzen Sie ARIA mit Bedacht ein und nur wenn Sie wissen, wie sich die ARIA-Funktionen auswirken werden. Falsch eingesetztes ARIA kann schlimmer sein als kein ARIA<br \/>\n\u00dcberlegen Sie stets, dass Informationen semantisch &#8211; also maschinenlesbar sein sollen.<br \/>\nAlle Funktionen sollen per Tastatur bedienbar sein.<br \/>\nDas Verhalten einer Website soll stets voraussehbar sein f\u00fcr den Nutzer<br \/>\nDer Nutzer muss die einzelnen Bereiche der Website gut unterscheiden k\u00f6nnen, zum Beispiel durch Wei\u00dfraum, Linien oder Farben.<br \/>\nEine Webseite muss auch funktionieren, wenn ihre Elemente linear, also eines nach dem Anderen angezeigt werden.<br \/>\nIn einem Formular m\u00fcssen Formularfeld und Beschriftung eindeutig maschinenlesbar miteinander verkn\u00fcpft sein.<br \/>\nBei dynamischen Inhalten wie Cookie-Bannern oder Men\u00fcs muss der assistiven Technologie die eingetretene \u00c4nderung sowie die neue Information, z.B. neue Navigationspunkte, mitgeteilt werden.<br \/>\nTabellen m\u00fcssen korrekt linearisiert sein, ansonsten sind sie f\u00fcr Blinde nicht verwendbar.<br \/>\nFarben und Farbkombinationen sollten von vorneherein so gew\u00e4hlt sein, dass sie die Mindestkontrastwerte erf\u00fcllen. Das gilt vor allem f\u00fcr Flie\u00dftext, interaktive Elemente und Infografiken.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die meisten Artikel zur digitalen Barrierefreiheit und barrierefreien Webseiten besch\u00e4ftigen sich mit HTML, am Rande mit CSS und JavaScript, aber es gibt relativ wenige Informationen&#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-konzept-barrierefrei\/\">Weiterlesen<span class=\"screen-reader-text\">Barrierefreies Web-Design und Web-Konzeption<\/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-5397","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/5397","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=5397"}],"version-history":[{"count":11,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/5397\/revisions"}],"predecessor-version":[{"id":9389,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/5397\/revisions\/9389"}],"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=5397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}