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 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'files/ko/web') 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');
-- 
cgit v1.2.3-54-g00ecf