{"id":3288,"date":"2025-06-02T13:00:03","date_gmt":"2025-06-02T13:00:03","guid":{"rendered":"https:\/\/decareto.com\/?p=3288"},"modified":"2025-06-04T13:59:42","modified_gmt":"2025-06-04T13:59:42","slug":"so-pruefen-sie-ob-websites-per-tastatur-bedienbar-sind","status":"publish","type":"post","link":"https:\/\/decareto.com\/de\/so-pruefen-sie-ob-websites-per-tastatur-bedienbar-sind\/","title":{"rendered":"So pr\u00fcfen Sie, ob Websites per Tastatur bedienbar sind"},"content":{"rendered":"\n<p>Das h\u00e4ufigste und schwerwiegendste Barrierefreiheits-Problem, das Websites aufweisen, ist die fehlende Tastaturbedienbarkeit &#8211; eine Website muss ohne Maus und nur mit der Tastatur zug\u00e4nglich sein. Wie weit verbreitet dieses L\u00fccke ist zeigt ein <a href=\"https:\/\/www.aktion-mensch.de\/inklusion\/studien\/test-barrierefreie-webshops\">Test von Aktion Mensch<\/a>, in dem 71 Online-Shops untersucht wurden, von denen aber nur 15 \u00fcber die Tastatur bedienbar waren.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Warum ist Tastaturbedienbarkeit wichtig f\u00fcr Barrierefreiheit?<\/h2>\n\n\n\n<p>Tastaturzug\u00e4nglichkeit ist aus mehreren Gr\u00fcnden notwendig:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Personen mit Tremor, Muskelschw\u00e4che, eingeschr\u00e4nkter Fein\u00admotorik oder einh\u00e4ndiger Nutzung k\u00f6nnen eine Maus nicht oder nur unter Schmerzen bedienen.<\/li>\n\n\n\n<li>Blinde und stark sehbehinderte Nutzer:innen navigieren \u00fcberwiegend mit Screenreadern. Diese Assistenz\u00adsoftware koppelt ihre Kurzbefehle (Tab, Pfeil\u00adnavigation, Schnell\u00adsprung\u00adtasten u. a.) direkt an die Tastatur. Ohne wohldefinierten Fokus und steuer\u00adbare Komponenten bleiben Inhalte f\u00fcr sie schlicht unerreichbar.<\/li>\n\n\n\n<li>Sprach\u00adsteuerung (Dragon NaturallySpeaking, Windows Spracherkennung) und Mund-\/Augen\u00adsteuerungen \u201etun so, als ob\u201c sie Tastatur\u00adbefehle senden. Erst wenn eine Seite vollst\u00e4ndig \u00fcber Tasten bedienbar ist, funktioniert sie auch mit diesen Technologien.<\/li>\n<\/ul>\n\n\n\n<p>Die Tastaturzug\u00e4nglichkeit ist eng verbunden mit dem &#8222;Fokus-Indikator&#8220; des ausgew\u00e4hlten Elements. Der Fokus kennzeichnet das aktuell aktive Element auf der Seite, und um es leicht erkennen zu k\u00f6nnen muss es deutlich hervorgehoben werden. In den beiden folgenden Beispielen wird es durch eine Umrandung bzw. eine Hintergrundfarbe genennzeichnet: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"331\" src=\"https:\/\/decareto.com\/wp-content\/uploads\/2025\/05\/image-3-1024x331.png\" alt=\"\" class=\"wp-image-3294\" srcset=\"https:\/\/decareto.com\/wp-content\/uploads\/2025\/05\/image-3-1024x331.png 1024w, https:\/\/decareto.com\/wp-content\/uploads\/2025\/05\/image-3-300x97.png 300w, https:\/\/decareto.com\/wp-content\/uploads\/2025\/05\/image-3-768x248.png 768w, https:\/\/decareto.com\/wp-content\/uploads\/2025\/05\/image-3.png 1414w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"393\" src=\"https:\/\/decareto.com\/wp-content\/uploads\/2025\/05\/image-2-1024x393.png\" alt=\"\" class=\"wp-image-3292\" srcset=\"https:\/\/decareto.com\/wp-content\/uploads\/2025\/05\/image-2-1024x393.png 1024w, https:\/\/decareto.com\/wp-content\/uploads\/2025\/05\/image-2-300x115.png 300w, https:\/\/decareto.com\/wp-content\/uploads\/2025\/05\/image-2-768x295.png 768w, https:\/\/decareto.com\/wp-content\/uploads\/2025\/05\/image-2.png 1510w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Es ist aus den folgenden Gr\u00fcnden wichtig, dass der Fokus deutlich hervorgehoben werden muss:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Der sichtbare Fokus zeigt, <em>wo<\/em> sich die BenutzerIn gerade befindet. Ohne diese R\u00fcck\u00admeldung w\u00fcsste man beim Navigieren mit der Tab-Taste (s.u.) nicht, welches Element als N\u00e4chstes aktiviert wird \u2013 das f\u00fchrt zu Verwirrung, Fehleingaben oder gar Abbruch der Interaktion.<\/li>\n\n\n\n<li>Tastaturereignisse (Enter, Leertaste, Pfeile, ESC \u2026) wirken immer nur auf das aktuell fokussierte Element. Ist kein Fokus vorhanden \u2013 oder \u201esteckt\u201c er im falschen Bereich \u2013 funktionieren Interaktionen schlicht nicht.<\/li>\n\n\n\n<li>Screenreader koppeln ihre Ausgabe an den Fokus. Wenn der Fokus springt, liest der Screenreader den neuen Kontext. Ein fehlender oder unsichtbarer Fokus macht Inhalte f\u00fcr blinde NutzerInnen praktisch unauffindbar.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Welche WCAG-Kriterien beziehen sich auf Tastaturbedienbarkeit?<\/h2>\n\n\n\n<p>Anforderungen an barrierefreie Websites werden im international verbreiteten Standard &#8222;<a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/\">Web Content Accessibility Guidelines<\/a>&#8220; spezifiziert. Er liegt in mehreren Versionen vor (aktuell ist Version 2.2) sowie mehreren &#8222;Konformit\u00e4ts-Niveaus&#8220; (von A bis AAA). Die Anforderungen sind in 86 sog. &#8222;Success Criteria&#8220; beschrieben,  die folgende Tabelle zeigt auf, welche davon die relevanten Kriterien f\u00fcr Tastaturbedienbarkeit sind. <\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Nr.<\/th><th>Niveau<\/th><th>Titel<\/th><\/tr><\/thead><tbody><tr><td><strong><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#keyboard\">2.1.1 Keyboard<\/a><\/strong><\/td><td>A<\/td><td>Alles muss ohne Maus nutzbar sein.<\/td><\/tr><tr><td><strong><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#no-keyboard-trap\">2.1.2 No Keyboard Trap<\/a><\/strong><\/td><td>A<\/td><td>Fokus darf nie \u201estecken bleiben\u201c.<\/td><\/tr><tr><td><strong><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#character-key-shortcuts\">2.1.4 Character Key Shortcuts<\/a><\/strong><\/td><td>A<\/td><td>Ein-Tasten-Shortcuts m\u00fcssen abschalt-\/anpassbar sein.<\/td><\/tr><tr><td><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#bypass-blocks\"><strong>2.4.1 Bypass Blocks<\/strong><\/a><\/td><td>A<\/td><td>Ein Link zum Springen zum Hauptinhalt muss verf\u00fcgbar sein.<\/td><\/tr><tr><td><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#dragging-movements\"><strong>2.5.7 Dragging Movements<\/strong><\/a><\/td><td>AA<\/td><td>Drag-and-Drop-Aktionen brauchen eine Alternative<\/td><\/tr><tr><td><strong><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#focus-order\">2.4.3 Focus Order<\/a><\/strong><\/td><td>A<\/td><td>Der Fokus folgt einer logischen, sinn\u00advollen Reihen\u00adfolge.<\/td><\/tr><tr><td><strong><a href=\"http:\/\/w3.org\/TR\/WCAG22\/#focus-visible\">2.4.7 Focus Visible<\/a><\/strong><\/td><td>AA<\/td><td>Der aktuell fokussierte Punkt ist stets klar sichtbar.<\/td><\/tr><tr><td><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#focus-not-obscured-minimum\"><strong>2.4.11 Focus Appear<\/strong> (neu 2.2)<\/a><\/td><td>AA<\/td><td>Fokus-Indikator muss Mindest\u00adgr\u00f6\u00dfe + Kontrast haben.<\/td><\/tr><tr><td><strong><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#focus-not-obscured-enhanced\">2.4.12 Focus Not Obscured<\/a><\/strong><\/td><td>AA<\/td><td>Fokus darf nicht unter Overlays verdeckt sein.<\/td><\/tr><tr><td><strong><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#content-on-hover-or-focus\">1.4.13 Content on Hover or Focus<\/a><\/strong><\/td><td>AA<\/td><td>Hover-\/Focus-Inhalte (z. B. Tooltips) m\u00fcssen per Taste steuer-\/schlie\u00dfbar sein.<\/td><\/tr><tr><td><strong><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#on-focus\">3.2.1 On Focus<\/a><\/strong><\/td><td>A<\/td><td>Setzt der Fokus Aktionen aus, d\u00fcrfen sie nicht verwirrend sein.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Mit diesen Schritten testen Sie Websites auf Tastaturbedienbarkeit<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">F\u00fchren Sie einen automatischen Test durch<\/h3>\n\n\n\n<p>Automatisierte Test-Tools wie decareto k\u00f6nnen einige problematische Aspekte identifizieren, die verhindern dass eine Website nicht tastaturzug\u00e4nglich ist:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fehlendes HTML-Attribut <code>tabindex=\"-1\"<\/code> bei interaktivem Element (dies wird ben\u00f6tigt um den Fokus in einem normalerweise ausgeblendeten Element, etwa einen Dialog-Popup, zu gew\u00e4hrleisten).<\/li>\n\n\n\n<li>Fehlender oder ausgel\u00f6schter Fokus, etwa wenn in einer Website der Fokus-Indikator aus gestalterischen Gr\u00fcnden absichtlich unterdr\u00fcckt wird.<\/li>\n<\/ul>\n\n\n\n<p>Die Mehrzahl der Probleme mit Tastaturbedienbarkeit erfordern allerdings manuelles Testing, diese werden in den n\u00e4chsten Abschnitten beschrieben.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Existiert ein Link zum Hauptinhalt?<\/h3>\n\n\n\n<p>\u00d6ffnen Sie die Seite und klicken Sie ein bis zweimal die <code>Tab<\/code>-Taste. Springt der Fokus zuerst auf einen sichtbaren &#8222;Zum Inhalt&#8220;-Link? (<a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/bypass-blocks\">WCAG 2.4.1<\/a>).<\/p>\n\n\n\n<p>Negativbeispiel: Der Seitentitel bekommt den Fokus, aber es ist kein \u00dcberspring-Link vorhanden.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"244\" src=\"https:\/\/decareto.com\/wp-content\/uploads\/2025\/05\/image-4-1024x244.png\" alt=\"\" class=\"wp-image-3299\" srcset=\"https:\/\/decareto.com\/wp-content\/uploads\/2025\/05\/image-4-1024x244.png 1024w, https:\/\/decareto.com\/wp-content\/uploads\/2025\/05\/image-4-300x72.png 300w, https:\/\/decareto.com\/wp-content\/uploads\/2025\/05\/image-4-768x183.png 768w, https:\/\/decareto.com\/wp-content\/uploads\/2025\/05\/image-4.png 1282w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Navigieren Sie mit der Tab-Taste<\/h3>\n\n\n\n<p>Klicken Sie <code>Tab<\/code> und <code>Shift-Tab<\/code> um vorw\u00e4rts oder r\u00fcckw\u00e4rts zu navigieren. Ist erkennbar, welches Element den Fokus hat, und folgt die Reihenfolge der nat\u00fcrlichen Lese-Logik? Wird nichts Wesentliches \u00fcbersprungen (<a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#focus-order\">WCAG 2.4.3<\/a>)? <\/p>\n\n\n\n<p>Negativbeispiel: Der Fokus springt aus der Haupt\u00adnavigation direkt in den Footer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pr\u00fcfen Sie den Fokus-Indikator<\/h3>\n\n\n\n<p>Beobachten Sie, wie der Fokus kenntlich gemacht wird. Ist er gut erkennbar? Der Indikator sollte eine mindestens 2 px breite Linie oder Fl\u00e4che mit 3:1-Kontrast sein (<a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#focus-visible\">WCAG 2.4.7<\/a> &amp; <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#focus-not-obscured-minimum\">WCAG 2.4.11<\/a>). Die beiden Screenshots ganz oben auf der Seite zeigen dies anschaulich.<\/p>\n\n\n\n<p>Negativbeispiel: Der Indikator ist nur eine hauchd\u00fcnne, graue Outline oder auf dunklem Hintergrund unsichtbar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ausklappbare Men\u00fcs<\/h3>\n\n\n\n<p>Wenn die Website eine Navigation hat, die aufklappbar ist (durch Klick oder durch &#8222;Hover&#8220;, also \u00dcberfahren mit der Maus), dann m\u00fcssen diese Men\u00fcs mit der Tastaur zu \u00f6ffnen sein. <\/p>\n\n\n\n<p>Identifzieren Sie alle Navigationselemente auf der Seite, die durch Hover oder Klick ein Men\u00fc \u00f6ffnen. Gehen Sie mit <code>Tab<\/code> auf jeden Men\u00fcpunkt und versuchen Sie ihn durch <code>Enter<\/code> oder <code>Pfeil-<\/code>runter \/ <code>Pfeil-hoch<\/code> zu \u00f6ffnen. Bleibt der Fokus im ge\u00f6ffneten Men\u00fc? L\u00e4sst es sich mit <code>Esc<\/code> schlie\u00dfen? (<a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#content-on-hover-or-focus\">WCAG 1.4.13<\/a>, <a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#keyboard\">WCAG 2.1.1<\/a>)<\/p>\n\n\n\n<p>Negativbeispiel: Das Submen\u00fc erscheint nur mit Maus-Hover, man kann es \u00fcber die Tastatur nicht \u00f6ffnen oder schlie\u00dfen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pr\u00fcfen Sie Formulare<\/h3>\n\n\n\n<p>Barrierefreie Formulare k\u00f6nnen fogenderma\u00dfen mit der Tastatur bedient werden:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Wechseln zwischen den Formularelementen mit <code>Tab<\/code> und <code>Shift-Tab<\/code><\/li>\n\n\n\n<li>Auswahl von Radiobuttons mit <code>Pfeil-<\/code>runter \/ <code>Pfeil-hoch<\/code> <\/li>\n\n\n\n<li>Auswahl einer Checkbox mit <code>Space<\/code><\/li>\n\n\n\n<li>Durchlaufen von Dropdown-Optionen mit <code>Pfeil-<\/code>runter \/ <code>Pfeil-hoch<\/code><\/li>\n\n\n\n<li>Best\u00e4tigen einer Dropdown-Auswahl mit <code>Enter<\/code><\/li>\n\n\n\n<li>Schlie\u00dfen eines ge\u00f6ffneten Dropdowns mit <code>Esc<\/code><\/li>\n\n\n\n<li>Absenden des Formulars mit <code>Enter<\/code>  <\/li>\n<\/ul>\n\n\n\n<p>Pr\u00fcfen Sie, ob alle Formulare auf diese Weise bedienbar sind (<a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#keyboard\">WCAG 2.1.1<\/a>)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pr\u00fcfen Sie Dialoge und Popups<\/h3>\n\n\n\n<p>Identifizieren Sie alle Dialoge die als Popup ge\u00f6ffnet werden und sich vor den Hintergrud legen. Sie m\u00fcssen mit der Tastatur ge\u00f6ffnet und geschlossen werden k\u00f6nnen. Innerhalb eines ge\u00f6ffneten Dialogs muss es m\u00f6glich sein, alle Elemente mit <code>Tab<\/code> zu erreichen. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Kann der Dialog mit <code>Enter<\/code> ge\u00f6ffnet werden?<\/li>\n\n\n\n<li>Kann er mit <code>Esc<\/code> geschlossen werden?<\/li>\n\n\n\n<li>Springt der Fokus beim \u00d6ffnen in den Dialog?<\/li>\n\n\n\n<li>Beim mehrfachen Benutzen von Tab muss der Fokus im Dialog &#8222;gefangen&#8220; sein.<\/li>\n\n\n\n<li>Geht der Fokus nach dem Schlie\u00dfen ordnungsgem\u00e4\u00df zur\u00fcck?<\/li>\n<\/ul>\n\n\n\n<p>Negativbeispiel: In einem Dialog darf der Fokus beim Verwenden von <code>Tab<\/code> nicht pl\u00f6tzlich zur Seite wechseln oder gar zu Elementen die hinter dem Dialog liegen. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pr\u00fcfen Sie Drag-and-Drop-Aktionen<\/h3>\n\n\n\n<p>Drag-and-drop wird gelegentlich verwendet, um bspw. Listen umzusortieren. F\u00fcr Bedienung mit der Tastatur muss es dazu eine Alternative geben, mit der bspw. ein Element ausgew\u00e4hlt werden kann, und die Sortierung durch Elemente f\u00fcr &#8222;nach oben&#8220; und &#8222;nach unten&#8220; durchgef\u00fchrt wird (<a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#dragging-movements\">WCAG 2.5.7<\/a>)   <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das h\u00e4ufigste und schwerwiegendste Barrierefreiheits-Problem, das Websites aufweisen, ist die fehlende Tastaturbedienbarkeit &#8211; eine Website muss ohne Maus und nur mit der Tastatur zug\u00e4nglich sein. Wie weit verbreitet dieses L\u00fccke ist zeigt ein Test von Aktion Mensch, in dem 71 Online-Shops untersucht wurden, von denen aber nur 15 \u00fcber die Tastatur bedienbar waren. Warum ist [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":3337,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"So pr\u00fcfen Sie, ob Websites per Tastatur bedienbar sind","_seopress_titles_desc":"Diese Anleitung zeigt die genauen Schritte mit denen Sie testen, ob eine Website Tastatur-zug\u00e4nglich ist - denn erst dann ist sie f\u00fcr viele Menschen mit Behinderung verwendbar.","_seopress_robots_index":"","footnotes":""},"categories":[12],"tags":[],"class_list":["post-3288","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein"],"acf":[],"_links":{"self":[{"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/posts\/3288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/comments?post=3288"}],"version-history":[{"count":17,"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/posts\/3288\/revisions"}],"predecessor-version":[{"id":3334,"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/posts\/3288\/revisions\/3334"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/media\/3337"}],"wp:attachment":[{"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/media?parent=3288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/categories?post=3288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/tags?post=3288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}