diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-17 07:42:23 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-09-17 07:42:23 +0200 |
commit | 9771f94a8fc0fc08436b90f139113af82123606c (patch) | |
tree | 86d907322d0ef644c1c8200eba53036f863f688c /files/de | |
parent | 3d02f83efb6574860cee47577447b0b32f8d675d (diff) | |
download | translated-content-9771f94a8fc0fc08436b90f139113af82123606c.tar.gz translated-content-9771f94a8fc0fc08436b90f139113af82123606c.tar.bz2 translated-content-9771f94a8fc0fc08436b90f139113af82123606c.zip |
Remove occurrences of oaa-accessibility.org which has now nothing to do with Accessibility (#2379)
* Remove occurrences of oaa-accessibility.org which is now squatted
* Remove parts related to this PR
Additional removing is necessary to keep the articles natural. This commit removes parts that correspond to the parts in Japanese version already removed in the English version.
Co-authored-by: Masahiro FUJIMOTO <mfujimot@gmail.com>
Diffstat (limited to 'files/de')
-rw-r--r-- | files/de/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html | 17 | ||||
-rw-r--r-- | files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html | 6 |
2 files changed, 5 insertions, 18 deletions
diff --git a/files/de/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/de/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html index 30072b924d..682c287965 100644 --- a/files/de/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html +++ b/files/de/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -93,12 +93,10 @@ original_slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_a <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/"> 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>Die Website der Open Ajax Alliance stellt 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"><ul id="fontMenu" class="menu" role="menu" aria-hidden="true"> <li id="sans-serif" class="menu-item" @@ -117,8 +115,6 @@ original_slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_a <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'); @@ -129,8 +125,6 @@ original_slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_a <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'); @@ -148,12 +142,10 @@ original_slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_a <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/">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>Auf der Website der Open Ajax Alliance findet man hierzu 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"><div class="text"> <label id="tp1-label" for="first">First Name:</label> <input type="text" id="first" name="first" size="20" @@ -168,9 +160,6 @@ original_slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_a <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; } @@ -178,8 +167,6 @@ original_slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_a <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> 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 3ebb479e97..ee5a97756c 100644 --- a/files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html +++ b/files/de/web/accessibility/keyboard-navigable_javascript_widgets/index.html @@ -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">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,8 +116,8 @@ 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">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> +<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).</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).</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">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> |