{"id":9731,"date":"2024-12-19T18:35:52","date_gmt":"2024-12-19T16:35:52","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=9731"},"modified":"2025-07-16T19:04:02","modified_gmt":"2025-07-16T17:04:02","slug":"barrierefreie-chatbots","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-konzept-barrierefrei\/barrierefreie-chatbots\/","title":{"rendered":"Barrierefreie Gestaltung von Chatbots"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/digitale-barrierefreiheit.podigee.io\/283-chatbots-barrierefrei-gestalten\/embed?context=external&#038;theme=default\" style=\"border: 0\" frameBorder=\"0\" height=\"100\" width=\"100%\"><\/iframe><\/p>\n<p>Generell gelten f\u00fcr Chatbots die gleichen Anforderungen wie f\u00fcr die gesamte Anwendung. In diesem Beitrag werden nur Chatbot-spezifische Herausforderungen behandelt.<\/p>\n<p>Chatbots werden in der Regel nicht selbst entwickelt. Vielmehr werden sie von Dritt-Anbietern \u00fcbernommen und \u00fcber Frames, iFrames oder andere Technologien integriert. Frames ben\u00f6tigen einen Titel, der deren Zweck beschreibt. Der Fokus der Tastatur sollte hinein und hinaus bewegt werden k\u00f6nnen. Dabei sollte darauf geachtet werden, dass sie korrekt in die Website-Hierarchie eingebunden sind, Zum Beispiel \u00fcber HTML Aside oder ARIA Complementary. Das gilt entsprechend, wenn andere Technologien zur Einbindung genutzt werden. Generell sind Frames unproblematisch, was die Barrierefreiheit angeht.<\/p>\n<p>Chatbots befinden sich oft als Sticky-Elemente in der unteren rechten Ecke einer Website. F\u00fcr Blinde sind diese Elemente oft unauff\u00e4llig. Um auf deren Existenz aufmerksam zu machen, kann man zum Beispiel mit internen Sprunglinks am Anfang der Website arbeiten. BTW sollten Sticky-Elemente so eingebunden werden, dass sie beim Zoomen den Inhalt nicht \u00fcberlagern. <\/p>\n<p>Ein wichtiger Aspekt ist die Bedienbarkeit per Tastatur. Sind alle Elemente per Tastatur erreichbar, bedienbar ?<\/p>\n<p>\u00dcber Aria live atomic oder ARIA Alert  sollten die Antworten ausgegeben werden, sobald sie vollst\u00e4ndig vorliegen. Bei LLMS ist es \u00fcblich, dass die Anfworten zeitverz\u00f6gert ausgegeben werden. Der Fokus sollte nicht auf die Antwort verschoben werden, da man ja in einem Chat ist und eventuell eine weitere R\u00fcckfrage stellen m\u00f6chte. <\/p>\n<p>Fragen und Antworten sollten \u00fcber P-Tags strukturiert werden. Andere Strukturen wie Headings oder Zitatbl\u00f6cke halte ich f\u00fcr diesen Zweck nicht f\u00fcr sinnvoll. W\u00e4hrend f\u00fcr Fragen ein Absatz meistens ausreicht, k\u00f6nnen l\u00e4ngere Antworten ihrerseits in einzelnen Abs\u00e4tzen strukturiert werden. <\/p>\n<p>Es sollte klar unterscheidbar sein, was die Frage und was die Antwort ist, eine rein visuelle Unterscheidung durch Farben oder Einr\u00fcckung ist nicht ausreichend. An dieser Stelle ist es sinnvoll, mit visuellem Text zu arbeiten statt mit ARIA Labels, so sind die Informationen f\u00fcr alle sichtbar. Beispiel:<\/p>\n<blockquote><p>\nFrage: Wo beantrage ich einen Schwerbehindertenausweis?<br \/>\nAntwort: Der Schwerbehindertenausweis wird bei den Versorgungs\u00e4mtern beantragt.\n<\/p><\/blockquote>\n<p>Bei einem Chat sind \u00fcblicherweise mehrere Personen beteiligt. In diesem Fall sollte nat\u00fcrlich der Name oder Nickname der jeweiligen Person am Anfang des jeweiligen Beitrags gezeigt werden. Das ist heute allerdings bereits \u00fcblich. <\/p>\n<p>In Desktop-Zeiten war es \u00fcblich, dass Fragen per Return abgesendet wurden. Das hat vor und Nachteile. Manchmal dr\u00fcckt man Return, um einen Zeilenumbruch zu erzeugen. Bei Smartphones bzw. Tablets mit Bildschirm-Tastatur kommt man nicht unbedingt auf die Idee, einen Zeilenumbruch zu machen, um die Frage abzuschicken. Ich denke, es ist beides in Ordnung, das Absenden per Return oder das Anbieten eines Absende-Buttons. Beides entspricht bekannten Patterns. <\/p>\n<p>Ein wichtiges Thema sind auch die Denkpausen: Bisher sind mir keine Chatbots bekannt, die wirklich lange Wartezeiten erfordern. Bei ChatGPT denkt man h\u00f6chstens, dass man dem LLMSbeim Nachdenken zuschauen kann, w\u00e4hrend es die Antworten formuliert. Allerdings ist es sinnvoll, dem Nutzenden mitzuteilen, dass seine Frage gesendet wurde, zum Beispiel per ARIA Alert, Sehenden ist das soweit klar, weil das Text-Eingabefeld geleert wird und die Frage als normaler Text angezeigt wird. <\/p>\n<p>Ist eine Wartezeit erforderlich, sollte ein Indikator eingebunden werden, der entsprechend barrierefrei ist. Die sich bewegenden Elemente wie die typischen drehenden Spinner sollten vermieden werden, um das Kriterium 2.2.2 Pause, Stop, Hide zu erf\u00fcllen. Das kann ein sich nicht bewegender Spinner oder eine Meldung &#8222;Antwort wird erzeugt&#8220; oder \u00e4hnlich sein.<\/p>\n<p>Zu unterscheiden ist zwischen echten Chatbots, bei denen Nachrichten explizit abgesendet werden und Echt-Zeit-Kommunikation = Real Time Communication RTC, bei dem Nachrichten w\u00e4hrend des Schreibens bereits beim Empfangenden angezeigt werden. Bei Letzterem wird durch die Verwendung entsprechender Protokolle sichergestellt, dass sie von den Nutzenden assistiver Technologien auch gelesen werden k\u00f6nnen. F\u00fcr Real Time Communication gelten die erweiterten Anforderungen der EN 301549. Das hei\u00dft zum Beispiel, dass Antworten durch Screenreader bereits gelesen werden k\u00f6nnen, w\u00e4hrend sie geschrieben werden. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Generell gelten f\u00fcr Chatbots die gleichen Anforderungen wie f\u00fcr die gesamte Anwendung. In diesem Beitrag werden nur Chatbot-spezifische Herausforderungen behandelt. Chatbots werden in der Regel&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/design-konzept-barrierefrei\/barrierefreie-chatbots\/\">Weiterlesen<span class=\"screen-reader-text\">Barrierefreie Gestaltung von Chatbots<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":5397,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9731","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/9731","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=9731"}],"version-history":[{"count":9,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/9731\/revisions"}],"predecessor-version":[{"id":10140,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/9731\/revisions\/10140"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/5397"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=9731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}