{"id":10128,"date":"2025-07-13T16:36:03","date_gmt":"2025-07-13T14:36:03","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?p=10128"},"modified":"2025-07-19T17:16:29","modified_gmt":"2025-07-19T15:16:29","slug":"beschriftungen-barrierefrei-gestalten","status":"publish","type":"post","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/beschriftungen-barrierefrei-gestalten\/","title":{"rendered":"Beschriftungen barrierefrei gestalten"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/digitale-barrierefreiheit.podigee.io\/316-barrierefreie-beschriftungen-fur-ui-elemente\/embed?context=external&#038;theme=default\" style=\"border: 0\" frameBorder=\"0\" height=\"100\" width=\"100%\"><\/iframe><br \/>\nBeschriftungen\/Labels sind in der digitalen Barrierefreiheit ein uraltes Thema, das aber im Vergleich etwa zu \u00dcberschriften oder Alternativtexten oft untersch\u00e4tzt wird.<br \/>\nGenerell geht es hier nur um die Beschriftung von aktivierbaren Elementen, also UI-Elemente, nicht um die Beschriftung von Bereichen wie Landmarks oder Alternativtexte f\u00fcr Bilder. <\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 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\/beschriftungen-barrierefrei-gestalten\/#Forderungen_der_WCAG\" >Forderungen der WCAG<\/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\/beschriftungen-barrierefrei-gestalten\/#Moeglichkeiten_der_Beschriftung\" >M\u00f6glichkeiten der Beschriftung<\/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\/beschriftungen-barrierefrei-gestalten\/#Haeufige_Fehler\" >H\u00e4ufige Fehler<\/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\/beschriftungen-barrierefrei-gestalten\/#Tipps_fuer_zugaengliche_Beschriftungen\" >Tipps f\u00fcr zug\u00e4ngliche Beschriftungen<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Forderungen_der_WCAG\"><\/span>Forderungen der WCAG<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Tats\u00e4chlich hat die WCAG selbst relativ wenige Vorgaben zum Thema Beschriftungen. <\/p>\n<ul>\n<li>1.3.1: Info and Relationships <\/li>\n<li>2.4.6: Headings and Labels<\/li>\n<li>2.5.3: Label in Name <\/li>\n<li>3.3.2: Labels or Instructions <\/li>\n<\/ul>\n<p>Im WAI-Dokument <a href=\"https:\/\/www.w3.org\/TR\/accname-1.2\/\">Accessible Name and Description Computatio<\/a> n wird definiert, nach welcher Abfolge barrierefreie Beschriftungen ermittelt werden. Das ist notwendig, da es einige Wege gibt, eine Beschriftung festzulegen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Moeglichkeiten_der_Beschriftung\"><\/span>M\u00f6glichkeiten der Beschriftung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Der Accessible Name wird aus bestimmten Attributen oder sichtbarem Text ermittelt \u2013 in einer klaren Priorit\u00e4t. Das ist die  Reihenfolge der Namensberechnung (stark vereinfacht)<br \/>\nF\u00fcr HTML-Elemente (z.\u202fB. button, input, img, etc.):<br \/>\n1. aria-labelledby<br \/>\n\u2022 Holt den Namen aus einem anderen Element per ID.<br \/>\n\u2022 \u2192 \u00dcberschreibt alles andere.<br \/>\n2. aria-label<br \/>\n\u2022 Ein expliziter Name, direkt als Attribut angegeben.<br \/>\n\u2022  \u2192 \u00dcberschreibt sichtbaren Text, aber nicht aria-labelledby.<br \/>\n3.  Elementeigener Textinhalt (sichtbarer Text)<br \/>\n\u2022  Z.\u202fB. der Text innerhalb eines button oder label<br \/>\n\u2022  Wird verwendet, wenn aria&#8211;Attribute nicht gesetzt sind.<br \/>\n4.  alt-Attribut (nur bei img)<br \/>\n\u2022  Wird als Name verwendet, wenn vorhanden.<br \/>\n5.  title-Attribut<br \/>\n\u2022 Nur verwendet, wenn nichts anderes verf\u00fcgbar ist.<br \/>\n6.  label for=&#8220;&#8230;&#8220; oder umschlie\u00dfendes label bei input<br \/>\n\u2022  Gilt als \u201esichtbarer\u201c Name f\u00fcr Formularelemente<br \/>\n7. ARIA described by als Erg\u00e4nzung<br \/>\nARIA described by wird nur als Erg\u00e4nzung, nicht als Beschriftung von Elementen verwendet. Zum Beispiel werden eingeblendete Fehlermeldungen zu falsch ausgef\u00fcllten Formularfeldern per ARIA describedd by mit dem Formularfeld verk\u00fcnpft. Damit k\u00f6nnen Screenreader zwischen der Beschriftung und der ehlermeldung sauber unterscheiden.<br \/>\nPlaceholder-Texte z\u00e4hlen in diesem Kontext nicht als barrierefreie Beschriftung.<br \/>\nNachdem Motto zuerst HTML, ARIA nur wenn n\u00f6tig sollten implizite oder explizite Labels bevorzugt f\u00fcr die Beschriftung von HTML-Form-Elementen verwendet werden. Danach folgt ARIA Labeled by, um eine Beziehung zwischen Beschriftung und beschriftetem Element herzustellen. ARIA Label hat den Nachteil, dass es nicht automatisch angepasst wird, falls die visuelle Beschriftung ge\u00e4ndert wird. ARIA Label sollte nur verwendet werden, wenn ein uI-Element keine visuelle Beschriftung hat, zum Beispiel f\u00fcr ein Burger-Men\u00fc oder einen Share-Button, der nur aus einem Icon besteht. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Haeufige_Fehler\"><\/span>H\u00e4ufige Fehler<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>1. Gleiche Beschriftung, unterschiedliche Kontexte<br \/>\nEin Beispiel ist eine Website, die zwei Such-Funktionen enth\u00e4lt, eine f\u00fcr die Website, eine f\u00fcr eine Datenbank. Die Suche-Beschriftungen sollten eindeutig gestaltet werden, damit sie nicht verwechselt werden.<br \/>\n2. Gleicher Zweck, verschiedene Beschriftungen<br \/>\nEine Funktion erf\u00fcllt den gleichen zweck, wurde aber unterschiedlich beschriftet. Das ist mir in der Praxis allerdings noch nicht untergekommen.<br \/>\n3. Zu lange Beschriftungen<br \/>\nLange Beschriftungen liegen in jedem Fall dann vor, wenn visuelle Beschriftungen wohlmeinend zus\u00e4tzlich erg\u00e4nzt werden. Beispiel: Die visuelle Beschriftung ist &#8222;Senden&#8220;, die maschinen-lesbare Beschriftung ist &#8222;Klicken Sie hier, um das Formular abzusenden&#8220;. Anders sieht die Situation aus, wenn Beschriftungen aus Gruppen-Beschriftungen wie Fieldset\/Legend oder ARIA labeled by generiert werden, hier folgt man dem Standard, kann aber trotzdem eher verwirren als zu helfen. F\u00fcr diesen Fall gibt es leider keine einfache L\u00f6sung.<br \/>\n4. Unterschied zwischen Visueller und maschinen-lesbarer Beschriftung<br \/>\nWCAG 2.5.3: Label in Name fordert, dass die visuelle Beschriftung Teil des maschinen-lesbaren Namens ist. Wenn die visuelle Beschriftung&#8220;Vorname&#8220; lautet, d\u00fcrfte die maschinenlesbareBeschriftung nicht &#8222;Given Name&#8220; lauten, weil die Zeichenkette &#8222;Vorname&#8220; darin nicht vork\u00e4me. 2.5.3 richtet sich vor allem an Verwenderinnen von Sprachsteuerung. Der Sprachbefehl &#8222;Gehe zu Eingabefeld Vorname&#8220; w\u00fcrde in dem Beispiel nicht funktionieren, weil die maschinen-lesbare Beschriftung nicht &#8222;Vorname&#8220; enth\u00e4lt. Eine maschinenlesbare Beschrirftung wie &#8222;Vorname\/Given Name&#8220; w\u00e4re aber erlaubt. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tipps_fuer_zugaengliche_Beschriftungen\"><\/span>Tipps f\u00fcr zug\u00e4ngliche Beschriftungen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Ist die visuelle Beschriftung in der maschinen-lesbaren Beschriftung enthalten?<\/li>\n<li>Schauen Sie sich einmal nur die Beschriftungen an, die Sie in Ihrer Applikation verwenden. Gibt es mehrfach vorkommende Beschriftungen wie &#8222;Suche&#8220;, die aber unterschiedliche Zwecke erf\u00fcllen? <\/li>\n<li>Sind Beschriftungen aus sich selbst heraus bzw. aus dem Kontext heraus verst\u00e4ndlich oder ist es sinnvoll, mit ARIA described by einen zus\u00e4tzlichen Bezug herzustellen?<\/li>\n<li>Sind Beschriftungen bzw. Gruppierungs-Beschriftungen oder ARIA-labeled-By-Beschriftungen zu lang? <\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Beschriftungen\/Labels sind in der digitalen Barrierefreiheit ein uraltes Thema, das aber im Vergleich etwa zu \u00dcberschriften oder Alternativtexten oft untersch\u00e4tzt wird. Generell geht es hier&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/beschriftungen-barrierefrei-gestalten\/\">Weiterlesen<span class=\"screen-reader-text\">Beschriftungen barrierefrei gestalten<\/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-10128","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\/10128","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=10128"}],"version-history":[{"count":7,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10128\/revisions"}],"predecessor-version":[{"id":10142,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10128\/revisions\/10142"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=10128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/categories?post=10128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/tags?post=10128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}