{"id":823,"date":"2018-03-28T14:52:14","date_gmt":"2018-03-28T12:52:14","guid":{"rendered":"http:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=823"},"modified":"2023-08-24T18:16:53","modified_gmt":"2023-08-24T16:16:53","slug":"einfache-tests","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreiheit-von-webseiten-testen\/einfache-tests\/","title":{"rendered":"Schnell-Test &#8211; Webseiten einfach auf Barrierefreiheit pr\u00fcfen"},"content":{"rendered":"<p>Ich will im Folgenden ein paar Testm\u00f6glichkeiten aufzeigen, die auch von technisch unversierten Menschen durchgef\u00fchrt werden k\u00f6nnen. Alles was man braucht ist ein Browser und Geduld. <a href=\"https:\/\/www.silta.ai\/webseiten-auf-barrierefreiheit-testen\">Lernen Sie in unserer Schulung, wie Sie Webseiten auf Barrierefreiheit testen<\/a>. Vom Einsatz des <a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/warum-der-bitv-test-einen-relaunch-braucht\/\">DIAS-Tests aka BITV-Tests m\u00fcssen wir leider abraten<\/a>. <\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 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\/barrierefreiheit-von-webseiten-testen\/einfache-tests\/#Tastaturbedienbarkeit\" >Tastaturbedienbarkeit<\/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\/barrierefreiheit-von-webseiten-testen\/einfache-tests\/#Formulare\" >Formulare<\/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\/barrierefreiheit-von-webseiten-testen\/einfache-tests\/#Vergroesserbarkeit\" >Vergr\u00f6\u00dferbarkeit<\/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\/barrierefreiheit-von-webseiten-testen\/einfache-tests\/#Quellcode\" >Quellcode<\/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\/barrierefreiheit-von-webseiten-testen\/einfache-tests\/#Fazit\" >Fazit<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Tastaturbedienbarkeit\"><\/span>Tastaturbedienbarkeit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Eine wichtige S\u00e4ule der Barrierefreiheit ist die Tastaturbedienbarkeit. Im ersten Schritt legen wir also die Maus bei Seite.<br \/>\nDer Kern der Tastaturbedienung ist die Tabulator-Taste. Mit dieser Taste kann man von Element zu Element springen. Im ersten Schritt versuchen wir also, alle anklickbaren oder ausf\u00fcllbaren Elemente der Website anzuspringen. Bei jedem anklickbaren Element sollte eine \u00c4nderung des angetabbten Elements eintreten. In der Regel ist das ein Rahmen, es kann aber auch eine farbliche \u00c4nderung oder auch eine Unterstreichung bei Links sein. Eine rein farbliche \u00c4nderung kann f\u00fcr Farbblinde oder Sehbehinderte problematisch sein. Entweder nehmen sie die \u00c4nderung nicht wahr oder sie k\u00f6nnen etwa einen Link wegen einer schlechten Farbauswahl nicht mehr lesen. Grunds\u00e4tzlich ist es sinnvoll, die Information \u00fcber zwei Wege zu vermitteln: also etwa eine Unterstreichung und eine Farb\u00e4nderung, Farb\u00e4nderung und Rahmen und so weiter. Im Folgenden gehe ich davon aus, dass der angetabbte Zustand als Rahmen deutlich gemacht wird.<br \/>\nMit der Return- oder Leertaste sollten wir Links, Buttons und alles andere Klickbare versuchen zu aktivieren. Wenn es keine deutlich sichtbare \u00c4nderung im angetabbten Zustand gibt oder beim Klicken nichts passiert, haben wir schon ein Barrierefreiheits-Problem aufgesp\u00fcrt.<br \/>\nAu\u00dferdem sollte der Tabulator nicht an irgendeiner Stelle der Seite h\u00e4ngen bleiben. Wenn wir das letzte Element auf der Website erreicht haben, springt der Tab hoffentlich wieder auf das erste Klickbare Element auf der Webseite oder in die Adresszeile des Browsers. Dr\u00fccken wir gleichzeitig Shift und Tab, k\u00f6nnen wir r\u00fcckw\u00e4rts tabben.<br \/>\nWir greifen nun &#8211; ausnahmsweise &#8211; zur Maus und pr\u00fcfen, ob wir bei klickbaren Elementen eine deutliche Hervorhebung sehen k\u00f6nnen. Das dient vor allem Sehbehinderten oder Menschen mit motorischen Einschr\u00e4nkungen. Sie setzen vielleicht die Maus ein, sind aber wesentlich unsicherer als Sehende. Sie m\u00fcssen deutlich erkennen k\u00f6nnen, dass ein Element klickbar ist und brauchen eine hinreichend gro\u00dfe Klickfl\u00e4che. \u00dcblich ist hier eine farbliche Ver\u00e4nderung bei Links oder Formularelementen, ein Rahmen oder \u00c4hnliches.<br \/>\nBesonderes Augenmerk sollten wir au\u00dferdem noch auf Elemente legen, die dynamisch eingeblendet werden, also ohne dass die Seite neu geladen wird. Das sind zum Beispiel dynamisch aufklappende Men\u00fcs. Wenn wir &#8211; immer noch mit der Tastatur &#8211; auf den entsprechenden Link kommen, sollte das Men\u00fc nach einem Druck auf Return aufklappen und aufgeklappt bleiben. Wir k\u00f6nnen nun alle Links in diesem aufgeklappten Men\u00fcpunkt durchgehen und sollten auch einen davon ausprobieren. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Formulare\"><\/span>Formulare<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In n\u00e4chsten Schritt sollten wir noch einen speziellen Blick auf Formulare werfen. Zun\u00e4chst einmal tabben wir einmal quer durch das Formular. Die Tabreihenfolge sollte logisch sein, dass hei\u00dft, so wie die Elemente  auf der Website angeordnet sind, sollten sie auch angetabbt werden. Hier kann das seltsamste Zeug passieren, zum Beispiel springt der Cursor von der Auswahl der Ansprache zur Eingabe des Stra\u00dfennamens und \u00fcbergeht die Eingabe des Personennamens. Wenn man die Stadt eingegeben hat, springt der Cursor auf einmal zum Vornamen. Das ist nicht nur verwirrend, sondern nervig, weil wir so an ein bestimmtes Ausf\u00fcll-Schema gew\u00f6hnt sind, dass wir ein solches Verhalten als st\u00f6rend empfinden.<br \/>\nNach der korrekten Tabreihenfolge pr\u00fcfen wir, ob  wir alle Auswahlboxen aktivieren oder deaktivieren k\u00f6nnen. Das machen wir mit der Leertaste, nicht mit Return! Jede Checkbox und jeder Radiobutton sollte nur mit der Tastatur ausgew\u00e4hlt werden k\u00f6nnen. Bei Auswahllisten, die man aufklappen kann, sollte man mit der Cursor-auf und Cursor-ab-Taste die gew\u00fcnschte Option ausw\u00e4hlen k\u00f6nnen. Wenn man sich auf der Auswahlliste befindet, kann man sie mit der Alt und der Cursor-Runter-Taste hoffentlich aufklappen. Unter keinen Umst\u00e4nden sollte bei jeder Cursor-Bewegung in der Auswahlliste die Seite oder der Seiteninhalt neu geladen werden. Dynamische \u00c4nderungen in Formularen sind vor allem mit \u00e4lterer Hilfstechnik generell sehr problematisch.<br \/>\nWir k\u00f6nnen au\u00dferdem testen, ob unsere Eingabefelder gelabelt sind. Das Label ist eine Verkn\u00fcpfung aus Text und Eingabefeld, damit Sehbehinderte und Blinde wissen, was sie wo eingeben sollen. Wenn ihr mit der Maus auf eine Beschriftung wie etwa &#8222;Stra\u00dfe&#8220; doppeltippt, sollte die Schreibmarke direkt in dieses Eingabefeld springen.<br \/>\nIm letzten Formularschritt geben wir ein paar Daten ein und schauen, ob wir diese Daten mit der Tastatur abschicken k\u00f6nnen. Es gibt wohl nichts \u00c4rgerlicheres als ein ausgef\u00fclltes Formular, welches sich nicht abschicken l\u00e4sst. Wir geben also zu den Feldern passende Daten ein und schicken es ab. Man sollte dem Empf\u00e4nger mitteilen, dass es sich nur um einen Test handelt. Das Abschicken erledigen wir mit Return, sobald wir den zust\u00e4ndigen Button erreicht haben. Ach ja, bitte keine Captchas, sondern einen anst\u00e4ndigen Spamschutz einsetzen.<br \/>\nAn dieser Stelle m\u00fcssten wir eigentlich noch \u00fcber clientseitige Pr\u00fcfung und Fehlertoleranz sprechen, aber ich denke, dass w\u00e4re schon zu spezifisch. Ich verzichte hier auch auf den Test eines barrierefreien Media-Players. Der ist noch seltener als ein barrierefreies PDF.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Vergroesserbarkeit\"><\/span>Vergr\u00f6\u00dferbarkeit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Alle g\u00e4ngigen Browser erlauben es, Inhalte von Webseiten zu vergr\u00f6\u00dfern. Eine Ausnahme ist der IE 6, der relative Gr\u00f6\u00dfenangaben ben\u00f6tigt, aber den sollte man ohnehin lieber nicht benutzen. \u00dcber die Tastatur erfolgt die Vergr\u00f6\u00dferung \u00fcber STRG und + bzw. Steuerung und Mausrad.<br \/>\nWenn wir ein klassisches Drei-Spalten-Layout haben, sollte sich die Seite gleichm\u00e4\u00dfig vergr\u00f6\u00dfern. Das hei\u00dft, alle Inhalte verschieben sich nach rechts unten. Die Inhalte sollten sich nicht schon bei geringer Vergr\u00f6\u00dferung ineinander schieben. Wenn zum Beispiel Navigation und Contentspalte ineinander flie\u00dfen, kann das nat\u00fcrlich keiner mehr lesen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Quellcode\"><\/span>Quellcode<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Man muss nicht unbedingt den Quellcode einer Website lesen k\u00f6nnen, um potentielle Probleme aufzusp\u00fcren. Zwei Dinge kann man auf jeden Fall \u00fcberpr\u00fcfen.<br \/>\nZum einen l\u00e4sst sich pr\u00fcfen, ob die Seite korrekt strukturiert ist.<br \/>\nkleines Update: Der einfachere Weg zur Pr\u00fcfung der Struktur: W\u00e4hlen Sie im Firefox unter Ansicht -> Webseiten-Stil &#8211; Kein Stil. Hier sehen Sie das Skelett der Website und stellen auch fest, ob der Aufbau der Website mit und ohne Design \u00fcbereinstimmt.<br \/>\nDazu ruft man mit der rechten Maustaste das Kontextmen\u00fc auf und w\u00e4hlt dort Quelltext ansehen. Die mir bekannten Browser arbeiten mit Syntaxhighlighting, das hei\u00dft, der Code wird farblich hervorgehoben. Wir k\u00f6nnen alles ignorieren, was zwischen spitzen Klammern < und > steht und schauen uns nur den Text an.<br \/>\nF\u00fcr Blinde ist es wichtig, dass die Website logisch strukturiert ist. Wir erwarten, dass zun\u00e4chst der Kopfbereich, dann die Navigation, der Inhalt, die dritte Spalte und der Fu\u00dfbereich in dieser Reihenfolge auftreten. Der Grund ist ganz einfach: da wir linear &#8211; also am Quelltext orientiert &#8211; durch die Webseite gehen, ist es ziemlich verwirrend, wenn der Contentbereich hinter der Fu\u00dfzeiel auftaucht, das kommt \u00f6fter vor, als man denken w\u00fcrde und ist dank CSS kein gestalterisches Problem. Der Blinde wird aber wahrscheinlich denken, dass die Seite keine Inhalte hat.<br \/>\nIm gleichen Schritt kann man auch pr\u00fcfen, ob \u00fcberhaupt Inhalte im Quelltext zu sehen sind. H\u00e4ufig sieht man einen sehr kurzen Quelltext, wo im Codebereich so etwas wie Frame steht. Oder es wird nur sehr viel  Programmcode angezeigt, aber kein menschenlesbarer Text. Im ersten Fall wurde die Website mit Frames gestaltet und ist damit vor allem f\u00fcr \u00e4ltere Hilfstechnik von Blinden problematisch. Im letzteren Fall wird die Seite vermutlich komplett \u00fcber JavaScript direkt im Browser erzeugt. Auch damit kommt die Hilfssoftware eher schlecht zurecht. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Fazit\"><\/span>Fazit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Diese einfachen Tests sind kein Ersatz f\u00fcr eine Evaluation durch daf\u00fcr geeignete Leute. Sie stellen nur ein einfaches Mittel f\u00fcr Laien dar, einfache \u00dcberpr\u00fcfungen durchzuf\u00fchren.<br \/>\n<a href=\"https:\/\/netz-barrierefrei.de\/en\/quick-check.html\">Quick Checks for Web Accessibility<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ich will im Folgenden ein paar Testm\u00f6glichkeiten aufzeigen, die auch von technisch unversierten Menschen durchgef\u00fchrt werden k\u00f6nnen. Alles was man braucht ist ein Browser und&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreiheit-von-webseiten-testen\/einfache-tests\/\">Weiterlesen<span class=\"screen-reader-text\">Schnell-Test &#8211; Webseiten einfach auf Barrierefreiheit pr\u00fcfen<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":629,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-823","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/823","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=823"}],"version-history":[{"count":9,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/823\/revisions"}],"predecessor-version":[{"id":8585,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/823\/revisions\/8585"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/629"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}