initial commit

7 files changed, 907 insertions, 0 deletions

diff --git a/files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html
new file mode 100644
index 0000000000..3aa0530a35
--- /dev/null
+++ b/files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html
@@ -0,0 +1,232 @@
+---
+title: Übersicht zu barrierefreien Web-Applikationen und Komponenten
+slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets
+tags:
+  - ARIA
+  - Accessibility
+  - Guide
+  - Handbuch
+  - Komponente
+  - Web apps
+translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets
+---
+<p>Das Web entwickelt sich weiter: Statische seitenbasierte Websites werden zunehmend durch dynamische, desktopartige Web-Applikationen ersetzt, die mit JavaScript und AJAX arbeiten. Designer erstellen allein durch die Kombination von JavaScript, HTML und CSS beeindruckende neue Benutzeroberflächen und Steuerungsmechanismen. Dieser Wandel hat das Potential, durch responsives Design die Benutzerfreundlichkeit enorm zu verbessern, doch besteht für viele Benutzer die Gefahr wegen Zugänglichkeitsbarrieren ausgeschlossen zu werden. JavaScript hat keinen sehr guten Ruf, was die Barrierefreiheit anbelangt, da JavaScript-Techniken oft Probleme in Kombination mit Unterstützungstechnologie wie z.B. Screenreadern verursachen. Es gibt jedoch andere Möglichkeiten, dynamische Oberflächen zu erstellen, damit diese auch für Menschen mit Behinderungen ohne Einschränkungen benutzbar sind.</p>
+
+<h2 id="Das_Problem">Das Problem</h2>
+
+<p>Die meisten JavaScript-Toolkits stellen eine Bibliothek für clientseitige Komponenten bereit, welche den Benutzeroberflächen von bekannten Desktopumgebungen nachempfunden sind. Slider, Menüleisten, Dateisystem-Bäume usw. lassen sich mit einer Kombination von JavaScript, CSS und HTML erstellen. In der HTML4-Spezifikation werden keine Tags festgelegt, welche diese Komponenten semantisch beschreiben und Entwickler greifen daher üblicherweise auf Tags wie &lt;div&gt; und &lt;span&gt; zurück. Die so entwickelten Oberflächen sehen Desktop-Applikation sehr ähnlich, enthalten jedoch in der Regel nicht genügend semantische Informationen, um die korrekte Funktion unterstützender Technologie zu gewährleisten. So können dynamische Inhalte einer Webseite von Benutzern, die z.B. eine Website (aus welchen Gründen auch immer) nicht sehen können, nicht vollständlig erfasst werden. Börsenticker, Updates von Twitter-Feeds, Fortschrittsanzeigen und ähnliche Komponenten manipulieren das DOM auf eine Weise, die von Unterstützungstechnologie nicht erkannt werden kann. An dieser Stelle kommt <a href="/en/ARIA" title="ARIA">ARIA</a> zum Einsatz.</p>
+
+<p><em>Beispiel 1: Markup für eine Tabs-Komponente mit ARIA-Labeln. Im Markup sind keine Informationen enthalten, welche die Form und Funktion der Komponente beschreiben.</em></p>
+
+<pre class="brush: html"><code>&lt;!-- Dies ist eine Komponente für Tabs. Wie könnten Sie das wissen, würden sie nur das Markup betrachten? --&gt;
+&lt;ol&gt;
+  &lt;li id="ch1Tab"&gt;
+    &lt;a href="#ch1Panel"&gt;Chapter 1&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="ch2Tab"&gt;
+    &lt;a href="#ch2Panel"&gt;Chapter 2&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="quizTab"&gt;
+    &lt;a href="#quizPanel"&gt;Quiz&lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;div&gt;
+  &lt;div id="ch1Panel"&gt;Chapter 1 content goes here&lt;/div&gt;
+  &lt;div id="ch2Panel"&gt;Chapter 2 content goes here&lt;/div&gt;
+  &lt;div id="quizPanel"&gt;Quiz content goes here&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<p><em>Beispiel 2: Die Tabs-Komponente könnte z.B. wie folgt aussehen. Bei der visuellen Betrachtung lässt sich dies erkennen, es gibt jedoch keine maschinenlesbare Beschreibungen für Unterstützungstechnologie.</em><br>
+ <img alt="Screenshot of the tabs widget" class="default internal" src="/@api/deki/files/4926/=Tabs_Widget.png"></p>
+
+<h2 id="ARIA">ARIA</h2>
+
+<p><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, die Spezifikation für <strong>Accessible Rich Internet Applications</strong> der <a class="external" href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a> des W3C beschreibt, wie fehlende semantischen Informationen hinzugefügt werden können, die für das Erfassen der Inhalte bei der Benutzung von Unterstützungstechnologie, wie z.B. Screen Readern, benötigt werden. ARIA ermöglicht Entwicklern, ihre Komponenten genauer zu beschreiben, indem dem Markup spezielle Attribute hinzugefügt werden. ARIA wurde entwickelt, um die Lücke zwischen Standard-HTML-Tags und desktopartigen Komponenten von dynamischen Web-Applikationen zu schließen und legt Rollen- und Zustansbeschreibungen für verbreitete UI-Komponenten fest.</p>
+
+<p>Die ARIA-Spezifikation beschreibt drei verschiedene Arten von Attributen: Rollen, Zustände und Eigenschaften. Rollen werden Komponenten zugewiesen, die bei HTML4 nicht vorhanden sind, wie z.B. Slider, Menüleisten, Tabs und Dialoge. Eigenschaften beschreiben Charakteristiken dieser Komponenten, wie z.B. ob sie per Drag &amp; Drop ziehbar sind, ein benötigtes Element besitzen oder ein Popup mit ihnen verbunden ist. Zustände beschreiben den aktuellen Interaktionsstatus eines Elements - so wird der Unterstützungstechnologie mitgeteilt, ob das Element gerade beschäftigt, deaktiviert, selektiert oder versteckt ist.</p>
+
+<p>ARIA-Attribute sind dafür geschaffen, automatisch vom Browser interpretiert und für die nativen Barrierefreiheit-APIs des jeweiligen Betriebssystems übersetzt zu werden. Wenn ARIA vorhanden ist, kann die Unterstützungstechnologie JavaScript-Komponenten erkennen und mit diesen interagieren, auf dieselbe Weise wie bei Desktop-Software. Hierdurch kann eine konsistentere Benutzerführung ermöglicht werden, als noch bei älteren Generationen von Web-Applkationen, da Benutzer von Unterstützungstechnologie auch bei webbasierten Applikationen auf ihre Kenntnisse über Desktop-Software zurückgreifen können.</p>
+
+<p><em>Beispiel 3: Markup für die Tabs-Komponente mit hinzugefügten ARIA-Attributen.</em></p>
+
+<pre class="brush: html"><code>&lt;!-- Durch die zugeteilte Rolle sind die Tabs erkennbar! --&gt;</code>
+<code>&lt;!-- role-Attribute wurden der Liste und den einzelnen Elementen hinzugefügt. --&gt;</code>
+<code>&lt;ol role="tablist"&gt;</code>
+<code>  &lt;li id="ch1Tab" <span style="color: #ff0000;">role="tab"</span>&gt;
+    &lt;a href="#ch1Panel"&gt;Chapter 1&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="ch2Tab" <span style="color: #ff0000;">role="tab"</span>&gt;
+    &lt;a href="#ch2Panel"&gt;Chapter 2&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li id="quizTab" <span style="color: #ff0000;">role="tab"</span>&gt;
+    &lt;a href="#quizPanel"&gt;Quiz&lt;/a&gt;
+  &lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;div&gt;
+  &lt;!-- Beachten Sie die Attribute 'role' und 'aria-labelledby', welche die Tab-Panels beschreiben. --&gt;
+  &lt;div id="ch1Panel" <span style="color: #ff0000;">role=”tabpanel” aria-labelledby="ch1Tab"</span>&gt;Chapter 1 content goes here&lt;/div&gt;
+  &lt;div id="ch2Panel" <span style="color: #ff0000;">role=”tabpanel” aria-labelledby="ch2Tab"</span>&gt;Chapter 2 content goes here&lt;/div&gt;
+  &lt;div id="quizPanel" <span style="color: #ff0000;">role=”tabpanel” aria-labelledby="quizTab"</span>&gt;Quiz content goes here&lt;/div&gt;
+&lt;/div&gt;</code>
+</pre>
+
+<p>ARIA wird von allen aktuellen Versionen der bekannten Browser unterstützt, einschließlich Firefox, Safari, Opera, Chrome und Internet Explorer. Viele Unterstützungstechnologien, wie z.B. die Open-Source-Screenreader NVDA und Orca, unterstützen ARIA ebenfalls. Auch JavaScript-Biblitheken wie jQuery UI, YUI, Google Closure und Dojo Dijit setzen ARIA-Markup ein.</p>
+
+<h3 id="Darstellungänderungen">Darstellungänderungen</h3>
+
+<p>Dynamische Änderungen der Darstellung sind zum Beispiel die Veränderung der Elementeigenschaften mit CSS (wie z.B. ein roter Rand um ein Feld, das fehlerhafte Daten enthält oder eine Farbänderung bei einer aktivierten Checkbox) oder das Anzeigen und Verstecken von Inhalten.</p>
+
+<h4 id="Zustandsänderungen">Zustandsänderungen</h4>
+
+<p>ARIA stellt Attribute zur Deklaration des aktuellen Zustands von Komponenten bereit. Die Beispiele in dieser Einführung werden die folgenden Attribute verwendet (es gibt allerdings noch einige mehr):</p>
+
+<ul>
+ <li><code><strong>aria-checked</strong></code>: Zeigt den Zustand einer Checkbox (Auswahlkästchen) oder eines Radiobuttons (Optionsfeld) an.</li>
+ <li><code><strong>aria-disabled</strong></code>: Zeigt an, dass ein Element zwar sichtbar, jedoch nicht editierbar ist oder anderweitig betätigt werden kann.</li>
+ <li><code><strong>aria-grabbed</strong></code>: Zeigt an, ob sich ein Objekt bei einer Drag &amp; Drop-Interaktion im "grabbed"-Zustand befindet.</li>
+</ul>
+
+<p>(Eine komplette Liste aller Zustände finden Sie in der <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties" title="http://www.w3.org/TR/wai-aria/states_and_properties">Liste zu ARIA-Zuständen und Eigenschaften</a>)</p>
+
+<p>Entwickler sollten ARIA-Zustände einsetzen, um den Zustand von Komponenten zu deklarieren und mit CSS-Attribut-Selektoren die visuelle Darstellung je nach Zustand entsprechend verändern (anstatt per Skript den Klassennamen des Elements zu ändern).</p>
+
+<p>Die Website der Open Ajax Alliance stellt<a class="external" href="http://www.oaa-accessibility.org/example/25/" title="http://www.oaa-accessibility.org/example/25/"> Beispiel zu CSS-Attributseletoren in Verbindung mit ARIA</a> bereit. Das Beispiel zeigt die Oberfläche eines WYSIWYG-Editors mit einem dynamischen Menü-System. Elemente, die gerade selektiert sind, unterscheiden sich visuell von anderen Elementen. Relevant sind hier besonders die unten beschriebenen Teile.</p>
+
+<p>Bei diesem Beispiel wird für des Menüs der HTML-Code aus Beispiel 1a verwendet. In Zeile 7 und 13 wird die Eigenschaft aria-checked eingesetzt, um den Zustand der Selektion anzuzeigen.</p>
+
+<p><em>Beispiel 1a. HTML für ein selektierbares Menü (übernommen von <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p>
+
+<pre class="deki-transform">&lt;ul id="fontMenu" class="menu" role="menu" aria-hidden="true"&gt;
+  &lt;li id="sans-serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="true"&gt;Sans-serif&lt;/li&gt;
+  &lt;li id="serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="false"&gt;Serif&lt;/li&gt;
+  ...
+</pre>
+
+<p>Für die Änderung der visuellen Darstellung des selektierten Elements wird der CSS-Code aus Beispiel 1b verwendet. Beachten Sie, dass keine Klassennamen benutzt werden, einzig der Zustand des aria-checked-Attribute in Zeile 1 entscheidet also über die Darstellung des Elements.</p>
+
+<p><em><em>Beispiel 1b. Attribute-basierte Selektoren zum Anzeigen des Zustands (übernommen von<a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink"> http://www.oaa-accessibility.org/example/25/</a>).</em></em></p>
+
+<pre class="deki-transform">li[aria-checked="true"] {
+  font-weight: bold;
+  background-image: url('images/dot.png');
+  background-repeat: no-repeat;
+  background-position: 5px 10px;
+}
+</pre>
+
+<p>Zur Aktualisierung der Eigenschaft aria-checked wird der JavaScript-Code aus Beispiel 1c verwendet. Auch das Skript ändert nur den Wert der Attribute (Zeile 3 und 8) und es wird kein Klassenname hinzugefügt oder entfernt.</p>
+
+<p><em><em>Beispiel 1c. JavaScript zur Aktualisierung des Attributs aria-checked (übernommen von<a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink"> http://www.oaa-accessibility.org/example/25/</a>)</em></em><em><em><em>.</em></em></em></p>
+
+<pre class="deki-transform">var processMenuChoice = function(item) {
+  // 'check' the selected item
+  item.setAttribute('aria-checked', 'true');
+  // 'un-check' the other menu items
+  var sib = item.parentNode.firstChild;
+  for (; sib; sib = sib.nextSibling ) {
+    if ( sib.nodeType === 1 &amp;&amp; sib !== item ) {
+      sib.setAttribute('aria-checked', 'false');
+    }
+  }
+};
+</pre>
+
+<h4 id="Änderung_der_Sichtbarkeit">Änderung der Sichtbarkeit</h4>
+
+<p>Bei Änderungen der Sichtbarkeit von Elementen (verstecken oder sichtbar machen von Elementen) sollten Entwickler nur den Wert der Eigenschaft <strong>aria-hidden</strong> verändern. Dabei sollte die oben beschreibene Technik angewendet und CSS (<code>display:none</code>) eingesetzt werden, um das Element zu verstecken.</p>
+
+<p>Auf der Website der Open Ajax Alliance findet man hierzu <a class="external" href="http://www.oaa-accessibility.org/example/39/" title="http://www.oaa-accessibility.org/example/39/">ein Beispiel mit einem Tooltip </a>bei dem das Attribut <strong>aria-hidden</strong> eingesetzt wird, um die Sichtbarkeit des Tooltips zu verändern. Das Beispiel zeigt ein einfaches Formular, bei dem Anweisungen zu den einzelnen Feldern eingeblendet werden. Auf die wichtigsten Details wird im Folgenden genauer eingegangen.</p>
+
+<p>Beispiel 2a zeigt den HTML-Code für einen Tooltip. In Zeile 9 wird der Zustand von <strong>aria-hidden</strong> auf <code>true</code> gesetzt.</p>
+
+<p><em>Beispiel 2a. HTML für ein Tooltip (übernommen von<a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink"> http://www.oaa-accessibility.org/example/39/</a>).</em></p>
+
+<pre class="deki-transform">&lt;div class="text"&gt;
+    &lt;label id="tp1-label" for="first"&gt;First Name:&lt;/label&gt;
+    &lt;input type="text" id="first" name="first" size="20"
+           aria-labelledby="tp1-label"
+           aria-describedby="tp1"
+           aria-required="false" /&gt;
+    &lt;div id="tp1" class="tooltip"
+         role="tooltip"
+         aria-hidden="true"&gt;Your first name is a optional&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<p>Das Beispiel 2b unten zeigt den CSS-Code für das Markup. Wie schon beim ersten Beispiel wird auch hier kein Klassenname benutzt, sondern nur der Wert der Attribute <strong>aria-hidden</strong> geändert.</p>
+
+<p><em><em>Beispiel 2b. Attributbasierte Selektoren zur Anzeige des Zustands (übernommen von<br>
+ <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></em></p>
+
+<pre class="deki-transform">div.tooltip[aria-hidden="true"] {
+  display: none;
+}
+</pre>
+
+<p>Beispiel 2c zeigt den JavaScript-Code zur Aktulisierung der Eigenschaft <strong>aria-hidden</strong>. Wieder wird per Skript nur die Attribute <strong>aria-hidden</strong> in Zeile 2 verändert und kein Klassenname hinzugefügt oder entfernt.</p>
+
+<p><em><em>Beispiel 2c. JavaScript zur Aktualisierung des Attributs aria-checked (übernommen von <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>)</em></em><em><em><em>.</em></em></em></p>
+
+<pre class="deki-transform">var showTip = function(el) {
+  el.setAttribute('aria-hidden', 'false');
+}</pre>
+
+<h3 id="Role_changes">Role changes</h3>
+
+<div class="note">
+<pre>In Bearbeitung</pre>
+</div>
+
+<p>Mit ARIA können Entwicklern solchen Elementen, bei denen wichtige semantische Informationen fehlen, eine Rolle zuweisen. Wenn z.B. eine ungeordnete Liste für die Erstellung eines Menüs benutzt wird, sollte dem <code>ul</code>-Elemente die Rolle <code>menubar</code> zugeteilt werden und jedem untergeordneten <code>li</code>-Listenelement die Rolle <code>menuitem</code>.</p>
+
+<p>Die <strong>Rolle</strong> eines Elements sollte nicht verändert werden. Stattdessen sollte das bestehende Element entfernt und ein neues Element mit neuer <strong>Rolle</strong> hinzugefügt werden.</p>
+
+<p>Wenn man z.B. eine Texteditor-Komponente mit einem Ansichtsmodus und einem Editiermodus erstellen möchte, dann kommt ein Entwickler vielleicht auf die Idee für das Textfeld ein schreibgeschütztes input-Element einzusetzen, diesem für den Ansichtsmodus die Rolle <code>button</code> zuzuweisen und beim Wechsel in den Editiermodus die Rolle und den Schreibschutz zu entfernen (da <code>input</code>-Elemente eigene Rollen zugewiesen werden können).</p>
+
+<p>Diese Vorgehensweise ist keine gute Idee. Stattdessen sollte für den Ansichtsmodus ein anderes Element, wie z.B. ein <code>div</code>- oder <code>span</code>-Element mit der Rolle <code>button</code> verwendet werden und für den Editiermodus ein <code>input</code>-Textelement.</p>
+
+<h3 id="Asynchrone_Inhaltsänderungen">Asynchrone Inhaltsänderungen</h3>
+
+<div class="note">In Bearbeitung. Siehe auch <a href="/en/ARIA/Live_Regions" title="Live Regions">Live Regions</a></div>
+
+<h2 id="Tastaturnavigation">Tastaturnavigation</h2>
+
+<p>Von Entwicklern wird oft wenig darauf geachtet, ob Oberflächenkomponenten auch mit der Tastatur bedienbar sind. Damit die Kompnenten für möglichst viele Benutzer zugänglich sind, sollte für alle Funktionen der Komponenten einer Web-Applikation überprüft werden, ob sie auch ausschließlich mit Tastatur und ohne Maus bedient werden können. Für die praktische Umsetzung sollten die üblichen Konventionen für Desktop-Komponenten befolgt werden, also die Benutzung von Tab-, Enter-, Leertaste und Pfeiltasten ermöglicht werden.</p>
+
+<p>Traditionell ist die Tastaturnavigation im Web auf die Tab-Taste begrenzt. Der Nutzer drückt Tab um jeden Link, Button oder Formular auf der Seite nacheinander zu fukussieren, Shift-Tab um zum letzten Element zu springen. Das ist eine eindimensionale Form der Navigation—vor und zurück, ein Element pro Schritt. Auf sehr umfangreichen Seiten muss ein Nutzer der Tastaturnavigation oft dutzende Male die Tab-Taste drücken, um zu dem gewünschten Bereich zu kommen. Die Implementierung von Navigationskonventionen von Desktop-Programmen im Web hat das Potential die Navigation für viele Nutzer zu beschleunigen.</p>
+
+<p>Hier eine Zusammenfassung wie Tastaturnavigation in einer ARIA-unterstützten Web-Applikation funktionieren sollte:</p>
+
+<ul>
+ <li>Die Tab-Taste fokussiert eine Komponente als ganzes. Beispielsweise sollte das navigieren zu einer Menüleiste dessen erstes Element fokussieren</li>
+ <li>Die Pfeiltasten sollten die Navigation innerhalb der Komponente ermöglichen. Zum Beispiel indem man mit dem linken und rechten Pfeil den Fokus auf den vorherigen und nächsten Menüpunkt verschiebt</li>
+ <li>Wenn die Komponente nicht innerhalb eines Formulars liegt, sollten die Enter- und Leertaste das Kontrollelement auswählen oder aktivieren</li>
+ <li>Innerhalb eines Formulars sollte die Leertaste das Element auswählen oder aktivieren, während die Enter-Taste die Standardfunktion des Formulars aufruft</li>
+ <li>Ahme im Zweifelsfall die Desktop Standardfunktionalität dieses Elements nach</li>
+</ul>
+
+<p>In dem Beispiel der Tab-Komponente oben sollte der Nutzer also in der Lage sein mit den Tab- und Shift-Tab Tasten in und aus dem Komponenten-Container (&lt;ol&gt; in unserem Beispiel) zu navigieren. Sobald der Fokus innerhalb des Containers liegt, sollten die Pfeiltasten dem Nutzer erlauben zwischen den einzelnen Tabs (die &lt;li&gt; Elemente) zu navigieren. Ab hier variieren die Konventionen je nach Plattform. Unter Windows wird der nächste Tab automatisch aktivieren, wenn der Nutzer die Pfeiltasten drückt. Unter macOS, kann der Nutzer entweder die Enter- oder die Leertaste drücken, um den nächsten Tab zu aktivieren. Ein umfangreiches Tutorial zur Erstellung von <a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets">Tastaturnavigation in JavaScript Komponenten</a> beschreibt wie man diese Funktionsweise mit JavaScript implementieren kann.</p>
+
+<p>Für mehr Details zu Koventionen bei desktopartiger Tastaturnavigation gibt es einen umfangreichen <a class="external" href="http://dev.aol.com/dhtml_style_guide" title="http://dev.aol.com/dhtml_style_guide">DHTML style guide</a>. Dieser stellt einen Überblick darüber bereit, wie Tastaturnavigation in jeder von ARIA unterstützten Komponente funktionieren sollte. Die W3C bietet ebenfalls ein hilfreiches <a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">ARIA Best Practices</a> Dokument, das Konventionen für Tastaturnavigation und Shortcuts für eine Vielzahl von Komponenten beinhaltet.</p>
+
+<h2 id="Weiterführende_Links">Weiterführende Links</h2>
+
+<ul>
+ <li><a href="/en/ARIA" title="ARIA">ARIA</a></li>
+ <li><a href="/en/Accessibility/Web_applications_and_ARIA_FAQ" title="Web applications and ARIA FAQ">Web applications and ARIA FAQ</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></li>
+ <li><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">WAI-ARIA Best Practices</a></li>
+ <li><a class="external" href="http://dev.aol.com/dhtml_style_guide" title="http://dev.aol.com/dhtml_style_guide">DHTML Style Guide</a></li>
+</ul>
diff --git a/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html b/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html
new file mode 100644
index 0000000000..4e1f22e0b5
--- /dev/null
+++ b/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html
@@ -0,0 +1,89 @@
+---
+title: ARIA Live-Regionen
+slug: Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen
+translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions
+---
+<h2 id="Einführung">Einführung</h2>
+<p>In der Vergangenheit konnten Änderungen bei Webseiten nur so von einem Screenreader kommuniziert werden, dass der komplette Inhalt vorgelesen oder nur sehr wenig bis gar nichts über die Inhaltsänderungen berichtet wurde. Dies führte dazu, dass einige oder sogar alle Informationen unzugänglich waren. Bisher waren Screenreader nicht in der Lage, diese Situation zu verbessern, weil es keine standardisierte Methode gab, um Screenreader per Markup über Veränderungen zu informieren. ARIA-Live-Regionen sollen diese Lücke schließen. Über Live-Regionen erhalten Screenreader Anweisungen, wonach entschieden werden kann, ob und wann Benutzer unterbrochen werden sollen, um sie über Veränderungen des Inhalts in Kenntnis zu setzen.</p>
+<h2 id="Einfache_Live-Regionen">Einfache Live-Regionen</h2>
+<p> </p>
+<p>Dynamische Inhalte, die ohne das Neuladen einer Webseite nachgeladen werden, sind im Allgemeinen entweder eine Region oder eine Komponente. Einfache Inhaltsänderungen, die nicht interaktiv sind, sollten als Live-Regionen gekennzeichnet werden. In der folgenden Liste werden die unterschiedlichen Eigenschaften für ARIA-Live-Regionen mit einer Beschreibung aufgeführt.</p>
+<ol>
+ <li><strong>aria-live:</strong> Mit aria-live=POLITENESS_SETTING wird die Priorität für die Behandlung von Aktualisierungen von Live-Regionen festgelegt - die möglichen Werte für diese Einstellung sind: off/polite/assertive, wobei "off" der Default-Wert ist. Diese Eigenschaft ist mit Abstand die Wichtigste.</li>
+ <li>
+  <p class="comment"><strong>aria-controls</strong>: Mit aria-controls=[IDLIST] wird ein Steuerungselement mit der Region verknüpft, die es kontrollieren soll. Regionen werden ähnlich wie div-Elemente anhand einer ID identifiziert. Wenn mehrere Regionen mit einer Steuerung verknüpft werden sollen, können diese einfach getrennt durch ein Leerzeichen angegeben werden, z.B. aria-controls="myRegionID1 myRegionsID2".</p>
+  <div class="warning">
+   Not known if the aria-controls aspect of live regions is implemented in current ATs, or which. Needs research.</div>
+ </li>
+</ol>
+<p>In der Regel wird ausschließlich aria-live="polite" verwendet. Alle Regionen, die mit Informationen aktualisiert werden, die zwar wichtig sind, jedoch nicht so dringend, dass der Benutzer sofort unterbrochen und darüber informiert werden sollte, sollten dieses Attribut erhalten. Der Screenreader setzt den Benutzer dann über die Änderungen in Kenntnis, sobald er nicht mehr beschäftigt ist.</p>
+<p>Regionen, die unrelevant sind oder z.B. wegen ständiger Aktualisierungen störend wirken könnten, sollten mit aria-live="off" stillgeschaltet werden.</p>
+<h3 id="Einfaches_Einsatzszenario_Eine_Combobox_aktualisiert_nützliche_On-Screen-Informationen">Einfaches Einsatzszenario: Eine Combobox aktualisiert nützliche On-Screen-Informationen</h3>
+<p>Angenommen eine Website, die Informationen über Vogelarten bereitstellt, bietet ein Dropdown-Menü zur Auswahl einer der Vogelarten an und bei der Auswahl werden in einer Region Informationen über diese Vogelart angezeigt.</p>
+<p><code>&lt;select size="1" id="bird-selector" aria-controls="bird-info"&gt;&lt;option&gt; .... &lt;/select&gt;</code></p>
+<p><code>&lt;div role="region" id="bird-info" aria-live="polite"&gt;</code></p>
+<p>Sobald der Benutzer eine Vogelart selektiert, wird die Information vorgelesen. Da für die Region "polite" eingestellt ist, wartet der Screenreader, bis der Benutzer nicht mehr beschäftigt ist. Folglich wird bei der Bewegung nach unten in der Liste nicht jede Vogelart vorgelesen, sondern nur die ausgewählte.</p>
+<h2 id="Bevorzugung_von_spezialisierten_Live-Region-Rollen">Bevorzugung von spezialisierten Live-Region-Rollen</h2>
+<p>Für die folgenden bekannten vordefinierten Situationen sollte bevorzugt eine entsprechende "Live-Region-Rolle" eingesetzt werden:</p>
+<table style="width: 100%;">
+ <thead>
+  <tr>
+   <th scope="col">Rolle</th>
+   <th scope="col">Beschreibung</th>
+   <th scope="col">Hinweise zur Kompatibilität</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>log</td>
+   <td>Chat, Fehler, Spiel oder andere Logs</td>
+   <td>Zur Maximierung der Kompatiblität sollte ein redundantes aria-live="polite" hinzugefügt werden, wenn diese Rolle verwendet wird.</td>
+  </tr>
+  <tr>
+   <td>status</td>
+   <td>Eine Statusleiste oder Bildschirmbereich, der einen aktualisierbaren Status anzeigt. Screenreader-Benutzer können mit einem speziellen Befehl den aktuellen Status abfragen.</td>
+   <td>Zur Maximierung der Kompatiblität sollte ein redundantes aria-live="polite" hinzugefügt werden, wenn diese Rolle verwendet wird.</td>
+  </tr>
+  <tr>
+   <td>alert</td>
+   <td>Eine Fehler- oder Warnungmeldung, die auf dem Bildschirm eingeblendet wird. Alarmmeldungen sind  insbesondere bei der clentseitige Validierungsmeldungen für Benutzer wichtig. (TBD: link to ARIA form tutorial with aria info)</td>
+   <td>Zur Maximierung der Kompatiblität sollte ein redundantes aria-live="assertive" hinzugefügt werden, wenn diese Rolle verwendet wird.  (TBD: check to see if this is necessary or causes double speaking issues.)</td>
+  </tr>
+  <tr>
+   <td>progressbar</td>
+   <td>Eine Kombination aus einer Komponente und einer Live-Region.  Verwenden Sie diese Rolle mit aria-valuemin, aria-valuenow und aria-valuemax. (TBD: add more info here).</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>marquee</td>
+   <td>Für scrollenden Text, wie z.B. ein Börsenticker.</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>timer</td>
+   <td>Jede Art von Zeitschaltung oder Uhr, wie z.B. ein Countdown-Timer oder eine Stoppuhr.</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Fortgeschrittene_Live-Regionen">Fortgeschrittene Live-Regionen</h2>
+<p>(TBD: what is supported where?)</p>
+<ol>
+ <li><strong>aria-atomic:</strong> Das Attribut aria-atomic=BOOLEAN wird eingesetzt, um festzulegen, ob der Screenreader die Live-Regionen als Ganzes präsentieren soll, auch wenn sich nur ein Teil dieser Region ändert. Die möglichen Werte sind false oder true, wobei false der Default-Wert ist.</li>
+ <li><strong>aria-relevant:</strong> Mit aria-relevant=[LIST_OF_CHANGES] wird bestimmt, welche Art von Veränderungen relevant für eine Live-Region sind - die möglichen Werte sind additions/removals/text/all. Der Default-Wert ist "additions text".</li>
+ <li><strong>aria-labelledby</strong>: Mit aria-labelledby=[IDLIST] wird eine Region mit seinen Labels verknüpft. Die Technik ist dieselbe wie bei aria-controls, nur dass hier Labels statt Steuerungselemente mit der Region verknüpft werden. Mehrere Bezeichner können durch Leerzeichen getrennt angegeben werden.</li>
+ <li><strong>aria-describedby:</strong> Das Attribut aria-describedby=[IDLIST] wird verwendet, um eine Region mit einer Beschreibung zu verknüpfen. Auch hier ist die Technik dieselbe, wie bei aria-controls, nur dass eine Beschreibung statt einer Steuerung verknüpft wird. Mehrere Bezeichner für Beschreibungen können durch Leerzeichen getrennt angegeben werden.</li>
+</ol>
+<h3 id="Fortgeschrittenes_Einsatzszenario_Roster"><span class="mw-headline" id="Use_Case:_Roster">Fortgeschrittenes Einsatzszenario: Roster</span></h3>
+<p>Auf einer Chat-Webseite soll eine Liste von Benutzern angezeigt werden, die zum aktuellen Zeitpunkt eingeloggt sind. Der Status der Benutzer soll dabei dynamisch (ohne Aktualisierung der Webseite) auf dem neusten Stand gehalten werden.</p>
+<pre>&lt;ul id="roster" aria-live="polite" aria-relevant="additions removals"&gt;
+	&lt;!-- Hier wird JavaScript zum Hinzufügen und Entfernen von Benutzern eingesetzt --&gt;
+&lt;/ul&gt;
+</pre>
+<p>Zusammenfassende Beschreibung von ARIA-Live-Eigenschaften:</p>
+<ul>
+ <li>aria-live="polite" legt fest, dass der Screenreader warten soll, bis der Benutzer nicht mehr beschäftigt ist, bevor die Aktualisierungen ausgegeben werden. Dieser Wert wird am häufigsten verwendet, da das Setzen des Werts "assertive" dafür sorgt, dass der Benutzer während er noch aktiv ist unterbrochen wird, was für den Benutzer störend sein kann.</li>
+ <li>Die Eigeschaft aria-atomic wurde nicht gesetzt (Default-Wert: "false"), sodass nur hinzugekommene und den Chat verlassende Benutzer genannt werden und nicht die gesamte Liste vorgelesen wird.</li>
+ <li>Mit aria-relevant="additions removals" wird sichergestellt, dass sowohl die hinzugekommenen als auch die den Chat verlassenden Benutzer genannt werden.</li>
+</ul>
+<p>TBD: Realistic use case for aria-atomic="true"</p>
diff --git a/files/de/web/barrierefreiheit/aria/aria_techniken/index.html b/files/de/web/barrierefreiheit/aria/aria_techniken/index.html
new file mode 100644
index 0000000000..85059df7a2
--- /dev/null
+++ b/files/de/web/barrierefreiheit/aria/aria_techniken/index.html
@@ -0,0 +1,168 @@
+---
+title: ARIA Techniken
+slug: Web/Barrierefreiheit/ARIA/ARIA_Techniken
+tags:
+  - ARIA
+  - Accessibility
+translation_of: Web/Accessibility/ARIA/ARIA_Techniques
+---
+<p> </p>
+
+<h2 id="Rollen"> Rollen</h2>
+
+<p> </p>
+
+<h3 id="Widget_Rollen"><a href="/en/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role">Widget Rollen</a></h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="die Button Rolle benutzen">Button</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="die Checkbox Rolle benutzen">Checkbox</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="die Dialog Rolle benutzen">Dialog</a></li>
+ <li>Gridcell</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="die Link Rolle benutzen">Link</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="die Log Rolle benutzen">Log</a></li>
+ <li>Marquee</li>
+ <li>Menuitem</li>
+ <li>Menuitemcheckbox</li>
+ <li>Menuitemradio</li>
+ <li>Option</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="die Progressbar Rolle benutzen">Progressbar</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="die Radio Rolle benutzen">Radio</a></li>
+ <li>Scrollbar</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="die Slider Rolle benutzen">Slider</a></li>
+ <li>Spinbutton</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="die Status Rolle benutzen">status</a></li>
+ <li>Tab</li>
+ <li>Tabpanel</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="die Textbox Rolle benutzen">textbox</a></li>
+ <li>Timer</li>
+ <li>Tooltip</li>
+ <li>Treeitem</li>
+ <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_switch_role" title="die Switch Rolle benutzen">switch</a></li>
+</ul>
+</div>
+
+<h3 id="Zusammengesetzte_Rollen">Zusammengesetzte Rollen</h3>
+
+<p>Diese Techniken beschreiben jede zusammengesetzte Rolle, sowie deren benötigte und optinale Kind-Rollen.</p>
+
+
+<div class="index">
+<ul>
+ <li>Combobox</li>
+ <li>Grid (einschließlich row, gridcell, rowheader, und columnheader Rollen)</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="die Listbox Rolle benutzen">Listbox</a> (einschließlich option Rolle)</li>
+ <li>Menu</li>
+ <li>Menubar</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="die Radio Rolle benutzen">Radiogroup (siehe auch radio Rolle)</a></li>
+ <li>Tablist (einschließlich tab und  tabpanel Rollen)</li>
+ <li>Tree</li>
+ <li>Treegrid</li>
+</ul>
+</div>
+
+<h3 id="Dokumentstruktur_Rollen"><a href="https://www.w3.org/TR/wai-aria/roles#document_structure_roles">Dokumentstruktur Rollen</a></h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role" title="die Article Rolle benutzen">Article</a></li>
+ <li>Definition</li>
+ <li>Directory</li>
+ <li>Document</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="die Group Rolle benutzen">Group</a></li>
+ <li>Heading</li>
+ <li>Img</li>
+ <li>List</li>
+ <li>Listitem</li>
+ <li>Math</li>
+ <li>Note</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="die Presentation Rolle benutzen">Presentation</a></li>
+ <li>Region</li>
+ <li>Separator</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="die Toolbar Rolle benutzen">Toolbar</a></li>
+</ul>
+</div>
+
+<h3 id="Grenzrollen"><a href="https://www.w3.org/TR/wai-aria/roles#landmark_roles">Grenzrollen</a></h3>
+
+<div class="index">
+<ul>
+ <li>Application</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="die Banner Rolle benutzen">Banner</a></li>
+ <li>Complementary</li>
+ <li>Contentinfo</li>
+ <li>Form</li>
+ <li>Main</li>
+ <li>Navigation</li>
+ <li>Search</li>
+</ul>
+</div>
+
+<h2 id="Zustände_und_Eigenschaften">Zustände und Eigenschaften</h2>
+
+<p> </p>
+
+<h3 id="Widget_Eigenschaften">Widget Eigenschaften</h3>
+
+<div class="index">
+<ul>
+ <li>aria-autocomplete</li>
+ <li>aria-checked</li>
+ <li>aria-current</li>
+ <li>aria-disabled</li>
+ <li>aria-expanded</li>
+ <li>aria-haspopup</li>
+ <li>aria-hidden</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="das aria-invalid Attribut benutzen">aria-invalid</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="das aria-label Attribut benutzen">aria-label</a></li>
+ <li>aria-level</li>
+ <li>aria-multiline</li>
+ <li>aria-multiselectable</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="das aria-orientation Attribut benutzen">aria-orientation</a></li>
+ <li>aria-pressed</li>
+ <li>aria-readonly</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="das aria-required Attribut benutzen">aria-required</a></li>
+ <li>aria-selected</li>
+ <li>aria-sort</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="das aria-valuemax Attribut benutzen">aria-valuemax</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="das aria-valuemin Attribut benutzen">aria-valuemin</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="das aria-valuenow Attribut benutzen">aria-valuenow</a></li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="das aria-valuetext Attribut benutzen">aria-valuetext</a></li>
+</ul>
+</div>
+
+<h3 id="Live_Region_Attribute">Live Region Attribute</h3>
+
+<div class="index">
+<ul>
+ <li>aria-live</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="das aria-live Attribut benutzen">aria-relevant</a></li>
+ <li>aria-atomic</li>
+ <li>aria-busy</li>
+</ul>
+</div>
+
+<h3 id="Drag_drop_Attribute">Drag &amp; drop Attribute</h3>
+
+<div class="index">
+<ul>
+ <li>aria-dropeffect</li>
+ <li>aria-dragged</li>
+</ul>
+</div>
+
+<h3 id="Beziehungs_Attribute">Beziehungs Attribute</h3>
+
+<div class="index">
+<ul>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="das aria-activedescendant Attribut benutzen">aria-activedescendant</a></li>
+ <li>aria-controls</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="das aria-describedby Attribut benutzen">aria-describedby</a></li>
+ <li>aria-flowto</li>
+ <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="das aria-labelledby Attribut benutzen">aria-labelledby</a></li>
+ <li>aria-owns</li>
+ <li>aria-posinset</li>
+ <li>aria-setsize</li>
+</ul>
+</div>
diff --git a/files/de/web/barrierefreiheit/aria/index.html b/files/de/web/barrierefreiheit/aria/index.html
new file mode 100644
index 0000000000..c282ef8f95
--- /dev/null
+++ b/files/de/web/barrierefreiheit/aria/index.html
@@ -0,0 +1,137 @@
+---
+title: ARIA
+slug: Web/Barrierefreiheit/ARIA
+translation_of: Web/Accessibility/ARIA
+---
+<p>Accessible Rich Internet Applications <strong>(ARIA)</strong> ermöglichen Webentwicklern Webinhalte und Web-Applikationen (insbesondere solche mit Ajax und JavaScript) besser zugänglich für Menschen mit Behinderungen und anderen Einschränkungen zu machen. Zum Beispiel lassen sich mit ARIA Navigations-Landmarken, JavaScript-Widgets, Formular-Hinweise und Fehlermeldungen hinzufügen und Live-Content-Aktualisierungen barrierefrei gestalten.</p>
+
+<p>ARIA ist ein Satz von speziellen Attributen, die beliebigem Markup-Content hinzugefügt werden können, wurde jedoch vorwiegend für HTML entwickelt. Das Attribut <code>role</code> definiert, um welche Art von Element es sich bei einem Objekt handelt (z. B. article, alert, oder slider). Andere ARIA-Attribute erweitern den Inhalt einer Website um nützliche Hilfsfunktionen, wie z. B. Formularbeschreibungen und Anzeigen für den aktuellen Wert bei Fortschrittsanzeigen.</p>
+
+<p>ARIA ist bei den meisten Browsern und Screen-Readern implementiert. Die Implementierungen weichen jedoch teilweise voneinander ab. Bei älterer Technologie ist die Unterstützung oft nicht vollständig (oder gar nicht vorhanden), daher sollte am besten "sicheres" ARIA eingesetzt werden, das bei schlechter Unterstützung keine Probleme verursacht, oder der Benutzer aufgefordert werden, neuere Technologie zu benutzen.</p>
+
+<p>Bitte helfen Sie uns, ARIA zu verbessern! Falls sie nicht genügend Zeit haben, fügen sie ihre Vorschläge einfach auf der <a href="/Talk:en/ARIA" title="https://developer.mozilla.org/Talk:en/ARIA">Diskussionsseite</a> hinzu.</p>
+
+<table class="topicpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h3 id="Documentation" name="Documentation">Einführung in ARIA</h3>
+
+    <dl>
+     <dt><a href="/de/docs/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets" title="An overview of accessible web applications and widgets">Einführung in ARIA</a></dt>
+     <dd>Eine schnelle Einführung, die beschreibt, wie dynamische Inhalte mit ARIA barrierefrei gestaltet werden können. Lesen Sie auch die klassische <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/" title="http://dev.opera.com/articles/view/introduction-to-wai-aria/">Einführung von Gez Lemon</a> von 2008.</dd>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ" title="https://developer.mozilla.org/en-US/docs/Accessibility/Web_applications_and_ARIA_FAQ">Web-Applikationen und ARIA-FAQ</a></dt>
+     <dd>Antworten für die häufigsten Fragen rund um WAI-ARIA und warum es nötig ist, Web-Applikationen barrierefrei zu gestalten.</dd>
+     <dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/" title="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Videos von Screen-Readern mit ARIA</a></dt>
+     <dd>Schauen sie sich vereinfachte Beispiele und Praxisbeispiele zu ARIA an. Auch "davor und danach"-Beispiele sind hier zu finden.</dd>
+     <dt><a class="external" href="http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html">Benutzung von ARIA mit HTML</a></dt>
+     <dd>Hier finden Sie praxisorientierte Empfehlungen für Entwickler. Zum Beispiel welche Attribute mit welchen HTML-Elementen eingesetzt werden sollten.</dd>
+    </dl>
+
+    <h3 id="Einfache_Verbesserungen_mit_ARIA">Einfache Verbesserungen mit ARIA</h3>
+
+    <dl>
+     <dt><a class="external" href="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/" rel="external" title="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/">Enhancing Page Navigation with ARIA Landmarks</a></dt>
+     <dd>Eine Einführung zur Verbesserung der Seitennavigation für Benutzer von Screen Readern mit ARIA-Landmarken. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external" title="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">Lesen Sie auch den Artikel zur Impelemtierung von ARIA-Landmarken</a> und schauen Sie sich bereits existierende Websites mit ARIA-Landmarken an (letze Aktualisierung: Juli 2011).</dd>
+     <dt><a href="/en-US/docs/ARIA/forms" rel="internal" title="/en-US/docs/ARIA/forms">Verbesserung der Zugänglichkeit von Formularen</a></dt>
+     <dd>ARIA ist nicht nur für dynamische Inhalte! Lernen Sie, wie die Zugänglichkeit von HTML-Formularen mit Hilfe von ARIA-Attributen verbessert werden kann.</dd>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">Live-Regions (work-in-progress)</a></dt>
+     <dd>Live-Regionen liefern Screen Readern Hinweise über den Umgang mit Inhaltsänderungen bei Webseiten.</dd>
+     <dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm" rel="external" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">Using ARIA Live Regions to Announce Content Changes</a></dt>
+     <dd>Eine kurze Übersicht über Live-Regionen von den Machern  der Screen-Reader Software JAWS. Live Regions werden auch von NVDA in Firefox und VoiceOver bei Safari unterstüzt (ab OS X Lion und iOS 5).</dd>
+    </dl>
+
+    <h3 id="ARIA_für_JavaScript-Widgets">ARIA für JavaScript-Widgets</h3>
+
+    <dl>
+     <dt><a class="external external-icon" href="/de/docs/Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten" title="en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">Tastaturgesteuerte JavaScript-Komponenten</a></dt>
+     <dd>Der erste Schritt bei der Erstellung eines berrierefreien JavaScript-Widget ist, es mit der Tastatur navigierbar zu machen. Deiser Artikel zeigt die Arbeitsschritte auf, die hierfür nötig sind. Der <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/" title="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">Artikel von Yahoo! zum Focus Management</a> liefert ebenfalls eine gute Beschreibung.</dd>
+     <dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/" title="http://dev.aol.com/dhtml_style_guide">Style-Guide für die Tastaturnavigation</a></dt>
+     <dd>Es stellt eine Herausforderung bei ARIA dar, Entwickler zur konsistenten Implementierung zu bringen, was für die Benutzer natürlich am besten wäre. Dieser Style-Guide beschreibt die Tastaturfunktionen bei bekannten Widgets.</dd>
+    </dl>
+
+    <h3 id="Weitere_Informationen_zu_ARIA">Weitere Informationen zu ARIA</h3>
+
+    <dl>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview" title="en-US/docs/aria/widgets/overview">Widget-Techniken, Tutorials und Beispiele</a></dt>
+     <dd>Benötigen sie einen Slider, ein Menü oder eine andere Art von Widget? Hier finden Sie weiterführende Informationen.</dd>
+     <dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">ARIA-erweiterte JavaScript UI-Libraries</a></dt>
+     <dd>Falls Sie ein neues Projekt starten, setzen Sie eine UI-Widget-Llibrary mit ARIA-Unterstützung ein!  Achtung: Der Artikel ist von 2009 - der Inhalt sollte auf eine MDN-Seite kopiert werden, damit er aktualisiert werden kann.</dd>
+     <dt><a class="external" href="http://dl.dropbox.com/u/573324/CSUN2012/index.html" title="http://dl.dropbox.com/u/573324/CSUN2012/index.html">Barrierefreiheit von HTML5 und Rich Internet Applications - CSUN 2012 Workshop Materialen</a></dt>
+     <dd>Beinhaltet auch Präsentationen und Beispiele.</dd>
+    </dl>
+   </td>
+   <td>
+    <h3 id="Community" name="Community">Mailing-Liste</h3>
+
+    <dl>
+     <dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria" title="https://groups.google.com/forum/#!forum/free-aria">Free ARIA Google Group</a></dt>
+     <dd>Hier können Fragen zu ARIA gestellt und Vorschläge gemacht werden, um diese ARIA-Dokumentation zu verbessern.</dd>
+    </dl>
+
+    <h3 id="Community" name="Community">Blogs</h3>
+
+    <p>ARIA-Information von Blogs sind meist schnell veraltet. Dennoch gibt es einige hilfreiche Informationen von anderen Entwicklern, die mit ARIA arbeiten.</p>
+
+    <p><a class="external" href="http://www.paciellogroup.com/blog/category/wai-aria/" title="http://www.paciellogroup.com/blog/category/wai-aria/">Paciello Group</a></p>
+
+    <p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/" title="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p>
+
+    <p><a class="external" href="http://yaccessibilityblog.com/library/category/code/aria" title="http://yaccessibilityblog.com/library/category/code/aria">Yahoo! Accessibility</a></p>
+
+    <h3 id="Fehler_melden">Fehler melden</h3>
+
+    <p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">Schreiben Sie ARIA-Fehlerberichte zu Browsern, Screen-Readern und JavaScript-Libraries</a>.</p>
+
+    <h3 id="Beispiele">Beispiele</h3>
+
+    <dl>
+     <dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases" title="en-US/docs/ARIA/examples">Verzeichnis für ARIA-Beispiele</a></dt>
+     <dd>Einige Beispieldateien mit Grundstruktur von denen man lernen kann.</dd>
+     <dt><span class="external">Beispiele für zugängliche JS-Widget-Libraries</span></dt>
+     <dd><a class="external" href="http://dojotoolkit.org/widgets" title="http://dojotoolkit.org/widgets">Dojo</a>, <a class="external" href="http://hanshillen.github.com/jqtest/" title="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://wiki.fluidproject.org/display/fluid/Components" title="http://wiki.fluidproject.org/display/fluid/Components">Fluid</a>, <a class="external" href="http://yuilibrary.com/gallery/" title="http://yuilibrary.com/gallery/">YUI</a></dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://mail.yahoo.com" title="http://mail.yahoo.com">Yahoo! Mail</a></dt>
+     <dd>Yahoo! hat bei Yahoo! Mail sehr gute Arbeit geleistet. Einer Web-App, die beinahe wie eine native App aussieht und sehr gut funktioniert, wie ein <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/" title="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">Review über Yahoo! Mail</a> des Screen-Reader-Benutzers Marco Zehe zeigt. Sein Kommentar: "Keep up the good work!".</dd>
+    </dl>
+
+    <dl>
+     <dt><a class="external" href="http://search.yahoo.com" title="http://search.yahoo.com">Yahoo! Search</a></dt>
+     <dd>Yahoo! hat hier ebenfalls sehr gute Arbeit geleistet, die Möglichkeiten mit ARIA voll ausgeschöpft und die <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/" title="http://ycorpblog.com/2011/03/23/searchdirect/">Technik ausführlich dokumentiert</a>. Bei Yahoo! Search kommt eine Kombination von ARIA-Landmarken, Live-Regionen und Widgets zum Einsatz.</dd>
+    </dl>
+
+    <h3 id="Bemühungen_zur_Standardisierung">Bemühungen zur Standardisierung</h3>
+
+    <dl>
+     <dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">Übersicht zu den WAI-ARIA Aktivitäten des W3C</a></dt>
+     <dd>Übersicht zu den Bemühungen für die Standardisierung von AI-ARIA der Web Accessibility Initiative (WAI).</dd>
+     <dt><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Spezifikation</a></dt>
+     <dd>Die Spezifikation des W3C ist als Referenz sehr nützlich. In diesem Stadium unbedingt Kompatibilitätstest durchgeführt werden, da die Implematierungen noch immer voneinader abweichen.</dd>
+     <dt><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/" title="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt>
+     <dd>Wie bei der WAI-ARIA-Spezifikation des W3C stellen die offiziellen best-practices ein Ideal für die Zukunft dar - den Zeitpunkt, an dem davon ausgegangen werden kann, dass die ARIA-Überstützung bei allen Browsern und Screen-Readern konsistent implemetiert ist. Die W3C-Dokumente erlauben die tiefgehende Einsicht in die Struktur von ARIA.<br>
+     <br>
+     Für jetzt gilt, dass Webentwickler, die ARIA implementieren, die Kompatibiliät maximieren sollten und hierfür auf die Dokumentation von Best-Practices und Beispielen zurückgreifen.</dd>
+     <dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility" title="http://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt>
+     <dd>Die Open AJAX Effort Centers zu Themen wie Entwicklerwerkzeugen, Beispieldateien und automatisierte Tests für ARIA.</dd>
+     <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">In der Entwicklung: WCAG 2.0 ARIA Techniken</a></dt>
+     <dd>Die Community benötigt einen kompletten Satz von WCAG-Techniken für WAI-ARIA + HTML, damit Organisationen davon ausgehen können, dass ihre ARIA-erweiterten Inhalte WCAG-konform sind. Das ist vor allem dann wichtig, wenn Regulierungen und Vorschriften auf WCAG basieren.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+ <tbody>
+  <tr>
+   <td colspan="2">
+    <h3 id="Related_Topics" name="Related_Topics">Verwandte Themen</h3>
+
+    <dl>
+     <dd><a href="/en-US/docs/Accessibility" title="en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/de/web/barrierefreiheit/index.html b/files/de/web/barrierefreiheit/index.html
new file mode 100644
index 0000000000..417c160fd0
--- /dev/null
+++ b/files/de/web/barrierefreiheit/index.html
@@ -0,0 +1,78 @@
+---
+title: Barrierefreiheit
+slug: Web/Barrierefreiheit
+tags:
+  - Accessibility
+  - Barrierefreiheit
+translation_of: Web/Accessibility
+---
+<p><span class="seoSummary"><strong>Accessibility</strong> (often abbreviated to <strong>A11y</strong>—as in "a" then 11 characters then "y") in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way. </span></p>
+
+<p>For many people, technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible no matter an individual's physical and cognitive abilities and no matter how they access the web.</p>
+
+<p>"<strong>The Web is fundamentally designed to work for all people</strong>, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability."</p>
+
+<div class="cleared topicpage-table">
+<div class="section">
+<h2 class="Key_accessibility_tutorials" id="Key_accessibility_tutorials" name="Key_accessibility_tutorials">Key tutorials</h2>
+
+<p>The MDN <a href="/en-US/docs/Learn/Accessibility">Accessibility Learning Area</a> contains modern, up-to-date tutorials covering accessibility essentials:</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt>
+ <dd>This article starts off the module with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the Web, and how we can make accessibility part of our web development workflow.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt>
+ <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt>
+ <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences ... or they can significantly harm accessibility if misused. This article outlines some CSS and JavaScript best practices that should be considered to ensure even complex content is as accessible as possible.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt>
+ <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt>
+ <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.</dd>
+ <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt>
+ <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Other_documentation" id="Other_documentation" name="Other_documentation">Other documentation</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">Understanding the Web Content Accessibility Guidelines</a></dt>
+ <dd>
+ <p>This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).</p>
+ </dd>
+ <dt><a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a></dt>
+ <dd>Until now, web developers who want to make their styled &lt;div&gt; and &lt;span&gt; based widgets have lacked the proper techniques. <strong>Keyboard accessibility</strong> is part of the minimum accessibility requirements which a developer should be aware of.</dd>
+ <dt><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a></dt>
+ <dd>A collection of articles to learn how to use ARIA to make your HTML documents more accessible.</dd>
+ <dt><a href="/en-US/docs/Accessibility/AT_Development" title="AT Development">Assistive technology (AT) development</a></dt>
+ <dd>A collection of articles intended for AT developers</dd>
+ <dt><a href="/en-US/docs/Web/Accessibility/Mobile_accessibility_checklist">Mobile accessibility checklist</a></dt>
+ <dd>This document provides a concise checklist of accessibility requirements for mobile app developers.</dd>
+ <dt><a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility">Cognitive accessibility</a></dt>
+ <dd>When creating web content, be aware of how you can ensure that it is accessible to people cognitive impairments.</dd>
+ <dt><a href="/en-US/docs/Web/Accessibility/Seizure_disorders">Accessibility for seizure disorders</a></dt>
+ <dd>Some types of visual web content can induce seizures in people with certain brain disorders. Understand the types of content that can be problematic, and find tools and strategies to help you avoid them.</dd>
+ <dt></dt>
+</dl>
+
+<p><span class="alllinks"><a href="/en-US/docs/tag/Accessibility" title="/en-US/docs/tag/Accessibility">View all articles about Accessibility...</a></span></p>
+</div>
+
+
+</div>
+
+<p><a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - Accessibility</a></p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://lists.mozilla.org/listinfo/accessibility">Mozilla mailing list about accessibility</a></li>
+ <li><a href="http://www.w3.org/WAI/IG/">WAI Interest Group</a></li>
+ <li><a href="https://mozillians.org/en-US/group/1-accessibility">Mozillians group about accessibility</a></li>
+ <li><a href="/en-US/docs/Web/Guide" title="REDIRECT Web">Developer guides</a></li>
+ <li><a href="/en-US/docs/Mozilla/Accessibility" title="Accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities. Mozilla strives to make its software accessible; the documents below cover the ways in which we do so.">Accessibility and Mozilla</a></li>
+</ul>
+
+<section id="Quick_Links"></section>
diff --git a/files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html b/files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html
new file mode 100644
index 0000000000..2dedfc7aab
--- /dev/null
+++ b/files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html
@@ -0,0 +1,145 @@
+---
+title: Tastaturgesteuerte JavaScript-Komponenten
+slug: Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten
+translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets
+---
+<p>Tastaturgesteuerte JavaScript-Komponenten</p>
+<h3 id="Übersicht">Übersicht</h3>
+<p>Bei der Erstellung von Desktopkomponenten für Web-Applikationen, wie z.B. Menüs, Baumansichten, Richtext-Felder und Tab-Panels kommt in der Regel JavaScript zum Einsatz. Die Komponenten bestehen üblicherweise aus {{ HTMLElement("div") }}- und {{ HTMLElement("span") }}-Elementen, die von Haus aus nicht die gleiche Funktionalität wie echte Desktopkomponenten besitzen. Dieses Dokument beschreibt Techniken, die eingesetzt werden können, um JavaScript-Komponenten über die Tastatur zugänglich zu machen.</p>
+<h3 id="Benutzung_von_tabindex"><span style="color: rgb(0, 0, 0);"><span class="toctext">Benutzung von tabindex</span></span></h3>
+<p>Das tabindex-Attribut wurde zu Beginn als Teil von HTML 4 eingeführt, um Entwicklern zu ermöglichen, die Reihenfolge für die Fokussierung von Elementen festzulegen, die vom Benutzer mit der Tastatur angesteuert werden. Das genaue Verhalten von tabindex wurde später etwas abgeändert. Diese Änderungen sind in der HTML 5-Spezifikation beschrieben. Alle bekannten Browser implementieren fortan das neue Design.</p>
+<p>Die folgende Tabelle beschreibt das Verhalten von <code>tabindex</code> in modernen Browsern:</p>
+<table class="fullwidth-table" style="width: 75% !important;">
+ <tbody>
+  <tr>
+   <th><code>tabindex</code>-Attribut</th>
+   <th>Fokussierbar mit der Maus oder JavaScript über <code>element.focus()</code></th>
+   <th>Tab-navigierbar</th>
+  </tr>
+  <tr>
+   <td>Nicht vorhanden</td>
+   <td>Folgt der Festlegung für das Element für die Plattform ("Ja" bei Formularsteuerungen, Links, etc.).</td>
+   <td>Folgt der Festlegung für das Element für die Plattform.</td>
+  </tr>
+  <tr>
+   <td>Negativ (z.B. <code>tabindex="-1"</code>)</td>
+   <td>Ja</td>
+   <td>Nein; Entwickler muss auf Tasteneingaben reagieren und das Element über <code><a class="external text" href="../../../../En/DOM/Element.focus" rel="nofollow" title="https://developer.mozilla.org/En/DOM/Element.focus">focus()</a></code> fokussieren.</td>
+  </tr>
+  <tr>
+   <td>Null (z.B. <code>tabindex="0"</code>)</td>
+   <td>Ja</td>
+   <td>In der Tab-Ordnung relativ zur Position des Elements im Dokument.</td>
+  </tr>
+  <tr>
+   <td>Positiv (z.B. <code>tabindex="33"</code>)</td>
+   <td>Ja</td>
+   <td>Wert von <code>tabindex</code> bestimmt die Position des Elements in der Tab-Ordnung: Im Allgemeinen werden Elemente vor solchen positioniert, bei denen <code>tabindex="0"</code> gesetzt ist oder die von Natur aus per Tab steuerbar sind; Elemente mit kleinere Werten werden vor solchen mit größeren Werten positioniert (ein Element mit <code>tabindex="7"</code> wird z.B. vor <code>tabindex="11" </code>positioniert)</td>
+  </tr>
+ </tbody>
+</table>
+<h4 id="Einfache_Steuerungen"><span style="color: rgb(0, 0, 0);"><span class="toctext">Einfache Steuerungen</span></span></h4>
+<p>Damit z.B. eine einfache Tab-Komponente über die Tastatur bedient werden kann, wird dem entsprechenden {{ HTMLElement("div") }}- oder {{ HTMLElement("span") }}-Element das tabindex-Attribut hinzugefügt. Beim folgenden Beispiel wird diese Technik für eine Checkbox angewendet, die auf einem span-Element basiert.</p>
+<p><em>Beispiel 1: Eine einfache Checkbox-Komponente mit einem Bild, welche um das tabindex="0" erweitert wurde und so auch über die Tastatur gesteuert werden kann.</em></p>
+<pre class="brush: html"><code>&lt;!-- Ohne die tabindex-Attribute könnten die &lt;span&gt;-Elemente nicht mit der Tastatur fokussiert werden --&gt;
+&lt;div&gt;
+    &lt;span role="checkbox" aria-checked="true" tabindex="0"&gt;
+        &lt;img src="checked.gif" role="presentation" alt="" /&gt;
+        Include decorative fruit basket
+    &lt;/span&gt;
+&lt;/div&gt;
+&lt;div&gt;
+    &lt;span role="checkbox" aria-checked="true" tabindex="0"&gt;
+        &lt;img src="checked.gif" role="presentation" alt="" /&gt;
+        Include singing telegram
+    &lt;/span&gt;
+&lt;/div&gt;
+&lt;div&gt;
+    &lt;span role="checkbox" aria-checked="false" tabindex="0"&gt;
+        &lt;img src="unchecked.gif" role="presentation" alt="" /&gt;
+        Require payment before delivery
+    &lt;/span&gt;
+&lt;/div&gt;</code>
+</pre>
+<h4 id="Gruppieren_von_Steuerungselementen"><span style="color: rgb(0, 0, 0);"><span class="toctext">Gruppieren von Steuerungselementen</span></span></h4>
+<p>Für die Gruppierung von Komponenten, wie z.B. Menüs, Tableisten, Grids oder Baumansichten, sollte das Elternelement in die Tab-Ordnung aufgenommen werden (<code>tabindex="0"</code>). Außerdem sollte jede(s) untergeordnete Auswahl/Tab/Zelle/Reihe aus der Tabordnung entfernt werden (<code>tabindex="-1"</code>). Die untergeordneten Elemente sollten vom Benutzer über die Pfeiltasten angesteuert werden können (Eine ausführliche Beschreibung der Tastaturunterstützung, die im Allgemeinen für bestimmte Komponenten erwartet wird, finden Sie im <a class="external text" href="http://access.aol.com/dhtml-style-guide-working-group/" rel="nofollow" title="http://access.aol.com/dhtml-style-guide-working-group/">DHTML Style Guide</a>).</p>
+<p>Beim nächsten Beispiel wird diese Technik bei einer Menüsteuerung eingesetzt. Sobald der Fokus der Tastatur das &lt;ul&gt;-Element erreicht, muss der JavaScript-Entwickler den Fokus programmatisch steuern und auf das Drücken der Pfeiltasten reagieren. Techniken für die Steuerung des Fokus innerhalb von Komponenten, sind im Abschnitt "Steuerung des Fokus innerhalb von Gruppen" weiter unten beschrieben.</p>
+<p><em>Beispiel 2: Eine Menüsteuerung bei der mit tabindex die Tastaturnavigation gesteuert wird</em>.</p>
+<pre class="brush: html"><code>&lt;ul id="mb1" tabindex="0"&gt;
+  &lt;li id="mb1_menu1" tabindex="-1"&gt; Font
+    &lt;ul id="fontMenu" title="Font" tabindex="-1"&gt;
+      &lt;li id="sans-serif" tabindex="-1"&gt;Sans-serif&lt;/li&gt;
+      &lt;li id="serif" tabindex="-1"&gt;Serif&lt;/li&gt;
+      &lt;li id="monospace" tabindex="-1"&gt;Monospace&lt;/li&gt;
+      &lt;li id="fantasy" tabindex="-1"&gt;Fantasy&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li id="mb1_menu2" tabindex="-1"&gt; Style
+    &lt;ul id="styleMenu" title="Style" tabindex="-1"&gt;
+      &lt;li id="italic" tabindex="-1"&gt;Italics&lt;/li&gt;
+      &lt;li id="bold" tabindex="-1"&gt;Bold&lt;/li&gt;
+      &lt;li id="underline" tabindex="-1"&gt;Underlined&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+  &lt;li id="mb1_menu3" tabindex="-1"&gt; Justification
+    &lt;ul id="justificationMenu" title="Justication" tabindex="-1"&gt;
+      &lt;li id="left" tabindex="-1"&gt;Left&lt;/li&gt;
+      &lt;li id="center" tabindex="-1"&gt;Centered&lt;/li&gt;
+      &lt;li id="right" tabindex="-1"&gt;Right&lt;/li&gt;
+      &lt;li id="justify" tabindex="-1"&gt;Justify&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;</code></pre>
+<h4 id="Deaktivierte_Steuerungen"><span class="toctext">Deaktivierte Steuerungen</span></h4>
+<p>Wenn Sie ein Steuerelement deaktivieren, sollte dieses aus der Tab-Ordnung entfernt werden, indem <code>tabindex="-1"</code> gesetzt wird. Elemente, die Teil einer Komponentengruppe (wie z.B. Menüpunkte in einem Menü) sind, sollten über die Tastatur ansprechbar bleiben.</p>
+<h3 id="Steuerung_des_Fokus_innerhalb_von_Gruppen"><span style="color: rgb(0, 0, 0);"><span class="toctext">Steuerung des Fokus innerhalb von Gruppen</span></span></h3>
+<p>Wenn ein Benutzer den Fokus per Tab von einem Element wegbewegt, sollte der Fokus zu dem Element, das zuvor fokussiert war - z.B. einer Baumkomponente oder Gridzelle - zurückkehren. Es existieren zwei verschiedene Techniken, um dies zu bewirken:</p>
+<ol>
+ <li>Verschiebung von <code>tabindex</code>: Programmatische Bewegung des Fokus</li>
+ <li><code>aria-activedescendent</code>: Verwaltung eines "virtuellen" Fokus</li>
+</ol>
+<h4 id="Technik_1_Verschiebung_von_tabindex">Technik 1: Verschiebung von tabindex</h4>
+<p>Setzt man tabindex für das fokussierte Element auf "0", wird das ausgewählte Element innerhalb der Gruppe erneut fokussiert, wenn der Benutzer den Fokus per Tab fortbewegt und dann zu diesem Element zurückkehrt. Beachten Sie, dass bei der Aktualisierung von tabindex auf 0 für des zuvor selektierte Element <code>tabindex="-1"</code> gesetzt werden muss. Diese Technik wird auch verwendet, wenn auf Tastendrücke reagiert und der Fokus programmatisch weiterbewegt wird. Der tabindex wird dann entspechend aktualisiert, um das aktuell fokussierte Element anzuzeigen. Dies lässt sich wie folgt umsetzen:</p>
+<p>Jeweils ein keydown-Hander wird mit einem Element der Gruppe verknüpft. Wenn der Benutzer eine Pfeiltaste drückt, um ein anderes Element anzusteuern, passiert Folgendes:</p>
+<ol>
+ <li>Das neue Element wird codegesteuert fokussiert.</li>
+ <li>Der <code>tabindex</code> des fokussierten Elements wird auf "0" gesetzt.</li>
+ <li>Der <code>tabindex</code> des zuvor fokussierte Elements wird auf "-1" gesetzt.</li>
+</ol>
+<p>Hier finden Sie ein Beispiel für eine <a class="external text external-icon" href="http://www.oaa-accessibility.org/example/40/" rel="nofollow" title="http://www.oaa-accessibility.org/example/40/">WAI-ARIA Baumansicht</a> bei der diese Technik eingesetzt wird.</p>
+<h5 id="Tipps">Tipps</h5>
+<h6 id="Mit_element.focus()_den_Fokus_setzen">Mit element.focus() den Fokus setzen</h6>
+<p>Benutzen Sie nicht die Funktionen <code>createEvent()</code>, <code>initEvent()</code> und <code>dispatchEvent()</code> um ein Element zu fokussieren. DOM-Focus-Events arbeiten nur informell: Sie werden vom System erzeugt, wenn ein Element fokussiert wird, aber nicht verwendet, um den Fokus zu setzen. Greifen Sie stattdessen auf <code>element.focus()</code> zurück.</p>
+<h6 id="Mit_onfocus_den_Fokus_überprüfen">Mit onfocus den Fokus überprüfen</h6>
+<p>Gehen Sie nicht davon aus, dass Fokusänderungen allein über die Tastatur oder Maus initiiert werden: Assistierende Technologien, wie z.B. Screenreader, sind in der Lage den Fokus für jedes fokussierbare Element zu setzen. Benutzen Sie daher <code>onfocus</code> und <code>onblur</code> um Fokusänderungen zu verfolgen.</p>
+<p><code>onfocus</code> und <code>onblur</code> können nun mit jedem beliebigen Element verwendet werden. Es existiert jedoch kein Standard-DOM-Interface, um den aktuellen Fokus im Dokument abzufragen. Wenn man den Fokus verfolgen möchte, muss der aktuelle Zustand in einer JavaScript-Variablen hinterlegt werden.</p>
+<h4 id="Technik_2_aria-activedescendant">Technik 2: aria-activedescendant</h4>
+<p>Bei dieser Technik wird ein einzelner Event-Handler mit der Container-Komponente verknüpft und <code>aria-activedescendant</code> dazu benutzt, um einen "virtuellen" Fokus zu verwalten. (<a class="external text" href="../../../../An_Overview_of_Accessible_Web_Applications_and_Widgets" rel="nofollow" title="https://developer.mozilla.org/An_Overview_of_Accessible_Web_Applications_and_Widgets">Mehr Informationen über ARIA finden Sie indieser Übersicht</a>).</p>
+<p>The <code>aria-activedescendant</code> property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of <code>aria-activedescendant</code> and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this <a class="external text" href="http://www.oaa-accessibility.org/example/28/" rel="nofollow" title="http://www.oaa-accessibility.org/example/28/">ARIA radiogroup example</a> for a direct illustration of how this works.</p>
+<p>Die Eigenschaft <code>aria-activedescendent</code> enthält die ID des untergeordneten Elements, das aktuell fokussiert ist. Der Event-Handler des Containers muss auf Tastatur- und Mauseingaben reagieren, den Wert von <code>aria-activedescendent</code> aktualisieren und sicherstellen, dass die Darstellung des Elements entsprechend angepasst wird (z.B. Rahmen oder Hintergrundfarbe). Ein konkretes Beispiel für diese Technik liefert der Quellcode des <a class="external text" href="http://www.oaa-accessibility.org/example/28/" rel="nofollow" title="http://www.oaa-accessibility.org/example/28/">ARIA-Radiogruppen-Beispiels</a>.</p>
+<h5 id="Tipps_2">Tipps</h5>
+<h6 id="scrollIntoView">scrollIntoView</h6>
+<p>Note that the use of this pattern requires the author to ensure that the current <em>focused</em> widget is scrolled into view. You should be able to use the {{ domxref("element.scrollIntoView()") }} function, but we recommend confirming this works for you in your target browsers using the <a class="external text" href="http://www.quirksmode.org/dom/tests/scrollintoview.html" rel="nofollow" title="http://www.quirksmode.org/dom/tests/scrollintoview.html">quirksmode test</a>.Bei der Benutzung dieses Musters muss der Entwickler sicherstellen, dass das aktuell <em>fokussierte</em> Element in Sichtweite gescrollt wird. Für diesen Zweck kann die Funktion <code>element.scrollIntoView()</code> eingesetzt werden. Überprüfen Sie jedoch unbedingt mit dem <a class="external text external-icon" href="http://www.quirksmode.org/dom/tests/scrollintoview.html" rel="nofollow" title="http://www.quirksmode.org/dom/tests/scrollintoview.html">Quirksmode-Test</a>, ob dies für ihre Browser, die unterstützt werden sollen, fehlerfrei funktioniert.</p>
+<h6 id="Probleme">Probleme</h6>
+<ul>
+ <li><a class="external text" href="http://www.quirksmode.org/dom/w3c_cssom.html" rel="nofollow" title="http://www.quirksmode.org/dom/w3c_cssom.html">quirksmode meldet Pobleme bei Opera und Konqueror</a></li>
+ <li><a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=450405" rel="nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=450405">Bug ab Firefox 3.0.1</a></li>
+</ul>
+<h3 id="Allgemeine_Richtlinien">Allgemeine Richtlinien</h3>
+<h4 id="Benutzung_von_onkeydown_um_auf_Tastendrücke_zu_reagieren_(nicht_onkeypress)">Benutzung von onkeydown, um auf Tastendrücke zu reagieren (nicht onkeypress)</h4>
+<p>Der Internet Explorer führt <code>keypress</code>-Events für nicht-alpahnumerische Zeichen nicht aus. Benutzen Sie stattdessen das <code>onkeydown</code>-Event.</p>
+<h4 id="Tastatur-_und_Mausbedienung_sollte_konsistent_sein">Tastatur- und Mausbedienung sollte konsistent sein</h4>
+<p>Um sicherzustellen, dass Benutzereingaben unabhängig vom Eingabegerät konstistent sind, sollten Tastatur- und Maus-Eventhandler denselben Code verwenden. Zum Beispiel sollte der Code, womit der <code>tabindex</code> oder das Aussehen festgelegt wird, wenn die Pfeiltasten benutzt werden, auch für die Mausklick-Handler verwendet werden, damit dieselben Änderungen stattfinden.</p>
+<h4 id="Aktivierung_von_Elementen_per_Tastatur">Aktivierung von Elementen per Tastatur</h4>
+<p>Damit die Tastatur für die Aktivierung von Elementen benutzt werden kann, sollte alle Handler, die mit der Mausevents verknüpft sind, auch mit Tastaturevents verknüpft werden. Soll z.B. mit der Enter-Taste ein Element aktiviert werden können, welches über einen Maushandler <code>onclick="doSomething()"</code> mit der Maus verknüpft ist, dann sollte die Funktion <code>doSomething()</code> auch über ein <code>keydown</code>-Event mit der Tastatur verknüpft werden: <code>onkeydown="return event.keyCode != 13 || doSomething();"</code>.</p>
+<h4 id="Verwenden_Sie_nicht_focus_für_das_Styling_(falls_Kompatibilität_mit_IE_7_und_ältereren_Browsern_notwendig)">Verwenden Sie nicht :focus für das Styling (falls Kompatibilität mit IE 7 und ältereren Browsern notwendig)</h4>
+<p>Der Internet Explorer 7 und ältere Versionen unterstützen den Pseudoselektor <code>:focus</code> nicht. Aus diesem Grund sollte er für die Gestaltung von fokussierten Elementen nicht verwendet werden. Stattdessen kann die Darstellung über einen <code>onfucus</code>-Eventhander verändert werden, z.B. indem ein CSS-Style Name dem <code>class</code>-Attribut hinzugefügt wird.</p>
+<h4 id="Kontinuierliches_Anzeigen_des_Fokus_für_Elemente_mit_tabindex-1_die_programmatisch_fokussiert_werden"><span style="color: rgb(0, 0, 0);"><span class="toctext">Kontinuierliches Anzeigen des Fokus für Elemente mit tabindex="-1", die programmatisch fokussiert werden</span></span></h4>
+<p>Der Internet Explorer zeigt die Fokusumrandung für Elemente nicht automatisch an. Die Hervorhebung des fokussierten Elementes muss daher per JavaScript, entweder durch die Änderung der Hintergrundfarbe (z.B. <code>this.style.backgroundColor = "gray"</code>) oder Anzeige eines gepunkteten Rahmen (z.B. <code>this.style.border = "1px dotted invert"</code>) erfolgen. Entscheiden Sie sich für die zweite Vorgehensweise, sollten die Elementen von Anfang an einen unsichtbaren 1px-Rahmen besitzen, damit sie nicht größer werden, wenn der Rahmen angezeigt wird (Rahmen nehmen Platz in Anspruch und beim IE sind CSS-Outlines nicht implementiert).</p>
+<h4 id="Verwendete_Tastendrücke_sollten_keine_Browserfunktionen_auslösen">Verwendete Tastendrücke sollten keine Browserfunktionen auslösen</h4>
+<p>Wenn eine Komponente auf Tastendrücke reagiert, sollte verhindert werden, dass der Browser diese Tastendrücke verarbeitet (z.B. Scrollen mit den Pfeiltasten), indem bei Event-Handlern ein Return-Code angegeben wird. Der Rückgabewert <code>false</code> verhindert, dass das Event an den Browser weitergereicht wird.</p>
+<p>Hierzu ein Beispiel:</p>
+<pre><code>&lt;span tabindex="-1" onkeydown="return handleKeyDown();"&gt;</code></pre>
+<p>Gibt die Funktion <code>handleKeyDown()</code> den Wert <code>false</code> zurück, wird das Event übernommen und der Browser so davon abgehalten auf den Tastendruck zu reagieren.</p>
+<h4 id="Abweichendes_Verhalten_bei_wiederholten_Tastendrücken">Abweichendes Verhalten bei wiederholten Tastendrücken</h4>
+<p>Je nach Betriebssystem kann es leider vorkommen, dass bei wiederholten Tastendrücken <code>onkeydown</code>-Events wiederholt ausgeführt werden oder auch nicht.</p>
diff --git a/files/de/web/barrierefreiheit/webentwicklung/index.html b/files/de/web/barrierefreiheit/webentwicklung/index.html
new file mode 100644
index 0000000000..7c0f69c735
--- /dev/null
+++ b/files/de/web/barrierefreiheit/webentwicklung/index.html
@@ -0,0 +1,58 @@
+---
+title: Webentwicklung
+slug: Web/Barrierefreiheit/Webentwicklung
+translation_of: Web/Accessibility
+---
+<p> </p>
+
+<table class="mainpage-table">
+ <tbody>
+  <tr>
+   <td>
+    <h2 id="Barrierefreiheit_im_Web">Barrierefreiheit im Web</h2>
+
+    <dl>
+     <dt><a href="/de/docs/Barrierefreiheit/ARIA">ARIA für Entwickler</a></dt>
+    </dl>
+
+    <dl>
+     <dd style="">ARIA ermöglicht Barrierefreiheit für dynamischen HTML-Content, wie z.B. Live-Content und JavaScript-Widgets.</dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Tastaturgesteuerte JavaScript-Widgets</a></dt>
+     <dd>Viele Webentwickler, die ihre &lt;div&gt;- und &lt;span&gt;-basierten Widgets über die Tastatur zugänglich machen wollen,  suchen dafür die passende Technik. Tastaturgesteuerte Zugänglichkeit gehört zu den Techniken, mit denen jeder Webentwickler vertraut sein sollte.</dd>
+    </dl>
+
+    <h2 id="XUL-Barrierefreiheit">XUL-Barrierefreiheit</h2>
+
+    <dl>
+     <dt> </dt>
+     <dt><a href="/en/Building_accessible_custom_components_in_XUL" title="en/Building_accessible_custom_components_in_XUL">Erstellung von benutzerdefinierten Komponenten mit XUL</a></dt>
+     <dd>Wie man DHTML-Techniken für Barrierefreiheit einsetzt, um XUL-Komponenten barrierefrei zu machen.</dd>
+    </dl>
+
+    <dl>
+     <dt><a href="/en/XUL_accessibility_guidelines" title="en/XUL_accessibility_guidelines">Richtlinien für die Erstellung von barrierefreiem XUL</a></dt>
+     <dd>Wenn diese Richtlinen bei der Erstellung von XUL-Komponenten befolgt werden, sind die mit XUL erstellten Benutzeroberflächen barrierefrei. Programmierer, Reviewer, Designer und QS-Tester sollten mit diesen Richtlinien vertraut sein.</dd>
+    </dl>
+
+    <dl>
+    </dl>
+
+    <dl>
+    </dl>
+   </td>
+   <td>
+    <h2 id="Externe_Informationen">Externe Informationen</h2>
+
+    <dl>
+     <dt><a class="external" href="http://www-306.ibm.com/able/guidelines/web/accessweb.html">Accessible Web Page Authoring</a></dt>
+     <dd>Eine übersichtliche Checkliste für barrierefreie Webentwicklung von IBM.</dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>