{"id":9314,"date":"2026-08-19T08:00:00","date_gmt":"2026-08-19T08:00:00","guid":{"rendered":"https:\/\/decareto.com\/?p=9314"},"modified":"2026-08-14T12:50:27","modified_gmt":"2026-08-14T12:50:27","slug":"was-sind-typische-barrierefreiheitsprobleme-bei-suchfunktionen","status":"publish","type":"post","link":"https:\/\/decareto.com\/de\/was-sind-typische-barrierefreiheitsprobleme-bei-suchfunktionen\/","title":{"rendered":"Was sind typische Barrierefreiheitsprobleme bei Suchfunktionen?"},"content":{"rendered":"<p>Typische Barrierefreiheitsprobleme bei Suchfunktionen sind fehlende Beschriftungen (Labels) f\u00fcr Suchfelder, mangelnde Tastaturzug\u00e4nglichkeit, fehlende Fokus-Indikatoren sowie unzureichende Fehlermeldungen bei der Ergebnisanzeige. Diese Probleme betreffen sowohl Nutzerinnen und Nutzer, die auf Screenreader angewiesen sind, als auch Personen, die ausschlie\u00dflich mit der Tastatur navigieren. Der folgende Artikel beantwortet die wichtigsten Fragen rund um barrierefreie Suchfunktionen und zeigt, wo typische Schwachstellen entstehen.<\/p>\n<h2>Welche WCAG-Kriterien gelten f\u00fcr Suchfelder?<\/h2>\n<p>F\u00fcr Suchfelder sind vor allem die WCAG-Erfolgskriterien 1.3.1 (Info und Beziehungen), 2.4.3 (Fokus-Reihenfolge), 3.3.2 (Beschriftungen oder Anweisungen) sowie 4.1.2 (Name, Rolle, Wert) relevant. Diese Kriterien stellen sicher, dass Suchfelder f\u00fcr alle Nutzerinnen und Nutzer zug\u00e4nglich sind, unabh\u00e4ngig davon, welche Hilfstechnologie sie verwenden.<\/p>\n<p>Im Einzelnen bedeutet das:<\/p>\n<ul>\n<li><strong>Erfolgskriterium 1.3.1:<\/strong> Informationen und Strukturen m\u00fcssen programmatisch bestimmbar sein. Ein Suchfeld muss also im HTML-Code eindeutig als Eingabefeld erkennbar und korrekt ausgezeichnet sein.<\/li>\n<li><strong>Erfolgskriterium 2.4.3:<\/strong> Die Fokus-Reihenfolge muss sinnvoll und vorhersehbar sein. Das Suchfeld soll in einer logischen Reihenfolge erreichbar sein, wenn Nutzerinnen und Nutzer per Tastatur durch die Seite navigieren.<\/li>\n<li><strong>Erfolgskriterium 3.3.2:<\/strong> Eingabefelder brauchen sichtbare Beschriftungen oder klare Anweisungen, damit klar ist, welche Eingabe erwartet wird.<\/li>\n<li><strong>Erfolgskriterium 4.1.2:<\/strong> Name, Rolle und Wert jedes interaktiven Elements m\u00fcssen programmatisch verf\u00fcgbar sein, damit Screenreader das Suchfeld korrekt vorlesen und bedienbar machen k\u00f6nnen.<\/li>\n<\/ul>\n<p>Alle vier Kriterien geh\u00f6ren zum Konformit\u00e4tslevel A oder AA und sind damit f\u00fcr Websites, die unter das Barrierefreiheitsst\u00e4rkungsgesetz (BFSG) fallen, verpflichtend. Wichtig zu verstehen: Das Bestehen automatisierter Tests bedeutet nicht automatisch vollst\u00e4ndige rechtliche Konformit\u00e4t. Automatisierte Pr\u00fcfungen decken typischerweise einen Teil der m\u00f6glichen Probleme ab, ersetzen aber keine manuelle Pr\u00fcfung durch Fachleute.<\/p>\n<h2>Warum ist ein fehlendes Label beim Suchfeld ein Problem?<\/h2>\n<p>Ein fehlendes Label beim Suchfeld ist ein Problem, weil Screenreader das Eingabefeld ohne Beschriftung nicht sinnvoll vorlesen k\u00f6nnen. Betroffene Nutzerinnen und Nutzer h\u00f6ren dann nur \u201eEingabefeld\u201c oder gar keine Ansage, ohne zu wissen, welche Eingabe erwartet wird. Dies verst\u00f6\u00dft gegen WCAG-Erfolgskriterium 4.1.2 und ist eines der h\u00e4ufigsten Barrierefreiheitsprobleme auf Websites.<\/p>\n<p>In der Praxis tritt dieses Problem oft auf, wenn Webentwicklerinnen und Webentwickler ein Suchfeld rein visuell gestalten, also zum Beispiel eine Lupe als Icon verwenden, aber kein programmatisch verkn\u00fcpftes <code>&lt;label&gt;<\/code>-Element oder kein <code>aria-label<\/code>-Attribut setzen. F\u00fcr sehende Nutzerinnen und Nutzer ist die Funktion durch das Icon eindeutig. F\u00fcr Screenreader-Nutzerinnen und -Nutzer ist das Feld jedoch nicht identifizierbar.<\/p>\n<p>Korrekte L\u00f6sungsans\u00e4tze umfassen:<\/p>\n<ul>\n<li>Ein sichtbares <code>&lt;label&gt;<\/code>-Element, das per <code>for<\/code>-Attribut mit dem Eingabefeld verkn\u00fcpft ist<\/li>\n<li>Ein visuell verstecktes Label, das dennoch im DOM vorhanden ist und von Screenreadern ausgelesen wird<\/li>\n<li>Das <code>aria-label<\/code>-Attribut direkt am Input-Element als Alternative, wenn kein sichtbares Label gew\u00fcnscht ist<\/li>\n<\/ul>\n<p>Fehlende Labels z\u00e4hlen zu den Problemen, die automatisierte <a href=\"https:\/\/decareto.com\/de\/barrierefreiheit\/test-tool\/\">Barrierefreiheits-Test-Tools<\/a> in der Regel zuverl\u00e4ssig erkennen, da sie direkt im HTML-Code sichtbar sind.<\/p>\n<h2>Wie wirken sich fehlende Tastaturzug\u00e4nglichkeit und Fokus-Indikatoren aus?<\/h2>\n<p>Fehlende Tastaturzug\u00e4nglichkeit bedeutet, dass Nutzerinnen und Nutzer, die keine Maus verwenden k\u00f6nnen, das Suchfeld nicht erreichen oder bedienen k\u00f6nnen. Fehlende Fokus-Indikatoren machen es unm\u00f6glich zu erkennen, welches Element gerade aktiv ist. Beide Probleme betreffen nicht nur Menschen mit motorischen Einschr\u00e4nkungen, sondern auch Power-User, die bevorzugt per Tastatur navigieren.<\/p>\n<h3>Tastaturzug\u00e4nglichkeit: Was konkret fehlt<\/h3>\n<p>Ein Suchfeld muss per Tab-Taste erreichbar sein und per Enter-Taste absendbar sein. Probleme entstehen, wenn:<\/p>\n<ul>\n<li>Das Suchfeld aus dem nat\u00fcrlichen Tab-Fokus-Fluss entfernt wurde, zum Beispiel durch <code>tabindex=\"-1\"<\/code><\/li>\n<li>Der Suchbutton nicht per Tastatur ausl\u00f6sbar ist, weil er als <code>&lt;div&gt;<\/code> statt als <code>&lt;button&gt;<\/code> umgesetzt wurde<\/li>\n<li>Autovervollst\u00e4ndigungs-Vorschl\u00e4ge per Tastatur nicht navigierbar sind<\/li>\n<\/ul>\n<h3>Fokus-Indikatoren: Sichtbarkeit im Fokus<\/h3>\n<p>WCAG-Erfolgskriterium 2.4.7 (Sichtbarer Fokus) verlangt, dass der Tastaturfokus immer sichtbar ist. Viele Websites blenden den Standard-Fokusrahmen des Browsers per CSS aus (<code>outline: none<\/code>), ohne einen eigenen, gut sichtbaren Ersatz zu definieren. F\u00fcr Tastaturnutzerinnen und -nutzer ist das Navigieren auf solchen Seiten dann kaum m\u00f6glich, weil sie nicht erkennen, wo sie sich gerade befinden. Ein ausreichender Farbkontrast des Fokus-Indikators ist dabei ebenso wichtig wie seine blo\u00dfe Existenz.<\/p>\n<h2>Was sind typische Probleme bei Suchergebnissen und Fehlermeldungen?<\/h2>\n<p>Typische Barrierefreiheitsprobleme bei Suchergebnissen und Fehlermeldungen sind fehlende Statusmeldungen, unzureichende Fehlertexte und eine mangelnde Strukturierung der Ergebnisliste. Screenreader-Nutzerinnen und -Nutzer erfahren so weder, dass eine Suche ausgef\u00fchrt wurde, noch wie viele Ergebnisse gefunden wurden oder was bei einem Fehler zu tun ist.<\/p>\n<p>Konkret treten folgende Probleme h\u00e4ufig auf:<\/p>\n<ul>\n<li><strong>Fehlende ARIA-Live-Regionen:<\/strong> Wenn Suchergebnisse dynamisch nachgeladen werden, ohne dass eine <code>aria-live<\/code>-Region gesetzt ist, erhalten Screenreader keine Benachrichtigung \u00fcber die \u00c4nderung. Nutzerinnen und Nutzer wissen nicht, ob die Suche abgeschlossen ist.<\/li>\n<li><strong>Unklare Fehlermeldungen:<\/strong> Wenn keine Ergebnisse gefunden wurden, reicht eine rein visuelle Meldung nicht aus. Die Fehlermeldung muss programmatisch mit dem Suchfeld verkn\u00fcpft sein und eine klare Handlungsanweisung enthalten.<\/li>\n<li><strong>Fehlende Strukturierung der Ergebnisliste:<\/strong> Suchergebnisse sollten als semantisch korrekte Liste (<code>&lt;ul&gt;<\/code> oder <code>&lt;ol&gt;<\/code>) ausgezeichnet sein, damit Screenreader die Anzahl der Ergebnisse ansagen k\u00f6nnen.<\/li>\n<li><strong>Unzureichende Linktexte in Ergebnissen:<\/strong> Links wie \u201eMehr lesen\u201c oder \u201eDetails\u201c ohne Kontext versto\u00dfen gegen WCAG-Erfolgskriterium 2.4.4 (Linkzweck im Kontext). Jedes Suchergebnis sollte einen eindeutigen, beschreibenden Linktext haben.<\/li>\n<\/ul>\n<p>Diese Probleme lassen sich teilweise automatisiert erkennen, teilweise aber nur durch manuelle Tests, bei denen ein Screenreader tats\u00e4chlich genutzt wird. Sch\u00e4tzungen aus der Forschung gehen davon aus, dass automatisierte Tests etwa 30 bis 50 Prozent aller Barrierefreiheitsprobleme abdecken.<\/p>\n<h2>Wie lassen sich Barrierefreiheitsprobleme in Suchfunktionen erkennen?<\/h2>\n<p>Barrierefreiheitsprobleme in Suchfunktionen lassen sich durch eine Kombination aus automatisierten Scans und manuellen Tests erkennen. Automatisierte Tools pr\u00fcfen den HTML-Code auf strukturelle Fehler wie fehlende Labels oder falsch gesetzte ARIA-Attribute. Manuelle Tests mit Screenreadern und ausschlie\u00dflicher Tastaturnavigation decken dar\u00fcber hinaus funktionale Probleme auf.<\/p>\n<p>Ein strukturiertes Vorgehen umfasst folgende Schritte:<\/p>\n<ol>\n<li><strong>Automatisierten Scan durchf\u00fchren:<\/strong> Ein <a href=\"https:\/\/decareto.com\/de\/barrierefreiheit\/test-tool\/\">Barrierefreiheits-Test-Tool<\/a> scannt die Seite und identifiziert HTML-Fehler, fehlende Labels, Kontrastprobleme und fehlerhafte ARIA-Attribute. Dies gibt einen ersten \u00dcberblick \u00fcber die Schwachstellen.<\/li>\n<li><strong>Tastaturnavigation manuell testen:<\/strong> Navigieren Sie ausschlie\u00dflich per Tab, Shift+Tab, Enter und Pfeiltasten durch die Suchfunktion. Pr\u00fcfen Sie, ob das Suchfeld erreichbar ist, ob der Fokus sichtbar bleibt und ob Suchergebnisse zug\u00e4nglich sind.<\/li>\n<li><strong>Screenreader-Test:<\/strong> Testen Sie die Suchfunktion mit einem Screenreader wie NVDA (Windows) oder VoiceOver (macOS\/iOS). Achten Sie darauf, ob das Suchfeld korrekt angesagt wird, ob Suchergebnisse vorgelesen werden und ob Fehlermeldungen wahrnehmbar sind.<\/li>\n<li><strong>Kontrast pr\u00fcfen:<\/strong> Pr\u00fcfen Sie den Farbkontrast des Suchfeldes, des Platzhaltertextes und des Fokus-Indikators. WCAG fordert ein Kontrastverh\u00e4ltnis von mindestens 4,5:1 f\u00fcr normalen Text und 3:1 f\u00fcr gro\u00dfe Schrift.<\/li>\n<\/ol>\n<p>Wichtig: Automatisierte Tests allein reichen nicht aus, um alle Probleme zu finden. Sie sind jedoch ein effizienter erster Schritt, um offensichtliche Fehler schnell zu identifizieren und zu priorisieren, bevor aufwendigere manuelle Pr\u00fcfungen folgen.<\/p>\n<h2>Wer ist vom BFSG f\u00fcr barrierefreie Suchfunktionen verantwortlich?<\/h2>\n<p>F\u00fcr die Barrierefreiheit von Suchfunktionen auf einer Website sind die Betreiberinnen und Betreiber dieser Website verantwortlich, sofern sie unter den Anwendungsbereich des Barrierefreiheitsst\u00e4rkungsgesetzes (BFSG) fallen. Das BFSG setzt den European Accessibility Act (EAA) in deutsches Recht um und gilt ab Juni 2025 f\u00fcr viele Unternehmen im B2C-Bereich.<\/p>\n<p>Konkret betrifft das BFSG unter anderem:<\/p>\n<ul>\n<li>Online-Shops und E-Commerce-Plattformen<\/li>\n<li>Anbieter von Bankdienstleistungen mit digitalem Zugang<\/li>\n<li>Anbieter bestimmter digitaler Dienstleistungen, die Verbraucherinnen und Verbrauchern zug\u00e4nglich sind<\/li>\n<\/ul>\n<p>Unternehmen mit weniger als zehn Mitarbeitenden und einem Jahresumsatz unter zwei Millionen Euro sind von bestimmten Pflichten ausgenommen, sollten jedoch pr\u00fcfen, ob Ausnahmen in ihrem konkreten Fall zutreffen. F\u00fcr \u00f6ffentliche Stellen gelten bereits seit l\u00e4ngerer Zeit strengere Anforderungen gem\u00e4\u00df der EU-Richtlinie 2016\/2102, umgesetzt in der BITV 2.0.<\/p>\n<p>Wichtig: Die Verantwortung liegt beim Auftraggeber der Website, nicht automatisch bei der beauftragten Agentur. Agenturen sind jedoch gut beraten, ihre Kundinnen und Kunden aktiv auf Barrierefreiheitspflichten hinzuweisen und barrierefreie Umsetzungen anzubieten, um als kompetente Partnerinnen und Partner wahrgenommen zu werden. Ob eine Website tats\u00e4chlich alle rechtlichen Anforderungen erf\u00fcllt, sollte im Zweifelsfall durch rechtliche Fachberatung gekl\u00e4rt werden.<\/p>\n<h2>So unterst\u00fctzt decareto bei der Pr\u00fcfung von Suchfunktionen auf Barrierefreiheit<\/h2>\n<p>Wir bei decareto haben eine SaaS-Plattform entwickelt, die Websites automatisiert auf Barrierefreiheitsprobleme scannt, darunter auch typische Schwachstellen in Suchfunktionen. Unsere Software hilft Agenturen, Compliance-Teams und Datenschutzbeauftragten dabei, Barrierefreiheits-Audits effizient durchzuf\u00fchren und Handlungsbedarfe klar zu priorisieren.<\/p>\n<p>Konkret bietet decareto f\u00fcr die Pr\u00fcfung von Suchfunktionen und anderen Website-Elementen:<\/p>\n<ul>\n<li><strong>Automatisierter WCAG-Scan:<\/strong> Wir erkennen typischerweise rund 90 Arten von Barrierefreiheitsproblemen, darunter fehlende Labels, fehlerhafte ARIA-Attribute, Kontrastprobleme und Fokus-Fehler.<\/li>\n<li><strong>Priorisierung nach Schweregrad:<\/strong> Gefundene Probleme werden nach Schweregrad und WCAG-Konformit\u00e4tslevel eingestuft, damit Sie sofort wissen, wo dringender Handlungsbedarf besteht.<\/li>\n<li><strong>Konkrete Handlungsempfehlungen:<\/strong> Zu jedem gefundenen Problem liefern wir klare Hinweise zur Behebung, inklusive CSS-Selektoren und HTML-Informationen, die Entwicklerinnen und Entwicklern die gezielte Fehlerbehebung erleichtern.<\/li>\n<li><strong>Manuelle Erfassung erg\u00e4nzend m\u00f6glich:<\/strong> Da nicht alle Barrierefreiheitsprobleme automatisiert erkennbar sind, k\u00f6nnen manuell festgestellte Probleme direkt im Report dokumentiert werden.<\/li>\n<li><strong>Dauerhaftes Monitoring:<\/strong> Hunderte Websites lassen sich kontinuierlich \u00fcberwachen, sodass neue Barrieren nach \u00c4nderungen sofort erkannt und gemeldet werden.<\/li>\n<li><strong>Kombinierte Pr\u00fcfung:<\/strong> Barrierefreiheit und Datenschutz werden in einem einzigen Scan-Durchgang gepr\u00fcft, was den Aufwand erheblich reduziert.<\/li>\n<\/ul>\n<p>Wenn Sie wissen m\u00f6chten, welche Barrierefreiheitsprobleme Ihre Website oder die Websites Ihrer Kundinnen und Kunden aufweist, k\u00f6nnen Sie decareto direkt testen. <a href=\"https:\/\/decareto.com\/de\/signup\/\">Jetzt kostenfrei starten<\/a> und in wenigen Minuten einen vollst\u00e4ndigen Barrierefreiheits-Report erhalten.<\/p>\n<p><em>Dieser Text wurde mit Hilfe von KI erstellt und k\u00f6nnte Fehler beinhalten.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Suchfelder ohne Labels, fehlende Fokus-Indikatoren, WCAG-Verst\u00f6\u00dfe \u2013 so erkennen Sie die h\u00e4ufigsten Barrieren und beheben sie gezielt.<\/p>\n","protected":false},"author":6,"featured_media":9576,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":""},"categories":[44],"tags":[],"class_list":["post-9314","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"_links":{"self":[{"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/posts\/9314","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\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/comments?post=9314"}],"version-history":[{"count":1,"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/posts\/9314\/revisions"}],"predecessor-version":[{"id":9405,"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/posts\/9314\/revisions\/9405"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/media\/9576"}],"wp:attachment":[{"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/media?parent=9314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/categories?post=9314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/decareto.com\/de\/wp-json\/wp\/v2\/tags?post=9314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}