diff options
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 <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> 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");</pre> <pre class="brush: js">// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert: document.getElementById("expirationWarning").className = ""; </pre> -<h4 id="Ejemplos_funcionales">Ejemplos funcionales:</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/example/1/">Rol de alerta utilizando una caja de alerta ARIA</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/alertdialog1/">Alerta utilizando una caja de dialogo modal ARIA</a></li> -</ul> - <h3 id="Notas">Notas </h3> <ul> 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> </pre> -<h4 id="Ejemplos_en_acción">Ejemplos en acción:</h4> - -<p><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/">Ejemplo de un Tooltip</a> (incluye el uso del atributo <code>aria-required</code>)</p> - <h3 id="Notas">Notas </h3> <h3 id="Usan_ARIA_roles">Usan ARIA roles</h3> 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: >- <p>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é <strong><code>aria-hidden</code></strong>. Les techniques décrites ci-dessus doivent être utilisées pour déclarer du CSS permettant de cacher visuellement un élément en utilisant <code>display:none</code>.</p> -<p>Le site Web Open Ajax Alliance fournit<a class="external" href="http://www.oaa-accessibility.org/example/39/" title="http://www.oaa-accessibility.org/example/39/"> un exemple de tooltip qui utilise <strong><code>aria-hidden</code></strong> pour controler la visibilité du tooltip.</a> L'exemple montre un formulaire Web simple avec des info-bulles contenant des instructions associées aux champs d’entrée.</p> - <p>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 <strong><code>aria-hidden</code></strong> à <code>true</code>.</p> -<p><em>Exemple 2a. HTML pour un tooltip (adapté de <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="brush: html"><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: >- </pre> <p>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 <strong><code>aria-hidden</code></strong> à la ligne 1<em>.<br> - Exemple 2b. Un attribut basé sur le sélecteur indiquant l'état (tiré de <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> + Exemple 2b. Un attribut basé sur le sélecteur indiquant l'état.</em></p> <pre class="brush: css">div.tooltip[aria-hidden="true"] { display: none; @@ -128,7 +124,7 @@ original_slug: >- <p>Le JavaScript à mettre à jour est la propriété <strong><code>aria-hidden</code></strong> du formulaire montré dans l'exemple 2c. Notez que le script met à jour seulement l'attribut <strong><code>aria-hidden</code></strong> à la (ligne 2) ; il n'y a pas besoin d'ajouter ou de supprimer un nom de classe personnalisé.</p> -<p><em>Exemple 2c. JavaScript pour mettre à jour l'attribut aria-checked (basé sur <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Exemple 2c. JavaScript pour mettre à jour l'attribut aria-checked.</em></p> <pre class="brush: javascript">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");</pre> <pre class="brush: js">// 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 = ""; </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/example/1/" hreflang="en">Exemple de rôle d’alerte utilisant une boîte d’alerte ARIA (en)</a> ;</li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/alertdialog1/" hreflang="en" title="http://www.oaa-accessibility.org/examplep/alertdialog1/">Exemple d’alerte utilisant une boîte de dialogue d’alerte ARIA modal (en)</a>.</li> -</ul> - <h3 id="Notes">Notes </h3> <ul> 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 <p>Remarquez que le <code>rôle</code> ARIA de l’alerte est définit comme étant <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert" title="Using the alert role"><code>"alert"</code></a>.</p> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<p><a class="external" href="http://www.oaa-accessibility.org/examplep/alert1/" title="http://www.oaa-accessibility.org/examplep/alert1/">Exemple de <code>role</code> d’alerte</a> (utilisant l’attribut <code>aria-invalid</code>).</p> - <h3 id="Notes">Notes</h3> <ul> 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> </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/button2/" title="http://www.oaa-accessibility.org/examplep/button2/">Exemple de bouton</a> utilisant <code>aria-labelledby</code> ;</li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/combobox1/" title="http://www.oaa-accessibility.org/examplep/combobox1/">Exemple de boite combinée</a> utilisant <code>aria-labelledby</code>.</li> -</ul> - <h3 id="Notes">Notes</h3> <p>L’affectation d’<em>API accessibilité</em> la plus courante pour un label est la propriété de <em>nom accessible</em>.</p> 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> </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a>.</li> -</ul> - <h3 id="Notes">Notes</h3> <h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3> 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> </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<p><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/" title="http://www.oaa-accessibility.org/examplep/tooltip1/">Exemple d’infobulle</a> (comprenant l’utilisation de l’attribut <code>aria-required</code>).</p> - <h3 id="Notes">Notes</h3> <h3 id="Utilisé_dans_les_rôles_ARIA">Utilisé dans les rôles ARIA</h3> 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 <pre class="brush: html"><div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/" title="http://www.oaa-accessibility.org/examplep/progressbar1/">Exemple de barre de progression</a> ;</li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a> ;</li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/" title="http://www.oaa-accessibility.org/examplep/spinbutton1/">Exemple de bouton rotatif</a>.</li> -</ul> - <h3 id="Notes">Notes</h3> <h3 id="Utilisés_avec_les_rôles_ARIA">Utilisés avec les rôles ARIA</h3> 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 <pre class="brush: html"><div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/" title="http://www.oaa-accessibility.org/examplep/progressbar1/">Exemple de barre de progression</a> ;</li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a> ;</li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/" title="http://www.oaa-accessibility.org/examplep/spinbutton1/">Exemple de bouton rotatif</a>.</li> -</ul> - <h3 id="Notes">Notes</h3> <h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3> 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) { }; </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Exemple de curseur</a></li> -</ul> - <h3 id="Notes">Notes</h3> <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> 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 <p>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 <code>aria-labelledby</code> de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’<code>id</code> de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio.</p> -<p><em>Exemple 2. Un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée (d'après <a href="http://www.oaa-accessibility.org/examplep/radio1/">http://www.oaa-accessibility.org/examplep/radio1/</a>)</em></p> +<p><em>Exemple 2. Un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée </em></p> <pre class="brush: html"><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 <p>開発者は UI ウィジェット要素の状態を示すために ARIA のステートを使用して、ステートの変化に基づく視覚的外見の変更に (スクリプトを使用して要素のクラス名を変更するのではなく) CSS の属性セレクタを使用しましょう。</p> -<p><em>注意: この例(</em><s><em><a class="external external-icon" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a></em></s><em>) はもう利用できません。状況が変わったので、W3C ARIA オーサリングプラクティスガイドの例</em> <em>(<a class="external external-icon" href="http://www.w3.org/TR/wai-aria-practices-1.1/examples/checkbox/checkbox-1/checkbox-1.html">www.w3.org/TR/wai-aria-practices-1.1/examples/checkbox/checkbox-1/checkbox-1.html</a>) を見てください。</em></p> - -<p><s>Open Ajax Alliance の Web サイトに、<a href="http://www.oaa-accessibility.org/example/25/">ARIA のステートに基づく CSS 属性セレクタの例</a>があります。この例では、動的なメニューシステムによる WYSIWYG エディタのインターフェイスを示しています。フォントフェイススなどのメニューで現在選択されている項目は、他のアイテムと視覚的に区別されます。例の中で関係する部分を、以下で説明します。</s></p> - -<p><s>この例でメニュー用の HTML は、例 1a で示す形式になっています。7 行目と 13 行目で、メニュー項目の選択状態を表すために <strong><code>aria-checked</code></strong> プロパティを使用していることに注意してください。</s></p> - -<p><s><em>例 1a: 選択可能なメニュー用の HTML (<a href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a> をもとに改作)。</em></s></p> - <h4 id="Visibility_changes" name="Visibility_changes">可視性の変化</h4> <p>コンテンツの可視性を変えるとき (例えば要素を隠したり表示したりする)、開発者は <strong><code>aria-hidden</code></strong> プロパティの値を変更するとよいでしょう。先に説明した手法を、<code>display:none</code> を使用して要素を視覚的に隠すという CSS を示すために使用しましょう。</p> -<p>Open Ajax Alliance の Web サイトに、<a href="http://www.oaa-accessibility.org/example/39/">可視性の制御に <strong><code>aria-hidden</code></strong> を使用するツールチップの例</a>があります。この例では、入力フィールドに関する指示を収めたツールチップを持つシンプルな Web フォームの例を示しています。例の中で関係する部分を、以下で説明します。</p> +<p>これは、可視性の制御に <strong><code>aria-hidden</code></strong> を使用するツールチップの例です。この例では、入力フィールドに関する指示を収めたツールチップを持つシンプルな Web フォームの例を示しています。例の中で関係する部分を、以下で説明します。</p> <p>この例でツールチップ用の HTML は、例 2a で示す形式になっています。9 行目で <strong><code>aria-hidden</code></strong> を <code>true</code> に設定しています。</p> -<p><em>例 2a: ツールチップ用の HTML (<a href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a> をもとに改作)。</em></p> +<p><em>例 2a: ツールチップ用の HTML</em></p> <pre class="brush: 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 <p>このマークアップ用の CSS を例 2b で示します。ここでは独自のクラス名を使用せず、1 行目で <strong><code>aria-hidden</code></strong> 属性の状態のみを使用していることに注意してください。</p> -<p><em>例 2b: 状態を示すための、属性セレクタ (<a href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a> より)。</em></p> +<p><em>例 2b: 状態を示すための、属性セレクタ</em></p> <pre class="brush: css">div.tooltip[aria-hidden="true"] { display: none; @@ -132,7 +124,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p><strong>><code>aria-hidden</code></strong> プロパティを更新するための JavaScript は、例 2c で示す形式になっています。このスクリプトは <strong>><code>aria-hidden</code></strong> 属性しか更新しないことに注意してください (2 行目)。独自のクラス名の追加や削除は不要です。</p> -<p><em>例 2c: aria-hidden 属性を更新する JavaScript (<a href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a> に基づく)。</em></p> +<p><em>例 2c: aria-hidden 属性を更新する JavaScript</em></p> <pre class="brush: js">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");</pre> <pre class="brush: js">// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert: document.getElementById("expirationWarning").className = ""; </pre> -<h4 id="実施例">実施例:</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/example/1/">Alert role example using an ARIA alert box</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/alertdialog1/">Alert example using a modal ARIA dialog box</a></li> -</ul> - <h3 id="注記">注記 </h3> <ul> 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> </pre> -<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/">スライダーの例</a></li> -</ul> - <h3 id="Notes" name="Notes">注</h3> <h3 id="Used_With_ARIA_Roles" name="Used_With_ARIA_Roles">ARIA ロールで使用</h3> 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> </pre> -<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> - -<p><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/">ツールチップの例</a>（<code>aria-required</code> 属性の使用を含む）</p> - <h3 id="Notes" name="Notes">注</h3> <h3 id="Used_in_ARIA_roles" name="Used_in_ARIA_roles">ARIA ロールで使用</h3> 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 <pre class="deki-transform"><span class="tag"><div role=<span class="str">"slider"</span> aria-valuenow=<span class="str">"4"</span> aria-valuemin=<span class="str">"1"</span> aria-valuemax=<span class="str">"10"</span>></span> </pre> -<h4 id="Working_Examples" name="Working_Examples">動作する例</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/">プログレスバーの例</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/">スライダーの例</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/">スピンボタンの例</a></li> -</ul> - <h3 id="Notes" name="Notes">注 </h3> <h3 id="Used_With_ARIA_Roles" name="Used_With_ARIA_Roles">ARIA ロールで使用</h3> 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 <pre class="brush: html"><span class="tag"><div role=<span class="str">"slider"</span> aria-valuenow=<span class="str">"4"</span> aria-valuemin=<span class="str">"1"</span> aria-valuemax=<span class="str">"10"</span>></span> </pre> -<h4 id="Working_Examples.3A" name="Working_Examples.3A">動作する例</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/">プログレスバーの例</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/">スライダーの例</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/">スピンボタンの例</a></li> -</ul> - <h3 id="Notes" name="Notes">注</h3> <h3 id="Used_With_ARIA_Roles" name="Used_With_ARIA_Roles">ARIA ロールで使用</h3> 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 <pre class="brush: html"><span class="tag"><div role=<span class="str">"slider"</span> aria-valuenow=<span class="str">"4"</span> aria-valuemin=<span class="str">"1"</span> aria-valuemax=<span class="str">"10"</span>></span> </pre> -<h4 id="Working_Examples.3A" name="Working_Examples.3A">動作する例</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/progressbar1/">プログレスバーの例</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/">スライダーの例</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/spinbutton1/">スピンボタンの例</a></li> -</ul> - <h3 id="Notes" name="Notes">注 </h3> <h3 id="Used_With_ARIA_Roles" name="Used_With_ARIA_Roles">ARIA ロールで使用</h3> 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) { }; </pre> -<h3 id="Working_Examples" name="Working_Examples">動作する例</h3> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/">スライダーの例</a></li> -</ul> - <h2 id="Notes" name="Notes">注</h2> <p> </p> 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 <p>以下の例では、順不同リストを使用して実装したラジオボタングループを示しています。3 行目で {{HTMLElement("li")}} 要素の <strong>aria-labelledby</strong> 属性に、1 行目の {{HTMLElement("h3")}} 要素の <strong>id</strong> である "rg1_label" を設定しており、h3 要素がラジオボタングループのラベルです。</p> -<p><em>例 2. 順不同リストを使用して実装したラジオボタングループ (<a href="http://www.oaa-accessibility.org/examplep/radio1/">http://www.oaa-accessibility.org/examplep/radio1/</a> をもとに改作)</em></p> - <pre class="brush: html"><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 <p>このテクニックでは、単一のイベントハンドラをコンテナウィジェットにバインドし、<code>aria-activedescendant</code> を使用して「仮想」フォーカスを追跡します。 （ARIA に関する詳細は、<a href="/ja/docs/Web/Accessibility/An_Overview_of_Accessible_Web_Applications_and_Widgets">アクセス可能なウェブアプリケーションとウィジェットの概要</a>を参照してください。）</p> -<p><code>aria-activedescendant</code> プロパティは、現在仮想フォーカスを持っている子孫要素の ID を識別します。 コンテナのイベントハンドラーは、<code>aria-activedescendant</code> の値を更新し、（例えば、境界線や背景色で）現在の項目が適切にスタイル設定されていることを確実にすることで、キーイベントおよびマウスイベントに応答する必要があります。 これがどのように機能するかの直接的な説明については、この <a href="http://www.oaa-accessibility.org/example/28/">ARIA ラジオグループの例</a>のソースコードを参照してください。</p> +<p><code>aria-activedescendant</code> プロパティは、現在仮想フォーカスを持っている子孫要素の ID を識別します。 コンテナのイベントハンドラーは、<code>aria-activedescendant</code> の値を更新し、（例えば、境界線や背景色で）現在の項目が適切にスタイル設定されていることを確実にすることで、キーイベントおよびマウスイベントに応答する必要があります。</p> <h3 id="General_Guidelines" name="General_Guidelines">一般的なガイドライン</h3> 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 <p>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).</p> -<p>The Open Ajax Alliance website provides <a class="external" href="http://www.oaa-accessibility.org/example/25/">an example of CSS attribute selectors based on ARIA states</a>. 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.</p> +<p>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.</p> <p>In this example, the HTML for a menu has the form shown in Example 1a. Note how, on lines 7 and 13, the <strong>aria-checked</strong> property is used to declare the selection state of the menu items.</p> -<p><em>Example 1a. HTML for a selectable menu (adapted from <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p> +<p><em>Example 1a. HTML for a selectable menu.</em></p> <pre class="deki-transform"><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 <p>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 <strong>aria-checked</strong> attribute on line 1.</p> -<p><em>Example 1b. Attribute-based selector for indicating state <em>(from <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></em></p> +<p><em>Example 1b. Attribute-based selector for indicating state.</em></p> <pre class="deki-transform">li[aria-checked="true"] { font-weight: bold; @@ -121,7 +121,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>The JavaScript to update the <strong>aria-checked</strong> property has the form shown in Example 1c. Note that the script only updates the <strong>aria-checked</strong> attribute (lines 3 and 8); it does not need to also add or remove a custom classname.</p> -<p><em>Example 1c. JavaScript to update the aria-checked attribute </em><em> <em>(based on <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> +<p><em>Example 1c. JavaScript to update the aria-checked attribute</em></p> <pre class="deki-transform">var processMenuChoice = function(item) { // 'check' the selected item @@ -140,11 +140,11 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>When content visibility is changed (i.e. an element is hidden or shown), developers should change the <strong>aria-hidden</strong> property value. The techniques described above should be used to declare CSS to visually hide an element using <code>display:none</code>.</p> -<p>The Open Ajax Alliance website provides <a class="external" href="http://www.oaa-accessibility.org/example/39/">an example of a tooltip that uses <strong>aria-hidden</strong> to control the visibility of the tooltip</a>. 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.</p> +<p>The Open Ajax Alliance website provides an example of a tooltip that uses <strong>aria-hidden</strong> 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.</p> <p>In this example, the HTML for the tooltip has the form shown in Example 2a. Line 9 sets the <strong>aria-hidden</strong> state to <code>true</code>.</p> -<p><em>Example 2a. HTML for a tooltip (adapted from <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Example 2a. HTML for a tooltip.</em></p> <pre class="deki-transform"><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 <p>The CSS for this markup is shown in Example 2b. Note that there is no custom classname used, only the status of the <strong>aria-hidden</strong> attribute on line 1.</p> -<p>Example 2b. <em>Attribute-based selector for indicating state <em>(from <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></em></p> +<p>Example 2b. <em>Attribute-based selector for indicating state.</em></p> <pre class="deki-transform">div.tooltip[aria-hidden="true"] { display: none; @@ -169,7 +169,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>The JavaScript to update the <strong>aria-hidden</strong> property has the form shown in Example 2c. Note that the script only updates the <strong>aria-</strong><strong>hidden</strong> attribute (line 2); it does not need to also add or remove a custom classname.</p> -<p><em>Example 2c. JavaScript to update the aria-checked attribute </em><em> <em>(based on <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> +<p><em>Example 2c. JavaScript to update the aria-checked attribute </em></p> <pre class="deki-transform">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 <p>Os desenvolvedores devem dar preferência ao uso dos estados ARIA para indicar a situação atual <span id="result_box" lang="pt"><span>dos elemento</span><span><em>s widgets</em></span> <span>na interface de utilização (UI)</span></span> 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 (<em>script</em>) para mudar um nome de classe de um elemento).</p> -<p>A <em>Open Ajax Alliance</em> (OAA - Aliança <em>OpenAJAX </em>) disponibiliza um exemplo de um seletor de atributos CSS baseado nos estados ARIA (em inglês) - <a class="external" href="http://www.oaa-accessibility.org/example/25/">an example of CSS attribute selectors based on ARIA states</a>. O exemplo mostra a <span id="result_box" lang="pt"><span>interface de um editor</span> <span>WYS/WYG</span> <span>com um sistema de</span> <span>menu dinâmico. Os itens</span></span> selecionados no menu, como o tipo de fonte estão, visualmente, distintos dos outros. As partes importantes do exemplo são explicadas a seguir.</p> +<p>A <em>Open Ajax Alliance</em> (OAA - Aliança <em>OpenAJAX </em>) 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 <span id="result_box" lang="pt"><span>interface de um editor</span> <span>WYS/WYG</span> <span>com um sistema de</span> <span>menu dinâmico. Os itens</span></span> selecionados no menu, como o tipo de fonte estão, visualmente, distintos dos outros. As partes importantes do exemplo são explicadas a seguir.</p> <p>Neste exemplo, a HTML para um menu tem a forma exibida abaixo. Note como, nas linhas 7 e 13, a propriedade (<em>property</em>) <strong><code>aria-checked</code></strong> é usada para declarar o estado da seleção dos itens do menu.</p> -<p><em>Exemplo 1a: HTML para um menu selecionável (adaptado da <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p> +<p><em>Exemplo 1a: HTML para um menu selecionável.</em></p> <pre class="brush: html"><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 <p>A CSS usada para alterar a aparência do item selecionado é mostrada no Exemplo 1b. Perceba que não existe um nome de classe (<em>classname</em>) de personalização, apenas o estado do atributo <strong><code>aria-checked</code></strong>, na linha 1.</p> -<p><em>Exemplo 1b: Seletor baseado em atributo para indicar um estado (da <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p> +<p><em>Exemplo 1b: Seletor baseado em atributo para indicar um estado.</em></p> <pre class="brush: css">li[aria-checked="true"] { font-weight: bold; @@ -134,7 +134,7 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and <p>O JavaScript para atualizar a propriedade <strong><code>aria-checked</code></strong> tem a forma exibida no Exemplo 1c. Repare que o roteiro (<em>script</em>) apenas atualiza o atributo <strong><code>aria-checked</code></strong> (linhas 3 e 8); <span id="result_box" lang="pt"><span>também não é necessário</span> <span>adicionar, ou remover,</span> <span>um nome de</span> <span>classe personalizada</span></span>.</p> -<p><em>Exemplo 1c: A JavaScript atualiza o atributo aria-checked (baseado em <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>)</em>.</p> +<p><em>Exemplo 1c: A JavaScript atualiza o atributo aria-checked</em>.</p> <pre class="brush: javascript">var processMenuChoice = function(item) { // 'check' the selected item @@ -153,11 +153,11 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and <p>Quando o conteúdo visual é alterado (isto é, um elemento é escondido, ou mostrado), os desenvolvedores devem mudar o valor da propriedade <strong><code>aria-hidden</code></strong>. As técnicas descritas acima devem ser usadas, a fim de declarar a CSS para ocultar um elemento utilizando<code><em> </em></code><em><code>display:none</code></em><code> </code>(<em>exibir:nenhum</em>).</p> -<p>O sítio da <em>Open Ajax Alliance</em> fornece um exemplo de uma dica de tela (<em>tooltip</em>) que utiliza o estado aria-hidden para controlar a sua visibilidade (em inglês) <a class="external" href="http://www.oaa-accessibility.org/example/39/">an example of a tooltip that uses <strong><code>aria-hidden</code></strong> to control the visibility of the tooltip</a>. O exemplo mostra um formulário <em>web</em> simples, com caixas de dicas de tela contendo instruções associadas aos campos de entrada. As partes relevantes deste exemplo estão explicadas abaixo.</p> +<p>O sítio da <em>Open Ajax Alliance</em> fornece um exemplo de uma dica de tela (<em>tooltip</em>) que utiliza o estado aria-hidden para controlar a sua visibilidade (em inglês) an example of a tooltip that uses <strong><code>aria-hidden</code></strong> to control the visibility of the tooltip. O exemplo mostra um formulário <em>web</em> simples, com caixas de dicas de tela contendo instruções associadas aos campos de entrada. As partes relevantes deste exemplo estão explicadas abaixo.</p> <p>Aqui, a HTML para a dica de tela tem a forma exibida no Exemplo 2a. A linha 9 configura o estado da <strong><code>aria-hidden</code></strong> para <code>true</code>.</p> -<p><em>Exemplo 2a: HTML para dicas de tela (adaptado de <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Exemplo 2a: HTML para dicas de tela.</em></p> <pre class="brush: html"><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 <p>A CSS para esta marcação está explicada no Exemplo 2b. Veja que não há uso de <em>classname</em> personalizada, apenas o estado do atributo <strong><code>aria-hidden</code></strong>, na linha 1.</p> -<p><em>Exemplo 2b: Seletor basedo em atributo para indicar um estado (de <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Exemplo 2b: Seletor basedo em atributo para indicar um estado.</em></p> <pre class="brush: css">div.tooltip[aria-hidden="true"] { display: none; @@ -182,7 +182,7 @@ original_slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and <p>O JavaScript que atualiza a propriedade <strong><code>aria-hidden</code></strong> tem a forma exposta no Exemplo 2c. Observe que o roteiro apenas atualiza o atributo <strong><code>aria-hidden</code></strong> (linha 2); não é necessário adicionar, nem remover, uma <em>classname</em> customizada.</p> -<p><em>Exemplo 2c: JavaScript para atualização do atributo aria-checked (com base em <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Exemplo 2c: JavaScript para atualização do atributo aria-checked.</em></p> <pre class="brush: javascript">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");</pre> <pre class="brush: js">// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:(Remover a classe "<em>hidden</em>" faz o leitor de tela anunciar o alerta) document.getElementById("expirationWarning").className = ""; </pre> -<h4 id="Exemplos_de_Trabalhos">Exemplos de Trabalhos:</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/example/1/">Exemplo de funções com caixas de alerta ARIA - Alert role example using an ARIA alert box</a></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/alertdialog1/">Exemplo de alerta utilizando uma caixa de diálogo modal ARIA - Alert example using a modal ARIA dialog box</a></li> -</ul> - <h3 id="Notas">Notas:</h3> <ul> 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> </pre> -<h3 id="Exemplos_funcionando">Exemplos funcionando:</h3> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/checkbox1/">Exemplo checkbox</a> usa <code>aria-describedby</code></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/">Exemplo tooltip</a> usa <code>aria-describedby</code></li> -</ul> - <h3 id="Notas">Notas</h3> <ul> 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> </pre> -<h4 id="Exemplos_Funcionais">Exemplos Funcionais:</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/button2/">Exemplo de um button</a> usando <code>aria-labelledby</code></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/combobox1/">Exemplo de um combobox</a> usando <code>aria-labelledby</code></li> -</ul> - <h3 id="Notas">Notas </h3> <p>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> </pre> -<h4 id="Exemplos_de_trabalho">Exemplos de trabalho:</h4> - -<p><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/">Exemplo de Tooltip </a> (inclui o uso do atributo <code>aria-required</code>)</p> - <h3 id="Notas">Notas </h3> <h3 id="Usado_em_ARIA_roles">Usado em ARIA roles</h3> 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) { }; </pre> -<h4 id="Working_Examples">Working Examples:</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/">Slider example</a></li> -</ul> - <h3 id="Notas">Notas </h3> <h3 id="Atributos_ARIA_usados">Atributos ARIA usados</h3> 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 <div class="warning">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.<br> <br> -Para ver exemplos atualizados, entre em <a class="external" href="http://oaa-accessibility.org/examples">OpenAjaxAlliance ARIA examples page</a>.</div> +Para ver exemplos atualizados, entre em OpenAjaxAlliance ARIA examples page.</div> <p>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).</p> 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 <p>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 <strong>aria-labelledby</strong> para "rg1_label," o <strong>id</strong> do elemento {{HTMLElement("h3")}} na linha 1, que é o label para o grupo rádio.</p> -<p><em>Exemplo 2. Um grupo rádio implementado usando uma lista não ordenada (adaptado de <a href="http://www.oaa-accessibility.org/examplep/radio1/">http://www.oaa-accessibility.org/examplep/radio1/</a>)</em></p> +<p><em>Exemplo 2. Um grupo rádio implementado usando uma lista não ordenada</em></p> <pre class="brush: html"><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> </pre> -<h3 id="Рабочие_примеры">Рабочие примеры:</h3> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/checkbox1/">Checkbox example</a> использования <code>aria-describedby</code></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/">Tooltip example</a> использования <code>aria-describedby</code></li> -</ul> - <h3 id="Примечания">Примечания</h3> <ul> 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 <p>Эта техника позволяет объединить каждый отдельно взятый обработчик событий в контейнер графического элемента и использовать <code>aria-activedescendent</code> для слежения за "виртуальным" фокусом . (Для получения более подробной информации относительно ARIA обратите внимание на <a href="/ru/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets">обзор доступных веб-приложений и виджетов </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 href="https://www.oaa-accessibility.org/example/28/">ARIA radiogroup example</a> for a direct illustration of how this works.</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> <h5 id="Tips">Tips</h5> 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 <p>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).</p> -<p>The Open Ajax Alliance website provides <a class="external" href="http://web.archive.org/web/20160303012540/http://oaa-accessibility.org/example/25/" title="http://www.oaa-accessibility.org/example/25/">an example of CSS attribute selectors based on ARIA states</a>. 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.</p> +<p>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.</p> <p>In this example, the HTML for a menu has the form shown in Example 1a. Note how, on lines 7 and 13, the <strong><code>aria-checked</code></strong> property is used to declare the selection state of the menu items.</p> -<p><em>Example 1a. HTML for a selectable menu (adapted from <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p> +<p><em>Example 1a. HTML for a selectable menu.</em></p> <pre class="brush: html"><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 <p>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 <strong><code>aria-checked</code></strong> attribute on line 1.</p> -<p><em>Example 1b. Attribute-based selector for indicating state (from <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p> +<p><em>Example 1b. Attribute-based selector for indicating state.</em></p> <pre class="brush: css">li[aria-checked="true"] { font-weight: bold; @@ -121,7 +121,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>The JavaScript to update the <strong><code>aria-checked</code></strong> property has the form shown in Example 1c. Note that the script only updates the <strong><code>aria-checked</code></strong> attribute (lines 3 and 8); it does not need to also add or remove a custom classname.</p> -<p><em>Example 1c. JavaScript to update the aria-checked attribute (based on <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>)</em>.</p> +<p><em>Example 1c. JavaScript to update the aria-checked attribute</em>.</p> <pre class="brush: javascript">var processMenuChoice = function(item) { // 'check' the selected item @@ -140,11 +140,11 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>When content visibility is changed (i.e., an element is hidden or shown), developers should change the <strong><code>aria-hidden</code></strong> property value. The techniques described above should be used to declare CSS to visually hide an element using <code>display:none</code>.</p> -<p>The Open Ajax Alliance website provides <a class="external" href="http://www.oaa-accessibility.org/example/39/" title="http://www.oaa-accessibility.org/example/39/">an example of a tooltip that uses <strong><code>aria-hidden</code></strong> to control the visibility of the tooltip</a>. 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.</p> +<p>The Open Ajax Alliance website provides an example of a tooltip that uses <strong><code>aria-hidden</code></strong> 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.</p> <p>In this example, the HTML for the tooltip has the form shown in Example 2a. Line 9 sets the <strong><code>aria-hidden</code></strong> state to <code>true</code>.</p> -<p><em>Example 2a. HTML for a tooltip (adapted from <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Example 2a. HTML for a tooltip.</em></p> <pre class="brush: html"><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 <p>The CSS for this markup is shown in Example 2b. Note that there is no custom classname used, only the status of the <strong><code>aria-hidden</code></strong> attribute on line 1.</p> -<p><em>Example 2b. Attribute-based selector for indicating state (from <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Example 2b. Attribute-based selector for indicating state.</em></p> <pre class="brush: css">div.tooltip[aria-hidden="true"] { display: none; @@ -169,7 +169,7 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and <p>The JavaScript to update the <strong><code>aria-hidden</code></strong> property has the form shown in Example 2c. Note that the script only updates the <strong><code>aria-hidden</code></strong> attribute (line 2); it does not need to also add or remove a custom classname.</p> -<p><em>Example 2c. JavaScript to update the aria-checked attribute (based on <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> +<p><em>Example 2c. JavaScript to update the aria-checked attribute.</em></p> <pre class="brush: javascript">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> </pre> -<h4 id="操作实例">操作实例:</h4> - -<ul> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/button2/" title="http://www.oaa-accessibility.org/examplep/button2/">Button example</a> uses <code>aria-labelledby</code></li> - <li><a class="external" href="http://www.oaa-accessibility.org/examplep/combobox1/" title="http://www.oaa-accessibility.org/examplep/combobox1/">Combobox example</a> uses <code>aria-labelledby</code></li> -</ul> - <h3 id="注意">注意 </h3> <p>The most common <em>accessibility API</em> mapping for a label is the <em>accessible name</em> property</p> 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 <li>更改之前被 focus 中元素的 tabindex 为“-1”.</li> </ol> -<p>这里有个 <a class="external text" href="http://www.oaa-accessibility.org/example/40/" rel="nofollow" title="http://www.oaa-accessibility.org/example/40/">WAI-ARIA tree view</a> 的例子是使用这种方案的。</p> +<p>这里有个 WAI-ARIA tree view 的例子是使用这种方案的。</p> <h5 id="提示">提示</h5> @@ -153,7 +153,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets <p>这个办法包含绑定一个单独的事件句柄到容器窗口组件上，运用 <code>aria-activedescendent属性</code>来追踪一个 "虚拟" 焦点。（关于ARIA更多的信息, 查看 <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">overview of accessible web applications and widgets</a>.）</p> -<p><code>aria-activedescendant</code> 属性用来标识拥有虚拟焦点的后代元素的 ID。在窗口容器的事件句柄里面在键盘和鼠标事件响应更新 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">aria-activedescendant 值并且确保当前</span><span style="line-height: 1.5;">The event handler on the container must respond to key and mouse events by updating the value of </span><code style="font-size: 14px;">aria-activedescendant</code><span style="line-height: 1.5;"> and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this </span><a class="external text" href="http://www.oaa-accessibility.org/example/28/" rel="nofollow" style="line-height: 1.5;" title="http://www.oaa-accessibility.org/example/28/">ARIA radiogroup example</a><span style="line-height: 1.5;"> for a direct illustration of how this works.</span></p> +<p><code>aria-activedescendant</code> 属性用来标识拥有虚拟焦点的后代元素的 ID。在窗口容器的事件句柄里面在键盘和鼠标事件响应更新 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">aria-activedescendant 值并且确保当前</span><span style="line-height: 1.5;">The event handler on the container must respond to key and mouse events by updating the value of </span><code style="font-size: 14px;">aria-activedescendant</code><span style="line-height: 1.5;"> and ensuring that the current item is styled appropriately (for example, with a border or background color). </span></p> <h5 id="Tips">Tips</h5> 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 <p>下面的範例顯示使用無序列表 ( unordered list ) 實現的單選按鈕組 ( radio button group )。注意程式碼第三行 , {{ HTMLElement("li") }} 元素將 <code><strong>aria-labelledby</strong></code> 屬性設置為 <code>"rg1_label"</code> , 在第一行中元素 {{ HTMLElement("h3") }} 的 <strong><code>id</code> </strong>, 即單選按鈕組的標籤。</p> -<p><em>範例 2. </em>使用無序列表實現的單選按鈕組<em> ( 改編自 <a href="http://www.oaa-accessibility.org/examplep/radio1/">http://www.oaa-accessibility.org/examplep/radio1/</a>)</em></p> +<p><em>範例 2. </em>使用無序列表實現的單選按鈕組</p> <pre class="brush: html"><h3 id="rg1_label">Lunch Options</h3> |