{"id":7957,"date":"2023-06-30T14:46:56","date_gmt":"2023-06-30T12:46:56","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=7957"},"modified":"2023-07-04T08:32:17","modified_gmt":"2023-07-04T06:32:17","slug":"konsistente-gestaltung-von-navigation-und-ui-elementen","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/konsistente-gestaltung-von-navigation-und-ui-elementen\/","title":{"rendered":"Konsistente Gestaltung von Navigation und UI-Elementen"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/digitale-barrierefreiheit.podigee.io\/103-konsistente-gestaltung-von-navigation-ui-elementen-und-beschriftungen\/embed?context=external&#038;theme=default\" style=\"border: 0\" frameBorder=\"0\" height=\"100\" width=\"100%\"><\/iframe><br \/>\nF\u00e4lschlicherweise wird digitale Barrierefreiheit \u00fcberwiegend so verstanden, das alles unter der Haube stattfindet &#8211; sprich vor allem im HTML und ein wenig im CSS. Tats\u00e4chlich spielt aber die Gestaltung von UI-Elementen eine gro\u00dfe Rolle. Sprachliche Verst\u00e4ndlichkeit kommt als dritte Dimension sp\u00e4testens mit dem European Accessibility Act dazu.<br \/>\nDa das vor allem f\u00fcr Einsteigende ins Thema oft schwierig ist: Die WCAG ist immer sehr knapp, das ist auf den universellen Anspruch des Dokuments zur\u00fcckzuf\u00fchren. Im Kontext Web hilft es eigentlich immer, die &#8222;Understanding&#8220;-Dokumente zu lesen, die mit jedem WCAG-Erfolgskriterium verbunden sind. Sie enthalten Beispiele, die das Ganze fassbarer machen.<br \/>\nEin weiteres Problem besteht darin, dass die WCAG-Kriterien theoretisch immer alle gleichzeitig gelten. Man kann zum Beispiel nicht konsistente Navigation ohne Tastatur ohne konsistente Identifikation ohne den ganzen Block zu Formular-Elementen besprechen. Ich mache es trotzdem.<\/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\/barrierefreies-internet\/entwicklung-und-design\/konsistente-gestaltung-von-navigation-und-ui-elementen\/#SC_323_Consistent_Navigation_Level_AA\" >SC 3.2.3:Consistent Navigation (Level AA)<\/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\/barrierefreies-internet\/entwicklung-und-design\/konsistente-gestaltung-von-navigation-und-ui-elementen\/#324_Consistent_Identification_Level_AA\" >3.2.4: Consistent Identification (Level AA)<\/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\/barrierefreies-internet\/entwicklung-und-design\/konsistente-gestaltung-von-navigation-und-ui-elementen\/#246_Headings_and_Labels\" >2.4.6: Headings and Labels<\/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\/barrierefreies-internet\/entwicklung-und-design\/konsistente-gestaltung-von-navigation-und-ui-elementen\/#Link_purpose_in_context\" >Link purpose in context<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"SC_323_Consistent_Navigation_Level_AA\"><\/span>SC 3.2.3:Consistent Navigation (Level AA)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Das Kriterium der &#8222;Konsistenten Navigation&#8220; zielt darauf ab, eine einheitliche und vorhersehbare Navigation auf einer Website sicherzustellen. Es handelt sich um eine grundlegende Anforderung, um die Benutzerfreundlichkeit und Barrierefreiheit einer Webseite f\u00fcr Menschen mit unterschiedlichen F\u00e4higkeiten zu verbessern.<br \/>\nEine konsistente Navigation bedeutet, dass die Navigationsstruktur, das Design und die Bezeichnungen von Links und Men\u00fcs auf allen Seiten einer Website einheitlich sind. Dies erm\u00f6glicht es den Benutzern, sich leichter auf der Website zu orientieren, den Inhalt zu finden, den sie suchen, und sich effektiv durch die verschiedenen Seiten zu bewegen.<br \/>\nEs gibt verschiedene Aspekte, die bei der Umsetzung einer konsistenten Navigation ber\u00fccksichtigt werden sollten. Dazu geh\u00f6rt die Verwendung einer klaren und einheitlichen Struktur f\u00fcr die Hauptnavigation, die auf allen Seiten gleich bleibt. Dies kann beispielsweise durch ein horizontales Men\u00fc am oberen Rand oder eine vertikale Seitenleiste erreicht werden.<br \/>\nDar\u00fcber hinaus sollten die Bezeichnungen von Links und Men\u00fcpunkten pr\u00e4zise und aussagekr\u00e4ftig sein, um den Benutzern zu helfen, den Inhalt zu verstehen und zu antizipieren, auf den sie beim Klicken eines Links treffen werden. Es ist wichtig, auf \u00fcberm\u00e4\u00dfig abstrakte oder mehrdeutige Bezeichnungen zu verzichten, um Verwirrung zu vermeiden.<br \/>\nDie Platzierung der Navigationskomponenten sollte ebenfalls konsistent sein, damit Benutzer sie schnell finden k\u00f6nnen. Sie sollten an einer gut sichtbaren und erwarteten Position platziert werden, um eine intuitive Navigation zu erm\u00f6glichen.<br \/>\nDie Einhaltung des Kriteriums der Konsistenten Navigation tr\u00e4gt dazu bei, dass Menschen mit Behinderungen, einschlie\u00dflich Sehbehinderungen oder kognitiven Einschr\u00e4nkungen, die Website effektiv nutzen k\u00f6nnen. Durch die Schaffung einer einheitlichen und vorhersehbaren Navigation wird die Benutzererfahrung verbessert und die Barrieren beim Navigieren auf der Website verringert.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"324_Consistent_Identification_Level_AA\"><\/span>3.2.4: Consistent Identification (Level AA)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die Konsistente Identifikation bezieht sich auf die eindeutige Benennung und Identifizierung von Interaktionselementen wie Links, Schaltfl\u00e4chen, Formularfeldern und anderen Elementen auf einer Website. Es ist wichtig, dass diese Elemente auf allen Seiten der Website einheitlich und konsistent benannt und gestaltet sind, um eine klare Erkennbarkeit und Bedienbarkeit zu gew\u00e4hrleisten.<br \/>\nEin Beispiel f\u00fcr eine konsistente Identifikation ist die Verwendung des Alt-Attributs f\u00fcr Bilder. Das Alt-Attribut bietet eine alternative Textbeschreibung f\u00fcr Bilder, die von Bildschirmleseprogrammen oder anderen assistiven Technologien verwendet wird, um Menschen mit Sehbehinderungen den Inhalt der Bilder zu vermitteln. Durch die konsistente Verwendung des Alt-Attributs wird sichergestellt, dass diese Informationen in koh\u00e4renter Weise pr\u00e4sentiert werden und die Nutzer eine einheitliche Erfahrung haben.<br \/>\nEin weiteres Beispiel betrifft die Beschriftung von Formularelementen. Wenn ein Formular auf einer Website vorhanden ist, sollten die Beschriftungen f\u00fcr Eingabefelder, Kontrollk\u00e4stchen und Schaltfl\u00e4chen eindeutig und konsistent sein. Dies hilft Benutzern, die Eingabefelder zu verstehen und auszuf\u00fcllen, insbesondere f\u00fcr Menschen mit Sehbehinderungen oder kognitiven Einschr\u00e4nkungen.<br \/>\nDie Konsistente Identifikation hat auch Auswirkungen auf die Navigationselemente einer Website. Die Verwendung von klaren, eindeutigen und konsistenten Bezeichnungen f\u00fcr Men\u00fcpunkte, Links und Schaltfl\u00e4chen erleichtert den Benutzern die Orientierung und den Zugriff auf den gew\u00fcnschten Inhalt. Wenn beispielsweise der Link zum Zur\u00fcckkehren zur Startseite auf allen Seiten mit &#8222;Startseite&#8220; beschriftet ist, k\u00f6nnen Benutzer schnell erkennen, wo sie sich befinden und wie sie navigieren k\u00f6nnen.<br \/>\nDie Einhaltung des Kriteriums der Konsistenten Identifikation tr\u00e4gt dazu bei, dass die Website f\u00fcr alle Benutzer leichter verst\u00e4ndlich und bedienbar ist. Menschen mit Sehbehinderungen, kognitiven Einschr\u00e4nkungen oder motorischen Schwierigkeiten profitieren von der klaren Identifikation und der einheitlichen Gestaltung der Interaktionselemente.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"246_Headings_and_Labels\"><\/span>2.4.6: Headings and Labels<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die Verwendung von \u00dcberschriften ist wichtig, um die Struktur und Hierarchie einer Webseite zu kennzeichnen. Durch die korrekte Verwendung von \u00dcberschriften k\u00f6nnen Benutzer schnell den Inhalt einer Webseite \u00fcberfliegen und wichtige Informationen leicht identifizieren. \u00dcberschriften sollten in einer logischen Reihenfolge angeordnet sein, beginnend mit der Haupt\u00fcberschrift (\u00fcblicherweise die H1-\u00dcberschrift) und dann in aufsteigender Ordnung (H2, H3 usw.) f\u00fcr untergeordnete Abschnitte. DAs wird allerdings bereits im Erfolgskritierum Info &#038; Relationship festgelegt. Heading and labels besagt hingegen, dass \u00dcberschriften deskriptiv sein, also den zu glieddernden Inhalt ad\u00e4quat beschreiben.<br \/>\nDie Beschriftungen von Formularfeldern und anderen interaktiven Elementen sind ebenfalls wichtig, um den Benutzern zu helfen, ihre Funktion zu verstehen. Klare und aussagekr\u00e4ftige Beschriftungen erm\u00f6glichen es Benutzern, das gew\u00fcnschte Formularfeld oder Element leicht zu identifizieren und korrekte Eingaben zu machen. Formularfeldbeschriftungen sollten pr\u00e4gnant und genau sein, um Missverst\u00e4ndnisse oder Fehler zu vermeiden.<br \/>\nUm das Kriterium &#8222;\u00dcberschriften und Beschriftungen&#8220; zu erf\u00fcllen, sollten Webentwickler sicherstellen, dass ihre Webseiten die richtige Verwendung von \u00dcberschriften gem\u00e4\u00df den HTML-Standardtags (wie <h1`, `h2`, `h3` usw.) umsetzen. Dar\u00fcber hinaus sollten Formularfelder mit entsprechenden `<label>`-Tags versehen werden, um klare Beschriftungen bereitzustellen. Zum Beispiel ist &#8222;Nachname&#8220; f\u00fcr das Eingabefeld f\u00fcr den Nachnamen besser als &#8222;Name&#8220;. Enth\u00e4lt eine Webseite mehr als ein Formular, sollten die Elemente jeweils unterschiedlich benannt sein oder etwa durch Fieldset sichergestellt werden, dass die Formulare nicht miteinander verwechselt werden, weil es etwa zwei Mal ein Eingabefeld f\u00fcr e-Mail und zwei Buttons namens &#8222;Absenden&#8220; gibt.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Link_purpose_in_context\"><\/span>Link purpose in context<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Der Zweck dieses Kriteriums besteht darin, sicherzustellen, dass Links f\u00fcr alle Benutzer, einschlie\u00dflich Menschen mit Sehbehinderungen oder kognitiven Einschr\u00e4nkungen, klar und verst\u00e4ndlich sind. Durch die Verwendung aussagekr\u00e4ftiger und kontextbezogener Linktexte k\u00f6nnen Benutzer besser verstehen, wohin ein Link sie f\u00fchren wird, ohne auf visuelle oder sonstige Kontextinformationen angewiesen zu sein.<br \/>\nUm das Kriterium &#8222;Link Purpose in Context&#8220; zu erf\u00fcllen, sollten Linktexte beschreibend und eindeutig sein. Sie sollten den Benutzern eine klare Vorstellung davon vermitteln, was sie erwartet, wenn sie auf den Link klicken. Es ist wichtig, allgemeine Phrasen wie &#8222;Klicken Sie hier&#8220; zu vermeiden, da sie keine spezifischen Informationen \u00fcber das Ziel des Links liefern.<br \/>\nStattdessen sollte der Linktext den Inhalt oder die Funktion des verlinkten Ziels widerspiegeln. Wenn beispielsweise ein Link auf einen Artikel mit dem Titel &#8222;Tipps f\u00fcr barrierefreie Webseitengestaltung&#8220; verweist, k\u00f6nnte der Linktext &#8222;Barrierefreie Webseitengestaltungstipps&#8220; lauten. Auf diese Weise haben Benutzer eine klare Vorstellung davon, wohin der Link f\u00fchrt, noch bevor sie ihn aktivieren. Wichtig ist daneben auch, unerwartetes Verhalten zu verhindern: Es sollte klar sein, ob ein Link zu einer anderen Unterseite f\u00fchrt oder zu einem anderen Web-Angebot, einem Download oder einem Video.<br \/>\nEs ist auch wichtig sicherzustellen, dass Links im Kontext des umgebenden Textes pr\u00e4sentiert werden. Der Text, der den Link umgibt, sollte relevante Informationen enthalten, die dem Benutzer den Zweck des Links erkl\u00e4ren. Wenn beispielsweise ein Link in einem Absatz \u00fcber barrierefreie Webentwicklung erscheint, sollte der umgebende Text Informationen liefern, die den Benutzer darauf hinweisen, dass der Link weitere Informationen zu diesem Thema enth\u00e4lt.<br \/>\nDurch die Einhaltung des Kriteriums &#8222;Link Purpose in Context&#8220; wird die Zug\u00e4nglichkeit und Benutzerfreundlichkeit einer Webseite verbessert. Benutzer k\u00f6nnen Links leichter verstehen und entscheiden, ob sie ihnen folgen m\u00f6chten. Menschen mit Sehbehinderungen, die auf Bildschirmleseprogramme angewiesen sind, k\u00f6nnen mithilfe des umgebenden Textes den Zweck des Links erfassen und fundierte Entscheidungen treffen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>F\u00e4lschlicherweise wird digitale Barrierefreiheit \u00fcberwiegend so verstanden, das alles unter der Haube stattfindet &#8211; sprich vor allem im HTML und ein wenig im CSS. Tats\u00e4chlich&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/konsistente-gestaltung-von-navigation-und-ui-elementen\/\">Weiterlesen<span class=\"screen-reader-text\">Konsistente Gestaltung von Navigation und UI-Elementen<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":663,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7957","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/7957","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=7957"}],"version-history":[{"count":6,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/7957\/revisions"}],"predecessor-version":[{"id":7999,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/7957\/revisions\/7999"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/663"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=7957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}