{"id":5210,"date":"2021-02-20T16:40:48","date_gmt":"2021-02-20T14:40:48","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=5210"},"modified":"2023-08-20T18:56:48","modified_gmt":"2023-08-20T16:56:48","slug":"aria-accessible-rich-internet-applications-und-barrierefreiheit","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/aria-accessible-rich-internet-applications-und-barrierefreiheit\/","title":{"rendered":"ARIA &#8211; Accessible Rich Internet Applications  und Barrierefreiheit"},"content":{"rendered":"<p><script class=\"podigee-podcast-player\" src=\"https:\/\/player.podigee-cdn.net\/podcast-player\/javascripts\/podigee-podcast-player.js\" data-configuration=\"https:\/\/digitale-barrierefreiheit.podigee.io\/10-wai-aria\/embed?context=external\"><\/script><br \/>\nARIA ist eine Erg\u00e4nzung zu HTML. Es verleiht eine zus\u00e4tzliche semantische Bedeutung.<\/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\/konzeption\/aria-accessible-rich-internet-applications-und-barrierefreiheit\/#Grundsaetzliche_Regeln_zu_ARIA\" >Grunds\u00e4tzliche Regeln zu ARIA<\/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\/konzeption\/aria-accessible-rich-internet-applications-und-barrierefreiheit\/#Die_Aufgaben_von_ARIA\" >Die Aufgaben von ARIA<\/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\/konzeption\/aria-accessible-rich-internet-applications-und-barrierefreiheit\/#Name_%E2%80%93_Rolle_%E2%80%93_Wert\" >Name &#8211; Rolle &#8211; Wert<\/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\/konzeption\/aria-accessible-rich-internet-applications-und-barrierefreiheit\/#Eigenschaften\" >Eigenschaften<\/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\/barrierefreies-internet\/konzeption\/aria-accessible-rich-internet-applications-und-barrierefreiheit\/#Dynamische_Ereignisse\" >Dynamische Ereignisse<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Grundsaetzliche_Regeln_zu_ARIA\"><\/span>Grunds\u00e4tzliche Regeln zu ARIA<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wenn Sie die Wahl zwischen nativem HTML und ARIA haben, sollten Sie stets HTML den Vorzug geben.<br \/>\nARIA sollte nur eingesetzt werden, wenn Sie wissen, was Sie tun und die Funktion vollst\u00e4ndig verstanden haben. Schlechtes ARIA ist schlimmer als kein ARIA. Die ARIA-Rolle Application zum Beispiel kann eine Website f\u00fcr Blinde unbenutzbar machen.<br \/>\nMit ARIA alleine wird eine Webseite nicht barrierefrei.<br \/>\nARIA f\u00fcgt keine Funktion zur Website hinzu. Insbesondere, wenn Sie Javascript einsetzen, m\u00fcssen Sie zus\u00e4tzliche Funktionalit\u00e4ten wie Tastatur-Bedienbarkeit programmieren.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Die_Aufgaben_von_ARIA\"><\/span>Die Aufgaben von ARIA<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>ARIA erf\u00fcllt verschiedene Funktionen innerhalb von Webseiten.<br \/>\nEs f\u00fcgt dem HTML zus\u00e4tzliche Semantik hinzu. Der Navigation kann die Rolle Navigation hinzugef\u00fcgt werden, um die Navigation leichter mit assistiven Technologien zug\u00e4nglich zu machen. Das sind die sogenannten Landmarks.<br \/>\nBesonders wichtig ist ARIA f\u00fcr programmierte Elemente wie Buttons, Slider und so weiter. Dort kann ARIA ebenfalls hinzugef\u00fcgt werden, um Semantik f\u00fcr assistive Technologien hinzuzuf\u00fcgen. Das sind die sogenanten Widget-Roles.<br \/>\nWenn Sie ARIA zu einem bestehenden HTML-Element hinzuf\u00fcgen, wird die Rolle des HTML-Elements \u00fcberschrieben. Nehmen wir an, Sie zeichnen einen Link als Button aus, dann wird er sich f\u00fcr die assistive Technologie wie ein Button verhalten. Er taucht also nicht in der Liste der Links auf oder kann nicht in einem neuen Fennster ge\u00f6ffnet werden. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Name_%E2%80%93_Rolle_%E2%80%93_Wert\"><\/span>Name &#8211; Rolle &#8211; Wert<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Der Dreiklang der Barrierefreiheit ist Name &#8211; Rolle Wert oder name &#8211; role &#8211; value.<br \/>\nName ist die Bezeichnung eines Elements bzw. deren Inhalt.<br \/>\nRolle ist die Aufgabe des Elements, zum Beispiel \u00dcberschrift.<br \/>\nWert ist &#8211; wenn vorhanden -der Status eines Elements wie ausgew\u00e4hlt, nicht ausgew\u00e4hlt, ausgeklappt und so weiter.<br \/>\nDiese Informationen bringen native HTML-Elemente von Haus aus mit. Bei Javascript m\u00fcssen sie zus\u00e4tzlich kommuniziert werden.<br \/>\nARIA kann nicht nur die Semantik, sondern auch den Status eines Elements kommunizieren. Das ist etwa bei Formular-Elementen wie Radio-Buttons, bei Akordeons und anderen Elementen interessant.<br \/>\nDer Status kann etwa &#8222;ausgeklappt&#8220;, &#8222;ausgew\u00e4hlt&#8220; und so weiter sein.<br \/>\nInteressant ist ARIA auch, um Pflichtfelder in Formularen zu kennzeichnen. Entsprechende Felder werden dann von der assistiven Technologie als Pflichtfelder kommuniziert. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Eigenschaften\"><\/span>Eigenschaften<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>ARIA kann au\u00dferdem kommunizieren, dass Elemente Unterelemente haben. Oder andere Eigenschaften.<br \/>\nSo kann ein Navigationspunkt eine dynamisch ausklappbare Unternavigation haben. Das kann ARIA kommunizieren. Denken Sie aber daran, dass ARIA nicht automatisch die Unter-Navigation auch zug\u00e4nglich macht.<br \/>\n Auch Relationen k\u00f6nnen durch ARIA kommuniziert werden. Zum Beispiel kann es wichtig sein zu wissen, dass ein Element ein Kind-Element ist und was das Mutter-Element ist. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Dynamische_Ereignisse\"><\/span>Dynamische Ereignisse<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Single-Page-Applikationen werden immer wichtiger. Da sich hier h\u00e4ufig dynamische \u00c4nderungen abspielen ist es wichtig, diese an die assistive Technologie zu kommunizieren.<br \/>\nSo k\u00f6nnen durch ARIA Regionen definiert werden, in denen dynamische \u00c4nderungen ausgegeben werden. <\/p>\n<ul>\n<li><a href=\"https:\/\/aria-at.w3.org\/\">W3C-Projekt ARIA-AT <\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/\">WAI-ARIA Authoring Practices <\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/aria\/\">WAI-ARIA Overview<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn_web_development\/Core\/Accessibility\/WAI-ARIA_basics\">WAI-ARIA basics<\/a><\/li>\n<li><a href=\"https:\/\/netz-barrierefrei.de\/en\/aria.html\">ARIA in Accessibility<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>ARIA ist eine Erg\u00e4nzung zu HTML. Es verleiht eine zus\u00e4tzliche semantische Bedeutung. Grunds\u00e4tzliche Regeln zu ARIA Wenn Sie die Wahl zwischen nativem HTML und ARIA&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/aria-accessible-rich-internet-applications-und-barrierefreiheit\/\">Weiterlesen<span class=\"screen-reader-text\">ARIA &#8211; Accessible Rich Internet Applications  und Barrierefreiheit<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":611,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5210","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/5210","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=5210"}],"version-history":[{"count":9,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/5210\/revisions"}],"predecessor-version":[{"id":9745,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/5210\/revisions\/9745"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/611"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=5210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}