{"id":10114,"date":"2025-07-03T16:36:36","date_gmt":"2025-07-03T14:36:36","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?p=10114"},"modified":"2025-07-04T13:43:39","modified_gmt":"2025-07-04T11:43:39","slug":"fokus-management-haeufige-fehler-und-empfehlungen","status":"publish","type":"post","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/fokus-management-haeufige-fehler-und-empfehlungen\/","title":{"rendered":"Fokus-management &#8211; h\u00e4ufige Fehler und Empfehlungen"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/digitale-barrierefreiheit.podigee.io\/314-fokus-management-haufige-fehler-und-empfehlungen\/embed?context=external&#038;theme=default\" style=\"border: 0\" frameBorder=\"0\" height=\"100\" width=\"100%\"><\/iframe><br \/>\nDas Fokus-Management f\u00fcr Screenreader ist vor allem bei Web-Applikationen eine wichtige Aufgabe. Leider sieht man immer wiederkehrende Fehler, die in diesem Beitrag behandelt werden sollen. In diesem Beitrag gehe ich davon aus, dass tastatur- und Screenreader-Fokus dasselbe sind. <\/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\/fokus-management-haeufige-fehler-und-empfehlungen\/#Den_Fokus_in_Ruhe_lassen\" >Den Fokus in Ruhe lassen<\/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\/fokus-management-haeufige-fehler-und-empfehlungen\/#Fokus-Trap_fuer_eingeblendete_Inhalte\" >Fokus-Trap f\u00fcr eingeblendete Inhalte<\/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\/fokus-management-haeufige-fehler-und-empfehlungen\/#Haeufige_Fehler\" >H\u00e4ufige Fehler<\/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\/fokus-management-haeufige-fehler-und-empfehlungen\/#Dynamische_Inhalte\" >Dynamische Inhalte<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Den_Fokus_in_Ruhe_lassen\"><\/span>Den Fokus in Ruhe lassen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bei klassischen Websites ohne viel Interaktivem Tamtam ist es sinnvoll, den Fokus nicht zu steuern. Ausnahmen sind die fast immer vorhandene Cookie-Message sowie ausgeblendete Inhalte wie Men\u00fcs.<br \/>\nIn der Regel ist es sinnvoll, wenn der Tastatur-fokus dem visuellen Verlauf einer Website folgt, von links nach rechts und von oben nach unten, also zeilenweise. Aus meiner Sicht gibt es aber ein paar Ausnahmen.<br \/>\nAls Microsoft Windows noch das dominante Betriebssystem war, befand sich der Ok-Button immer links, w\u00e4hrend der Abbrechen-Button sich rechts befand. Das liegt vielleicht &#8211; zumindest im Westen &#8211; an der hier \u00fcblichen Blickrichtung von links nach rechts, auch unsere Texte verlaufen von links nach rechts.<br \/>\nDas hat sich sp\u00e4testens ge\u00e4ndert, als Apples mobiles Betriebssystem aufkam. Apple &#8211; und mittlerweile auch Android &#8211; platzieren den Ok-Button standardm\u00e4\u00dfig rechts und den Abbrechen-Button links. Vielleicht liegt es daran, dass die meisten Menschen das Smartphone links halten und man mit den Fingern der rechten Hand einen k\u00fcrzeren Weg zum Best\u00e4tigen hat. Allerdings finden wir diese Positionierung mittlerweile auch in Web- und teils auch Desktop-Anwendungen.<br \/>\nFolgen wir der im ersten Absatz beschriebenen Anforderung, m\u00fcsste der Tab zun\u00e4chst auf dem linken Abbrechen-Button&#8220; platziert werden, da er als Erstes sichtbar ist. Das ist problematisch, weil OK in der Regel die Aktion ist, die man ausl\u00f6sen m\u00f6chte. Ich nenne es hier die Standard-Aktion. Es besteht die Gefahr, dass aus Versehen die falsche Aktion ausgel\u00f6st wird.<br \/>\nNat\u00fcrlich w\u00e4re es sinnvoller, die Elemente von vorneherein so anzuordnen, wie man sie nutzen w\u00fcrde. Manche Design-Patterns ergeben gar keinen Sinn. Allerdings ist das bei einer bestehenden Anwendung kaum umsetzbar, da es ein tiefer Eingriff ins Design ist und man die Verantwortlichen selten \u00fcberzeugen kann, das Pattern hat sich weitgehend durchgesetzt.<br \/>\nEin schwieriger Fall ist es, wenn sich eine Standard-Aktion vor dem Eingabefeld befindet. Ein Beispiel daf\u00fcr ist Twitter. Hier befindet sich der Senden-Button oberhalb des Eingabefeldes. Man kommtweder mit den Pfeil-tasten noch mit Tab auf das Element, wenn man sich aus dem Eingabefeld nach unten bewegt. F\u00fcr sehende Tastatur-Nutzende ist das kein Problem, sie sehen ja, dass der Button oben ist. Komfortabel ist es dennoch nicht, da man aus dem Flow kommt: Erst vor-tabben, um in das Eingabefeld zu kommen, dann Zur\u00fcck-Tabben, um den Text zu senden. Aus meiner Sicht w\u00e4re es in diesem Fall sinnvoller, den Tab nach dem Verlassen des Eingabefeldes auf dem Senden-Button oben zu positionieren. Das war fr\u00fcher so, da ich Twitter nicht mehr nutze, kenne ich den aktuellen Stand nicht.<br \/>\nEin noch schwierigerer fall ist es, wenn sich die Elemente komplett vor dem Inhalt befinden, zum Beispiel bei Google Mail.  Die Nutzenden m\u00fcssen hier eine Mail markieren, um die Aktionen einzublenden und dann per Tab oder Pfeiltasten solange nach oben gehen, bis sie auf diese Aktionen kommen. In diesem fall w\u00e4re die Umleitung des Tastatur-Tabs nicht sinnvoll, da man dann komplett aus dem Flow geworfen wird. Hinweis: Da ich das blind getestet habe, wei\u00df ich nicht, ob es f\u00fcr Sehende auch in der Liste der Mails Standard-Aktionen gibt, die der Screenreader nicht findet. Sinnvoll w\u00e4re hier der Hinweis an den Screenreader, dass und wo die Aktionen eingeblendet wurden und eine schnelle M\u00f6glichkeit, dorthin zu gelangen, zum Beispiel per Short Cut. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Fokus-Trap_fuer_eingeblendete_Inhalte\"><\/span>Fokus-Trap f\u00fcr eingeblendete Inhalte<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>F\u00fcr eingeblendete Inhalte wird in aller Regel eine Fokus-Trap verwendet. Das hei\u00dft, der Fokus bleibt solange in dem eingeblendeten Bereich, solange dieser ge\u00f6ffnet ist. Beispiele sind die Cookie-Message oder eine ausklappende Navigation.<br \/>\nDie Gretchen-Frage ist, wo soll der Fokus hin, wenn die Einblendung geschlossen wird? Wenn die Meldung durch die Nutzende ausgel\u00f6st wird, wie bei der Navi, sollte der fokus zum ausl\u00f6senden Element zur\u00fcckkehren. Bei Cookie-Messages, die nicht durch die Nutzende ausgel\u00f6st wird, sollte der Fokus entweder an den Anfang der Seite oder dort hin, gesetzt werden, wo man sich befand, als die Einblendung ge\u00f6ffnet wurde. Vollblinde Menschen verlieren komplett die Orientierung, wenn der Fokus in solchen F\u00e4llen nicht gesteuert wird und irgendwo auf der Seite landet. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Haeufige_Fehler\"><\/span>H\u00e4ufige Fehler<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bei einigen Anwendungen sieht man, dass der Fokus auf eine Meldung gesetzt wird. Das ist nicht sinnvoll Ein aktuelles Beispiel ist der Rewe-Shop: Legt man ein Produkt in den Warenkorb, wird der Fokus auf einen Alert gesetzt, wo mitgeteilt wird, man habe den Mindestbestellwert nicht erreicht, sofern man diesen Wert noch nicht erreicht hat. Der Fokus wird zwar wieder auf das ausl\u00f6sende Element zur\u00fcckgesetzt, aber das dauert ein paar Sekunden, w\u00e4hrenddessen man seinen Bildschirm putzen kann. Es ist ein klassischer Fall vom falschen Einsatz eines Elements. Ein Alert braucht keinen Fokus, um vorgelesen zu werden. Eine Ausnahme w\u00e4re dann, wenn der Alert ein UI-element enthhielte.<br \/>\nAuch Tabindex zur Steuerung des Fokus sollte sparsam eingesetzt werden, oft wird damit mehr Schaden als Nutzen geschaffen. Ich habe schon die verr\u00fccktesten Fokus-Verl\u00e4ufe gesehen, weil jemand das aus irgendeinem Grund f\u00fcr sinnvoll hielt. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Dynamische_Inhalte\"><\/span>Dynamische Inhalte<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wenn sich Inhalte dynamisch \u00e4ndern, muss der Fokus in der Regel nicht verschoben werden. \u00c4nderungen sollten allerdings immer hinter dem aktuellen Fokus des Screenreaders passieren, nicht oberhalb. Was oberhalb passiert, kriegt der Screenreader nicht mit und ge\u00e4nderte Inhalte k\u00f6nnen schwer auffindbar sein.<br \/>\nEin Beispiel ist ein Formular, welches sich \u00e4ndert, wenn man zum Beispiel oben eine Auswahl trifft. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das Fokus-Management f\u00fcr Screenreader ist vor allem bei Web-Applikationen eine wichtige Aufgabe. Leider sieht man immer wiederkehrende Fehler, die in diesem Beitrag behandelt werden sollen.&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/fokus-management-haeufige-fehler-und-empfehlungen\/\">Weiterlesen<span class=\"screen-reader-text\">Fokus-management &#8211; h\u00e4ufige Fehler und Empfehlungen<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10114","post","type-post","status-publish","format-standard","hentry","category-allgemein","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"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=10114"}],"version-history":[{"count":4,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10114\/revisions"}],"predecessor-version":[{"id":10118,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10114\/revisions\/10118"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=10114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/categories?post=10114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/tags?post=10114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}