From 9771f94a8fc0fc08436b90f139113af82123606c Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 17 Sep 2021 07:42:23 +0200 Subject: 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 --- .../index.html | 17 ++--------------- .../keyboard-navigable_javascript_widgets/index.html | 6 +++--- 2 files changed, 5 insertions(+), 18 deletions(-) (limited to 'files/de') 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

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).

-

Die Website der Open Ajax Alliance stellt Beispiel zu CSS-Attributseletoren in Verbindung mit ARIA 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.

+

Die Website der Open Ajax Alliance stellt Beispiel zu CSS-Attributseletoren in Verbindung mit ARIA 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.

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.

-

Beispiel 1a. HTML für ein selektierbares Menü (übernommen von http://www.oaa-accessibility.org/example/25/).

- 
<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
 
 
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.

 
-
Beispiel 1b. Attribute-basierte Selektoren zum Anzeigen des Zustands (übernommen von http://www.oaa-accessibility.org/example/25/).

-
 
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
 
 
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.

 
-
Beispiel 1c. JavaScript zur Aktualisierung des Attributs aria-checked (übernommen von http://www.oaa-accessibility.org/example/25/).

-
 
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
 
 
Bei Änderungen der Sichtbarkeit von Elementen (verstecken oder sichtbar machen von Elementen) sollten Entwickler nur den Wert der Eigenschaft aria-hidden verändern. Dabei sollte die oben beschreibene Technik angewendet und CSS (display:none) eingesetzt werden, um das Element zu verstecken.

 
-
Auf der Website der Open Ajax Alliance findet man hierzu ein Beispiel mit einem Tooltip bei dem das Attribut aria-hidden 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.

+
Auf der Website der Open Ajax Alliance findet man hierzu ein Beispiel mit einem Tooltip bei dem das Attribut aria-hidden 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.

 
 
Beispiel 2a zeigt den HTML-Code für einen Tooltip. In Zeile 9 wird der Zustand von aria-hidden auf true gesetzt.

 
-
Beispiel 2a. HTML für ein Tooltip (übernommen von http://www.oaa-accessibility.org/example/39/).

-
 
<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
 
 
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 aria-hidden geändert.

 
-
Beispiel 2b. Attributbasierte Selektoren zur Anzeige des Zustands (übernommen von

- http://www.oaa-accessibility.org/example/39/).

-
 
div.tooltip[aria-hidden="true"] {
   display: none;
 }
@@ -178,8 +167,6 @@ original_slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_a
 
 
Beispiel 2c zeigt den JavaScript-Code zur Aktulisierung der Eigenschaft aria-hidden. Wieder wird per Skript nur die Attribute aria-hidden in Zeile 2 verändert und kein Klassenname hinzugefügt oder entfernt.

 
-
Beispiel 2c. JavaScript zur Aktualisierung des Attributs aria-checked (übernommen von http://www.oaa-accessibility.org/example/39/).

-
 
var showTip = function(el) {
   el.setAttribute('aria-hidden', 'false');
 }

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
  
  • Der tabindex des fokussierten Elements wird auf "0" gesetzt.
    • 
  
  • Der tabindex des zuvor fokussierte Elements wird auf "-1" gesetzt.
    • 
 
-
    Hier finden Sie ein Beispiel für eine WAI-ARIA Baumansicht bei der diese Technik eingesetzt wird.
    
+
 
    Tipps
    
 
    Mit element.focus() den Fokus setzen
    
 
    Benutzen Sie nicht die Funktionen createEvent(), initEvent() und dispatchEvent() 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 element.focus() zurück.
    
@@ -116,8 +116,8 @@ original_slug: Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten
 
    onfocus und onblur 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.
    
 
    Technik 2: aria-activedescendant
    
 
    Bei dieser Technik wird ein einzelner Event-Handler mit der Container-Komponente verknüpft und aria-activedescendant dazu benutzt, um einen "virtuellen" Fokus zu verwalten. (Mehr Informationen über ARIA finden Sie indieser Übersicht).
    
-
    The aria-activedescendant 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 aria-activedescendant and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this ARIA radiogroup example for a direct illustration of how this works.
    
-
    Die Eigenschaft aria-activedescendent 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 aria-activedescendent 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 ARIA-Radiogruppen-Beispiels.
    
+
    The aria-activedescendant 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 aria-activedescendant and ensuring that the current item is styled appropriately (for example, with a border or background color).
    
+
    Die Eigenschaft aria-activedescendent 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 aria-activedescendent aktualisieren und sicherstellen, dass die Darstellung des Elements entsprechend angepasst wird (z.B. Rahmen oder Hintergrundfarbe).
    
 
    Tipps
    
 
    scrollIntoView
    
 
    Note that the use of this pattern requires the author to ensure that the current focused 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 quirksmode test.Bei der Benutzung dieses Musters muss der Entwickler sicherstellen, dass das aktuell fokussierte Element in Sichtweite gescrollt wird. Für diesen Zweck kann die Funktion element.scrollIntoView() eingesetzt werden. Überprüfen Sie jedoch unbedingt mit dem Quirksmode-Test, ob dies für ihre Browser, die unterstützt werden sollen, fehlerfrei funktioniert.
    
-- 
cgit v1.2.3-54-g00ecf