{"id":8857,"date":"2024-02-04T15:57:50","date_gmt":"2024-02-04T13:57:50","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?p=8857"},"modified":"2024-02-25T14:06:10","modified_gmt":"2024-02-25T12:06:10","slug":"barrierefreiheit-von-placeholder-texten","status":"publish","type":"post","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-von-placeholder-texten\/","title":{"rendered":"Barrierefreiheit von Placeholder-Texten"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/bahn-1.jpg\" alt=\"Screenshot Deutsche Bahn Formular\" width=\"960\" height=\"540\" class=\"alignleft size-full wp-image-8861\" srcset=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/bahn-1.jpg 960w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/bahn-1-300x169.jpg 300w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/bahn-1-768x432.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/>Placeholder oder Platzhalter-Texte werden in letzter Zeit wieder beliebter. Es handelt sich um Texte, die innerhalb von Eingabefeldern stehen und in der Regel verschwinden, wenn das Feld mit der Tastatur fokussiert oder mit der Maus angetippt wird bzw. wenn die Nutzerin selbst das erste Zeichen eingibt. H\u00e4ufig werden die Texte anstelle einer visuellen Beschriftung oder als Zusatz-Information verwendet. F\u00fcr die Barrierefreiheit gibt es eine Reihe von Problemen. <\/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\/barrierefreiheit-von-placeholder-texten\/#Scheinbare_Vorteile\" >Scheinbare Vorteile<\/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\/barrierefreiheit-von-placeholder-texten\/#Placeholder_muessen_die_Mindest-Kontraste_erfuellen\" >Placeholder m\u00fcssen die Mindest-Kontraste erf\u00fcllen<\/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\/barrierefreiheit-von-placeholder-texten\/#Placeholder_als_maschinen-lesbare_Beschriftung_ungeeignet\" >Placeholder als maschinen-lesbare Beschriftung ungeeignet<\/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\/barrierefreiheit-von-placeholder-texten\/#Alternativen_zu_Placeholdern\" >Alternativen zu Placeholdern<\/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\/barrierefreiheit-von-placeholder-texten\/#Zum_Weiterlesen\" >Zum Weiterlesen<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Scheinbare_Vorteile\"><\/span>Scheinbare Vorteile<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Zun\u00e4chst einmal erscheinen Placeholder auf mobilen Ger\u00e4ten praktisch. H\u00e4ufig wird die Beschriftung des Elements in das Eingabefeld gepackt, um Platz auf diesem engen Raum zu sparen. Die zweite Aufgabe kann sein, zus\u00e4tzliche Informationen neben der eigentlichen Beschriftung f\u00fcr die Ausf\u00fcllende Person zu geben. Das hei\u00dft, es gibt eine permanente sichtbare Beschriftung und den Placeholder. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Placeholder_muessen_die_Mindest-Kontraste_erfuellen\"><\/span>Placeholder m\u00fcssen die Mindest-Kontraste erf\u00fcllen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Placeholder haben in der Regel einen geringen Kontrast. \u00dcblich ist ein helles Grau auf Wei\u00df. Das Argument ist, dass die Ausf\u00fcllerin den Text nicht lesen muss, er verschwindet ja eh gleich und 2. schnell erkennen muss, dass sie diesen Text nicht eingetragen hat, also das Feld noch bef\u00fcllen muss. H\u00e4ufig wird hier einfach der Browser-Default f\u00fcr die Schrift-Farbe verwendet, die Farbe wird also gar nicht definiert, das f\u00fchrt aber in aller Regel zu dem gleichen Problem mit dem geringen Kontrast.<br \/>\nDas Problem ist , dass der Text auch wenn er unwichtig sein mag lesbar sein muss. Beide Argumente sind aus Sicht der Barrierefreiheit falsch: 1. Wei\u00df die Ausf\u00fcllerin nicht, ob der Text wichtig ist oder nicht. 2. Wei\u00df die Person nicht, ob das Webdesign sich f\u00fcr ein superhippes Design entschieden hat, wo auch der normale Text grau auf wei\u00df ist. Sie k\u00f6nnte also denken, dass sie dieses Feld bereits ausgef\u00fcllt hat.<br \/>\nBeides muss also erf\u00fcllt sein: Der Kontrast des Placeholders muss mindestens 4,5:1 sein und der selbst eingetragene Text noch mal deutlich mehr Kontrast haben. In letzterem Fall spricht nichts gegen Schwarz auf Wei\u00df. Glauben Sie mir, kein Kontrast-Verh\u00e4ltnis der Welt f\u00fchrt dazu, dass Ihr Formular h\u00fcbsch ist oder es jemand gerne ausf\u00fcllen wird.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Placeholder_als_maschinen-lesbare_Beschriftung_ungeeignet\"><\/span>Placeholder als maschinen-lesbare Beschriftung ungeeignet<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Das Placeholder ist weder als Label noch als maschinenlesbarer Name im Sinne SC 2.5.3: Label in Name anzusehen. Es ist also nicht als einzige Beschriftung eines Formular-Elements zul\u00e4ssig.<br \/>\nLeider ist das Placeholder-Attribut auch aus mehreren Gr\u00fcnden als Beschriftung oder Hilfe-Text ungeeignet.<br \/>\nDer Text verschwindet in der Regel, wenn das Eingabefeld fokussiert wird. Die Person, die das Feld antippt wei\u00df eventuell nicht, was sie dort eintragen soll und muss das Feld wieder verlassen. Ein Placeholder, der stehen bleibt kann dazu f\u00fchren, dass man Eingaben wie &#8222;MatthiasGeben Sie Ihren Vornamen ein&#8220; bekommt.<br \/>\nWie oben gesagt muss der Placeholder den Mindest-Kontrast erf\u00fcllen. Das kann aber dazu f\u00fchren, dass eine Person denkt, sie h\u00e4tte das Feld bereits bef\u00fcllt oder es sei automatisch &#8211; vom Browser oder durch die Anwendung &#8211; bef\u00fcllt worden. In umfangreichen Formularen kann das Problem durchaus bestehen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Alternativen_zu_Placeholdern\"><\/span>Alternativen zu Placeholdern<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wie oben gesagt birgt der Placeholder zahlreiche Probleme, bringt aber bis auf ein wenig Platz-Ersparnis keine Vorteile. Generell muss im Sinne der WCAG immer eine permanente Beschriftung (Label) vorhanden sein.<br \/>\nWir empfehlen generell den Verzicht auf Placeholder f\u00fcr Hilfe-Texte: Entweder ist der Text \u00fcberfl\u00fcssig oder er ist wichtig, dann hat er auch einen permanenten Platz verdient. Umstritten ist, ob der Hilfetext Teil des maschinenlesbaren Labels sein sollte, dies kann zu sehr langen Labeln f\u00fchren, die eher verwirren. Aktuell wird empfohlen, Hilfetexte oder Fehlermeldungen mit Aria Described by  mit dem Eingabefeld zu verkn\u00fcpfen.<br \/>\nDaneben gibt es eine weitere M\u00f6glichkeit, das sogenannte floating label oder die schwebende Beschriftung. Die schwebende Beschriftung sieht zun\u00e4chst wie ein Placeholder aus, fliegt aber bei Fokus aus dem Eingabefeld heraus, in der Regel nach oben links oder mittig. Generell ist diese Variante konform mit WCAG 2.1 AA, da ein permanentes, maschinenlesbares Label vorhanden ist. Das Kriterium 2.2.2  Pause, Stop, Hide bezieht sich auf Bewegungen, die von der Anwendung von selbst ausgel\u00f6st werden und au\u00dferdem l\u00e4nger als f\u00fcnf Sekunden dauern, greift bei diesem Effekt also nicht.<br \/>\nDennoch wird davon abgeraten. Im AAA-Kriterium 2.3.3 Animation from Interactions w\u00e4ren auch solche Animationen, die von der Nutzerin nicht intendiert sind verboten. Au\u00dfer einem hippen Effekt bringt das auch wirklich keinen Vorteil.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/example-floating-label-1024x576.jpg\" alt=\"Example Floating Label\" width=\"474\" height=\"267\" class=\"alignleft size-large wp-image-8945\" srcset=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/example-floating-label-1024x576.jpg 1024w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/example-floating-label-300x169.jpg 300w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/example-floating-label-768x432.jpg 768w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/example-floating-label-1536x864.jpg 1536w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/example-floating-label.jpg 1920w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><br \/>\nEine Alternative dazu w\u00e4ren Infield Top-Aligned Labels, dazu gibt es offenbar keinen deutschen Begriff. Dabei ist die Beschriftung von Anfang an dort, wo sie bei einem floating Label hinschweben w\u00fcrde, also oben links oder mittig innerhalb des Eingabefelds. Hiermit w\u00e4re ein bisschen Platz gespart, man hat ein maschinenlesbares permanentes Label. Nat\u00fcrlich muss auch hier der Mindest-Kontrast erf\u00fcllt und es sollte eine angemessene Schriftgr\u00f6\u00dfe verwendet werden (die allerdings nicht durch die WCAG begrenzt ist).<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/top-level.jpg\" alt=\"Beschriftung im Eingabefeld \" width=\"507\" height=\"215\" class=\"alignleft size-full wp-image-8864\" srcset=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/top-level.jpg 507w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/top-level-300x127.jpg 300w\" sizes=\"auto, (max-width: 507px) 100vw, 507px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Zum_Weiterlesen\"><\/span>Zum Weiterlesen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/konsistente-gestaltung-von-navigation-und-ui-elementen\/\">Konsistente Navigation und Identifikation<\/a><\/li>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-kontrasten-haeufige-probleme-und-loesungen\/\">Kontraste &#8211; h\u00e4ufige Probleme und L\u00f6sungen<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Placeholder oder Platzhalter-Texte werden in letzter Zeit wieder beliebter. Es handelt sich um Texte, die innerhalb von Eingabefeldern stehen und in der Regel verschwinden, wenn&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-von-placeholder-texten\/\">Weiterlesen<span class=\"screen-reader-text\">Barrierefreiheit von Placeholder-Texten<\/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-8857","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\/8857","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=8857"}],"version-history":[{"count":6,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/8857\/revisions"}],"predecessor-version":[{"id":8946,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/8857\/revisions\/8946"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=8857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/categories?post=8857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/tags?post=8857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}