{"id":10017,"date":"2025-04-25T16:51:31","date_gmt":"2025-04-25T14:51:31","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?p=10017"},"modified":"2025-04-26T15:03:24","modified_gmt":"2025-04-26T13:03:24","slug":"der-unterschid-zwischen-bedeutungstragender-und-tastatur-reihenfolge","status":"publish","type":"post","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/der-unterschid-zwischen-bedeutungstragender-und-tastatur-reihenfolge\/","title":{"rendered":"Der Unterschid zwischen bedeutungstragender und Tastatur-Reihenfolge"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/digitale-barrierefreiheit.podigee.io\/302-sinnvolle-reihenfolge-und-fokus-reihenfolge-was-ist-der-unterschied\/embed?context=external&#038;theme=default\" style=\"border: 0\" frameBorder=\"0\" height=\"100\" width=\"100%\"><\/iframe><br \/>\nZwei Anforderungen aus der WCAG werden h\u00e4ufig verwechselt: Die bedeutungstragende und die Tastatur-Reihenfolge. In diesem Beitrag sollen die beiden Konzepte erl\u00e4utert werden. <\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 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\/der-unterschid-zwischen-bedeutungstragender-und-tastatur-reihenfolge\/#Bedeutungstragende_Reihenfolge\" >Bedeutungstragende Reihenfolge<\/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\/der-unterschid-zwischen-bedeutungstragender-und-tastatur-reihenfolge\/#Haeufige_Fehler_bei_der_bedeutungstragenden_Reihenfolge\" >H\u00e4ufige Fehler bei der bedeutungstragenden Reihenfolge<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/der-unterschid-zwischen-bedeutungstragender-und-tastatur-reihenfolge\/#Fazit\" >Fazit:<\/a><\/li><\/ul><\/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\/der-unterschid-zwischen-bedeutungstragender-und-tastatur-reihenfolge\/#Tastatur-Reihenfolge\" >Tastatur-Reihenfolge<\/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\/der-unterschid-zwischen-bedeutungstragender-und-tastatur-reihenfolge\/#Haeufige_Fehler_bei_der_Tastatur-Reihenfolge\" >H\u00e4ufige Fehler bei der Tastatur-Reihenfolge<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/der-unterschid-zwischen-bedeutungstragender-und-tastatur-reihenfolge\/#Fazit-2\" >Fazit<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Bedeutungstragende_Reihenfolge\"><\/span>Bedeutungstragende Reihenfolge<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bedeutungstragende Reihenfolge bezieht sich auf die Reihenfolge, in der Inhalte pr\u00e4sentiert werden und wie die Struktur des Inhalts die Bedeutung oder den Fluss der Interaktion beeinflusst. Diese Reihenfolge muss sinnvoll sein, damit Benutzer den Inhalt korrekt verstehen und navigieren k\u00f6nnen.<br \/>\nDie WCAG-Anforderung ist Success Kriterium 1.3.2 (&#8222;Meaningful Sequence&#8220;): : Die Inhalte m\u00fcssen in einer Reihenfolge pr\u00e4sentiert werden, die auch f\u00fcr Bildschirmleser und andere assistive Technologien sinnvoll ist. Zum Beispiel, wenn ein Formular oder eine Liste auf einer Webseite angezeigt wird, sollte die Reihenfolge der Felder oder Listenelemente logisch sein, damit ein Benutzer, der auf Tastatur oder mit einem Bildschirmleser navigiert, den Inhalt korrekt verstehen kann.<br \/>\nDie Reihenfolge, in der Inhalte vorgelesen werden wird im wesentlichen dadurch bestimmt, wie Elemente im Quellcode angeordnet sind. Auf einem Computer durchl\u00e4uft der Screenreader die Inhalte im Wesentlichen durch die Pfeil-rauf- und Pfeil-Runter-Tasten. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"Haeufige_Fehler_bei_der_bedeutungstragenden_Reihenfolge\"><\/span>H\u00e4ufige Fehler bei der bedeutungstragenden Reihenfolge<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Falsche Reihenfolge von Inhalten<br \/>\nProblem: Wenn die Reihenfolge der Inhalte auf einer Webseite nicht der logischen oder nat\u00fcrlichen Reihenfolge entspricht, kann das f\u00fcr Benutzer verwirrend sein. Dies ist besonders problematisch f\u00fcr Benutzer von Bildschirmlesern, da sie den Inhalt in der Reihenfolge lesen, wie er auf der Seite strukturiert ist.<\/p>\n<p>Beispiel: Eine Liste von Artikeln wird visuell von oben nach unten angezeigt, aber durch das HTML-Markup wird die Reihenfolge in einer f\u00fcr den Benutzer unlogischen Weise angezeigt (z. B. erst das unterste Element, dann das oberste).<\/p>\n<p>L\u00f6sung: Achten Sie darauf, dass die Reihenfolge der Inhalte sowohl im visuellen Layout als auch im HTML-Markup konsistent ist. Beispielsweise sollten Listen oder Formulare in der richtigen Reihenfolge kodiert sein, sodass Bildschirmleser sie sinnvoll abspielen k\u00f6nnen.<br \/>\nDie Verwendung von Tabellen oder falsche Grid-Strukturen f\u00fcr Layouts ist problematisch, h\u00e4ufig zu finden in E-Mails oder PDFs. Wenn Tabellen f\u00fcr Layouts verwendet werden kann es dazu f\u00fchren, dass etwa zuerst die linke Spalte, dann die rechte Spalte vorgelesen wird. Das ist problematisch, wenn die Inhalte zeilenweise aufgebaut sind, also von links nach rechts gelesen werden m\u00fcssten, um Sinn zu ergeben. <\/p>\n<p>Ein h\u00e4ufiges Problem sind Inhalte, die erreicht werden k\u00f6nnen, obwohl sie visuell ausgeblendet sind. Das ist aktuell eigentlich die Regel bei Cookie-Layern. Obwohl die Inhalte ausgegraut sind, k\u00f6nnen sie von Screenreadern erreicht und teilweise auch mit ihnen interagiert werden. Die L\u00f6sung w\u00e4re, eine Focus-Trap auf den Cookie-Layer zu setzen. <\/p>\n<p>Mangelnde Ber\u00fccksichtigung der Reihenfolge bei interaktiven Elementen<\/p>\n<p>Problem: Bei interaktiven Elementen wie Schaltfl\u00e4chen, Links oder Formularfeldern muss die Reihenfolge sinnvoll und in der richtigen Reihenfolge durch den Benutzer durchlaufen werden. Wenn diese Reihenfolge nicht stimmt, kann der Benutzer verwirrt werden und das Formular oder die Website nicht korrekt ausf\u00fcllen.<\/p>\n<p>Beispiel: Ein Formular, in dem das letzte Eingabefeld zuerst fokussiert wird, anstatt das erste Feld.<\/p>\n<p>L\u00f6sung: Achten Sie darauf, dass die Reihenfolge der interaktiven Elemente (Schaltfl\u00e4chen, Links, Formularfelder usw.) korrekt und in der logischen Reihenfolge angeordnet ist.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Fazit\"><\/span>Fazit:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Fehler bei der bedeutungstragenden Reihenfolge entstehen oft durch unlogische Strukturierung der Inhalte, unsachgem\u00e4\u00dfe Verwendung von HTML und ARIA oder die Missachtung der Hierarchie von \u00dcberschriften und interaktiven Elementen. Diese Fehler k\u00f6nnen die Barrierefreiheit erheblich beeintr\u00e4chtigen, insbesondere f\u00fcr Benutzer, die auf assistive Technologien angewiesen sind. Es ist entscheidend, Inhalte sowohl visuell als auch semantisch korrekt zu strukturieren. Am einfachsten ist es, die Inhalte von vorneherein im Quelltext korrekt aufzubauen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tastatur-Reihenfolge\"><\/span>Tastatur-Reihenfolge<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Tastatur-Reihenfolge bezieht sich auf die Reihenfolge, in der Benutzer mit der Tastatur zwischen interaktiven Elementen einer Webseite (wie Links, Schaltfl\u00e4chen, Formularfeldern etc.) navigieren. Die Reihenfolge muss so gestaltet sein, dass Benutzer ohne Maus (z. B. mit Tastatur oder assistiven Technologien wie Sprachsteuerung) effizient durch den Inhalt navigieren k\u00f6nnen. Der Begriff Tab-Reihenfolge ist aus meiner Sicht sinnvoller. Die Reihenfolge der Tab- und der Pfeiltasten m\u00fcssen nicht \u00fcberseinstimmen.<br \/>\nDie WCAG-Anforderung ist Success Criterion 2.4.3: Focus Order : Die Tastatur-Navigation muss in einer sinnvollen und vorhersehbaren Reihenfolge erfolgen, damit Benutzer alle interaktiven Elemente der Seite problemlos erreichen k\u00f6nnen. Das bedeutet, dass die Reihenfolge der Elemente nicht zuf\u00e4llig oder unlogisch sein darf.<br \/>\nBeispiel: Wenn ein Benutzer die Tab-Taste verwendet, um zwischen Feldern zu navigieren, muss die Reihenfolge, in der die Felder angesprungen werden, der nat\u00fcrlichen Logik des Formulars folgen (z. B. von oben nach unten, von links nach rechts).<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Haeufige_Fehler_bei_der_Tastatur-Reihenfolge\"><\/span>H\u00e4ufige Fehler bei der Tastatur-Reihenfolge<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Hier sind die h\u00e4ufigsten Fehler bei der Tab-Reihenfolge:<\/p>\n<p> 1. Unlogische oder zuf\u00e4llige Reihenfolge<br \/>\n   &#8211; Problem: Wenn die Reihenfolge der Elemente, zwischen denen ein Benutzer mit der Tab-Taste navigiert, nicht logisch ist oder nicht dem nat\u00fcrlichen Fluss des Inhalts entspricht, kann es zu Verwirrung und Frustration f\u00fchren.<br \/>\n   &#8211; Beispiel: Ein Formular, bei dem der Benutzer zuerst das letzte Eingabefeld erreicht und dann zur\u00fcck zum ersten Feld springen muss, oder interaktive Elemente, die in einer zuf\u00e4lligen Reihenfolge angeordnet sind.<br \/>\n   &#8211; L\u00f6sung: Die Reihenfolge der interaktiven Elemente sollte der nat\u00fcrlichen Reihenfolge der Inhalte entsprechen, zum Beispiel von oben nach unten und von links nach rechts.<\/p>\n<p> 2. Interaktive Elemente sind nicht fokussierbar<br \/>\n   &#8211; Problem: Einige interaktive Elemente (wie Schaltfl\u00e4chen, Links, Formularfelder oder Steuerelemente) sind m\u00f6glicherweise nicht fokussierbar, wenn sie mit der Tab-Taste angesteuert werden. Dies bedeutet, dass Benutzer, die keine Maus verwenden, diese Elemente nicht erreichen k\u00f6nnen.<br \/>\n   &#8211; Beispiel: Ein Link oder eine Schaltfl\u00e4che, die nur mit der Maus aktiviert werden kann, aber nicht \u00fcber die Tastatur (z. B. mit Tab oder Enter).<br \/>\n   &#8211; L\u00f6sung: Alle interaktiven Elemente sollten fokussierbar und \u00fcber die Tastatur zug\u00e4nglich sein. In HTML sollte daf\u00fcr sichergestellt werden, dass `tabindex` korrekt gesetzt ist und keine Elemente den Fokus blockieren.<\/p>\n<p> 3. Fokussierung auf unsichtbare oder nicht interaktive Elemente<br \/>\n   &#8211; Problem: Manchmal k\u00f6nnen Elemente, die keinen Nutzen f\u00fcr die Benutzer haben oder unsichtbar sind, fokussiert werden. Dies f\u00fchrt dazu, dass der Benutzer unn\u00f6tige oder nicht interaktive Elemente durchlaufen muss, ohne dass sie sichtbar oder n\u00fctzlich sind.<br \/>\n   &#8211; Beispiel: Ein unsichtbares `div`-Element, das in der Tastatur-Navigation ber\u00fccksichtigt wird, aber keine Funktionalit\u00e4t hat.<br \/>\n   &#8211; L\u00f6sung: Verwenden Sie CSS, um Elemente, die nicht fokussiert werden sollen, mit `aria-hidden=&#8220;true&#8220;` oder `tabindex=&#8220;-1&#8243;` auszublenden und sie aus der Tastatur-Navigation zu entfernen.<\/p>\n<p> 4. Fokus geht verloren<br \/>\n   &#8211; Problem: Der Fokus kann w\u00e4hrend der Navigation verloren gehen, insbesondere wenn Inhalte dynamisch geladen oder ge\u00e4ndert werden (z. B. beim Einsatz von JavaScript oder AJAX), und der Benutzer wei\u00df nicht, wo sich der Fokus befindet.<br \/>\n   &#8211; Beispiel: Der Benutzer navigiert durch ein Formular, aber nach dem Absenden eines Feldes wird der Fokus an eine unerwartete Stelle verschoben, was die Navigation erschwert.<br \/>\n   &#8211; L\u00f6sung: Achten Sie darauf, dass der Fokus bei dynamischen \u00c4nderungen oder Formularabsendungen korrekt gesetzt wird. Verwenden Sie JavaScript, um den Fokus nach Interaktionen sinnvoll zu steuern, z. B. nach dem Absenden eines Formulars oder bei der Anzeige eines Modals.<\/p>\n<p> 5. Fokus visuell nicht erkennbar<br \/>\n   &#8211; Problem: Wenn der Fokus auf einem Element liegt, aber visuell nicht klar erkennbar ist (z. B. wenn der Fokusrahmen auf Schaltfl\u00e4chen oder Links fehlt), wird es f\u00fcr Tastaturnutzer schwierig, zu sehen, welches Element sie gerade ansteuern.<br \/>\n   &#8211; Beispiel: Ein Link oder eine Schaltfl\u00e4che, bei der der Fokusrahmen nur minimal sichtbar oder nicht sichtbar ist, wodurch es f\u00fcr den Benutzer schwer wird zu erkennen, auf welchem Element er sich gerade befindet.<br \/>\n   &#8211; L\u00f6sung: Stellen Sie sicher, dass der Fokus visuell erkennbar ist. Dies kann durch das Hinzuf\u00fcgen von klaren, gut sichtbaren Fokus-Stilen erfolgen, z. B. durch ein Umranden des fokussierten Elements mit einer kontrastreichen Farbe.<\/p>\n<p> 6. Tabindex wird falsch verwendet<br \/>\n   &#8211; Problem: Der `tabindex`-Wert wird entweder falsch gesetzt oder \u00fcberm\u00e4\u00dfig verwendet, was dazu f\u00fchren kann, dass die Navigation auf der Seite verwirrend wird.<br \/>\n   &#8211; Beispiel: Manuell gesetzte `tabindex`-Werte, die die nat\u00fcrliche Reihenfolge der Elemente st\u00f6ren, oder das Setzen von `tabindex=&#8220;-1&#8243;` auf wichtigen Elementen, wodurch sie aus der Tastatur-Navigation ausgeschlossen werden.<br \/>\n   &#8211; L\u00f6sung: Verwenden Sie den `tabindex`-Wert sparsam und nur, wenn es wirklich notwendig ist. Lassen Sie die Standardreihenfolge der Navigation beibehalten, wenn keine spezifische \u00c4nderung erforderlich ist. Ein `tabindex=&#8220;0&#8243;` sorgt daf\u00fcr, dass das Element in der nat\u00fcrlichen Reihenfolge der Seite fokussiert wird.<\/p>\n<p>Fokus bewegt sich au\u00dferhalb des sichtbaren Bereichs<br \/>\n   &#8211; Problem: Der Benutzer kann mit der Tab-Taste zu einem Element gelangen, das sich au\u00dferhalb des sichtbaren Bereichs befindet, wodurch die Navigation erschwert wird.<br \/>\n   &#8211; Beispiel: Der Fokus springt zu einem versteckten oder nicht sichtbaren Element, das der Benutzer nicht sehen kann, weil es au\u00dferhalb des Viewports liegt.<br \/>\n   &#8211; L\u00f6sung: Achten Sie darauf, dass der Fokus immer auf sichtbare Elemente gesetzt wird. Wenn erforderlich, scrollen Sie automatisch zum fokussierten Element, um sicherzustellen, dass es im sichtbaren Bereich bleibt.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Fazit-2\"><\/span>Fazit<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Die h\u00e4ufigsten Fehler bei der Tastatur-Reihenfolge entstehen durch unlogische Reihenfolgen, unzug\u00e4ngliche Elemente und unsichtbare Fokussierungen. Durch das Beheben dieser Probleme wird die Zug\u00e4nglichkeit der Website f\u00fcr Tastaturnutzer erheblich verbessert und die Website entspricht den WCAG-Anforderungen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zwei Anforderungen aus der WCAG werden h\u00e4ufig verwechselt: Die bedeutungstragende und die Tastatur-Reihenfolge. In diesem Beitrag sollen die beiden Konzepte erl\u00e4utert werden. Bedeutungstragende Reihenfolge Bedeutungstragende&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/der-unterschid-zwischen-bedeutungstragender-und-tastatur-reihenfolge\/\">Weiterlesen<span class=\"screen-reader-text\">Der Unterschid zwischen bedeutungstragender und Tastatur-Reihenfolge<\/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-10017","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\/10017","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=10017"}],"version-history":[{"count":4,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10017\/revisions"}],"predecessor-version":[{"id":10022,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10017\/revisions\/10022"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=10017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/categories?post=10017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/tags?post=10017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}