Skip to content

Commit

Permalink
AutoCorrect files/zh-cn/web/accessibility/ (#5958)
Browse files Browse the repository at this point in the history
Co-authored-by: A1lo <[email protected]>
  • Loading branch information
huacnlee and yin1999 authored May 31, 2022
1 parent cf31101 commit bc94943
Show file tree
Hide file tree
Showing 12 changed files with 128 additions and 128 deletions.
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
title: 可访问的Web应用程序和小部件概述
title: 可访问的 Web 应用程序和小部件概述
slug: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets
translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets
---
<p>web正在变化。静态的、基于页面的站点逐渐被动态站点所取代,桌面式的web应用由大量的JavaScript和AJAX组成。设计人员完全可以通过JavaScript,HTML和CSS的组合创建令人惊叹的新的小部件和控件。这种转变有可能显着提高网络的响应能力和可用性,但是由于可访问性差距,存在许多用户有无法享用这种好处的风险。用户无法访问传统上JavaScript对于诸如屏幕阅读器等辅助技术,但是现在有了创建动态Web用户界面的方法,可以被各种用户访问。</p>
<p>web 正在变化。静态的、基于页面的站点逐渐被动态站点所取代,桌面式的 web 应用由大量的 JavaScript 和 AJAX 组成。设计人员完全可以通过 JavaScript,HTML 和 CSS 的组合创建令人惊叹的新的小部件和控件。这种转变有可能显着提高网络的响应能力和可用性,但是由于可访问性差距,存在许多用户有无法享用这种好处的风险。用户无法访问传统上 JavaScript 对于诸如屏幕阅读器等辅助技术,但是现在有了创建动态 Web 用户界面的方法,可以被各种用户访问。</p>

<h2 id="问题">问题</h2>

<p>大多数JavaScript工具包提供了模拟类似桌面界面行为的客户端小部件库。 滑块,菜单栏,文件列表视图等可以通过JavaScript,CSS和HTML的组合构建。 由于HTML 4规范不提供语义上描述这些窗口小部件的内置标签,因此开发人员通常会使用通用元素(如&lt;div&gt;和&lt;span&gt;)。 虽然这导致了一个看起来像桌面对应的小部件,但标记中通常没有足够的辅助技术可用的语义信息。 网页上的动态内容对于无论何种原因无法查看屏幕的用户来说都是特别有问题的。 股票行情,实时twitter消息更新,进度指示器和类似内容以辅助技术(AT)可能不知道的方式修改DOM。 那就是<a href="/en/ARIA" title="ARIA">ARIA</a>存在的意义。</p>
<p>大多数 JavaScript 工具包提供了模拟类似桌面界面行为的客户端小部件库。 滑块,菜单栏,文件列表视图等可以通过 JavaScript,CSS 和 HTML 的组合构建。 由于 HTML 4 规范不提供语义上描述这些窗口小部件的内置标签,因此开发人员通常会使用通用元素(如&lt;div&gt;和&lt;span&gt;)。 虽然这导致了一个看起来像桌面对应的小部件,但标记中通常没有足够的辅助技术可用的语义信息。 网页上的动态内容对于无论何种原因无法查看屏幕的用户来说都是特别有问题的。 股票行情,实时 twitter 消息更新,进度指示器和类似内容以辅助技术(AT)可能不知道的方式修改 DOM。 那就是<a href="/en/ARIA" title="ARIA">ARIA</a>存在的意义。</p>

<p><em>Example 1: Markup for a tabs widget built without ARIA labeling. There's no information in the markup to describe the widget's form and function.</em></p>

Expand Down Expand Up @@ -35,7 +35,7 @@ <h2 id="问题">问题</h2>

<h2 id="ARIA">ARIA</h2>

<p><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, 来自W3C的网络无障碍计划<a class="external" href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a>) 的可访问的富互联网应用程序(<strong>Accessible Rich Internet Applications)规范,</strong>提供了一种添加辅助技术(如屏幕阅读器)所需的缺少语义的方法。ARIA使开发人员可以通过向标记添加特殊属性来更详细地描述其小部件。 旨在填补在动态web应用在发现的标准HTML标签与桌面式控件之的差距,ARIA提供了角色和状态以描述大多数常见的UI小部件的行为</p>
<p><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, 来自 W3C 的网络无障碍计划<a class="external" href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a>) 的可访问的富互联网应用程序(<strong>Accessible Rich Internet Applications)规范,</strong>提供了一种添加辅助技术(如屏幕阅读器)所需的缺少语义的方法。ARIA 使开发人员可以通过向标记添加特殊属性来更详细地描述其小部件。 旨在填补在动态 web 应用在发现的标准 HTML 标签与桌面式控件之的差距,ARIA 提供了角色和状态以描述大多数常见的 UI 小部件的行为</p>

