{"id":9792,"date":"2025-01-25T17:17:20","date_gmt":"2025-01-25T15:17:20","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?p=9792"},"modified":"2025-02-23T14:37:31","modified_gmt":"2025-02-23T12:37:31","slug":"inhalte-vor-screenreadern-verstecken-wann-warum-und-wie","status":"publish","type":"post","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/inhalte-vor-screenreadern-verstecken-wann-warum-und-wie\/","title":{"rendered":"Inhalte vor Screenreadern verstecken &#8211; wann, warum und wie"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/verstecktes-menue.jpg\" alt=\"Verstecktes Men\u00fc\" width=\"1920\" height=\"1080\" class=\"alignleft size-full wp-image-9793\" srcset=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/verstecktes-menue.jpg 1920w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/verstecktes-menue-300x169.jpg 300w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/verstecktes-menue-1024x576.jpg 1024w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/verstecktes-menue-768x432.jpg 768w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/verstecktes-menue-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><br \/>\n<iframe loading=\"lazy\" src=\"https:\/\/digitale-barrierefreiheit.podigee.io\/289-inhalte-vor-screenreadern-verstecken-so-gehts\/embed?context=external&#038;theme=default\" style=\"border: 0\" frameBorder=\"0\" height=\"100\" width=\"100%\"><\/iframe><br \/>\nOft kommt von Verantwortlichen die Frage, wann Inhalte vor assistiven Technologien, insbesondere Screenreadern versteckt werden sollten. In diesem Beitrag m\u00f6chte ich eine Einsch\u00e4tzung treffen. Manche Themen sind umstritten, bei manchen Aspekten ist es eindeutig.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_88 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\/inhalte-vor-screenreadern-verstecken-wann-warum-und-wie\/#Nicht-informationstragende_Elemente\" >Nicht-informationstragende Elemente<\/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\/inhalte-vor-screenreadern-verstecken-wann-warum-und-wie\/#Nur_zeitweise_sichtbare_Elemente\" >Nur zeitweise sichtbare Elemente<\/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\/inhalte-vor-screenreadern-verstecken-wann-warum-und-wie\/#Wie_Inhalte_vor_Screenreadern_verstecken\" >Wie Inhalte vor Screenreadern verstecken?<\/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\/inhalte-vor-screenreadern-verstecken-wann-warum-und-wie\/#Wie_testen\" >Wie testen?<\/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\/inhalte-vor-screenreadern-verstecken-wann-warum-und-wie\/#Relevante_WCAG-Erfolgskriterien\" >Relevante WCAG-Erfolgskriterien<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Nicht-informationstragende_Elemente\"><\/span>Nicht-informationstragende Elemente<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Da f\u00fcr blinde Menschen der kognitive Load  mit der Zahl der Elemente steigt, ist es f\u00fcr sie sinnvoll, dass nicht informations-tragende  Elemente versteckt werden. Anders als Sehende k\u00f6nnen sie wiederkehrende oder f\u00fcr sie \u00fcberfl\u00fcssige Elemente nicht einfach \u00fcberspringen.<br \/>\nDekorative Elemente werden in aller Regel versteckt. Im Zusammenhang mit digitaler Barrierefreiheit spricht man von dekorativen Elementen, wenn bestimmte Inhalte oder Elemente einer Website oder Anwendung rein visuell sind und keinen funktionalen oder informativen Zweck haben. Sie dienen lediglich der \u00e4sthetischen Gestaltung und tragen nicht zur \u00dcbermittlung von wesentlichen Informationen bei.<br \/>\nBeispiele f\u00fcr dekorative Elemente sind:<\/p>\n<ol>\n<li>Hintergrundbilder oder Muster: Ein Hintergrundmuster oder ein Bild, das nur zur Versch\u00f6nerung der Seite dient.<\/li>\n<li>Verzierungsgrafiken: Icons, Ornamente oder Illustrationen, die keine zus\u00e4tzliche Bedeutung haben.<\/li>\n<li>Visuelle Trennelemente: Linien oder Grafiken, die zur optischen Strukturierung eingesetzt werden, aber keine inhaltliche Bedeutung haben. Dazu z\u00e4hlen auch Spacer-GIFs, wie sie in Layout-Tabellen eingesetzt wurden.<\/li>\n<\/ol>\n<p>Oft sind es Elemente, die auf jeder Seite vorkommen wie Banner, Trennlinien und so weiter.<br \/>\nRedundante Inhalte sollten nicht mehrfach vorgelesen werden, zum Beispiel ein Alternativtext und eine Bild-Beschreibung zu einem Bild.<br \/>\nAuch Elemente, die zur grafischen Gruppierung von Elementen verwendet werden, obwohl sie eine andere Funktion haben, sollten versteckt werden. Es sind die ber\u00fchmten Layout-Tabellen, die trotz CSS Grid nicht totzukriegen sind. Spezifisch daf\u00fcr gibt es das Attribut ARIA presentation. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Nur_zeitweise_sichtbare_Elemente\"><\/span>Nur zeitweise sichtbare Elemente<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Oft kommt es bei ausklappenden Elementen wie Men\u00fcs oder Akkordeons vor, dass Blinden der Inhalt vorgelesen wird, obwohl er f\u00fcr Sehende noch unsichtbar ist. Das kann vor allem bei umfangreichen Navigationen ein Problem werden: Stellen Sie sich eine Navigation mit Dutzenden Elemente vor. F\u00fcr Blinde ist es schwierig, sich innerhalb der Navigations-Hierarchie zu bewegen und den Navigationspunkt zu finden, den sie ben\u00f6tigen.<br \/>\nEin weiteres Problem sind Overlays oder Dialogboxen, zum Beispiel Cookie-Layer: Oftmals ist der Hintergrund f\u00fcr Sehende ausgegraut und gesperrt, damit zuerst mit dem Overlay interagiert wird. F\u00fcr Blinde ist es aber m\u00f6glich, mit dem Inhalt per Tastatur zu interagieren: Sie k\u00f6nnen ihn lesen und auch Links aufrufen. Das liegt an einer fehlerhaften Einbindung der Overlays. Problematisch wird es sp\u00e4testens dann, wenn Daten eingegeben werden sollen, denn Formulare lassen sich meisten nicht versenden, wenn das Overlay noch ge\u00f6ffnet ist. F\u00fcr Overlays werden nicht die Technologien zum Verstecken verwendet, wie sie unten genannt werden, sondern Focus Traps. Focus Traps halten den Focus absichtlich solange in einem Element, bis damit interagiert wurde.<br \/>\nEs sollen nur die Inhalte ausgegeben werden, die auch visuell sichtbar sind. Das hei\u00dft, wenn ein Navigationselement oder Akkordeon-Inhalt f\u00fcr Sehende sichtbar ist, sollte er auch f\u00fcr Blinde sichtbar sein.<br \/>\nNicht dazu z\u00e4hlen Inhalte, die bei Mouse Over angezeigt werden. Sie sollen ausgegeben werden, wenn Elemente den Screenreader-Fokus erhalten.<br \/>\nMeines Erachtens sollten auch UI-Elemente nicht versteckt werden, die aktuell inaktiv sind, zum Beispiel Senden-Buttons, die disabled sind, solange die Pflichtfelder nicht bef\u00fcllt sind. Blinde m\u00fcssen in der Lage sein, eine grafische Benutzer-Oberfl\u00e4che zu erlernen. Das wird ihnen erschwert, wenn sie nicht alle Elemente wahrnehmen k\u00f6nnen, egal, ob sie aktuell verf\u00fcgbar sind oder nicht. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Wie_Inhalte_vor_Screenreadern_verstecken\"><\/span>Wie Inhalte vor Screenreadern verstecken?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Es gibt verschiedene Methoden, um Inhalte vor Screenreadern zu verstecken:<br \/>\naria-hidden=&#8220;true&#8220;<\/p>\n<ul>\n<li>Was es macht: Elemente mit diesem Attribut werden komplett vor Screenreadern versteckt, bleiben aber visuell sichtbar.<\/li>\n<li>Wann verwenden: F\u00fcr dekorative Elemente oder Inhalte, die f\u00fcr Screenreader-Benutzer irrelevant sind.<\/li>\n<\/ul>\n<p>2. Leeres alt-Attribut f\u00fcr Bilder<\/p>\n<li>Was es macht: Bilder mit einem leeren alt=&#8220;&#8220;-Attribut werden von Screenreadern \u00fcbersprungen.<\/li>\n<li>Wann verwenden: F\u00fcr dekorative Bilder, die keine inhaltliche Bedeutung haben.<\/li>\n<p>3. CSS: display: none oder visibility: hidden<\/p>\n<li>Was es macht:<\/li>\n<li>display: none: Versteckt das Element sowohl visuell als auch f\u00fcr Screenreader.<\/li>\n<p>visibility: hidden: Versteckt das Element visuell, h\u00e4lt aber seinen Platz im Layout. Es wird von Screenreadern ignoriert.<\/li>\n<p>Wann verwenden: F\u00fcr Elemente, die komplett unsichtbar sein sollen, z. B. deaktivierte Men\u00fcs.<br \/>\nOffscreen-Technik (nur visuell verstecken)<\/p>\n<li>Was es macht: Das Element wird visuell aus dem sichtbaren Bereich verschoben, bleibt aber f\u00fcr Screenreader zug\u00e4nglich.<\/li>\n<li>Wann verwenden: F\u00fcr Inhalte, die nur Screenreader-Nutzern zug\u00e4nglich sein sollen, z. B. zus\u00e4tzliche Beschreibungen.<\/li>\n<p>Rolle presentation oder none f\u00fcr dekorative Elemente<\/p>\n<li>Was es macht: Elemente mit diesen Rollen werden von Screenreadern als irrelevant behandelt.<\/li>\n<li>Wann verwenden: F\u00fcr dekorative Icons oder andere visuelle Elemente, die keine Bedeutung haben.<\/li>\n<p>tabindex=&#8220;-1&#8243; f\u00fcr nicht-fokussierbare Inhalte<\/p>\n<li>Was es macht: Elemente werden aus der Tabulatorreihenfolge entfernt und k\u00f6nnen nicht per Tastatur fokussiert werden.<\/li>\n<li>Wann verwenden: F\u00fcr interaktive Inhalte, die derzeit nicht zug\u00e4nglich sein sollen.<\/li>\n<h2><span class=\"ez-toc-section\" id=\"Wie_testen\"><\/span>Wie testen?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wie immer rate ich Newbies davon ab, direkt mit Screenreadern zu testen. Vielmehr ist der Umgang mit dem Accessibility Tree aus meiner Sicht die beste Methode, um zu pr\u00fcfen, ob Inhalte f\u00fcr Screenreader versteckt oder sichtbar sind. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Relevante_WCAG-Erfolgskriterien\"><\/span>Relevante WCAG-Erfolgskriterien<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die folgenden WCAG-Kriterien sindin diesem Zusammenhang relevant:<\/p>\n<ul>\n<li>1.1.1 Nicht-Text-Inhalte<\/li>\n<li>1.3.1 Info und Beziehungen<\/li>\n<li>1.4.13 Inhalte bei Fokus oder Hover<\/li>\n<li>2.4.3 Fokusreihenfolge<\/li>\n<li>2.4.7 Fokus sichtbar<\/li>\n<li>4.1.2 Name, Rolle, Wert<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Oft kommt von Verantwortlichen die Frage, wann Inhalte vor assistiven Technologien, insbesondere Screenreadern versteckt werden sollten. In diesem Beitrag m\u00f6chte ich eine Einsch\u00e4tzung treffen. Manche&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/inhalte-vor-screenreadern-verstecken-wann-warum-und-wie\/\">Weiterlesen<span class=\"screen-reader-text\">Inhalte vor Screenreadern verstecken &#8211; wann, warum und wie<\/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-9792","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\/9792","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=9792"}],"version-history":[{"count":5,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/9792\/revisions"}],"predecessor-version":[{"id":9826,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/9792\/revisions\/9826"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=9792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/categories?post=9792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/tags?post=9792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}