{"id":6743,"date":"2022-07-03T19:10:50","date_gmt":"2022-07-03T17:10:50","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=6743"},"modified":"2025-06-15T14:11:27","modified_gmt":"2025-06-15T12:11:27","slug":"tastatur-und-barrierefreiheit","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/formen-von-einschraenkungen\/bewegen-morotische-behinderung\/tastatur-und-barrierefreiheit\/","title":{"rendered":"Tastatur-Bedienung und Barrierefreiheit"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/digitale-barrierefreiheit.podigee.io\/23-neue-episode\/embed?context=external&#038;theme=default\" style=\"border: 0\" frameBorder=\"0\" height=\"100\" width=\"100%\"><\/iframe><br \/>\nGrunds\u00e4tzlich ist gefordert, dass alle interagier baren Elemente per Tastatur erreich- und bedienbar sein sollten. Dabei ist es sinnvoll, wenn die Standardtasten funktionieren. Allerdings ist das nicht vorgeschrieben.<\/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\/formen-von-einschraenkungen\/bewegen-morotische-behinderung\/tastatur-und-barrierefreiheit\/#Checkliste_Tastatur-Bedienung\" >Checkliste Tastatur-Bedienung<\/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\/formen-von-einschraenkungen\/bewegen-morotische-behinderung\/tastatur-und-barrierefreiheit\/#Fokus-Hervorhebung\" >Fokus-Hervorhebung<\/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\/formen-von-einschraenkungen\/bewegen-morotische-behinderung\/tastatur-und-barrierefreiheit\/#Wichtigste_Tastenkuerzel_Windows\" >Wichtigste Tastenk\u00fcrzel (Windows)<\/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\/formen-von-einschraenkungen\/bewegen-morotische-behinderung\/tastatur-und-barrierefreiheit\/#Fokusmanagement\" >Fokusmanagement<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/formen-von-einschraenkungen\/bewegen-morotische-behinderung\/tastatur-und-barrierefreiheit\/#Best_Practices_fuer_effektives_Fokusmanagement\" >Best Practices f\u00fcr effektives Fokusmanagement:<\/a><\/li><\/ul><\/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\/formen-von-einschraenkungen\/bewegen-morotische-behinderung\/tastatur-und-barrierefreiheit\/#Anforderungen_aus_der_WCAG\" >Anforderungen aus der WCAG<\/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\/formen-von-einschraenkungen\/bewegen-morotische-behinderung\/tastatur-und-barrierefreiheit\/#Testen\" >Testen<\/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\/formen-von-einschraenkungen\/bewegen-morotische-behinderung\/tastatur-und-barrierefreiheit\/#Weiterfuehrende_Infos\" >Weiterf\u00fchrende Infos<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Checkliste_Tastatur-Bedienung\"><\/span>Checkliste Tastatur-Bedienung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Alle anklickbaren Elemente sind mit der Tastatur erreichbar und k\u00f6nnen aufgerufen werden.<\/li>\n<li>Alle ver\u00e4nderbaren Elemente sind mit der Tastatur ver\u00e4nderbar.<\/li>\n<li>Der Fokus der Tastatur ist immer deutlich sichtbar.<\/li>\n<li>Die Reihenfolge der Tastatur-Bedienung ist sinnvoll.<\/li>\n<\/ul>\n<p>Bitte pr\u00fcfen Sie den Fokus auch bei dynamisch eingeblendeten Elementen wie modalen Dialogen oder aufklappenden Navigationen. Grunds\u00e4tzlich soll der Fokus auf den modalen Dialog gesetzt werden. Bei aufklappenden Men\u00fcs soll der Fokus in das ge\u00f6ffnete Men\u00fc absteigen. Hat er das Ende des Men\u00fcs erreicht, geht er zum n\u00e4chsten anklickbaren Element.<br \/>\nTab Index wird m\u00f6glichst nicht eingesetzt. Wird Tab Index eingesetzt, sollte der Wert 0 oder negativ (kleiner als 0) sein.<br \/>\nWerden vom Standard abweichende Tastenk\u00fcrzel verwendet oder stellt die Anwendung eigene Tastenbefehle bereit, m\u00fcssen diese dokumentiert und leicht auffindbar sein.<br \/>\nVerboten sind Tastaturfallen, das hei\u00dft Bereiche, aus denen sich der Fokus nicht mehr heraus bewegen l\u00e4sst. Dazu z\u00e4hlen insbesondere Frames, programmierte Elemente, WYSIWYG-Editoren oder Bereiche mit endless Scrolling. Bei Letzteren m\u00fcssen Sie sicherstellen, dass der Nutzer einen Mechanismus erh\u00e4lt, um sich aus dem Scroll-Bereich heraus zu bewegen oder diesen Bereich zu \u00fcberspringen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Fokus-Hervorhebung\"><\/span>Fokus-Hervorhebung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Der Fokus muss nach WCAG 2.2 mindestens folgende Anforderungen erf\u00fcllen:<\/p>\n<ul>\n<li>Er muss mindestens zwei Pixel breit sein.<\/li>\n<li>Er muss mindestens 3:1 zu angrenzenden Farben haben.<\/li>\n<li>Das fokussierte Element muss gr\u00f6\u00dftenteils sichtbar sein, d.h. das fokussierte Element darf nicht \u00fcberwiegend au\u00dferhalb des Viewports sein.<\/li>\n<li>Der Fokus muss nat\u00fcrlich das Element umrahmen, das hei\u00dft, er darf nicht das Element \u00fcberlagern, das fokussiert ist.<\/li>\n<\/ul>\n<p>Beim Thema Fokus-Hervorhebung achten Sie bitte besonders auf Hintergrundbilder, Farb-Verl\u00e4ufe und \u00e4hnliche Dinge, vor allem wenn sie dynamisch oder durch den Content-Manager ver\u00e4ndert werden k\u00f6nnen. Hier kann praktisch nicht garantiert werden, dass die Anforderungen an den Fokus erf\u00fcllt werden. Das l\u00e4sst sich etwa dadurch beeinflussen, dass das fokussierte Element seine gesamte Farbe ver\u00e4ndert.<br \/>\nEmpfehlung: Auch wenn das durch die WCAG abgedeckt ist, vermeiden Sie das Invertieren von Farben bei Fokussierung. Das Problem ist, dass viele sehbehinderte Nutzerinnen ohnehin schon mit invertierten Farben arbeiten, zum Beispiel helle Schrift auf dunklem Grund. Wenn Sie Ihrerseits die Farben invertieren, hat die Nutzerin sehr wahrscheinlich eben jene Kombination dunkler Text auf hellem Grund, den sie wegen ihrer Blend-Empfindlichkeit vermeiden wollte. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Wichtigste_Tastenkuerzel_Windows\"><\/span>Wichtigste Tastenk\u00fcrzel (Windows)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<table>\n<tbody>\n<tr>\n<td width=\"307\">Befehl<\/td>\n<td width=\"307\">Wirkung<\/td>\n<\/tr>\n<tr>\n<td width=\"307\">Tab\/Tab + Umschalt<\/td>\n<td width=\"307\">Bewegt den Fokus vorw\u00e4rts bzw. r\u00fcckw\u00e4rts<\/td>\n<\/tr>\n<tr>\n<td width=\"307\">Leertaste<\/td>\n<td width=\"307\">Aktiviert\/deaktiviert Checkboxen<\/td>\n<\/tr>\n<tr>\n<td width=\"307\">Pfeiltasten<\/td>\n<td width=\"307\">Ver\u00e4ndern den Wert von Slidern<\/td>\n<\/tr>\n<tr>\n<td width=\"307\">Return<\/td>\n<td width=\"307\">L\u00f6st Buttons aus<\/td>\n<\/tr>\n<tr>\n<td width=\"307\">Pos1\/Ende<\/td>\n<td width=\"307\">Bewegt den Fokus an den Beginn bzw. das Ende der Seite<\/td>\n<\/tr>\n<tr>\n<td width=\"307\">Pfeil rauf\/runter<\/td>\n<td width=\"307\">W\u00e4hlt Radio-Buttons aus<\/td>\n<\/tr>\n<tr>\n<td width=\"307\">Alt + Pfeil runter<\/td>\n<td width=\"307\">\u00d6ffnet Select-Boxen, mit Pfeil rauf\/runter werden Optionen ausgew\u00e4hlt, mit Return wird die Select-Box geschlossen<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><span class=\"ez-toc-section\" id=\"Fokusmanagement\"><\/span>Fokusmanagement<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Fokusmanagement bezieht sich auf die F\u00e4higkeit einer Website oder Anwendung, den Fokus des Benutzers auf den relevanten Inhalt oder die relevanten Funktionen zu lenken. Es geht darum, sicherzustellen, dass Benutzer mit verschiedenen F\u00e4higkeiten und Vorlieben die Informationen und Funktionen finden und nutzen k\u00f6nnen, die sie ben\u00f6tigen, ohne von unn\u00f6tigem oder verwirrendem Inhalt abgelenkt zu werden. Durch eine effektive Verwaltung des Fokus k\u00f6nnen Barrieren f\u00fcr Menschen mit kognitiven Beeintr\u00e4chtigungen, Sehbehinderungen oder motorischen Einschr\u00e4nkungen reduziert werden.<br \/>\nZug\u00e4nglichkeit f\u00fcr Menschen mit Sehbehinderungen: F\u00fcr Menschen, die auf Bildschirmleseprogramme oder alternative Eingabemethoden angewiesen sind, ist ein klar definierter Fokus entscheidend. Durch das Hervorheben des relevanten Inhalts k\u00f6nnen sie effektiver navigieren und Informationen erfassen. Das Fehlen eines klaren Fokus kann zu Verwirrung und Frustration f\u00fchren.<br \/>\nVereinfachung der Bedienung f\u00fcr Menschen mit motorischen Einschr\u00e4nkungen: Benutzer mit motorischen Einschr\u00e4nkungen, die alternative Eingabemethoden wie Tastaturen oder Sprachsteuerung verwenden, profitieren von einem klaren Fokus auf interaktive Elemente. Durch die richtige Reihenfolge und Hervorhebung k\u00f6nnen sie leichter zwischen verschiedenen Funktionen wechseln und Aktionen ausf\u00fchren.<br \/>\nReduzierung von Ablenkungen und kognitiver \u00dcberlastung: Ein effektives Fokusmanagement tr\u00e4gt dazu bei, unn\u00f6tigen visuellen oder textuellen Ballast zu eliminieren, der Benutzer mit kognitiven Beeintr\u00e4chtigungen \u00fcberfordern kann. Durch das Hervorheben wichtiger Informationen und das Reduzieren von visuellem L\u00e4rm wird die kognitive Belastung reduziert und die Benutzererfahrung verbessert.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Best_Practices_fuer_effektives_Fokusmanagement\"><\/span>Best Practices f\u00fcr effektives Fokusmanagement:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Klarer visueller Fokus: Verwenden Sie visuelle Hinweise wie Farben, Kontraste oder Umrandungen, um den Fokus auf interaktive Elemente wie Links, Schaltfl\u00e4chen oder Formulare zu lenken. Dies hilft Benutzern, den relevanten Inhalt leichter zu erkennen und zu verstehen. Empfohlen wird ein Fokus von 2 Pixeln Breite und einem Kontrast von mindestens 3:1 zu angrenzenden Farben.<br \/>\nLogische Tab-Reihenfolge: Stellen Sie sicher, dass die Reihenfolge, in der Elemente per Tab-Taste ausgew\u00e4hlt werden, logisch und intuitiv ist. Dies erm\u00f6glicht eine einfache Navigation f\u00fcr Benutzer, die Tastaturen oder alternative Eingabemethoden verwenden.<br \/>\nFokus-Management bei dynamischen Inhalten: Wenn Inhalte sich dynamisch \u00e4ndern oder aktualisieren, stellen Sie sicher, dass der Fokus auf dem aktualisierten Inhalt bleibt. Benutzer sollten nicht pl\u00f6tzlich den Fokus aufgrund von automatischen Aktualisierungen oder Animationen verlieren.<\/p>\n<ul>\n<li>Wenn Elemente wie Dialogboxen neu hinzugef\u00fcgt werden, sollte der Fokus in der Regel auf das oberste anklickbare Element im neuen Bereich gesetzt werden.<\/li>\n<li>Werden Elemente entfernt, soll der Fokus auf das Element gesetzt werden, welches das Einf\u00fcgen des neuen Elements ausgel\u00f6st hat. <\/li>\n<\/ul>\n<p>Klare Fehlerhinweise: Wenn ein Benutzer bei der Eingabe von Informationen einen Fehler macht, lenken Sie den Fokus deutlich auf den Fehlerhinweis oder die entsprechende Stelle, um die Fehlerbehebung zu erleichtern.<br \/>\nBenutzerfreundliche Tastaturnavigation: Stellen Sie sicher, dass alle interaktiven Elemente mit der Tastatur erreichbar sind und dass der Fokus konsistent und sichtbar bleibt, wenn der Benutzer zwischen den Elementen wechselt.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Anforderungen_aus_der_WCAG\"><\/span>Anforderungen aus der WCAG<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Guideline 2.1 Keyboard Accessible<\/li>\n<li>Success Criterion 2.4.7 Focus Visible<\/li>\n<li>2.4.11 Focus Not Obscured (Minimum) (AA)<\/li>\n<li>2.4.12 Focus Not Obscured (Enhanced) (AAA)<\/li>\n<li>2.4.13 Focus Appearance (AAA)<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Testen\"><\/span>Testen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Grunds\u00e4tzlich sollte die Zug\u00e4nglichkeit per Tastatur direkt mit der Tastatur getestet werden.<br \/>\nTab Index ist ein HTML-Attribut. Es kann also gefunden werden, indem Sie einfach im Quelltext danach suchen.<br \/>\n<a href=\"https:\/\/pauljadam.com\/bookmarklets\/focus.html\">Force Show Keyboard Focus Bookmarklet<\/a> \u2013 hebt den Fokus deutlich hervor<br \/>\n\u00dcber den Accessibility Inspector in Firefox k\u00f6nnen Sie sich die Tab-Reihenfolge anzeigen lassen. Gehen Sie dazu in das Men\u00fc \u201eExtras\u201c, dort auf \u201eBrowser-Werkzeuge\u201c, dort auf \u201eWerkzeuge f\u00fcr Web-Entwickler\u201c. W\u00e4hlen Sie in den Werkzeugen \u201eBarrierefreiheit\u201c und haken Sie anschlie\u00dfend Tab-Reihenfolge anzeigen\u201c an.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Weiterfuehrende_Infos\"><\/span>Weiterf\u00fchrende Infos<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Mozilla Developer Network. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/Guides\/Understanding_WCAG\/Keyboard\">Keyboard Accessibility<\/a><\/li>\n<li>Web Developer Guide. <a href=\"https:\/\/www.accessibility-developer-guide.com\/knowledge\/keyboard-only\/browsing-websites\/\">How to browse Websites using a keyboard only<\/a><\/li>\n<li><a href=https:\/\/netz-barrierefrei.de\/en\/keyboard.html\">Understanding Keyboard Accessibility<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Grunds\u00e4tzlich ist gefordert, dass alle interagier baren Elemente per Tastatur erreich- und bedienbar sein sollten. Dabei ist es sinnvoll, wenn die Standardtasten funktionieren. Allerdings ist&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/formen-von-einschraenkungen\/bewegen-morotische-behinderung\/tastatur-und-barrierefreiheit\/\">Weiterlesen<span class=\"screen-reader-text\">Tastatur-Bedienung und Barrierefreiheit<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":560,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6743","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/6743","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=6743"}],"version-history":[{"count":8,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/6743\/revisions"}],"predecessor-version":[{"id":10076,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/6743\/revisions\/10076"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/560"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=6743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}