<p>The ARIA specification is split up into three different types of attributes: roles, states, and properties. Roles describe widgets that aren't otherwise available in HTML 4, such as sliders, menu bars, tabs, and dialogs. Properties describe characteristics of these widgets, such as if they are draggable, have a required element, or have a popup associated with them. States describe the current interaction state of an element, informing the assistive technology if it is busy, disabled, selected, or hidden.</p>

Expand Down
30 changes: 15 additions & 15 deletions files/zh-cn/web/accessibility/aria/aria_live_regions/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,26 @@
slug: Web/Accessibility/ARIA/ARIA_Live_Regions
translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions
---
<p>使用JavaScript,我们可以动态更改页面的某些部分,而无需重新加载整个页面——例如,可以动态更新搜索结果列表,或者显示不需要用户交互的警告或通知。虽然这些更改对于能够看到页面的用户来说通常是显而易见的,但是对于残疾用户来说,它们可能并不明显。ARIA Live区域填补了这个空白,并提供了一种以编程方式显现动态内容更改的方法,这种方式可以由残疾辅助技术提供提示。</p>
<p>使用 JavaScript,我们可以动态更改页面的某些部分,而无需重新加载整个页面——例如,可以动态更新搜索结果列表,或者显示不需要用户交互的警告或通知。虽然这些更改对于能够看到页面的用户来说通常是显而易见的,但是对于残疾用户来说,它们可能并不明显。ARIA Live 区域填补了这个空白,并提供了一种以编程方式显现动态内容更改的方法,这种方式可以由残疾辅助技术提供提示。</p>

<div class="note">
<p><strong>提示</strong>: 辅助技术将播报实时区域内容的动态变化。 必须首先显示活动区域(通常是空的),以便浏览器和辅助技术可以知道它。 然后宣布任何后续更改。</p>

<p>在页面加载时的初始标记中简单地添加一个 <code>aria-live</code> 属性或者一个特殊的活动区域角色( <code>role</code> ) (例如 <code>role="alert"</code>) 将不会起作用。</p>
<p>在页面加载时的初始标记中简单地添加一个 <code>aria-live</code> 属性或者一个特殊的活动区域角色 <code>role</code> ) (例如 <code>role="alert"</code>) 将不会起作用。</p>

<p>向文档中动态添加一个包含 <code>aria-live</code> 属性的元素或者特殊的角色( <code>role</code> ) 也不会导致辅助技术工具的任何播报(在那个时间点,浏览器/辅助技术工具还没有检测到活动区域) 所以你不能监控它的变化)。</p>
<p>向文档中动态添加一个包含 <code>aria-live</code> 属性的元素或者特殊的角色 <code>role</code> ) 也不会导致辅助技术工具的任何播报(在那个时间点,浏览器/辅助技术工具还没有检测到活动区域) 所以你不能监控它的变化)。</p>

<p>总是确保实时区域首先出现在文档中,然后再动态添加/更改任何内容。</p>

<p>只要在更改发生之前添加属性,就可以在要宣布更改的元素上包含 <code>aria-live</code> 属性或专门的活动区域角色(例如<code>role =“ alert”</code>)——在原始标记中或动态地使用JavaScript</p>
<p>只要在更改发生之前添加属性,就可以在要宣布更改的元素上包含 <code>aria-live</code> 属性或专门的活动区域角色(例如<code>role =“ alert”</code>)——在原始标记中或动态地使用 JavaScript</p>
</div>

<h2 id="简单的活动区域">简单的活动区域</h2>

<p>在不重新加载页面的情况下更新的动态内容通常是区域或窗口小部件。 非交互式的简单内容更改应标记为实时区域。 以下是每个相关的ARIA活动区域属性的列表,并带有说明。</p>
<p>在不重新加载页面的情况下更新的动态内容通常是区域或窗口小部件。 非交互式的简单内容更改应标记为实时区域。 以下是每个相关的 ARIA 活动区域属性的列表,并带有说明。</p>

