diff options
Diffstat (limited to 'files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html')
| -rw-r--r-- | files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html | 14 |
1 files changed, 7 insertions, 7 deletions
diff --git a/files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html index 59cb293155..3ebb479e97 100644 --- a/files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html +++ b/files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html @@ -63,7 +63,7 @@ original_slug: Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten </div></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>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">DHTML Style Guide</a>).</p> <p>Beim nächsten Beispiel wird diese Technik bei einer Menüsteuerung eingesetzt. Sobald der Fokus der Tastatur das <ul>-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><ul id="mb1" tabindex="0"> @@ -107,7 +107,7 @@ original_slug: Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten <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> +<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">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> @@ -116,15 +116,15 @@ original_slug: Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten <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> +<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">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">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> +<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">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">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> + <li><a class="external text" href="http://www.quirksmode.org/dom/w3c_cssom.html" rel="nofollow">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">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> |