{"id":94664,"date":"2022-08-19T09:48:47","date_gmt":"2022-08-19T07:48:47","guid":{"rendered":"https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/"},"modified":"2021-07-06T09:46:33","modified_gmt":"2021-07-06T07:46:33","slug":"%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/","title":{"rendered":"\u2022 \u25b7 Was ist WAI ARIA-Markup? Zug\u00e4nglichkeit f\u00fcr Anf\u00e4nger"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey 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=\"Inhaltsverzeichnis umschalten\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Umschalten<\/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:\/\/rmarketingdigital.com\/de\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/#%C2%BFPor-que-hacer-su-sitio-accesible\" >Warum sollten Sie Ihre Website zug\u00e4nglich machen?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/#La-discapacidad-no-es-poco-comun\" >Behinderung ist keine Seltenheit<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/#La-accesibilidad-se-superpone-con-un-buen-diseno-web-y-SEO\" >Barrierefreiheit \u00fcberschneidet sich mit gutem Webdesign und SEO<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/#%C2%BFQue-son-los-lectores-de-pantalla\" >Was sind Bildschirmleser?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/#%C2%BFQue-es-ARIA\" >Was ist ARIA?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/de\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/#%C2%BFCuando-es-realmente-necesario-ARIA\" >Wann ist ARIA wirklich notwendig?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/#Entendiendo-ARIA\" >ARIA verstehen<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/de\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/#Roles-de-ARIA\" >ARIA-Rollen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/de\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/#Estados-y-Propiedades\" >Zust\u00e4nde und Eigenschaften<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/de\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/#Pruebas-de-accesibilidad-de-ARIA\" >ARIA-Zug\u00e4nglichkeitstests<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/de\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/#Otras-maneras-de-hacer-su-sitio-accesible\" >Andere M\u00f6glichkeiten, um Ihre Website zug\u00e4nglich zu machen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/de\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/#Haciendo-su-sitio-utilizable-para-todos\" >Machen Sie Ihre Website f\u00fcr alle nutzbar<\/a><\/li><\/ul><\/nav><\/div>\n<div>\n<div class=\"breadcrumbs\">\n<nav><span><span>\u24cc \u00bb <strong class=\"breadcrumb_last\" aria-current=\"page\">Was ist WAI ARIA Markup? Zug\u00e4nglichkeit f\u00fcr Anf\u00e4nger<\/strong><\/span><\/span><\/nav>\n<\/div>\n<p><iframe loading=\"lazy\" title=\"026 Nach den Angaben von WAI ARIA und HTML Comments\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/RgFVPZfhlQY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><noscript><iframe loading=\"lazy\" title=\"026 Nach den Angaben von WAI ARIA und HTML Comments\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/RgFVPZfhlQY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/noscript><\/p>\n<p>Barrierefreiheit ist ein gro\u00dfes Problem in der heutigen Online-Welt. Heutzutage wird es als inakzeptabel angesehen, eine Website zu haben, auf der viele Menschen nur schwer navigieren k\u00f6nnen.<\/p>\n<p>Die ARIA-Markierung ist ein Schritt in die richtige Richtung. Es ist eine Antwort auf die Frage, wie Sie Ihre Website f\u00fcr Menschen mit Behinderungen benutzerfreundlicher machen k\u00f6nnen.<\/p>\n<p>Was ist ARIA? Eine Reihe von Codeattributen, die die Funktionen von HTML erweitern und die Optimierung Ihrer Website f\u00fcr Bildschirmleser vereinfachen. Dazu werden Teile Ihrer Website f\u00fcr unterst\u00fctzende Technologien sichtbar gemacht, mit denen diese Ger\u00e4te sonst m\u00f6glicherweise \u00fcberhaupt nicht interagieren k\u00f6nnen.<\/p>\n<p>Sind Sie bereit, ARIA in Ihre Website aufzunehmen? Oder einfach nur neugierig, mehr \u00fcber das Thema zu erfahren? In diesem Artikel erkl\u00e4ren wir, was ARIA ist, wie Sie Ihre Website zug\u00e4nglich machen und geben Ihnen die Ressourcen, um mehr \u00fcber diese unsch\u00e4tzbare Technologie zu erfahren.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFPor-que-hacer-su-sitio-accesible\"><\/span><span id=\"Por_que_hacer_su_sitio_accesible\"><strong>Warum sollten Sie Ihre Website zug\u00e4nglich machen?<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Einige Leute fragen sich vielleicht: Warum sich um die Barrierefreiheit im Internet k\u00fcmmern? Ist es wirklich wichtig, darauf hinzuweisen, dass die Ressourcen zum Erlernen von Spezifikationen wie ARIA eingesetzt werden? Hat die Erstellung einer barrierefreien Website wirklich einen gro\u00dfen Einfluss?<\/p>\n<h3><span class=\"ez-toc-section\" id=\"La-discapacidad-no-es-poco-comun\"><\/span><span id=\"La_discapacidad_no_es_poco_comun\"><strong>Behinderung ist keine Seltenheit<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Eigentlich ja. Behinderung ist nicht so selten. 18.7% von Amerikanern haben irgendeine Form von Behinderung. Obwohl nicht alle diese Faktoren Ihre F\u00e4higkeit zur Interaktion mit dem Web beeintr\u00e4chtigen, handelt es sich immer noch um eine erstaunliche Zahl, die nur Personen aus den USA umfasst.<\/p>\n<p><noscript><\/noscript><br \/> 3. Der 3% von Amerikanern hat gleichzeitig eine Sehst\u00f6rung. Dies bedeutet, dass sie m\u00f6glicherweise Probleme beim Anzeigen von Websites haben und sich auf Tools wie Screenreader verlassen k\u00f6nnen. Dies ist gleichzeitig ein erheblicher Prozentsatz Ihrer potenziellen Nutzerbasis und umfasst \u00e4ltere Menschen und Menschen mit vor\u00fcbergehenden Behinderungen.<\/p>\n<p>Menschen mit Behinderungen brauchen das Internet genauso wie alle anderen. Viele nutzen es, um einzukaufen, Kontakte zu kn\u00fcpfen und Informationen zu finden. Manchmal ist es Ihre Haupt- oder sogar Ihre einzige M\u00f6glichkeit, dies zu tun.<\/p>\n<p>Die 54% von Menschen mit Behinderungen sind online, und obwohl diese Zahl geringer ist als die der allgemeinen Bev\u00f6lkerung, ist sie immer noch ein bedeutender Teil.<\/p>\n<p>Gleichzeitig ist es 2019. In diesen Zeiten m\u00fcssen wir uns bem\u00fchen, alle Benutzergruppen nach besten Kr\u00e4ften einzubeziehen. Menschen mit Behinderungen uneingeschr\u00e4nkten Zugriff auf das Surfen im Internet zu gew\u00e4hren, sollte ein wichtiges Ziel f\u00fcr jeden Webentwickler sein.<\/p>\n<p>Gleichzeitig bringt es sogar pers\u00f6nliche Vorteile mit sich.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"La-accesibilidad-se-superpone-con-un-buen-diseno-web-y-SEO\"><\/span><span id=\"La_accesibilidad_se_superpone_con_un_buen_diseno_web_y_SEO\"><strong>Barrierefreiheit \u00fcberschneidet sich mit gutem Webdesign und SEO<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Eine Website, die den Barrierefreiheitsstandards folgt, verwendet h\u00e4ufig gute Webdesign-Prinzipien, funktioniert am besten auf Mobilger\u00e4ten und hat einen hohen Stellenwert bei der Suchmaschinenoptimierung.<\/p>\n<p>Beispielsweise enth\u00e4lt einer der WCAG-Standards keine automatische Wiedergabe langer Audioclips, ohne dass der Ton gestoppt werden kann. Dies ist bereits ein gro\u00dfes No-No f\u00fcr Webdesigner. Ein weiterer Standard besteht darin, einen ausreichenden Farbkontrast zwischen den Elementen bereitzustellen. Farben, die auf einer Website gemischt werden, weisen h\u00e4ufig auf eine schlechte Palette hin.<\/p>\n<p>Das Befolgen der Richtlinien zur Barrierefreiheit f\u00fchrt daher zu einer Website, die besser aussieht und einfacher zu verwenden ist. Kann jemand &quot;Win-Win&quot; sagen?<\/p>\n<p><noscript><\/noscript><br \/> Barrierefreiheit ist gleichzeitig ein wichtiger Bestandteil von SEO. Das Vermeiden kann zu Ranking-Strafen von Google und anderen Suchmaschinen f\u00fchren. Das Hinzuf\u00fcgen von Alternativtext zu Ihren Bildern, einschlie\u00dflich Tastatursteuerelementen f\u00fcr interaktive Elemente, und die Verwendung von \u00dcberschriften hilft behinderten Besuchern und gibt Ihnen einen SEO-Schub.<\/p>\n<p>Wie Sie sehen, ist es eine gute Idee, Ihre Website zug\u00e4nglich zu machen, da sie alle Benutzergruppen betrifft. Wenn Sie eine Website entwerfen m\u00f6chten, die allen eine gute Erfahrung bietet, sollten Sie alles tun, um den Ausschluss von Menschen mit Behinderungen zu vermeiden.<\/p>\n<p>Sie k\u00f6nnen ARIA in Ihr Design implementieren, damit Benutzer mit Bildschirmleseprogrammen sich besser auf Ihrer Website zurechtfinden.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFQue-son-los-lectores-de-pantalla\"><\/span><span id=\"Que_son_los_lectores_de_pantalla\"><strong>Was sind Bildschirmleser?<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ein Bildschirmleser ist ein Programm, das den Inhalt einer Seite oder eines Dokuments vorliest und Ihnen gleichzeitig erm\u00f6glicht, mit der Tastatur durch die Seite zu navigieren. Jeder kann eines auf seinen Computer herunterladen, und es gibt eine Reihe kostenloser und kostenpflichtiger Programme.<\/p>\n<p>Einige von ihnen helfen gleichzeitig beim Navigieren auf dem Desktop und anderen Programmen sowie auf Websites. Sie k\u00f6nnen Text und Bilder f\u00fcr Sehbehinderte vergr\u00f6\u00dfern, und einige k\u00f6nnen eine Braillezeile erzeugen, die aktualisiert werden kann. In diesem Handbuch wird die Funktionsweise von Bildschirmleseprogrammen erl\u00e4utert.<\/p>\n<p>Ohne Screenreader h\u00e4tten sehbehinderte Menschen Schwierigkeiten, einen Computer und das Internet zu nutzen, oder k\u00f6nnten sie \u00fcberhaupt nicht benutzen.<\/p>\n<p>Die ARIA-Kennzeichnung spielt beim Betrieb dieser Werkzeuge eine wichtige Rolle. Es bietet zus\u00e4tzliche Informationen, bietet ihnen mehr Optionen und die M\u00f6glichkeit, mit Teilen der Benutzeroberfl\u00e4che zu interagieren, die f\u00fcr sie sonst unsichtbar w\u00e4ren.<\/p>\n<p>Aber was genau ist ARIA und wie k\u00f6nnen Sie Ihre Website verbessern, indem Sie sie einbinden? Lassen Sie uns eine kurze Zusammenfassung dieser Spezifikation und ihrer Funktionsweise geben.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue-es-ARIA\"><\/span><span id=\"Que_es_ARIA\"><strong>Was ist ARIA?<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>ARIA steht f\u00fcr Accessible Rich Internet Applications. Es handelt sich um eine Reihe von Attributen, die zus\u00e4tzlichen Kontext f\u00fcr die Darstellung einer Webseite und deren Inhalt bieten. Mit anderen Worten, sie bieten weitere Informationen zu Teilen der Benutzeroberfl\u00e4che, z. B. Popup-Warnungen, Men\u00fcs oder sogar ganze Abschnitte der Seite.<\/p>\n<p>Wenn Sie jemals eine Website mit Browser-Entwicklungstools gesehen haben, haben Sie sie m\u00f6glicherweise schon einmal gesehen.<\/p>\n<div>\n<p>&lt;Subt\u00edtulos por aRGENTeaM<\/p>\n<div>\n<table>\n<tbody>\n<tr>\n<td\/>\n<td>\n<div>\n<p>&lt;Subt\u00edtulos por aRGENTeaM<\/p>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>So zitieren Sie die Mozilla-Dokumentation: &quot;Das erg\u00e4nzende Orientierungspapier wird verwendet, um einen unterst\u00fctzenden Abschnitt zu kennzeichnen, der sich auf den Hauptinhalt bezieht, aber bei Trennung unabh\u00e4ngig sein kann.&quot; Auf diese Weise k\u00f6nnen Bildschirmleser im Grunde genommen anhand dieses Teils des Markups erkennen, um welchen Teil des Designs es sich handelt.<\/p>\n<p>Folglich k\u00f6nnen Sie mit ARIA barrierefreie Schnittstellen und Widgets erstellen, ohne deren Erscheinungsbild oder Verhalten im Frontend \u00e4ndern zu m\u00fcssen. Die meisten Menschen werden nicht einmal erkennen k\u00f6nnen, dass das Markup vorhanden ist. F\u00fcgen Sie jedoch einen kleinen Code hinzu, und Screenreader k\u00f6nnen nahtlos mit Ihrer Benutzeroberfl\u00e4che interagieren.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFCuando-es-realmente-necesario-ARIA\"><\/span><span id=\"Cuando_es_realmente_necesario_ARIA\">Wann ist ARIA wirklich notwendig?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Standardm\u00e4\u00dfig k\u00f6nnen Bildschirmleser die meisten HTML- und HTML5-Elemente verstehen. Wenn Sie eine sehr einfache und statische Site haben, m\u00fcssen Sie ARIA m\u00f6glicherweise \u00fcberhaupt nicht implementieren. Einige dynamische, interaktive Javascript-Elemente k\u00f6nnen von Bildschirmleseprogrammen jedoch nicht gesehen werden, und hier kommt das Markup ins Spiel.<\/p>\n<p>Abgesehen davon sollten Sie ARIA nicht verwenden, wenn auf das, was Sie definieren, bereits zugegriffen werden kann. Als Beispiel das HTML-Element es wird von Bildschirmlesern erkannt. Sie ben\u00f6tigen keine ARIA-Taste. Sie sollten Funktionen nur einschlie\u00dfen, wenn Sie keine unterst\u00fctzenden ger\u00e4tekompatiblen HTML-Elemente verwenden.<\/p>\n<p>In diesem Sinne muss ich technisch gesehen die erg\u00e4nzende Rolle nicht zu einem separaten Element hinzuf\u00fcgen, da beide dasselbe beschreiben. Trotz allem wird diese Gewinnspanne wie im vorherigen Fall sehr h\u00e4ufig gefunden.<\/p>\n<p>Bist du immer noch verwirrt? Lassen Sie uns etwas mehr dar\u00fcber sprechen, wie ARIA funktioniert.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Entendiendo-ARIA\"><\/span><span id=\"Entendiendo_ARIA\"><strong>ARIA verstehen<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Mit ARIA kann es sehr komplex werden, und es ist leicht, \u00fcberfordert zu werden. Aber die Grundlagen sind ziemlich leicht zu zerlegen. Sobald Sie sie verstanden haben, lernen Sie im Handumdrehen fortgeschrittenere Konzepte.<\/p>\n<p>Das ARIA-Markup besteht aus drei Attributen: Rollen, Status und Eigenschaften.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Roles-de-ARIA\"><\/span><span id=\"Roles_de_ARIA\">ARIA-Rollen<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Rollen definieren Elemente auf einer Seite, z. B. Schaltfl\u00e4chen und Kontrollk\u00e4stchen. Sie helfen Bildschirmlesern dabei, festzustellen, was die Teile einer Seite tun, und sie haben vier verschiedene Unterkategorien: Orientierungspunkte, Dokumente, Widgets und abstrakte Funktionen.<\/p>\n<ul>\n<li><strong>Hauptmerkmale<\/strong> - Teilen Sie eine Site in verschiedene Abschnitte auf, z. B. Hauptinhalt, Navigation und erg\u00e4nzende Bereiche. Dies kann Ihren Besuchern helfen, sich besser zu orientieren und auf einer Seite leichter zu finden, wonach sie suchen.<\/li>\n<li><strong>Dokumentfunktionen<\/strong>- Beschreiben Sie bestimmte Abschnitte innerhalb einer Seite, z. B. Artikel, Dokumente, Listen und Zeilen.<\/li>\n<li><strong>Widget-Rollen<\/strong> - Bestimmen Sie Elemente und Schnittstellen. Registerkarten, Textfelder, Warnungen und Schaltfl\u00e4chen sind einige der Elemente, die ARIA beschreiben kann. Wenn HTML diese Elemente nicht definiert oder Sie ein Widget verwenden, das aus vielen verschiedenen Teilen besteht, k\u00f6nnen die Rollen der Widgets einen Beitrag leisten.<\/li>\n<li><strong>Abstrakte Rollen<\/strong> - Diese werden vom Browser verwendet. Sie m\u00fcssen sich keine Sorgen um sie machen.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Estados-y-Propiedades\"><\/span><span id=\"Estados_y_Propiedades\">Zust\u00e4nde und Eigenschaften<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Zust\u00e4nde und Eigenschaften arbeiten gleichwertig miteinander. Einmal festgelegte Eigenschaften \u00e4ndern sich selten, da sie nur Beziehungen zu anderen Elementen beschreiben. Zust\u00e4nde sind dynamisch und k\u00f6nnen sich von selbst oder durch Benutzerinteraktion \u00e4ndern.<\/p>\n<p>Ein Beispiel f\u00fcr einen Status ist Aria-Besetzt, der dem Bildschirmleser mitteilt, dass das Element aktualisiert wird. Ein anderes ist das Dr\u00fccken der Arie, das anzeigt, dass eine Taste gedr\u00fcckt wurde. Dies sind Elemente, die sich aktiv \u00e4ndern k\u00f6nnen.<\/p>\n<p>Abgesehen davon enthalten die Eigenschaften Attribute wie aria-valueemax, mit dem die maximale Anzahl in einem Bereichsw\u00e4hler festgelegt wird, oder aria-haspopup, das angibt, dass ein Element ein Popup ausl\u00f6st. Es ist unwahrscheinlich, dass sie aktualisiert werden.<\/p>\n<p>Und das sind die Grundlagen von ARIA. Viel einfacher, wenn es einmal kaputt geht, oder? Aber Sie w\u00e4ren \u00fcberrascht, wie viel Sie damit machen k\u00f6nnen.<\/p>\n<p>Weitere Informationen finden Sie in der offiziellen WAI-ARIA-Dokumentation oder in der Entwicklereinf\u00fchrung von Google f\u00fcr Anf\u00e4nger.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Pruebas-de-accesibilidad-de-ARIA\"><\/span><span id=\"Pruebas_de_accesibilidad_de_ARIA\"><strong>ARIA-Zug\u00e4nglichkeitstests<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Sobald Sie ARIA implementiert haben, m\u00f6chten Sie m\u00f6glicherweise sicherstellen, dass alles ordnungsgem\u00e4\u00df funktioniert. Wie sieht Ihre Website auf Hilfsger\u00e4ten tats\u00e4chlich aus?<\/p>\n<p>Am naheliegendsten ist es, einen kostenlosen Bildschirmleser wie NVDA herunterzuladen, sich die Augen zu verbinden und in die Stadt zu fahren. Dies gibt Ihnen die volle Erfahrung.<\/p>\n<p>Gleichzeitig k\u00f6nnen Sie die Augenbinde \u00fcberspringen und mit der Maus \u00fcber die Elemente fahren, die Sie auf ARIA-Attribute \u00fcberpr\u00fcfen m\u00f6chten. Sie werden jedoch wichtige Informationen verpassen, z. B. wie schwierig es ist, diese Elemente zu finden.<\/p>\n<p>Auch dies ist keine perfekte Darstellung der Verwendung eines Bildschirmleseger\u00e4ts, da das Erlernen viel \u00dcbung erfordert. Bitten Sie daher am besten echte Benutzer, Ihre Website zu testen.<\/p>\n<p>Gleichzeitig gibt es viele Inspektionstools wie den Firefox Accessibility Inspector, mit dem Sie Informationen zu den ausgew\u00e4hlten Elementen anzeigen k\u00f6nnen. WAVE weist auf mehrere Fehler hin, einschlie\u00dflich derer mit ARIA.<\/p>\n<p>Schlie\u00dflich ist diese ARIA-Widget-Checkliste ein gro\u00dfartiges Tool f\u00fcr die Entwurfspr\u00fcfung.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Otras-maneras-de-hacer-su-sitio-accesible\"><\/span><span id=\"Otras_maneras_de_hacer_su_sitio_accesible\"><strong>Andere M\u00f6glichkeiten, um Ihre Website zug\u00e4nglich zu machen<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>ARIA-Marken sind nur der Anfang, wenn es um die Barrierefreiheit im Internet geht. Es gibt viele andere Richtlinien, die Sie befolgen m\u00fcssen, um Ihre Website f\u00fcr Menschen mit Seh-, H\u00f6r-, Mobilit\u00e4ts- und anderen Beeintr\u00e4chtigungen nutzbar zu machen.<\/p>\n<p>Hier sind einige Beispiele f\u00fcr eine Handvoll Richtlinien, die befolgt werden m\u00fcssen.<\/p>\n<ul>\n<li>Der Inhalt der Website reagiert und funktioniert beim Erweitern.<\/li>\n<li>Die Site und ihre Elemente k\u00f6nnen mit einer einzigen Tastatur verwendet werden.<\/li>\n<li>Der Text wird dem Hintergrund angemessen gegen\u00fcbergestellt.<\/li>\n<li>Alle Nicht-Text-Inhalte enthalten Textalternativen, einschlie\u00dflich Audio- und Video-Untertitel \/ Transkripte.<\/li>\n<li>Stellen Sie sicher, dass die meisten Bilder beschreibenden Alternativtext und dekorative Bilder leeren Alternativtext enthalten.<\/li>\n<li>Keine Informationen werden ausschlie\u00dflich durch Bild, Ton oder Farbe \u00fcbertragen.<\/li>\n<li>Vermeiden Sie die automatische Wiedergabe von Audio, ohne dass eine Stummschalttaste erforderlich ist.<\/li>\n<li>Elemente, die sich automatisch bewegen, k\u00f6nnen angehalten oder gestoppt werden.<\/li>\n<\/ul>\n<p>Das ist nur eine Handvoll von dem, was Sie tun k\u00f6nnen, um Ihre Website wirklich zug\u00e4nglich zu machen. Wenn Ihnen dies zu viel erscheint, versuchen Sie es mit der einfachen Checkliste f\u00fcr Barrierefreiheit. Verwenden Sie es als Grundlage f\u00fcr Ihr Design, bevor Sie mit den detaillierteren WCAG-Richtlinien fortfahren.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Haciendo-su-sitio-utilizable-para-todos\"><\/span><span id=\"Haciendo_su_sitio_utilizable_para_todos\"><strong>Machen Sie Ihre Website f\u00fcr alle nutzbar<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Das Vermeiden von Barrierefreiheit kann sich negativ auf Ihre Benutzerbasis und sogar auf Ihren Ruf auswirken. Menschen mit Behinderungen machen einen gro\u00dfen Prozentsatz der Webnutzer aus, und es ist wichtig sicherzustellen, dass der gr\u00f6\u00dfte Teil des Internets nicht f\u00fcr sie geschlossen ist.<\/p>\n<p>Durch die Implementierung von Barrierefreiheitsstandards, einschlie\u00dflich ARIA-Markup, k\u00f6nnen Benutzer von Bildschirmleseprogrammen mehr vom Web sehen und ihre Website so weit wie m\u00f6glich erweitern.<\/p>\n<p>Sobald es wichtig ist, dass Sie wissen, wie man Spezifikationen wie ARIA einbezieht, wird die Barrierefreiheit viel weniger verwirrend erscheinen. Wenn Sie die Nutzung Ihrer Website f\u00fcr alle Benutzer vereinfachen, sind mehr Menschen bereit zu bleiben. Es gibt also keinen Grund, ARIA nicht zu verwenden, wenn Ihre Website dies ben\u00f6tigt. Viele Themen bieten es vorerst sofort an.<\/p>\n<p>Diese Standards helfen nicht nur Menschen mit Behinderungen, sondern allen. Richtlinien zur Barrierefreiheit \u00fcberschneiden sich h\u00e4ufig mit guten Webdesign-Praktiken und werden schnell implementiert, sobald sie bekannt sind.<\/p>\n<p>Denken Sie also daran, ARIA bei der Entwicklung einer Website einzubeziehen. Es ist besser f\u00fcr Sie und f\u00fcr alle Ihre Benutzer.<\/p>\n<p><em>Haben Sie jemals Probleme beim Navigieren auf Websites gehabt? Was k\u00f6nnten Webdesigner und Entwickler tun, um die Situation zu verbessern? Teilen Sie uns Ihre Erfahrungen mit der Online-Zug\u00e4nglichkeit (oder deren Fehlen) in den Kommentaren mit.<\/em>!<\/p>\n<p>2ZuOwar<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\u24cc \u00bb Was ist WAI ARIA Markup? Barrierefreiheit f\u00fcr Anf\u00e4nger Barrierefreiheit ist ein wichtiges Thema in der heutigen Online-Welt. Heutzutage hat man eine Website\u2026<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1351],"tags":[],"class_list":["post-94664","post","type-post","status-publish","format-standard","category-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>\u2022\u25b7 \u00bfQu\u00e9 es el marcado de WAI ARIA? Accesibilidad para principiantes - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"\u24cc \u00bb \u00bfQu\u00e9 es el marcado de WAI ARIA? Accesibilidad para principiantesLa accesibilidad es un tema importante en el mundo online de hoy. Hoy en d\u00eda, tener un\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/wordpress\/\u25b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022\u25b7 \u00bfQu\u00e9 es el marcado de WAI ARIA? Accesibilidad para principiantes\" \/>\n<meta property=\"og:description\" content=\"\u24cc \u00bb \u00bfQu\u00e9 es el marcado de WAI ARIA? Accesibilidad para principiantesLa accesibilidad es un tema importante en el mundo online de hoy. Hoy en d\u00eda, tener un\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/wordpress\/\u25b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-19T07:48:47+00:00\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/wordpress\\\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/wordpress\\\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"\u2022\u25b7 \u00bfQu\u00e9 es el marcado de WAI ARIA? Accesibilidad para principiantes\",\"datePublished\":\"2022-08-19T07:48:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/wordpress\\\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\\\/\"},\"wordCount\":2527,\"articleSection\":[\"Wordpress\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/wordpress\\\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wordpress\\\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\\\/\",\"name\":\"\u2022\u25b7 \u00bfQu\u00e9 es el marcado de WAI ARIA? Accesibilidad para principiantes - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"datePublished\":\"2022-08-19T07:48:47+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"\u24cc \u00bb \u00bfQu\u00e9 es el marcado de WAI ARIA? Accesibilidad para principiantesLa accesibilidad es un tema importante en el mundo online de hoy. Hoy en d\u00eda, tener un\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/wordpress\\\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\\\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u2022\u25b7 \u00bfQu\u00e9 es el marcado de WAI ARIA? Accesibilidad para principiantes - R Marketing Digital","description":"\u24cc \u00bbWas ist WAI ARIA-Markup? Barrierefreiheit f\u00fcr Anf\u00e4nger Barrierefreiheit ist ein gro\u00dfes Problem in der heutigen Online-Welt. Heute haben Sie eine","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/de\/wordpress\/\u25b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/","og_locale":"de_DE","og_type":"article","og_title":"\u2022\u25b7 \u00bfQu\u00e9 es el marcado de WAI ARIA? Accesibilidad para principiantes","og_description":"\u24cc \u00bb \u00bfQu\u00e9 es el marcado de WAI ARIA? Accesibilidad para principiantesLa accesibilidad es un tema importante en el mundo online de hoy. Hoy en d\u00eda, tener un","og_url":"https:\/\/rmarketingdigital.com\/de\/wordpress\/\u25b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/","og_site_name":"R Marketing Digital","article_published_time":"2022-08-19T07:48:47+00:00","author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"\u2022\u25b7 \u00bfQu\u00e9 es el marcado de WAI ARIA? Accesibilidad para principiantes","datePublished":"2022-08-19T07:48:47+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/"},"wordCount":2527,"articleSection":["Wordpress"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/","url":"https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/","name":"\u2022\u25b7 \u00bfQu\u00e9 es el marcado de WAI ARIA? Accesibilidad para principiantes - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"datePublished":"2022-08-19T07:48:47+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"\u24cc \u00bbWas ist WAI ARIA-Markup? Barrierefreiheit f\u00fcr Anf\u00e4nger Barrierefreiheit ist ein gro\u00dfes Problem in der heutigen Online-Welt. Heute haben Sie eine","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/wordpress\/%e2%96%b7-que-es-el-marcado-de-wai-aria-accesibilidad-para-principiantes\/"]}]},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/94664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=94664"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/94664\/revisions"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=94664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=94664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=94664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}