<ol>
<li><code><strong>aria-live</strong></code>: <code>aria-live=POLITENESS_SETTING</code> 被用来设置屏幕阅读器对待活动区域更新的优先级 - 可能的设置: <code>off</code>, <code>polite</code> or <code>assertive</code> 。默认设置是 <code>off</code> 。这个设置是到目前为止最重要的。</li>
<li><code><strong>aria-live</strong></code>: <code>aria-live=POLITENESS_SETTING</code> 被用来设置屏幕阅读器对待活动区域更新的优先级 - 可能的设置<code>off</code>, <code>polite</code> or <code>assertive</code> 。默认设置是 <code>off</code> 。这个设置是到目前为止最重要的。</li>
<li>
<p class="comment"><code><strong>aria-controls</strong></code>: <code>aria-controls=[IDLIST]</code> 被用来将控制动作与它控制的区域相关联。区域就像<code>div</code> 里面的 <code>id</code> 被鉴别;多区域可以被一个带空格的控制动作关联,例如: <code>aria-controls="myRegionID1 myRegionsID2"</code>  。</p>

Expand Down Expand Up @@ -112,7 +112,7 @@ <h4 id="JavaScript">JavaScript</h4>

<p>当用户选择一个新的行星时,活动区域的信息会被播报。因为这个活动区域有 <code>aria-live="polite"</code> 属性,屏幕阅读器将会等待用户暂停后再播报更新。这样的话,在列表中向下滑动并选择其他星球将不会在实时区域中播报更新。 仅会针对最终选择的星球播报实时区域的更新。</p>

<p>这是Mac上VoiceOver的屏幕截图,播报对实时区域的更新(通过字幕):<img alt="A screenshot of VoiceOver on Mac announcing the update to a live region. Subtitles are shown in the picture." src="https://mdn.mozillademos.org/files/15815/Web_Accessibility_ARIA_ARIA_Live_Regions.png" style="height: 573px; width: 800px;"></p>
<p>这是 Mac 上 VoiceOver 的屏幕截图,播报对实时区域的更新(通过字幕):<img alt="A screenshot of VoiceOver on Mac announcing the update to a live region. Subtitles are shown in the picture." src="https://mdn.mozillademos.org/files/15815/Web_Accessibility_ARIA_ARIA_Live_Regions.png" style="height: 573px; width: 800px;"></p>

<h2 id="更好的专业活动区域角色">更好的专业活动区域角色</h2>

Expand All @@ -139,12 +139,12 @@ <h2 id="更好的专业活动区域角色">更好的专业活动区域角色</h2
</tr>
<tr>
<td>警告</td>
<td>在屏幕上闪烁的错误或警告信息。警报对于向用户发出客户端验证通知特别重要。 (待定:带有ARIA信息的ARIA表单教程链接</td>
<td>为最大化兼容性,当你使用这个角色时,请加入额外的<code>aria-live="assertive"</code> 参数。但是,同时添加 <code>aria-live</code> 和 <code>role="alert"</code> 会导致在iOS平台上出现VoiceOver的双重播报问题</td>
<td>在屏幕上闪烁的错误或警告信息。警报对于向用户发出客户端验证通知特别重要。(待定:带有 ARIA 信息的 ARIA 表单教程链接</td>
<td>为最大化兼容性,当你使用这个角色时,请加入额外的<code>aria-live="assertive"</code> 参数。但是,同时添加 <code>aria-live</code> 和 <code>role="alert"</code> 会导致在 iOS 平台上出现 VoiceOver 的双重播报问题</td>
</tr>
<tr>
<td>进度条</td>
<td>小部件和活动区域之间的混合体。 将此参数与 <code>aria-valuemin</code><code>aria-valuenow</code><code>aria-valuemax</code> 结合使用。 <em>待定</em>:请在此处添加更多信息)。</td>
<td>小部件和活动区域之间的混合体。 将此参数与 <code>aria-valuemin</code><code>aria-valuenow</code><code>aria-valuemax</code> 结合使用。(<em>待定</em>:请在此处添加更多信息)。</td>
<td></td>
</tr>
<tr>
Expand All @@ -164,13 +164,13 @@ <h2 id="高级活动区域">高级活动区域</h2>

<p><em>待定</em>:有关操作系统 / 浏览器 / 辅助技术工具组合对单个属性的支持的更详细的信息)</p>

