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 +++--- .../aria_techniques/using_the_alert_role/index.html | 7 ------- .../using_the_aria-required_attribute/index.html | 4 ---- .../index.html | 8 ++------ .../aria_techniques/using_the_alert_role/index.html | 7 ------- .../using_the_aria-invalid_attribute/index.html | 4 ---- .../using_the_aria-labelledby_attribute/index.html | 7 ------- .../using_the_aria-orientation_attribute/index.html | 6 ------ .../using_the_aria-required_attribute/index.html | 4 ---- .../using_the_aria-valuemax_attribute/index.html | 8 -------- .../using_the_aria-valuemin_attribute/index.html | 8 -------- .../aria_techniques/using_the_slider_role/index.html | 6 ------ .../aria/forms/basic_form_hints/index.html | 2 +- .../index.html | 16 ++++------------ .../aria_techniques/using_the_alert_role/index.html | 7 ------- .../using_the_aria-orientation_attribute/index.html | 6 ------ .../using_the_aria-required_attribute/index.html | 4 ---- .../using_the_aria-valuemax_attribute/index.html | 8 -------- .../using_the_aria-valuemin_attribute/index.html | 8 -------- .../using_the_aria-valuenow_attribute/index.html | 8 -------- .../aria_techniques/using_the_slider_role/index.html | 6 ------ .../aria/forms/basic_form_hints/index.html | 2 -- .../keyboard-navigable_javascript_widgets/index.html | 2 +- .../index.html | 16 ++++++++-------- .../index.html | 16 ++++++++-------- .../aria_techniques/using_the_alert_role/index.html | 7 ------- .../using_the_aria-describedby_attribute/index.html | 7 ------- .../using_the_aria-labelledby_attribute/index.html | 7 ------- .../using_the_aria-required_attribute/index.html | 4 ---- .../aria_techniques/using_the_slider_role/index.html | 6 ------ .../web/accessibility/aria/aria_test_cases/index.html | 2 +- .../aria/forms/basic_form_hints/index.html | 2 +- .../using_the_aria-describedby_attribute/index.html | 7 ------- .../keyboard-navigable_javascript_widgets/index.html | 2 +- .../index.html | 16 ++++++++-------- .../using_the_aria-labelledby_attribute/index.html | 7 ------- .../keyboard-navigable_javascript_widgets/index.html | 4 ++-- .../aria/forms/basic_form_hints/index.html | 2 +- 39 files changed, 43 insertions(+), 223 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

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.
    
diff --git a/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
index e8bd99f940..77f3aa804a 100644
--- a/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
+++ b/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
@@ -97,13 +97,6 @@ document.getElementById("formInstruction").setAttribute("role", "alert");
    
 
    // removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:
 document.getElementById("expirationWarning").className = ""; 
    
 
-
    Ejemplos funcionales:
    
-
-
-
 
    Notas 
    
 
 
      
diff --git a/files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
index b6b45a05bc..e32e9663fd 100644
--- a/files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
+++ b/files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
@@ -40,10 +40,6 @@ original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_atributo_aria-re
  </form>
 
    
 
-
    Ejemplos en acción:
    
-
-
    Ejemplo de un Tooltip (incluye el uso del atributo aria-required)
    
-
 
    Notas 
    
 
 
    Usan ARIA roles
    
diff --git a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
index f833504f91..6e0e55a51d 100644
--- a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
+++ b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
@@ -100,12 +100,8 @@ original_slug: >-
 
 
    Lorsque la visibilité du contenu est modifiée (c'est-à-dire qu'un élément est masqué ou affiché), les développeurs doivent modifier la valeur de la propriété aria-hidden. Les techniques décrites ci-dessus doivent être utilisées pour déclarer du CSS permettant de cacher visuellement un élément en utilisant display:none.
    
 
-
    Le site Web Open Ajax Alliance fournit un exemple de tooltip qui utilise aria-hidden pour controler la visibilité du tooltip. L'exemple montre un formulaire Web simple avec des info-bulles contenant des instructions associées aux champs d’entrée.
    
-
 
    Les parties pertinentes de l'exemple sont expliquées ci-dessous.Dans cet exemple, le code HTML de l’info-bulle a le format indiqué dans l'exemple 2a. La ligne 9 définit l’état aria-hidden à true.
    
 
