diff options
Diffstat (limited to 'files/zh-cn')
3 files changed, 10 insertions, 17 deletions
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> |