<p>JAWS 10.0版中已添加对实时区域的常规支持。 Windows Eyes从8.0版开始支持“在Microsoft Internet Explorer和Mozilla Firefox的浏览模式之外使用”的实时区域。 NVDA早在2008年就为Mozilla Firefox添加了对实时区域的一些基本支持,并在2010年和2014年进行了改进。2015年,还为Internet Explorer(MSHTML)添加了基本支持。</p>
<p>JAWS 10.0 版中已添加对实时区域的常规支持。 Windows Eyes 从 8.0 版开始支持“在 Microsoft Internet Explorer 和 Mozilla Firefox 的浏览模式之外使用”的实时区域。 NVDA 早在 2008 年就为 Mozilla Firefox 添加了对实时区域的一些基本支持,并在 2010 年和 2014 年进行了改进。2015 年,还为 Internet Explorer(MSHTML)添加了基本支持。</p>

<p>Paciello Group 有一些<a href="https://www.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/">与活动区域支持状态有关的信息 </a>(2014) ,Paul J. Adam 特别研究了<a href="http://pauljadam.com/demos/aria-atomic-relevant.html"> 对于 <code>Aria-Atomic </code>与 <code>Aria-Relevant</code> 的支持</a>。 </p>

<ol>
<li><code><strong>aria-atomic</strong></code><strong> </strong><code>aria-atomic=BOOLEAN</code> 被用来设置屏幕阅读器是否应该总是将活动区域整个播报,即使区域中只有一部分内容改变。可能的值为 <code>false</code> 或者 <code>true</code> 。默认值为 <code>false</code> 。</li>
<li><code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute"><strong>aria-relevant</strong></a></code> : <code>aria-relevant=[LIST_OF_CHANGES]</code> 被用来设置哪些类型的改变与活动区域有关。可能的值由以下的一个或者更多组成: <code>additions</code>, <code>removals</code><code>text</code>, <code>all</code> 。 默认值是 <code>additions text</code> 。</li>
<li><code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute"><strong>aria-relevant</strong></a></code> : <code>aria-relevant=[LIST_OF_CHANGES]</code> 被用来设置哪些类型的改变与活动区域有关。可能的值由以下的一个或者更多组成<code>additions</code>, <code>removals</code><code>text</code>, <code>all</code> 。 默认值是 <code>additions text</code> 。</li>
<li><code><strong>aria-labelledby</strong></code> : <code>aria-labelledby=[IDLIST]</code> 被用来将一个区域与其标签关联起来,与 aria-control 类似,但将标签与区域关联。标签标识符间用空格隔开。</li>
<li><code><strong>aria-describedby</strong></code> : <code>aria-describedby=[IDLIST]</code> 被用来将一个区域与其描述关联起来,与 aria-control 类似,但将标签与描述关联。描述标识符间用空格隔开。</li>
</ol>
Expand All @@ -194,7 +194,7 @@ <h3 id="高级用例_时钟">高级用例: 时钟</h3>

<p>解决此问题的一种方法是,首先清除活动区域的内容,然后注入新内容。 但是,有时这可能不可靠,因为这取决于这两个更新的确切时间。</p>

<p><code>aria-atomic="true"</code> 确保每次更新实时区域时,全部内容都会被完整播报(例如 "时间: 17:34").</p>
<p><code>aria-atomic="true"</code> 确保每次更新实时区域时,全部内容都会被完整播报 (例如 "时间: 17:34").</p>

<pre class="brush: html notranslate">&lt;div id="clock" role="timer" aria-live="polite" aria-atomic="true"&gt;&lt;/div&gt;
</pre>
Expand Down Expand Up @@ -233,9 +233,9 @@ <h3 id="高级用例_时钟">高级用例: 时钟</h3>

<p>如果没有 <code>aria-atomic="true"</code> ,屏幕阅读器只会播报"年"的数值的改变。</p>

<p>如果有 <code>aria-atomic-="true"</code> ,屏幕阅读器会播报"设置的年为: <em>改变的值</em>"。</p>
<p>如果有 <code>aria-atomic-="true"</code> ,屏幕阅读器会播报"设置的年为<em>改变的值</em>"。</p>

<h3 id="高级用例_名册">高级用例: 名册</h3>
<h3 id="高级用例_名册">高级用例名册</h3>

<p>一个聊天站点想要显示当前登录用户的列表。列表将动态反映用户的登录和注销状态的用户(无需重新加载页面)。</p>

Expand Down
Loading

0 comments on commit bc94943

Please sign in to comment.