{"id":105,"date":"2023-06-30T10:21:17","date_gmt":"2023-06-30T10:21:17","guid":{"rendered":"https:\/\/ffp3-atemschutzmaske.com\/neu\/barrierefrei\/?page_id=105"},"modified":"2023-06-30T10:32:54","modified_gmt":"2023-06-30T10:32:54","slug":"accessibility-rich-internet-applications","status":"publish","type":"page","link":"https:\/\/immocado.com\/barrierefrei\/accessibility-rich-internet-applications\/","title":{"rendered":"Barrierefreiheit von Rich Internet Anwendungen"},"content":{"rendered":"<p>[Dies ist eine \u00dcbersetzung des englischsprachigen Artikels &#8222;<a href=\"https:\/\/webaim.org\/techniques\/aria\/\"rel=\"nofollow\">Accessibility of Rich Internet Applications<\/a>&#8222;. Copyright \u00a9 by www.Webaim.org]<\/p>\n<nav>\n<h2>Artikelinhalt<\/h2>\n<ol>\n<li><a href=\"#overview\">\u00dcbersicht<\/a><\/li>\n<li><a href=\"#components\">Kernkomponenten<\/a><\/li>\n<li><a href=\"#landmarks\">Landmark-Rollen<\/a><\/li>\n<li><a href=\"#dynamic\">Dynamische Inhalts-Updates<\/a><\/li>\n<li><a href=\"#keyboard\">Verbesserung der Barrierefreiheit von Tastaturen<\/a><\/li>\n<li><a href=\"#widget\">Barrierefreiheit von Widgets<\/a><\/li>\n<li><a href=\"#conclusion\">Fazit<\/a><\/li>\n<\/ol>\n<\/nav>\n<div id=\"overview\" class=\"section\">\n<h2>\u00dcbersicht<\/h2>\n<p>Dieser Artikel liefert einige Techniken und allgemeine Ans\u00e4tze f\u00fcr die Barrierefreiheit von Rich Internet Anwendungen. Dieser Artikel wird nicht alles vorstellen, was Sie wissen m\u00fcssen, sondern verschafft ihnen einen allgemeinen \u00dcberblick dar\u00fcber, wie man dynamische und komplexe Skriptinhalte zug\u00e4nglich macht.<\/p>\n<div class=\"note\">\n<div class=\"title\">Ein Hinweis zu ARIA<\/div>\n<p>WAI-ARIA (Accessible Rich Internet Applications or ARIA) ist <a href=\"https:\/\/www.w3.org\/WAI\/intro\/aria\"rel=\"nofollow\">ein W3C-Protokoll<\/a> zur Verbesserung und Unterst\u00fctzung der Barrierefreiheit von dynamischen Inhalten und Skriptinhalten. ARIA verbessert die Erreichbarkeit der interaktiven Steuerelemente (wie Baummen\u00fcs, Drag &amp; Drop, Schieberegler, Sortiersteuerungen, etc.), bietet Inhalts-Rollen zur Identifizierung der Seitenstruktur (Navigation, Suche, Hauptinhalt, etc.). Bereiche, die dynamisch aktualisiert werden k\u00f6nnen (so genannten \u201eLive-Regionen\u201c in Aria), unterst\u00fctzen die Zug\u00e4nglichkeit, Interaktivit\u00e4t und vieles mehr f\u00fcr Tastaturen besser.<\/p>\n<p>ARIA wird von den meisten Up-to-date-Browsern und Bildschirmleseger\u00e4ten unterst\u00fctzt. Es wird auch von vielen Skriptbibliotheken unterst\u00fctzt. Obwohl ARIA noch nicht \u00fcberall unterst\u00fctzt wird, wenn es mit bestehenden HTML und zug\u00e4nglichen Skript-Techniken verwendet wird, kann es zus\u00e4tzliche Unterst\u00fctzung der Barrierefreiheit bieten, wenn es doch unterst\u00fctzt wird und f\u00fchrt nicht zu Kompatibilit\u00e4tsproblemen, wenn nicht.<\/p>\n<p>Lesen Sie unseren <a href=\"https:\/\/webaim.org\/techniques\/javascript\/\"rel=\"nofollow\">Web-AIM Artikel f\u00fcr mehr allgemeine Informationen zur Zug\u00e4nglichkeit von JavaScript<\/a>.<\/p>\n<\/div>\n<p>Allgemein k\u00f6nnen Fragen zur Zug\u00e4nglichkeit mit Rich Internet Anwendungen charakterisiert werden als:<\/p>\n<ul>\n<li>Unf\u00e4higkeit, eine semantische Struktur und Funktionalit\u00e4t der Seite zu bieten. (z.B. Navigation, Hauptinhalt Suche, etc.)<\/li>\n<li>Unzug\u00e4nglichkeit von Inhalten die dynamisch sind und sich innerhalb der Seite ver\u00e4ndern k\u00f6nnen (z.B. AJAX Inhalts-Updates)<\/li>\n<li>Unf\u00e4higkeit, den Tastaturfokus auf Seitenelemente zu legen (z.B. den Fokus auf eine Fehlermeldung auf der Seite legen)<\/li>\n<li>Schwierigkeiten mit der Zug\u00e4nglichkeit von Tastaturen und Bildschirmleseger\u00e4ten mit komplexen Widgets und Navigationselementen (z.B. Schieber, Baummen\u00fcs, etc.)<\/li>\n<\/ul>\n<p>ARIA kann helfen, viele dieser Probleme zu l\u00f6sen.<\/p>\n<\/div>\n<div id=\"components\" class=\"section\">\n<h2>Kernkomponenten<\/h2>\n<p>Die drei Hauptkomponenten sind <strong>Rollen<\/strong>, <strong>Eigenschaften<\/strong>, und <strong>Zust\u00e4nde<\/strong>.<\/p>\n<div id=\"roles\" class=\"section\">\n<h3>Rollen<\/h3>\n<p>ARIA-Rollen definieren, was ein Element ist oder tut. Die meisten HTML-Elemente haben eine Standardrolle, die Hilfstechnologien pr\u00e4sentiert wird. Zum Beispiel hat ein Knopf die Standardrolle \u201eKnopf\u201c und ein Formular hat die Standardrolle \u201eFormular\u201c. Mit ARIA k\u00f6nnen Sie Rollen definieren, die in HTML nicht verf\u00fcgbar sind. Sie k\u00f6nnen auch die Standardrollen von HTML \u00fcberschreiben. Dies erlaubt ihnen, Elemente und Widgets, in HTML, Screenreadern in einer noch genaueren und zug\u00e4nglicheren Art anzuzeigen.<\/p>\n<p>Ein Beispiel f\u00fcr eine ARIA-Rolle ist <code>&amp;ltform role=\"search\"&gt;<\/code>. In HTML haben alle Formulare die gleiche Semantik. Aber mit ARIA k\u00f6nnen Sie zu der Semantik eines bestimmten Formulars etwas hinzuf\u00fcgen, um es als Suchformular zu definieren.<\/p>\n<\/div>\n<div id=\"properties\" class=\"section\">\n<h3>Eigenschaften<\/h3>\n<p>ARIA-Eigenschaften\u2026 naja, Eigenschaften oder Bedeutungen der Elemente. Sie k\u00f6nnen die native HTML-Semantik erweitern, indem Sie Eigenschaften f\u00fcr Elemente definieren, die in Standard-HTML nicht erlaubt sind. Ein Beispiel ist <code>&lt;input aria-required=\"true\"&gt;<\/code>. Diese Eigenschaft will Screenreader dazu veranlassen, diese Eingabe als erforderlich zu lesen (Das bedeutet, dass der Nutzer dies ausf\u00fcllen muss).<\/p>\n<\/div>\n<div id=\"states\" class=\"section\">\n<h3>Zust\u00e4nde<\/h3>\n<p>ARIA-Zust\u00e4nde sind Eigenschaften, die den aktuellen Zustand eines Elementes definieren. Sie \u00e4ndern sich in der Regel bei Benutzerinteraktion, oder basierend auf einer dynamischen Variablen. Ein Beispiel ist <code>&lt;input aria-disabled=\"true\"&gt;<\/code>. Diese Eigenschaft wird einen Screenreader dazu veranlassen, den Input als deaktiviert zu lesen, aber dieser Zustandswert k\u00f6nnte, dynamisch auf Benutzereingaben basierend, einfach zu <code>false<\/code> (falsch) ver\u00e4ndert werden.<\/p>\n<\/div>\n<p>ARIA-Rollen, Zust\u00e4nde und Eigenschaften k\u00f6nnen im Markup definiert, oder mit Hilfe von Scripting definiert und dynamisch festgelegt und ge\u00e4ndert werden. ARIA-Zust\u00e4nde und Eigenschaftsattribute beginnen immer mit \u201earia-\u201c (z.B. <code>aria-required=\"true\"<\/code>).<\/p>\n<\/div>\n<div id=\"landmarks\" class=\"section\">\n<h2>Landmark-Rollen<\/h2>\n<p>Bei aktuellen Versionen von HTML und XHTML, gibt es keinen Mechanismus zur Identifikation der Funktion oder des Zwecks von Seitenelementen in einer programmatisch bestimmbaren Weise (dies ist eine raffinierte Art zu sagen \u201ein einer Weise, in der es der Computer herausfinden kann\u201c). Mit anderen Worten, Sie k\u00f6nnen, Hauptinhalt, Navigation, Suche, etc., in ihrem Code nicht identifizieren. W\u00e4hrend Sie eine klare \u00dcberschriftenstruktur in ihrem Dokument nutzen k\u00f6nnen und sollten, liefert dies keine Standardmethode f\u00fcr Nutzer, auf die semantische Rolle von Seitenelementen zuzugreifen oder diese festzustellen.<\/p>\n<p>Dieses Problem wird durch die Notwendigkeit von &#8222;<a href=\"https:\/\/webaim.org\/techniques\/skipnav\/\"rel=\"nofollow\">Direkt zum Hauptinhalt<\/a>&#8222;- oder &#8222;Navigation \u00fcberspringen&#8220;-Links. Weil ein Browser oder Screenreader keine M\u00f6glichkeit hat, zu wissen, welcher Teil der Seite die Navigationselemente beinhaltet, ist es f\u00fcr Seitenautoren wichtig, einen spezifischen Link zu erstellen, der es Tastaturnutzern erlaubt, solche Links zu \u00fcberspringen. Auch ein direkter Zugriff auf h\u00e4ufig genutzte Funktionen der Seite, wie die Suche, erfordert, dass der Nutzer durch die Seite bl\u00e4ttern, oder die Seite durchh\u00f6ren kann, um sie zu finden oder zu entdecken.<\/p>\n<p>WAI-ARIA bietet f\u00fcr Entwickler die M\u00f6glichkeit, die Rollen f\u00fcr Dokumentbereiche (und viele andere Dinge) zu spezifizieren. Die verf\u00fcgbaren Dokumentlandmark-Rollen sind:<\/p>\n<dl>\n<dt><code>Banner<\/code><\/dt>\n<dd>Webseiten-orientierter Inhalt, wie den Namen der Webseite, den Titel der Seite und\/oder das Logo.<\/dd>\n<dt><code>Navigation<\/code><\/dt>\n<dd>Der Bereich, der die Navigationslinks f\u00fcr das Dokument oder die Webseite enth\u00e4lt.<\/dd>\n<dt><code>Hauptteil<\/code><\/dt>\n<dd>Der Hauptinhalt oder der zentrale Inhalt des Dokuments.<\/dd>\n<dt><code>Suche<\/code><\/dt>\n<dd>Dieser Abschnitt enth\u00e4lt die Suchfunktionalit\u00e4t f\u00fcr die Webseite.<\/dd>\n<dt><code>Artikel<\/code><\/dt>\n<dd>Alleinstehende Inhalte die, wegen dem Kontext vom Rest des Dokuments, Sinn machen. Beispiele k\u00f6nnen Blog-Posting, ein Kommentar auf einem Blog, ein Forumsbeitrag, etc. sein. Insbesondere k\u00f6nnte ein Blog-Posting als ein Artikel identifiziert werden und individuelle Blog-Kommentare k\u00f6nnten f\u00fcr eine Rolle eines Artikels in diesem Blog-Posting markiert werden.<\/dd>\n<dt><code>Erg\u00e4nzungen<\/code><\/dt>\n<dd>Unterst\u00fctzende Inhalte f\u00fcr den Hauptinhalt.<\/dd>\n<dt><code>Inhaltsinfos<\/code><\/dt>\n<dd>Informative Kinderinhalte, wie Fu\u00dfnoten, Urheberrechte, Links zu Datenschutzerkl\u00e4rungen, Links zu Pr\u00e4ferenzen und so weiter.<\/dd>\n<\/dl>\n<p>Auf einer Seite, k\u00f6nnen das Logo und der Headerinhalt die Rolle des <code>Banners<\/code> bekommen. Die Navigations-Registerkarten oben w\u00fcrden als <code>Navigation<\/code>\u00a0identifiziert werden. Das Suchformular der Seite w\u00fcrde nat\u00fcrlich <code>&lt;form role=search&gt;<\/code> erhalten. Die weiterf\u00fchrenden Links in einer Seitenleiste k\u00f6nnten als <code>Erg\u00e4nzungen\u00a0<\/code>identifiziert werden. Der Hauptk\u00f6rper eines Artikels w\u00e4re der <code>Hauptteil<\/code>. Die Fu\u00dfzeile und Links am unteren Rand der Seite h\u00e4tten die Rolle <code>Inhaltsinfo<\/code>.<\/p>\n<p>Die meisten Seiten k\u00f6nnen jetzt zumindest ein paar Landmark-Rollen anwenden &#8211; <code>&lt;ul role=\"navigation\"&gt;<\/code> oder <code>&lt;div role=\"main\"&gt;<\/code> oder <code>&lt;form role=\"search\"&gt;<\/code>. Diese Funktion von AIRA ist nicht auf Rich Anwendungen beschr\u00e4nkt, sondern kann auf fast allen aktuellen Webseiten verwendet werden.<\/p>\n<p>Hilfstechnologien bieten Tastenkombinationen, um durch Elemente zu navigieren, die als Landmarks definiert sind, oder um eventuell zu bestimmten Strukturelementen (zum Beispiel S f\u00fcr Suche) zu springen und\/oder bieten eine Liste aller Strukturelemente des Dokuments. Zus\u00e4tzlich bietet ARIA neue Rollen f\u00fcr andere Typen von Elementen, wie <code>role=\"presentation\"<\/code> f\u00fcr Tabellen, die im Layout verwendet werden. Es erlaubt ihnen auch, erforderliche Formularelemente zu identifizieren, eine bessere Etikettierung und Beschreibung des Formulars zu bieten und ein sofortiges Feedback an Screenreader-Nutzern zu liefern.<\/p>\n<\/div>\n<div id=\"dynamic\" class=\"section\">\n<h2>Dynamische Inhaltsupdates<\/h2>\n<p>Wenn der Inhalt sich dynamisch innerhalb einer Webseite ver\u00e4ndert, kann es zu Problemen der Zug\u00e4nglichkeit f\u00fchren. Was passiert, wenn ein Screenreader grade ein Element liest, das aktualisiert wird? Wenn der aktualisierte Inhalt wichtig ist, sollten Sie den Nutzer unterbrechen und den Fokus sofort auf den neuen Inhalt setzen, informieren Sie einfach den Nutzer \u00fcber das Update informieren, oder tun Sie nichts? Wie setzen Sie den Fokus, oder erlauben Sie dem Nutzer, zu dem aktualisierten Inhalt zu springen?<\/p>\n<p>Mit Standard-Scripting muss der Entwickler diktieren, was passiert, wenn ein Inhalts-Update auftritt, wie eine AJAX-gef\u00fchrte R\u00fcckmeldung. Der Entwickler kann dem Update einfach erlauben aufzutreten und den Nutzer nicht dar\u00fcber informieren, den Nutzer mit einem eingebetteten Audio-Sound auf die Aktualisierung aufmerksam machen, oder den Fokus direkt auf den aktualisierten Inhalt setzen. Der Entwickler muss jede dieser Situationen schriftlich ausarbeiten, also die Kontrolle vom Nutzer entfernen.<\/p>\n<p>Mit WAI-ARIA k\u00f6nnen Entwickler Regionen identifizieren, die sich dynamisch wie eine <i>Live-Region<\/i>\u00a0ver\u00e4ndern. Eine Live-Region erlaubt Inhaltsupdates in einer Weise, die ein Screenreader versteht. Es erlaubt dem Nutzer auch, zus\u00e4tzliche Funktionalit\u00e4t hinzuzuf\u00fcgen, um den Nutzer zu warnen, bietet Steuerungen f\u00fcr die Live-Regionen, bestimmt die Menge an neuem Inhalt, die gelesen wird und vieles mehr.<\/p>\n<p>Um eine Live-Region zu schaffen, f\u00fcgt der Entwickler die <code>ARIA-Live<\/code>-Eigenschaft zu einem Element mit einem Wert von off, polite, assertive oder rude hinzu. Der Wert oder das H\u00f6flichkeitslevel (oder alternativ das Aufdringlichkeitslevel) spezifiziert, was ein Screenreader tun soll, wenn das Element aktualisiert wird.<\/p>\n<p>Der Wert off (<code>aria-live=\"off\"<\/code>) sagt dem Screenreader, das Update nicht bekannt zu geben. Falls der Screenreader-Nutzer auf den aktualisierten Inhalt st\u00f6\u00dft, wird es dann vorgelesen. Dies wird f\u00fcr unwichtige oder irrelevante Inhaltsupdates verwendet.<\/p>\n<p>Der Wert <code>polite<\/code> wird den Nutzer \u00fcber die Ver\u00e4nderung des Inhalts benachrichtigen, sobald er\/sie die aktuelle Aufgabe erledigt hat. Dies kann in Form eines Signaltons oder eines Audiosignals auf das Update hinweisen. Der Nutzer kann dann w\u00e4hlen, ob der direkt zu dem aktualisierten Inhalt springen m\u00f6chte. Dieser Wert w\u00e4re der h\u00e4ufigste f\u00fcr Inhaltsupdates, besonders f\u00fcr Dinge wie Statusbenachrichtigungen, Wetter- oder Aktienupdates, Chat-Nachrichten, etc.<\/p>\n<p>Der <code>ARIA-Live<\/code> Wert <code>assertive<\/code> wird darin enden, dass der Nutzer \u00fcber die Inhaltsver\u00e4nderung sofort oder so schnell wie m\u00f6glich alarmiert wird. Assertive wird f\u00fcr wichtige Updates, wie Fehlermeldungen verwendet.<\/p>\n<p>Sie k\u00f6nnen auch definieren, welche Inhalte gelesen werden, wenn ein Update auftritt. Dar\u00fcber hinaus gibt es spezielle ARIA-Rollen, die bestimmte Arten von hoch dynamischen Inhalten definieren, wie Warnungen, Protokolle und Timer. Das hohe Niveau der Treue von ARIA-Live-Regionen, erm\u00f6glicht eine gro\u00dfe Flexibilit\u00e4t, sowohl f\u00fcr Entwickler, wie auch f\u00fcr Endanwender.<\/p>\n<\/div>\n<div id=\"keyboard\" class=\"section\">\n<h2>Verbesserung der Zug\u00e4nglichkeit f\u00fcr Tastaturen<\/h2>\n<p>In HTML k\u00f6nnen nur Links und Formularelemente den Tastaturfokus erhalten. Das bedeutet, wenn Sie sich mit der Tab-Taste durch die Seite arbeiten, stoppt der Browser, oder setzt den Fouks nur auf dieser Art von Elementen. Mit Scripting aber k\u00f6nnen Sie Mausinteraktivit\u00e4ten auf fast jedes Element legen. Das bedeutet, Sie k\u00f6nnen normale Seitenelemente, wie Abs\u00e4tze oder Spannen, interaktiv und reagierend auf die Maus machen (z.B. k\u00f6nnen Sie Klartexte anzeigen und sich wie einen Knopf verhalten lassen). Die Funktionalit\u00e4t dieser nicht-fokussierbaren Elemente kann nicht f\u00fcr Screenreader- und nur Tastatur-Nutzer zug\u00e4nglich gemacht werden. Entwickler ben\u00f6tigen es oft, dass Seitenelemente interaktiv sind, anders als bei Links und Formularelementen.<\/p>\n<p>Dar\u00fcber hinaus ist es oft notwendig, den Fokus auf Seitenelemente zu setzen. Zum Beispiel k\u00f6nnte eine Fehlermeldung der Formularvalidierung als Text (nicht als ein Link oder Formularelement) angezeigt werden. Sehende Nutzer k\u00f6nnen die Fehlermeldung sofort sehen. Jedoch kann ein Screenreader-Nutzer nicht wissen, dass eine neue Nachricht vorhanden ist. Damit der Fokus auf die Fehlermeldung gesetzt werden kann und sie von einem Screenreader gelesen werden kann, muss die Nachricht in der Lage sein, den Fokus zu erhalten \u2013 etwas, was sie normalerweise nicht tun kann, es sei denn sie ist ein Link oder Formularsteuerelement.<\/p>\n<p>ARIA bietet wieder Mechanismen f\u00fcr nicht-fokussierbare Elemente, um den Fokus durch die Tabindex-Eigenschaft zu erhalten. (<a href=\"https:\/\/webaim.org\/techniques\/keyboard\/tabindex\"rel=\"nofollow\">Sehen Sie sich unseren verwandten Artikel \u00fcber Tabindex an<\/a>). ARIA erweitert die Tabindex-Eigenschaft, sodass es auf jedes Element angewendet werden kann. Indem der Tabindex-Wert auf 0 gesetzt wird (<code>tabindex=\"0\"<\/code>), wird ein Element in die Tab-Reihenfolge des Dokuments gesetzt. Dies bedeutet, dass der Browser stoppen wird und den Fokus auf das Element in der Navigationsreihenfolge des Dokuments setzt (z.B. wenn der Nutzer mit der Tab-Taste zu dem Element gelangt). Dies erlaubt zus\u00e4tzliche Funktionalit\u00e4t und Interaktivit\u00e4t, die auf das Element angewendet werden kann, wie Funktionalit\u00e4t ausl\u00f6sen, wenn das Element den Tastaturfokus erh\u00e4lt, oder wenn der Nutzer eine Taste dr\u00fcckt, w\u00e4hrend das Element den Fokus hat.<\/p>\n<p>Ein Tabindex-Wert von -1 erlaubt einem Element, den Fokus zu erhalten, aber nur wenn der Fokus programmatisch festgelegt ist \u2013 was bedeutet, dass der Nutzer einen Link zu dem Element aktiviert (<code>&lt;a href=\"#maincontent\"&gt; ...<\/code>), oder, dass der Fokus mit Scripting gesetzt wurde (z. B. <code>document.getElementById('errormessage').focus();<\/code>).<\/p>\n<p>Durch die Erweiterung der Fokus-Funktionen im Web-Browser auf Elemente, die andernfalls nicht den Fokus erhalten k\u00f6nnten, erlaubt ARIA zus\u00e4tzliche M\u00f6glichkeiten, um Zug\u00e4nglichkeit zu bieten.<\/p>\n<\/div>\n<div id=\"widget\" class=\"section\">\n<h2>Barrierefreiheit f\u00fcr Widgets<\/h2>\n<p>Der Begriff \u201eWidget\u201c wird allgemein verwendet, um interaktive Elemente zu beschreiben, die mit Scripting erstellt und kontrolliert werden. Es bezieht sich auf Kontrollen, die nicht urspr\u00fcnglich in HTML oder in HTML-Kontrollen gegeben sind, die durch Scripting stark verbessert worden sind. Beispiele von Widgets w\u00e4ren Schieber, Drop-Down- und Fly-out-Men\u00fcs, Baumsysteme, Drag&amp;Drop-Steuerungen, auto-vervollst\u00e4ndigende Textfelder und Tooltip-Fenster, um einige zu nennen. Die Barrierefreiheit von Widgets entsteht nicht urspr\u00fcnglich oder nat\u00fcrlich. HTML hat nur ein sehr begrenztes Markup, um komplexe Widgets zu definieren.<\/p>\n<p>W\u00e4hrend Scripting oft Zug\u00e4nglichkeit f\u00fcr viele dieser Elemente bieten kann, wird es oft in unterschiedlicher Weise realisiert. Kurz gesagt, ist es oft m\u00f6glich, diese Widgets f\u00fcr Tastaturen und Screenreader zug\u00e4nglich zu machen, aber es ist ziemlich schwierig und das Ergebnis ist oft nur geringf\u00fcgig zug\u00e4nglich f\u00fcr praktische Zwecke. Wie machen Sie ein komplexes Men\u00fc-System intuitiv zug\u00e4nglich f\u00fcr Tastaturen? Wie machen Sie ein drag&amp;drop-Element zug\u00e4nglich f\u00fcr Tastaturen? Wie pr\u00e4sentieren Sie Sortierkriterien f\u00fcr sortierbare Listenitems? Wie pr\u00e4sentieren Sie blinden Nutzern visuelle Tooltips oder Pop-up-Nachrichten?<\/p>\n<p>Durch die Festlegung von Standard-Sets von Rollen, Eigenschaften und Werten erlaubt ARIA den Entwicklern, die Fragen zur Barrierefreiheit mit relativer Leichtigkeit anzugehen.<\/p>\n<p>Das Folgende bietet einige <em>sehr grundlegende Beispiele<\/em>, wie ARIA umgesetzt werden k\u00f6nnte.<\/p>\n<div class=\"example\">\n<div class=\"title\">Ben\u00f6tigte Formularelemente<\/div>\n<p><label for=\"name\">Vorname<\/label>: <input id=\"name\" name=\"name\" type=\"text\" \/> <em id=\"namerequired\">(ben\u00f6tigt)<\/em><\/p>\n<p><code>&lt;label for=\"name\"&gt;Vorname&lt;\/label&gt;: &lt;input name=\"name\" id=\"name\" <strong>aria-required=\"true\"<\/strong>&gt; &lt;em&gt;(ben\u00f6tigt)&lt;\/em&gt;<\/code><\/p>\n<p>Dieses Eingabefeld demonstriert ein verbreitetes Problem \u2013 das Formularelement wird ben\u00f6tigt, aber das Wort \u201eben\u00f6tigt\u201c ist nicht im Label f\u00fcr das Formularelement enthalten und wird somit wahrscheinlich nicht von einem Screenreader ausgesprochen. <code>aria-required=\"true\"<\/code> von ARIA wird ein Bildschirmleseger\u00e4t darauf hinweisen, dass das angegebene Formularelement ben\u00f6tigt wird.<\/p>\n<div class=\"note\">\n<div class=\"title\">Hinweis:<\/div>\n<p>ARIA \u00e4ndert in der Regel nicht die Funktionalit\u00e4t der Seite. In dem obigen Beispiel w\u00fcrde das <code>aria-required<\/code>-Attribut nicht irgendwie erzwingen, dass der Nutzer etwas in die Textbox eingibt. Stattdessen wird der Nutzer einfach informiert, dass das Feld erforderlich ist.<\/p>\n<\/div>\n<\/div>\n<div class=\"example\">\n<h3 class=\"title\">Knopf-Beispiel<\/h3>\n<p>Das Folgende ist ein Textelement (nicht ein tats\u00e4chlicher HTML-Button), der mit der Tastatur angeklickt oder aktiviert werden kann (Springen Sie mit der Tab-Taste bis zu dem Knopf und dr\u00fccken Sie Enter oder die Leertaste).<\/p>\n<p><span style=\"background-color: #ddd; border: medium outset white;\" tabindex=\"0\">Klick mich<\/span><\/p>\n<p><code>&lt;span style=\"background-color: #ddd; border: medium outset white;\" <strong>role=\"button\" tabindex=\"0\"<\/strong> onkeydown=\"if(event.keyCode==13 || event.keyCode==32) alert('Sie haben mich mit der Tastatur aktiviert');\" onclick=\"alert('Sie haben mich mit der Maus angeklickt');\"&gt;Push Me&lt;\/span&gt;<\/code><\/p>\n<p>In diesem Beispiel wird der Text so gestylt, dass er visuell wie ein Knopf erscheint. Das <code>role=\"button\"<\/code> sagt dem Browser, dass der Text sich wie ein Knopf verhalten soll. <code>tabindex=\"0\"<\/code> stellt das Element in den Tastatur-Navigationsfluss, damit Nutzer den Knopf aktivieren k\u00f6nnen. Der onkeydown-Event-Handler erkennt, ob der Nutzer Enter oder die Leertaste gedr\u00fcckt hat, w\u00e4hrend das Element fokussiert wird. W\u00e4hrend dieses Beispiel ein Wenig gek\u00fcnstelt ist (Warum nicht einfach einen tats\u00e4chlichen Knopf nutzen?), demonstriert es die M\u00f6glichkeit von ARIA, eine Semantik und zug\u00e4ngliche Interaktivit\u00e4ten zu einem Element hinzuzuf\u00fcgen.<\/p>\n<\/div>\n<div class=\"example\">\n<h3 class=\"title\">Beispiel f\u00fcr die Formularvalidierung<\/h3>\n<p>In diesem Beispiel, <label for=\"input\"><strong>M\u00dcSSEN<\/strong> Sie die richtige Antwort &#8218;6&#8216;<\/label> eingeben, um dem Browser zu erlauben, auf andere Teile der Seite zu navigieren.<\/p>\n<form action=\"#\">Geben Sie eine Zahl zwischen 1 und 10 ein: <input id=\"input\" name=\"text\" size=\"5\" type=\"text\" \/><\/form>\n<p><a id=\"aftertext\"><\/a>Da der Tastaturfokus nach einer falschen Antwort mit JacaScript zur\u00fcck zum Formularelement gesetzt wird, wird die R\u00fcckmeldung nicht von einem Screenreader gelesen. In diesem Fall erh\u00e4lt die Fehlermeldung <code>role=\"alert\"<\/code>, wenn sie angezeigt wird. Dies bewirkt, dass die R\u00fcckmeldung sofort vom Screenreader gelesen wird. Der Nutzer kann nun erneut versuchen, die Antwort mit dem entsprechenden Feedback einzugeben. Sobald die richtige Antwort eingegeben ist, wird der Fokus auf den Text gelegt, der unmittelbar folgt (welcher <code>tabindex=\"0\"<\/code> erhalten hatte, damit er den Fokus erhalten kann, eher der Fokus auf das n\u00e4chste Formularelement oder den n\u00e4chsten Link der Seite springt).<\/p>\n<\/div>\n<p>F\u00fcr komplexere und individuell gebaute Widgets definiert ARIA Standardattibute und Tastaturinteraktionsmuster, den gefolgt werden muss. Achten Sie darauf, den standardisierten <a href=\"https:\/\/www.w3.org\/WAI\/PF\/aria-practices\/#aria_ex\"rel=\"nofollow\">ARIA-Designmustern<\/a> Folge zu leisten.<\/p>\n<\/div>\n<div id=\"conclusion\" class=\"section\">\n<h2>Fazit:<\/h2>\n<p>Diese Beispiele demonstrieren nur einige grundlegende Wege, auf die ARIA jetzt implementiert werden kann, um die Zug\u00e4nglichkeit von interaktiven Elementen zu verbessern. ARIA unterst\u00fctzt jedoch viele verschiedene Typen von Widgets und Interaktionen. F\u00fcr komplexe Widgets und Interaktionen ist es sehr wahrscheinlich, dass ein Entwickler, anstatt von Grund auf alles neu zu bauen, die Scripting Bibliotheken nutzen wird, um solche Elemente zu kreieren. Gl\u00fccklicherweise ist ARIA in vielen Scripting-Bibliotheken implementiert (wie in <a href=\"https:\/\/jquery.com\/\"rel=\"nofollow\">jQuery<\/a>, <a href=\"https:\/\/dojotoolkit.org\/\"rel=\"nofollow\">Dojo<\/a>, <a href=\"https:\/\/developer.yahoo.com\/yui\/\"rel=\"nofollow\">YUI<\/a>, und <a href=\"https:\/\/code.google.com\/webtoolkit\/\"rel=\"nofollow\">GWT<\/a>). W\u00e4hrend Entwickler ARIA sicherlich in ihren fortgeschrittenen Widgets und Anwendungen umsetzen, vereinfachen ARIA unterst\u00fctzende Bibliotheken den Prozess der Bereitstellung des Zug\u00e4nglichkeitsniveaus stark.<\/p>\n<p>ARIA kann nicht alle Fragen zur Barrierefreiheit l\u00f6sen und es kann ein bisschen schwierig zu implementieren sein, aber es bietet deutlich h\u00f6here Level der Barrierefreiheit, als derzeit mit HTML und Scripting allein m\u00f6glich ist. Als Unterst\u00fctzung in Browsern steigen Hilfstechnologien und Scripting-Bibliotheken an. ARIA wird ein gro\u00dfartiges Werkzeug f\u00fcr die Sicherstellung der Barrierefreiheit f\u00fcr Rich Internet Inhalte und Anwendungen.<\/p>\n<\/div>\n<div id=\"translations\">\n<h2>\u00dcbersetzungen<\/h2>\n<\/div>\n<div id=\"related\">\n<h2>Verwandte Ressourcen<\/h2>\n<ul>\n<li><a href=\"https:\/\/webaim.org\/techniques\/javascript\/\"rel=\"nofollow\">Barrierefreies JavaScript erstellen<\/a><\/li>\n<li><a href=\"https:\/\/webaim.org\/techniques\/ajax\/\"rel=\"nofollow\">Barrierefreiheit von AJAX<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/PF\/aria\/\"rel=\"nofollow\">WAI-ARIA 1.0 Spezifikationen<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>[Dies ist eine \u00dcbersetzung des englischsprachigen Artikels &#8222;Accessibility of Rich Internet Applications&#8222;. Copyright \u00a9 by www.Webaim.org] Artikelinhalt \u00dcbersicht Kernkomponenten Landmark-Rollen Dynamische Inhalts-Updates Verbesserung der Barrierefreiheit von Tastaturen Barrierefreiheit von Widgets Fazit \u00dcbersicht Dieser Artikel liefert einige Techniken und allgemeine Ans\u00e4tze f\u00fcr die Barrierefreiheit von Rich Internet Anwendungen. Dieser Artikel wird nicht alles vorstellen, was Sie [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/pages\/105"}],"collection":[{"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/comments?post=105"}],"version-history":[{"count":3,"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/pages\/105\/revisions"}],"predecessor-version":[{"id":112,"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/pages\/105\/revisions\/112"}],"wp:attachment":[{"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/media?parent=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}