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 | 16 ++++++++-------- .../using_the_aria-labelledby_attribute/index.html | 7 ------- .../keyboard-navigable_javascript_widgets/index.html | 4 ++-- 3 files changed, 10 insertions(+), 17 deletions(-) (limited to 'files/zh-cn/web') 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
    
 
-- 
cgit v1.2.3-54-g00ecf