-
    Exemple 2a. HTML pour un tooltip (adapté de 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"
@@ -119,7 +115,7 @@ original_slug: >-
 
    
 
 
    Le CSS pour ce balisage est montré dans l'exemple 2b. Notez qu’il n’y a pas de nom de classe personnalisé utilisé, seul le statut de l'attribut aria-hidden à la ligne 1.
    
- Exemple 2b. Un attribut basé sur le sélecteur indiquant l'état (tiré de http://www.oaa-accessibility.org/example/39/).
    
+ Exemple 2b. Un attribut basé sur le sélecteur indiquant l'état.
    
 
 
    div.tooltip[aria-hidden="true"] {
   display: none;
@@ -128,7 +124,7 @@ original_slug: >-
 
 
    Le JavaScript à mettre à jour est la propriété aria-hidden du formulaire montré dans l'exemple 2c. Notez que le script met à jour seulement l'attribut aria-hidden à la (ligne 2) ; il n'y a pas besoin d'ajouter ou de supprimer un nom de classe personnalisé.
    
 
-
    Exemple 2c. JavaScript pour mettre à jour l'attribut aria-checked (basé sur http://www.oaa-accessibility.org/example/39/).
    
+
    Exemple 2c. JavaScript pour mettre à jour l'attribut aria-checked.
    
 
 
    var showTip = function(el) {
   el.setAttribute('aria-hidden', 'false');
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
index cd2d7f18e1..54ee617393 100644
--- a/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
@@ -96,13 +96,6 @@ document.getElementById("formInstruction").setAttribute("role", "alert");
    
 
    // suppression de la classe 'hidden' rend l’élément visible, ce qui entraînera l’annonce de l’alerte par le lecteur d’écran :
 document.getElementById("expirationWarning").className = ""; 
    
 
-
    Exemples concrets :
    
-
-
-
 
    Notes 
    
 
 
      
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html
index 8ac82788d0..66429091ce 100644
--- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html
@@ -92,10 +92,6 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-inva
 
 
      Remarquez que le rôle ARIA de l’alerte est définit comme étant "alert".
      
 
-
      Exemples concrets :
      
-
-
      Exemple de role d’alerte (utilisant l’attribut aria-invalid).
      
-
 
      Notes
      
 
 
        
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html
index c2549b91b5..8138705e0a 100644
--- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html
@@ -128,13 +128,6 @@ une préparation inerte prescrite plus pour le soulagement mental du patient que
 </div>
 
    
 
-
    Exemples concrets :
    
-
-
-
 
    Notes
    
 
 
    L’affectation d’API accessibilité la plus courante pour un label est la propriété de nom accessible.
    
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html
index 90e6c148a3..994ea05cd5 100644
--- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html
@@ -47,12 +47,6 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orie
 </a>
 
    
 
-
    Exemples concrets :
    
-
-
-
 
    Notes
    
 
 
    Utilisé avec les rôles ARIA
    
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
index 08c666f665..a86e8db23f 100644
--- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
@@ -46,10 +46,6 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-requ
 </form>
 
    
 
-
    Exemples concrets :
    
-
-
    Exemple d’infobulle (comprenant l’utilisation de l’attribut aria-required).
    
-
 
    Notes
    
 
 
    Utilisé dans les rôles ARIA
    
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html
index 029aa028be..df425ca798 100644
--- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html
@@ -37,14 +37,6 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu
 
    <div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
 
    
 
-
    Exemples concrets :
    
-
-
-
 
    Notes
    
 
 
    Utilisés avec les rôles ARIA
    
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html
index 5fc255f447..19249b6361 100644
--- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html
@@ -33,14 +33,6 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu
 
    <div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
 
    
 
-
    Exemples concrets :
    
-
-
-
 
    Notes
    
 
 
    Utilisé avec les rôles ARIA
    
diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html
index a8d90ca014..114e5e4a31 100644
--- a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html
+++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html
@@ -90,12 +90,6 @@ var updateSlider = function (newValue) {
 };
    -

    Exemples concrets :

    - - -

    Notes

    Attributs ARIA utilisés

    diff --git a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html index 04e086c5d0..89eb5e579b 100644 --- a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html +++ b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html @@ -44,7 +44,7 @@ original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les

    L’exemple ci-dessous montre un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée. Remarquez, à la ligne 3, que l’attribut aria-labelledby de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’id de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio.

    -

    Exemple 2. Un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée (d'après http://www.oaa-accessibility.org/examplep/radio1/)

    +

    Exemple 2. Un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée 

    <h3 id="rg1_label">Options du déjeuner</h3>
 
diff --git a/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
index 8e3ab5e104..b9a5e54406 100644
--- a/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
+++ b/files/ja/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
@@ -91,23 +91,15 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and
 
 
    開発者は UI ウィジェット要素の状態を示すために ARIA のステートを使用して、ステートの変化に基づく視覚的外見の変更に (スクリプトを使用して要素のクラス名を変更するのではなく) CSS の属性セレクタを使用しましょう。
    
 
-
    注意: この例(http://www.oaa-accessibility.org/example/25/) はもう利用できません。状況が変わったので、W3C ARIA オーサリングプラクティスガイドの例 (www.w3.org/TR/wai-aria-practices-1.1/examples/checkbox/checkbox-1/checkbox-1.html) を見てください。
    
-
-
    Open Ajax Alliance の Web サイトに、ARIA のステートに基づく CSS 属性セレクタの例があります。この例では、動的なメニューシステムによる WYSIWYG エディタのインターフェイスを示しています。フォントフェイススなどのメニューで現在選択されている項目は、他のアイテムと視覚的に区別されます。例の中で関係する部分を、以下で説明します。
    
-
-
    この例でメニュー用の HTML は、例 1a で示す形式になっています。7 行目と 13　行目で、メニュー項目の選択状態を表すために aria-checked プロパティを使用していることに注意してください。
    
-
-
    例 1a: 選択可能なメニュー用の HTML (http://www.oaa-accessibility.org/example/25/ をもとに改作)。
    
-
 
    可視性の変化
    
 
 
    コンテンツの可視性を変えるとき (例えば要素を隠したり表示したりする)、開発者は aria-hidden プロパティの値を変更するとよいでしょう。先に説明した手法を、display:none を使用して要素を視覚的に隠すという CSS を示すために使用しましょう。
    
 
-
    Open Ajax Alliance の Web サイトに、可視性の制御に aria-hidden を使用するツールチップの例があります。この例では、入力フィールドに関する指示を収めたツールチップを持つシンプルな Web フォームの例を示しています。例の中で関係する部分を、以下で説明します。
    
+
    これは、可視性の制御に aria-hidden を使用するツールチップの例です。この例では、入力フィールドに関する指示を収めたツールチップを持つシンプルな Web フォームの例を示しています。例の中で関係する部分を、以下で説明します。
    
 
 
    この例でツールチップ用の HTML は、例 2a で示す形式になっています。9 行目で aria-hidden を true に設定しています。
    
 
-
    例 2a: ツールチップ用の HTML (http://www.oaa-accessibility.org/example/39/ をもとに改作)。
    
+
    例 2a: ツールチップ用の HTML
    
 
 
    <div class="text">
     <label id="tp1-label" for="first">First Name:</label>
@@ -123,7 +115,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and
 
 
    このマークアップ用の CSS を例 2b で示します。ここでは独自のクラス名を使用せず、1 行目で aria-hidden 属性の状態のみを使用していることに注意してください。
    
 
-
    例 2b: 状態を示すための、属性セレクタ (http://www.oaa-accessibility.org/example/39/ より)。
    
+
    例 2b: 状態を示すための、属性セレクタ
    
 
 
    div.tooltip[aria-hidden="true"] {
   display: none;
@@ -132,7 +124,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and
 
 
    >aria-hidden プロパティを更新するための JavaScript は、例 2c で示す形式になっています。このスクリプトは >aria-hidden 属性しか更新しないことに注意してください (2 行目)。独自のクラス名の追加や削除は不要です。
    
 
-
    例 2c: aria-hidden 属性を更新する JavaScript (http://www.oaa-accessibility.org/example/39/ に基づく)。
    
+
    例 2c: aria-hidden 属性を更新する JavaScript
    
 
 
    var showTip = function(el) {
   el.setAttribute('aria-hidden', 'false');
diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
index 82207358d0..192b9a498b 100644
--- a/files/ja/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
+++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
@@ -104,13 +104,6 @@ document.getElementById("formInstruction").setAttribute("role", "alert");
    
 
    // removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:
 document.getElementById("expirationWarning").className = ""; 
    
 
-
    実施例:
    
-
-
-
 
    注記 
    
 
 
      
diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html
index 03c6496c1f..3730efb1f7 100644
--- a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html
+++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html
@@ -52,12 +52,6 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientatio
 </a>
 
    
 
-
    動作する例
    
-
-
-
 
    注
    
 
 
    ARIA ロールで使用
    
diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
index 1f69f16e2f..55b961e20d 100644
--- a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
+++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
@@ -42,10 +42,6 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_a
  </form>
 
    
 
-
    動作する例
    
-
-
    ツールチップの例（aria-required 属性の使用を含む）
    
-
 
    注
    
 
 
    ARIA ロールで使用
    
diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html
index 131a8b50cd..18cff00666 100644
--- a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html
+++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html
@@ -33,14 +33,6 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_a
 
    <div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
 
    
 
-
    動作する例
    
-
-
-
 
    注 
    
 
 
    ARIA ロールで使用
    
diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html
index 96a4857b74..b73802eb9c 100644
--- a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html
+++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html
@@ -29,14 +29,6 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_a
 
    <div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
 
    
 
-
    動作する例
    
-
-
-
 
    注
    
 
 
    ARIA ロールで使用
    
diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html
index 94ec9f7f50..e53607131c 100644
--- a/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html
+++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html
@@ -33,14 +33,6 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_a
 
    <div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
 
    
 
-
    動作する例
    
-
-
-
 
    注 
    
 
 
    ARIA ロールで使用
    
diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html
index dbe13c701e..1ab569de6c 100644
--- a/files/ja/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html
+++ b/files/ja/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html
@@ -98,12 +98,6 @@ var updateSlider = function (newValue) {
 };
    -

    動作する例

    - - -

    注

     

    diff --git a/files/ja/web/accessibility/aria/forms/basic_form_hints/index.html b/files/ja/web/accessibility/aria/forms/basic_form_hints/index.html index f1a4dc9646..65ce604cd9 100644 --- a/files/ja/web/accessibility/aria/forms/basic_form_hints/index.html +++ b/files/ja/web/accessibility/aria/forms/basic_form_hints/index.html @@ -43,8 +43,6 @@ translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints

    以下の例では、順不同リストを使用して実装したラジオボタングループを示しています。3 行目で {{HTMLElement("li")}} 要素の aria-labelledby 属性に、1 行目の {{HTMLElement("h3")}} 要素の id である "rg1_label" を設定しており、h3 要素がラジオボタングループのラベルです。

    -

    例 2. 順不同リストを使用して実装したラジオボタングループ (http://www.oaa-accessibility.org/examplep/radio1/ をもとに改作)

    - 
    <h3 id="rg1_label">Lunch Options</h3>
 
 <ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label">
diff --git a/files/ja/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/ja/web/accessibility/keyboard-navigable_javascript_widgets/index.html
index 72a23044f3..d6c3556643 100644
--- a/files/ja/web/accessibility/keyboard-navigable_javascript_widgets/index.html
+++ b/files/ja/web/accessibility/keyboard-navigable_javascript_widgets/index.html
@@ -136,7 +136,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets
 
 
    このテクニックでは、単一のイベントハンドラをコンテナウィジェットにバインドし、aria-activedescendant を使用して「仮想」フォーカスを追跡します。 （ARIA に関する詳細は、アクセス可能なウェブアプリケーションとウィジェットの概要を参照してください。）
    
 
-
    aria-activedescendant プロパティは、現在仮想フォーカスを持っている子孫要素の ID を識別します。 コンテナのイベントハンドラーは、aria-activedescendant の値を更新し、（例えば、境界線や背景色で）現在の項目が適切にスタイル設定されていることを確実にすることで、キーイベントおよびマウスイベントに応答する必要があります。 これがどのように機能するかの直接的な説明については、この ARIA ラジオグループの例のソースコードを参照してください。
    
+
    aria-activedescendant プロパティは、現在仮想フォーカスを持っている子孫要素の ID を識別します。 コンテナのイベントハンドラーは、aria-activedescendant の値を更新し、（例えば、境界線や背景色で）現在の項目が適切にスタイル設定されていることを確実にすることで、キーイベントおよびマウスイベントに応答する必要があります。
    
 
 
    一般的なガイドライン
    
 
diff --git a/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
index f4992c339f..bd3724cb47 100644
--- a/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
+++ b/files/ko/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
@@ -85,11 +85,11 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and
 
 
    Developers should use ARIA states to indicate the state of UI widget elements and use CSS attribute selectors to alter the visual appearance based on the state changes (rather than using script to change a class name on the element).
    
 
-
    The Open Ajax Alliance website provides an example of CSS attribute selectors based on ARIA states. The example shows a WYSIWYG editor interface with a dynamic menu system. Items currently selected in a menu, such as the font face, are visually distinguished from other items. The relevant parts of the example are explained below.
    
+
    The Open Ajax Alliance website provides an example of CSS attribute selectors based on ARIA states. The example shows a WYSIWYG editor interface with a dynamic menu system. Items currently selected in a menu, such as the font face, are visually distinguished from other items. The relevant parts of the example are explained below.
    
 
 
    In this example, the HTML for a menu has the form shown in Example 1a. Note how, on lines 7 and 13, the aria-checked property is used to declare the selection state of the menu items.
    
 
-
    Example 1a. HTML for a selectable menu (adapted from http://www.oaa-accessibility.org/example/25/).
    
+
    Example 1a. HTML for a selectable menu.
    
 
 
    <ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
   <li id="sans-serif"
@@ -109,7 +109,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and
 
 
    The CSS that is used to alter the visual appearance of the selected item is shown in Example 1b. Note that there is no custom classname used, only the status of the aria-checked attribute on line 1.
    
 
-
    Example 1b. Attribute-based selector for indicating state (from http://www.oaa-accessibility.org/example/25/).
    
+
    Example 1b. Attribute-based selector for indicating state.
    
 
 
    li[aria-checked="true"] {
   font-weight: bold;
@@ -121,7 +121,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and
 
 
    The JavaScript to update the aria-checked property has the form shown in Example 1c. Note that the script only updates the aria-checked attribute (lines 3 and 8); it does not need to also add or remove a custom classname.
    
 
-
    Example 1c. JavaScript to update the aria-checked attribute  (based on http://www.oaa-accessibility.org/example/25/).
    
+
    Example 1c. JavaScript to update the aria-checked attribute
    
 
 
    var processMenuChoice = function(item) {
   // 'check' the selected item
@@ -140,11 +140,11 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and
 
 
    When content visibility is changed (i.e. an element is hidden or shown), developers should change the aria-hidden property value. The techniques described above should be used to declare CSS to visually hide an element using display:none.
    
 
-
    The Open Ajax Alliance website provides an example of a tooltip that uses aria-hidden to control the visibility of the tooltip. The example shows a simple web form with tooltips containing instructions associated with the entry fields. The relevant parts of the example are explained below.
    
+
    The Open Ajax Alliance website provides an example of a tooltip that uses aria-hidden to control the visibility of the tooltip. The example shows a simple web form with tooltips containing instructions associated with the entry fields. The relevant parts of the example are explained below.
    
 
 
    In this example, the HTML for the tooltip has the form shown in Example 2a. Line 9 sets the aria-hidden state to true.
    
 
-
    Example 2a. HTML for a tooltip (adapted from http://www.oaa-accessibility.org/example/39/).
    
+
    Example 2a. HTML for a tooltip.
    
 
 
    <div class="text">
     <label id="tp1-label" for="first">First Name:</label>
@@ -160,7 +160,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and
 
 
    The CSS for this markup is shown in Example 2b. Note that there is no custom classname used, only the status of the aria-hidden attribute on line 1.
    
 
-
    Example 2b. Attribute-based selector for indicating state (from http://www.oaa-accessibility.org/example/39/).
    
+
    Example 2b. Attribute-based selector for indicating state.
    
 
 
    div.tooltip[aria-hidden="true"] {
   display: none;
@@ -169,7 +169,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and
 
 
    The JavaScript to update the aria-hidden property has the form shown in Example 2c. Note that the script only updates the aria-hidden attribute (line 2); it does not need to also add or remove a custom classname.
    
 
-
    Example 2c. JavaScript to update the aria-checked attribute  (based on http://www.oaa-accessibility.org/example/39/).
    
+
    Example 2c. JavaScript to update the aria-checked attribute 
    
 
 
    var showTip = function(el) {
   el.setAttribute('aria-hidden', 'false');
diff --git a/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
index 1bd9eb9d44..c532e8f7f1 100644
--- a/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
+++ b/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
@@ -98,11 +98,11 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and
 
 
    Os desenvolvedores devem dar preferência ao uso dos estados ARIA para indicar a situação atual dos elementos widgets na interface de utilização (UI) e os seletores de atributos CSS para alterar a sua aparência, com base nas mudanças desses estados (em vez de usar um roteiro (script) para mudar um nome de classe de um elemento).
    
 
-
    A Open Ajax Alliance (OAA - Aliança OpenAJAX ) disponibiliza um exemplo de um seletor de atributos CSS baseado nos estados ARIA (em inglês) - an example of CSS attribute selectors based on ARIA states. O exemplo mostra a interface de um editor WYS/WYG com um sistema de menu dinâmico. Os itens selecionados no menu, como o tipo de fonte estão, visualmente, distintos dos outros. As partes importantes do exemplo são explicadas a seguir.
    
+
    A Open Ajax Alliance (OAA - Aliança OpenAJAX ) disponibiliza um exemplo de um seletor de atributos CSS baseado nos estados ARIA (em inglês) - an example of CSS attribute selectors based on ARIA states. O exemplo mostra a interface de um editor WYS/WYG com um sistema de menu dinâmico. Os itens selecionados no menu, como o tipo de fonte estão, visualmente, distintos dos outros. As partes importantes do exemplo são explicadas a seguir.
    
 
 
    Neste exemplo, a HTML para um menu tem a forma exibida abaixo. Note como, nas linhas 7 e 13, a propriedade (property) aria-checked é usada para declarar o estado da seleção dos itens do menu.
    
 
-
    Exemplo 1a: HTML para um menu selecionável (adaptado da  http://www.oaa-accessibility.org/example/25/).
    
+
    Exemplo 1a: HTML para um menu selecionável.
    
 
 
    <ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
   <li id="sans-serif"
@@ -122,7 +122,7 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and
 
 
    A CSS usada para alterar a aparência do item selecionado é mostrada no Exemplo 1b. Perceba que não existe um nome de classe (classname) de personalização, apenas o estado do atributo aria-checked, na linha 1.
    
 
-
    Exemplo 1b: Seletor baseado em atributo para indicar um estado (da  http://www.oaa-accessibility.org/example/25/).
    
+
    Exemplo 1b: Seletor baseado em atributo para indicar um estado.
    
 
 
    li[aria-checked="true"] {
   font-weight: bold;
@@ -134,7 +134,7 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and
 
 
    O  JavaScript para atualizar a propriedade aria-checked tem a forma exibida no Exemplo 1c. Repare que o roteiro (script) apenas atualiza o atributo aria-checked (linhas 3 e 8); também não é necessário adicionar, ou remover, um nome de classe personalizada.
    
 
-
    Exemplo 1c: A  JavaScript atualiza o atributo aria-checked  (baseado em  http://www.oaa-accessibility.org/example/25/).
    
+
    Exemplo 1c: A  JavaScript atualiza o atributo aria-checked.
    
 
 
    var processMenuChoice = function(item) {
   // 'check' the selected item
@@ -153,11 +153,11 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and
 
 
    Quando o conteúdo visual é alterado (isto é, um elemento é escondido, ou mostrado), os desenvolvedores devem mudar o valor da propriedade aria-hidden. As técnicas descritas acima devem ser usadas, a fim de declarar a CSS para ocultar um elemento utilizando display:none (exibir:nenhum).
    
 
-
    O sítio da Open Ajax Alliance fornece um exemplo de uma dica de tela (tooltip) que utiliza o estado aria-hidden para controlar a sua visibilidade (em inglês) an example of a tooltip that uses aria-hidden to control the visibility of the tooltip. O exemplo mostra um formulário web simples, com caixas de dicas de tela contendo instruções associadas aos campos de entrada. As partes relevantes deste exemplo estão explicadas abaixo.
    
+
    O sítio da Open Ajax Alliance fornece um exemplo de uma dica de tela (tooltip) que utiliza o estado aria-hidden para controlar a sua visibilidade (em inglês) an example of a tooltip that uses aria-hidden to control the visibility of the tooltip. O exemplo mostra um formulário web simples, com caixas de dicas de tela contendo instruções associadas aos campos de entrada. As partes relevantes deste exemplo estão explicadas abaixo.
    
 
 
    Aqui, a HTML para a dica de tela tem a forma exibida no Exemplo 2a. A linha 9 configura o estado da aria-hidden para true.
    
 
-
    Exemplo 2a: HTML para dicas de tela (adaptado de  http://www.oaa-accessibility.org/example/39/).
    
+
    Exemplo 2a: HTML para dicas de tela.
    
 
 
    <div class="text">
     <label id="tp1-label" for="first">First Name:</label>
@@ -173,7 +173,7 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and
 
 
    A CSS para esta marcação está explicada no Exemplo 2b. Veja que não há uso de classname personalizada, apenas o estado do atributo aria-hidden, na linha 1.
    
 
-
    Exemplo 2b:  Seletor basedo em atributo para indicar um estado  (de http://www.oaa-accessibility.org/example/39/).
    
+
    Exemplo 2b:  Seletor basedo em atributo para indicar um estado.
    
 
 
    div.tooltip[aria-hidden="true"] {
   display: none;
@@ -182,7 +182,7 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and
 
 
    O JavaScript que atualiza a propriedade aria-hidden tem a forma exposta no Exemplo 2c. Observe que o roteiro apenas atualiza o atributo aria-hidden (linha 2); não é necessário adicionar, nem remover, uma classname customizada.
    
 
-
    Exemplo 2c: JavaScript para atualização do atributo aria-checked (com base em http://www.oaa-accessibility.org/example/39/).
    
+
    Exemplo 2c: JavaScript para atualização do atributo aria-checked.
    
 
 
    var showTip = function(el) {
   el.setAttribute('aria-hidden', 'false');
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
index 1530013453..8a8d8398a8 100644
--- a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
+++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html
@@ -105,13 +105,6 @@ document.getElementById("formInstruction").setAttribute("role", "alert");
    
 
    // removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:(Remover a classe "hidden" faz o leitor de tela anunciar o alerta)
 document.getElementById("expirationWarning").className = ""; 
    
 
-
    Exemplos de Trabalhos:
    
-
-
-
 
    Notas:
    
 
 
      
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html
index b97f335b27..1fdbd2300b 100644
--- a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html
+++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html
@@ -53,13 +53,6 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedb
 retornará você para a página principal</div>
 
    
 
-
    Exemplos funcionando:
    
-
-
-
 
    Notas
    
 
 
      
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html
index 83c43f6522..eed5ab0d20 100644
--- a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html
+++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html
@@ -124,13 +124,6 @@ ou a uma preparação mais inerte prescrito para o alívio mental do paciente do
 </div>
 
    
 
-
    Exemplos Funcionais:
    
-
-
-
 
    Notas 
    
 
 
    O mapeamento mais comum de uma
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
index 1d7eb8df91..85f4ba1e11 100644
--- a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
+++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html
@@ -45,10 +45,6 @@ original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-req
  </form>
 
    
 
-
    Exemplos de trabalho:
    
-
-
    Exemplo de Tooltip  (inclui o uso do atributo aria-required)
    
-
 
    Notas 
    
 
 
    Usado em ARIA roles
    
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html
index 7ed48ef085..de0b43d68f 100644
--- a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html
+++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html
@@ -95,12 +95,6 @@ var updateSlider = function (newValue) {
 };
 
    
 
-
    Working Examples:
    
-
-
-
 
    Notas 
    
 
 
    Atributos ARIA usados
    
diff --git a/files/pt-br/web/accessibility/aria/aria_test_cases/index.html b/files/pt-br/web/accessibility/aria/aria_test_cases/index.html
index 22940acf65..dfad97191f 100644
--- a/files/pt-br/web/accessibility/aria/aria_test_cases/index.html
+++ b/files/pt-br/web/accessibility/aria/aria_test_cases/index.html
@@ -7,7 +7,7 @@ translation_of: Web/Accessibility/ARIA/ARIA_Test_Cases
 
 
    A informação dessa página encontra-se desatualizada: sua última atualização foi em Novmebro de 2010. No entanto, as informações ainad podem ser úteis para alguns leitores.
    
 
    
-Para ver exemplos atualizados, entre em OpenAjaxAlliance ARIA examples page.
    
+Para ver exemplos atualizados, entre em OpenAjaxAlliance ARIA examples page.
 
 
    For each example we test the "Expected" results with assistive technologies, for each browser that AT supports WAI-ARIA in. Where a failure occurs we will test the browser for API incorrectness, using tools such as MSAA Inspect. This must be done in order to determine where to file a bug (browser or AT).
    
 
diff --git a/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html b/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html
index 534443ab1b..46045112fb 100644
--- a/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html
+++ b/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html
@@ -42,7 +42,7 @@ original_slug: Web/Accessibility/ARIA/forms/Dicas_básicas_de_form
 
 
    O exemplo abaixo mostra um grupo de botões rádio usando um lista não ordenada. Note que na linha 3, o elemento {{HTMLElement("li")}} seta o atributo aria-labelledby para "rg1_label," o id do elemento {{HTMLElement("h3")}} na linha 1, que é o label para o grupo rádio.
    
 
-
    Exemplo 2. Um grupo rádio implementado usando uma lista não ordenada (adaptado de http://www.oaa-accessibility.org/examplep/radio1/)
    
+
    Exemplo 2. Um grupo rádio implementado usando uma lista não ordenada
    
 
 
    <h3 id="rg1_label">Lunch Options</h3>
 
diff --git a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html
index 6bb6b393cb..f749a4646d 100644
--- a/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html
+++ b/files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html
@@ -53,13 +53,6 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedb
 return you back to the main page</div>
 
    
 
-
    Рабочие примеры:
    
-
-
-
 
    Примечания
    
 
 
      
diff --git a/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html
index 19b3c7c1f8..b8c7001239 100644
--- a/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html
+++ b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html
@@ -154,7 +154,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets
 
 
      Эта техника позволяет объединить  каждый отдельно взятый обработчик  событий в контейнер графического элемента и использовать  aria-activedescendent для слежения за "виртуальным" фокусом . (Для получения более подробной информации относительно ARIA обратите внимание на  обзор доступных веб-приложений и виджетов .)
      
 
-
      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.
      
+
      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).
      
 
 
      Tips
      
 
diff --git a/files/zh-cn/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/zh-cn/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
index ac91393cc0..6a901933a9 100644
--- a/files/zh-cn/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
+++ b/files/zh-cn/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html
@@ -85,11 +85,11 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and
 
 
      Developers should use ARIA states to indicate the state of UI widget elements and use CSS attribute selectors to alter the visual appearance based on the state changes (rather than using script to change a class name on the element).
      
 
-
      The Open Ajax Alliance website provides an example of CSS attribute selectors based on ARIA states. The example shows a WYSIWYG editor interface with a dynamic menu system. Items currently selected in a menu, such as the font face, are visually distinguished from other items. The relevant parts of the example are explained below.
      
+
      The Open Ajax Alliance website provides an example of CSS attribute selectors based on ARIA states. The example shows a WYSIWYG editor interface with a dynamic menu system. Items currently selected in a menu, such as the font face, are visually distinguished from other items. The relevant parts of the example are explained below.
      
 
 
      In this example, the HTML for a menu has the form shown in Example 1a. Note how, on lines 7 and 13, the aria-checked property is used to declare the selection state of the menu items.
      
 
-
      Example 1a. HTML for a selectable menu (adapted from http://www.oaa-accessibility.org/example/25/).
      
+
      Example 1a. HTML for a selectable menu.
      
 
 
      <ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
   <li id="sans-serif"
@@ -109,7 +109,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and
 
 
      The CSS that is used to alter the visual appearance of the selected item is shown in Example 1b. Note that there is no custom classname used, only the status of the aria-checked attribute on line 1.
      
 
-
      Example 1b. Attribute-based selector for indicating state (from http://www.oaa-accessibility.org/example/25/).
      
+
      Example 1b. Attribute-based selector for indicating state.
      
 
 
      li[aria-checked="true"] {
   font-weight: bold;
@@ -121,7 +121,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and
 
 
      The JavaScript to update the aria-checked property has the form shown in Example 1c. Note that the script only updates the aria-checked attribute (lines 3 and 8); it does not need to also add or remove a custom classname.
      
 
-
      Example 1c. JavaScript to update the aria-checked attribute (based on http://www.oaa-accessibility.org/example/25/).
      
+
      Example 1c. JavaScript to update the aria-checked attribute.
      
 
 
      var processMenuChoice = function(item) {
   // 'check' the selected item
@@ -140,11 +140,11 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and
 
 
      When content visibility is changed (i.e., an element is hidden or shown), developers should change the aria-hidden property value. The techniques described above should be used to declare CSS to visually hide an element using display:none.
      
 
-
      The Open Ajax Alliance website provides an example of a tooltip that uses aria-hidden to control the visibility of the tooltip. The example shows a simple web form with tooltips containing instructions associated with the entry fields. The relevant parts of the example are explained below.
      
+
      The Open Ajax Alliance website provides an example of a tooltip that uses aria-hidden to control the visibility of the tooltip. The example shows a simple web form with tooltips containing instructions associated with the entry fields. The relevant parts of the example are explained below.
      
 
 
      In this example, the HTML for the tooltip has the form shown in Example 2a. Line 9 sets the aria-hidden state to true.
      
 
-
      Example 2a. HTML for a tooltip (adapted from http://www.oaa-accessibility.org/example/39/).
      
+
      Example 2a. HTML for a tooltip.
      
 
 
      <div class="text">
     <label id="tp1-label" for="first">First Name:</label>
@@ -160,7 +160,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and
 
 
      The CSS for this markup is shown in Example 2b. Note that there is no custom classname used, only the status of the aria-hidden attribute on line 1.
      
 
-
      Example 2b. Attribute-based selector for indicating state (from http://www.oaa-accessibility.org/example/39/).
      
+
      Example 2b. Attribute-based selector for indicating state.
      
 
 
      div.tooltip[aria-hidden="true"] {
   display: none;
@@ -169,7 +169,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and
 
 
      The JavaScript to update the aria-hidden property has the form shown in Example 2c. Note that the script only updates the aria-hidden attribute (line 2); it does not need to also add or remove a custom classname.
      
 
-
      Example 2c. JavaScript to update the aria-checked attribute (based on http://www.oaa-accessibility.org/example/39/).
      
+
      Example 2c. JavaScript to update the aria-checked attribute.
      
 
 
      var showTip = function(el) {
   el.setAttribute('aria-hidden', 'false');
diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html
index 80be18aa54..dde89b01be 100644
--- a/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html
+++ b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html
@@ -117,13 +117,6 @@ an inert preparation prescribed more for the mental relief of the patient than f
 </div>
 
      
 
-
      操作实例:
      
-
-
-
 
      注意 
      
 
 
      The most common accessibility API mapping for a label is the accessible name property
      
diff --git a/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.html
index 178539ea3a..303570acbe 100644
--- a/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.html
+++ b/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.html
@@ -135,7 +135,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets
  
    • 更改之前被 focus 中元素的 tabindex 为“-1”.
      • 
 
 
-
      这里有个 WAI-ARIA tree view 的例子是使用这种方案的。
      
+
      这里有个 WAI-ARIA tree view 的例子是使用这种方案的。
      
 
 
      提示
      
 
@@ -153,7 +153,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets
 
 
      这个办法包含绑定一个单独的事件句柄到容器窗口组件上，运用 aria-activedescendent属性来追踪一个 "虚拟" 焦点。（关于ARIA更多的信息, 查看 overview of accessible web applications and widgets.）
      
 
-
      aria-activedescendant 属性用来标识拥有虚拟焦点的后代元素的 ID。在窗口容器的事件句柄里面在键盘和鼠标事件响应更新 aria-activedescendant 值并且确保当前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.
      
+
      aria-activedescendant 属性用来标识拥有虚拟焦点的后代元素的 ID。在窗口容器的事件句柄里面在键盘和鼠标事件响应更新 aria-activedescendant 值并且确保当前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). 
      
 
 
      Tips
      
 
diff --git a/files/zh-tw/web/accessibility/aria/forms/basic_form_hints/index.html b/files/zh-tw/web/accessibility/aria/forms/basic_form_hints/index.html
index 532911294d..007ce8bbe3 100644
--- a/files/zh-tw/web/accessibility/aria/forms/basic_form_hints/index.html
+++ b/files/zh-tw/web/accessibility/aria/forms/basic_form_hints/index.html
@@ -41,7 +41,7 @@ translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints
 
 
      下面的範例顯示使用無序列表 ( unordered list ) 實現的單選按鈕組 ( radio button group )。注意程式碼第三行 , {{ HTMLElement("li") }} 元素將 aria-labelledby 屬性設置為 "rg1_label" , 在第一行中元素 {{ HTMLElement("h3") }} 的 id , 即單選按鈕組的標籤。
      
 
-
      範例 2. 使用無序列表實現的單選按鈕組 ( 改編自 http://www.oaa-accessibility.org/examplep/radio1/)
      
+
      範例 2. 使用無序列表實現的單選按鈕組
      
 
 
      <h3 id="rg1_label">Lunch Options</h3>
 
-- 
cgit v1.2.3-54-g00ecf