{"id":4359,"date":"2020-07-04T18:04:52","date_gmt":"2020-07-04T16:04:52","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=4359"},"modified":"2020-07-04T19:47:11","modified_gmt":"2020-07-04T17:47:11","slug":"die-haeufigsten-fehler-in-der-web-barrierefreiheit","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/die-haeufigsten-fehler-in-der-web-barrierefreiheit\/","title":{"rendered":"Die h\u00e4ufigsten Fehler in der Web-Barrierefreiheit"},"content":{"rendered":"<p>Da ich h\u00e4ufiger gebeten werden, die h\u00e4ufigsten Fehler bei der Web-Barrierefreiheit zu bennen, z\u00e4hle ich diese hier kurz auf.<\/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\/die-haeufigsten-fehler-in-der-web-barrierefreiheit\/#Dynamische_Elemente\" >Dynamische Elemente<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/die-haeufigsten-fehler-in-der-web-barrierefreiheit\/#Spezialfall_Layer_und_Cookies\" >Spezialfall: Layer und Cookies<\/a><\/li><\/ul><\/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\/die-haeufigsten-fehler-in-der-web-barrierefreiheit\/#Falsch_eingesetztes_HTML\" >Falsch eingesetztes HTML<\/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\/die-haeufigsten-fehler-in-der-web-barrierefreiheit\/#Tastatur-Bedienbarkeit\" >Tastatur-Bedienbarkeit<\/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\/die-haeufigsten-fehler-in-der-web-barrierefreiheit\/#Linearisierbarkeit\" >Linearisierbarkeit<\/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\/die-haeufigsten-fehler-in-der-web-barrierefreiheit\/#Informationen_werden_nur_ueber_Farbe_vermittelt\" >Informationen werden nur \u00fcber Farbe vermittelt<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Dynamische_Elemente\"><\/span>Dynamische Elemente<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Dynamische Elemente sind Inhalte auf Webseiten, die auf- und zugeklappt werden k\u00f6nnen und ohne Neuladen der Webseite geladen werden k\u00f6nnen. Dazu geh\u00f6ren ausklappende Navigationen oder Auto-Suggest-Vorschl\u00e4ge in Suchformularen. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"Spezialfall_Layer_und_Cookies\"><\/span>Spezialfall: Layer und Cookies<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Overlays oder dynamische Dialog-Felder sind sehr h\u00e4ufig nicht barrierefrei: Sie sind nicht per Tastatur erreichbar und bleiben f\u00fcr Blinde oft unsichtbar. Im Worst Case sperren Layer den Nutzer aus, so dass er nicht an die Inhalte kommt oder keine Aktion ausl\u00f6sen kann, den Layer aber nicht entfernen kann. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Falsch_eingesetztes_HTML\"><\/span>Falsch eingesetztes HTML<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Falsch eingesetztes HTML gibt es in zwei Formen: Zum Einen kann HTML eingesetzt werden, um typgrafische Effekte zu erzeugen, etwa blockquote zur Einr\u00fcckung von Bl\u00f6cken.<br \/>\nZum Anderen und h\u00e4ufiger werden Elemente nicht mit HTML erzeugt, obwohl dies geschehen sollte. Beispielsweise werden Formular-Elemente mit JavaScript erzeugt und anschlie\u00dfend anklickbar oder ausf\u00fcllbar gemacht. Sie funktionieren dann wunderbar mit der Maus, nicht aber f\u00fcr den Screenreader-Nutzer.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tastatur-Bedienbarkeit\"><\/span>Tastatur-Bedienbarkeit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>H\u00e4ufig sind die Basis-Funktionen der Website per Tastatur bedienbar, andere Elemente aber nicht. So lassen sich die Hauptpunkte einer Navigation per Tastatur aktivieren, aber die Unterpunkte klappen nicht aus und sind somit nicht erreichbar.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Linearisierbarkeit\"><\/span>Linearisierbarkeit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Leider ist auch die Linearisierbarkeit von Inhalten h\u00e4ufig eingeschr\u00e4nkt. Oft trifft man auf Tabellen, die nicht korreckt umgesetzt wurden. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Informationen_werden_nur_ueber_Farbe_vermittelt\"><\/span>Informationen werden nur \u00fcber Farbe vermittelt<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>H\u00e4ufig werden Informationen nur ein visuell oder \u00fcber Farben vermittelt. Beispiele sind:<br \/>\n&#8222;Korrigieren Sie das rot markierte Feld.&#8220;<br \/>\n&#8222;Klicken Sie auf den unterstrichenen Link.&#8220;<br \/>\n&#8222;Die Information finden Sie auf der rechten Seite.&#8220;<br \/>\nF\u00fcr Menschen mit anderen Farb-Schemata, Farbenblinde und Blinde sind rein visuell vermittelte schwer oder gar nicht zug\u00e4nglich. So gibt es f\u00fcr Blinde kein &#8222;links&#8220; oder &#8222;rechts&#8220; bei grafischen Benutzer-Oberfl\u00e4chen. Sie erfassen immer nur das Element, dass der Screenreader aktuell fokussiert hat. Sie k\u00f6nnen eingeschr\u00e4nkt die Hierarchie von Elementen erfassen wie einem Informationsbaum, aber sie sehen die Webseite nie als Ganzes. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Da ich h\u00e4ufiger gebeten werden, die h\u00e4ufigsten Fehler bei der Web-Barrierefreiheit zu bennen, z\u00e4hle ich diese hier kurz auf. Dynamische Elemente Dynamische Elemente sind Inhalte&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/die-haeufigsten-fehler-in-der-web-barrierefreiheit\/\">Weiterlesen<span class=\"screen-reader-text\">Die h\u00e4ufigsten Fehler in der Web-Barrierefreiheit<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":556,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4359","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/4359","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=4359"}],"version-history":[{"count":3,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/4359\/revisions"}],"predecessor-version":[{"id":4362,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/4359\/revisions\/4362"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/556"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=4359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}