diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/accessibility/aria | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/accessibility/aria')
9 files changed, 1156 insertions, 0 deletions
diff --git a/files/zh-cn/web/accessibility/aria/aria_live_regions/index.html b/files/zh-cn/web/accessibility/aria/aria_live_regions/index.html new file mode 100644 index 0000000000..5abe8b19f9 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/aria_live_regions/index.html @@ -0,0 +1,259 @@ +--- +title: ARIA live regions +slug: Web/Accessibility/ARIA/ARIA_Live_Regions +translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions +--- +<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> ) 也不会导致辅助技术工具的任何播报（在那个时间点，浏览器/辅助技术工具还没有检测到活动区域） 所以你不能监控它的变化)。</p> + +<p>总是确保实时区域首先出现在文档中，然后再动态添加/更改任何内容。</p> + +<p>只要在更改发生之前添加属性，就可以在要宣布更改的元素上包含 <code>aria-live</code> 属性或专门的活动区域角色（例如<code>role =“ alert”</code>）——在原始标记中或动态地使用JavaScript。</p> +</div> + +<h2 id="简单的活动区域"><span class="mw-headline" id="Live_Region_State">简单的活动区域</span></h2> + +<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> + <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> + + <div class="warning"><strong>警告：</strong>尚不知道在当前的辅助技术工具中是否实现了实时区域的 ARIA 控制方面。 需要研究。</div> + </li> +</ol> + +<p>正常来说，只有 <code>aria-live="polite"</code> 被使用。任何对用户来说很重要但又不至于令人讨厌的更新的区域都应该被设置此属性。 每当用户空闲时，屏幕阅读器都会说出更改。</p> + +<p>对于不重要的区域或由于快速更新或其他原因而烦人的区域，请使用 <code>aria-live="off"</code> 将其静音。</p> + +<h3 id="让下拉框更新有用的屏幕信息">让下拉框更新有用的屏幕信息</h3> + +<p>一个专门提供有关行星信息的网站提供了一个下拉框。 从下拉列表中选择一个行星时，页面上的区域会更新有关所选行星的信息。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><fieldset> + <legend>Planet information</legend> + <label for="planetsSelect">Planet:</label> + <select id="planetsSelect" aria-controls="planetInfo"> + <option value="">Select a planet&hellip;</option> + <option value="mercury">Mercury</option> + <option value="venus">Venus</option> + <option value="earth">Earth</option> + <option value="mars">Mars</option> + </select> + <button id="renderPlanetInfoButton">Go</button> +</fieldset> + +<div role="region" id="planetInfo" aria-live="polite"> + <h2 id="planetTitle">No planet selected</h2> + <p id="planetDescription">Select a planet to view its description</p> +</div> + +<p><small>Information courtesy <a href="https://en.wikipedia.org/wiki/Solar_System#Inner_Solar_System">Wikipedia</a></small></p> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">const PLANETS_INFO = { + mercury: { + title: 'Mercury', + description: 'Mercury is the smallest and innermost planet in the Solar System. It is named after the Roman deity Mercury, the messenger to the gods.' + }, + + venus: { + title: "Venus", + description: 'Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.' + }, + + earth: { + title: "Earth", + description: 'Earth is the third planet from the Sun and the only object in the Universe known to harbor life.' + }, + + mars: { + title: "Mars", + description: 'Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System after Mercury. In English, Mars carries a name of the Roman god of war, and is often referred to as the "Red Planet".' + } +}; + +function renderPlanetInfo(planet) { + const planetTitle = document.querySelector('#planetTitle'); + const planetDescription = document.querySelector('#planetDescription'); + + if (planet in PLANETS_INFO) { + planetTitle.textContent = PLANETS_INFO[planet].title; + planetDescription.textContent = PLANETS_INFO[planet].description; + } else { + planetTitle.textContent = 'No planet selected'; + planetDescription.textContent = 'Select a planet to view its description'; + } +} + +const renderPlanetInfoButton = document.querySelector('#renderPlanetInfoButton'); + +renderPlanetInfoButton.addEventListener('click', event => { + const planetsSelect = document.querySelector('#planetsSelect'); + const selectedPlanet = planetsSelect.options[planetsSelect.selectedIndex].value; + + renderPlanetInfo(selectedPlanet); +}); +</pre> + +<p>{{EmbedLiveSample('Dropdown_box_updates_useful_onscreen_information', '', 350)}}</p> + +<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> + +<h2 id="更好的专业活动区域角色">更好的专业活动区域角色</h2> + +<p>在以下众所周知的预定义情况下，最好使用提供的特定“活动区域角色”：</p> + +<table style="width: 100%;"> + <thead> + <tr> + <th scope="col">角色</th> + <th scope="col">描述</th> + <th scope="col">兼容性提示</th> + </tr> + </thead> + <tbody> + <tr> + <td>日志</td> + <td>对话、错误、游戏或者其他类型的日志</td> + <td>为最大化兼容性，当你使用这个角色时，请加入额外的<code>aria-live="polite"</code> 参数。</td> + </tr> + <tr> + <td>状态</td> + <td>一个状态栏或者屏幕上提供持续更新某种状态的区域。屏幕阅读器用户有一个特殊的命令用来读取当前的状态。</td> + <td>为最大化兼容性，当你使用这个角色时，请加入额外的<code>aria-live="polite"</code> 参数。</td> + </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> + </tr> + <tr> + <td>进度条</td> + <td>小部件和活动区域之间的混合体。 将此参数与 <code>aria-valuemin</code> ， <code>aria-valuenow</code> 和<code>aria-valuemax</code> 结合使用。 （<em>待定</em>：请在此处添加更多信息）。</td> + <td></td> + </tr> + <tr> + <td>选框</td> + <td>用于滚动文本，例如股票行情自动收录器。</td> + <td></td> + </tr> + <tr> + <td>计时器</td> + <td>或任何类型的计时器或时钟，例如倒数计时器或秒表读数。</td> + <td></td> + </tr> + </tbody> +</table> + +<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>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><strong>aria-labelledby</strong></code> : <code>aria-labelledby=[IDLIST]</code> 被用来将一个区域与其标签关联起来，与 <font face="consolas, Liberation Mono, courier, monospace"><span>aria-control</span></font> 类似，但将标签与区域关联。标签标识符间用空格隔开。</li> + <li><code><strong>aria-describedby</strong></code> : <code>aria-describedby=[IDLIST]</code> 被用来将一个区域与其描述关联起来，与 <font face="consolas, Liberation Mono, courier, monospace"><span>aria-control</span></font> 类似，但将标签与描述关联。描述标识符间用空格隔开。</li> +</ol> + +<h3 id="高级用例_时钟"><span class="mw-headline">高级用例: 时钟</span></h3> + +<p>为了举例说明 <code>aria-atomic</code> ，请考虑一个带有简单时钟的站点，其中显示了小时和分钟。 时钟每分钟更新一次，而新的剩余时间仅会覆盖当前内容。</p> + +<pre class="brush: html notranslate"><div id="clock" role="timer" aria-live="polite"></div> +</pre> + +<pre class="brush: js notranslate">/* basic JavaScript to update the clock */ + +setInterval(function() { + var now = new Date(); + document.getElementById('clock').innerHTML = "Time: " + now.getHours() + ":" + ("0"+now.getMinutes()).substr(-2); +}, 60000); +</pre> + +<p>该函数第一次执行时，将播报所添加字符串的全部。 在随后的调用中，将仅播报内容与先前内容相比已更改的部分。 例如，当时钟从“ 17:33”更改为“ 17:34”时，辅助技术工具将仅播报“ 4”，这对用户不是很有用。</p> + +<p>解决此问题的一种方法是，首先清除活动区域的内容，然后注入新内容。 但是，有时这可能不可靠，因为这取决于这两个更新的确切时间。</p> + +<p><code>aria-atomic="true"</code> 确保每次更新实时区域时，全部内容都会被完整播报(例如 "时间: 17:34").</p> + +<pre class="brush: html notranslate"><div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div> +</pre> + +<div class="note"> +<p><strong>注意：</strong> 正如我们观察到的那样，重新设置/更新 innerHTML 会导致整个文本被重新播报，无论你是否设置 <code>aria-atomic="true"</code> ，所以以上的时钟示例并不能像预期那样地工作。</p> +</div> + +<p class="syntaxbox">一个简单的年份控件的工作示例，可以帮助您更好地理解：</p> + +<pre class="brush: html notranslate"><div id="date-input"> + <label>Year: + <input type="text" id="year" value="1990" onblur="change(event)"/> + </label> +</div> + +<div id="date-output" aria-live="polite"> + The set year is: + <span id="year-output">1990</span> +</div></pre> + +<p class="syntaxbox"></p> + +<pre class="brush: js notranslate">function change(event) { + var yearOut = document.getElementById("year-output"); + switch (event.target.id) { + case "year": + yearOut.innerHTML = event.target.value; + break; + default: + return; + } +};</pre> + +<p class="syntaxbox"></p> + +<p>如果没有 <code>aria-atomic="true"</code> ，屏幕阅读器只会播报"年"的数值的改变。</p> + +<p>如果有 <code>aria-atomic-="true"</code> ，屏幕阅读器会播报"设置的年为: <em>改变的值</em>"。</p> + +<h3 id="高级用例_名册"><span class="mw-headline">高级用例: 名册</span></h3> + +<p>一个聊天站点想要显示当前登录用户的列表。列表将动态反映用户的登录和注销状态的用户（无需重新加载页面）。</p> + +<pre class="brush: html notranslate"><ul id="roster" aria-live="polite" aria-relevant="additions removals"> + <!-- use JavaScript to add remove users here--> +</ul> +</pre> + +<p>ARIA 活动属性的细分：</p> + +<ul> + <li><code>aria-live="polite"</code> 指示屏幕阅读器应该等到用户空闲后再播报更新。这是最常用的值，因为用 <code>“assertive”</code> 值会打扰用户，打断他们的操作流程。</li> + <li><code>aria-atomic</code> 没有设置 (默认为 <code>false</code> ) ，这样就只能说出添加或删除的用户，而不是整个名单。</li> + <li><code>aria-relevant="additions removals"</code> 确保在在线名册中添加用户与移除用户的时候都会被播报。</li> +</ul> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles">ARIA 角色</a></li> +</ul> diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/index.html b/files/zh-cn/web/accessibility/aria/aria_techniques/index.html new file mode 100644 index 0000000000..2f704dff7f --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/aria_techniques/index.html @@ -0,0 +1,136 @@ +--- +title: ARIA techniques +slug: Web/Accessibility/ARIA/ARIA_Techniques +tags: + - ARIA + - Accessibility + - NeedsTranslation + - TopicStub +translation_of: Web/Accessibility/ARIA/ARIA_Techniques +--- +<h3 id="Roles">Roles</h3> + +<h4 id="Widget_roles">Widget roles</h4> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role" title="Using the alert role">Alert</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="Using the alertdialog role">Alertdialog</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="en/ARIA/ARIA_Techniques/Using_the_button_role">Button</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="en/ARIA/ARIA_Techniques/Using_the_checkbox_role">Checkbox</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="Using the dialog role">Dialog</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="en/ARIA/ARIA_Techniques/Using_the_link_role">Link</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="en/ARIA/ARIA_Techniques/Using_the_log_role">Log</a></li> + <li>Marquee</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radio</a></li> + <li>Scrollbar</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">Slider</a></li> + <li>Spinbutton</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">status</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li> + <li>Timer</li> + <li>Tooltip</li> +</ul> + +<h4 id="Composite_roles">Composite roles</h4> + +<p>The techniques below describes each composite role as well as their required and optional child roles.</p> + +<ul> + <li>Grid (including row, gridcell, rowheader, columnheader roles)</li> + <li>Menubar/ Menu (including menuitem, menuitemcheckbox, menuitemradio)</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox</a> (包含 option role)</li> + <li>Tablist (包含 tab 和 tabpanel roles)</li> + <li>Tree (including group and treeitem roles)</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radiogroup (see radio role)</a></li> + <li>Treegrid</li> +</ul> + +<h4 id="Document_structure_roles">Document structure roles</h4> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">Article</a></li> + <li>Definition</li> + <li>Directory</li> + <li>Document</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">Group</a></li> + <li>Heading</li> + <li>Img</li> + <li>List, listitem</li> + <li>Math</li> + <li>Note</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">Presentation</a></li> + <li>Region</li> + <li>Separator</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">Toolbar</a></li> +</ul> + +<h4 id="Landmark_roles">Landmark roles</h4> + +<ul> + <li>Application</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">Banner</a></li> + <li>Complementary</li> + <li>Contentinfo</li> + <li>Form</li> + <li>Main</li> + <li>Navigation</li> + <li>Search</li> +</ul> + +<h3 id="States_and_properties">States and properties</h3> + +<h4 id="Widget_attributes">Widget attributes</h4> + +<ul> + <li>aria-autocomplete</li> + <li>aria-checked</li> + <li>aria-disabled</li> + <li>aria-expanded</li> + <li>aria-haspopup</li> + <li>aria-hidden</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li> + <li>aria-level</li> + <li>aria-multiline</li> + <li>aria-multiselectable</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li> + <li>aria-pressed</li> + <li>aria-readonly</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li> + <li>aria-selected</li> + <li>aria-sort</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li> +</ul> + +<h4 id="Live_region_attributes">Live region attributes</h4> + +<ul> + <li>aria-live</li> + <li>aria-relevant</li> + <li>aria-atomic</li> + <li>aria-busy</li> +</ul> + +<h4 id="Drag_drop_attributes">Drag & drop attributes</h4> + +<ul> + <li>aria-dropeffect</li> + <li>aria-dragged</li> +</ul> + +<h4 id="Relationship_attributes">Relationship attributes</h4> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li> + <li>aria-controls</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li> + <li>aria-flowto</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li> + <li>aria-owns</li> + <li>aria-posinset</li> + <li>aria-setsize</li> +</ul> diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html new file mode 100644 index 0000000000..6f207e12d4 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html @@ -0,0 +1,59 @@ +--- +title: 使用 aria-label 属性 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +tags: + - ARIA + - 参考 + - 可访问性 +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +--- +<p>aria-label属性用来给当前元素加上的标签描述，接受字符串作为参数。是用不可视的方式给元素加label（如果被描述元素存在真实的描述元素，可使用 <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="Using the aria-labelledby attribute">aria-labelledby</a> 属性作为来绑定描述元素和被描述元素来代替）。</p> + +<p>aria-label属性可以用在任何典型的HTML元素中，并不需要配合特定的ARIA role才能使用。</p> + +<h3 class="editable" id="Value"><span>Value</span></h3> + +<p>string</p> + +<h3 class="editable" id="对于用户代理和辅助技术的可能影响">对于用户代理和辅助技术的可能影响</h3> + +<div class="editIcon" style=""> +<h3 class="editable" id="sect1"><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute?action=edit&sectionId=3" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> +</div> + +<div class="note"><strong>Note:</strong> 由于辅助技术处理这一技术的差异导致选项信息可能不同.以上所提供的信息只是其中可能的一种，而非一般情况。.</div> + +<h2 id="示例">示例</h2> + +<div id="section_5"> +<h4 id="示例1：多标签（Multiple_Labels）">示例1：多标签（Multiple Labels）</h4> + +<p>在下面的示例中，按钮（button）元素被定义为一个关闭（close）按钮，按钮中间有一个“X”字符。辅助软件并不能知道X是什么意思，所以需要aria-label标签来为辅助设备提供相应的标识来告诉它这个button是close的作用。</p> +</div> + +<pre class="deki-transform"><span class="tag"><button aria-label=<span class="str">"Close"</span> onclick=<span class="str">"myDialog.close()"</span>></span>X<span class="tag"></button></span> +</pre> + +<h3 id="说明：">说明： </h3> + +<p>最常见的对于标签的可访问性API就是可访问的name属性。</p> + +<h3 id="ARIA_roles的使用">ARIA roles的使用</h3> + +<p>基本标记中的全部元素。</p> + +<h3 id="ARIA_相关技术">ARIA 相关技术 </h3> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li> +</ul> + +<h3 id="兼容性">兼容性</h3> + +<p class="comment">有待讨论: 为通常的UA和AT产品组合提供支持信息。</p> + +<h3 id="额外资源">额外资源</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-label" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-label">WAI-ARIA specification for aria-label</a></li> +</ul> 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 new file mode 100644 index 0000000000..80be18aa54 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -0,0 +1,150 @@ +--- +title: Using the aria-labelledby attribute +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +--- +<h3 id="描述"><strong>描述</strong></h3> + +<p><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a>属性用来表明某些元素的id是某一对象的标签。它被用来确定控件或控件组与它们标签之间的联系。使用诸如屏幕阅读器等辅助技术的用户通常使用tabbing在页面的不同区域间进行导航。如果一个输入元素、控件或控件组没有被分配一个label标签，那么屏幕阅读器就无法对其进行阅读。</p> + +<p><code>aria-labelledby属性与</code><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a>属性非常相似: 用一个标签描述某一对象的本质，可能会提供一些用户需要了解的额外信息。</p> + +<p><code>aria-labelledby属性并不仅仅用于表单元素，也可以用来分配静态文本给控件、元素组、面板组以及包含标题和定义等内容的区域等。下方的示例将会展示如何针对这些情况运用这一属性的更多信息。</code></p> + +<p><code>aria-labelledby属性可以与HTML元素label联合使用，用于提高对于不支持ARIA技术的用户代理的兼容性。</code></p> + +<p>这一属性可以用于任何典型的HTML表单元素，不仅限于已分配ARIA role的元素。</p> + +<h3 id="值Value">值Value</h3> + +<p>一个以空格进行分割的元素ID列表。</p> + +<h3 id="对于用户代理和辅助技术的可能影响">对于用户代理和辅助技术的可能影响</h3> + +<p>当<code>aria-labelledby和</code><code><a href="/en/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a>都被使用时</code>, 用户代理在生成可访问的名称属性时将为<code>aria-labelledby分配更高的优先级。</code></p> + +<p><strong>注意:</strong> 由于不同的辅助技术对于这一技术的处理可能不同，以上提供的信息尽是诸多可能的一种，而非一般情况。</p> + +<h3 id="示例">示例</h3> + +<h4 id="示例1_多标签_Mutiple_Labels">示例1: 多标签 Mutiple Labels</h4> + +<p>在下面的示例中，每个输入域都被它自身的独立标签以及其所在组的标签进行了标识：</p> + +<pre><div id="billing">Billing Address</div> + +<div> + <div id="name">Name</div> + <input type="text" aria-labelledby="name billing"/> +</div> +<div> + <div id="address">Address</div> + <input type="text" aria-labelledby="address billing"/> +</div> +</pre> + +<h4 id="示例2_联结的标题和区域_Associating_Headings_With_Regions">示例2: 联结的标题和区域 Associating Headings With Regions</h4> + +<p>在下面的示例中，标题元素被与它们作为标题的内容联结在一起。注意，所参考的区域是包含标题元素的那个区域。</p> + +<pre><div role="main" aria-labelledby="foo"> + <h1 id="foo">Wild fires spread across the San Diego Hills</h1> + Strong winds expand fires ignited by high temperatures ... +</div> +</pre> + +<h4 id="示例3_单选组_Radio_Groups">示例3: 单选组 Radio Groups</h4> + +<p>在下面的示例中，单选组<a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radiogroup_role" title="Using the alert role">radiogroup</a>的容器通过一个aria-labeledby属性与他的的标签相联结：</p> + +<pre><div id="radio_label">My radio label</div> +<ul role="radiogroup" aria-labelledby="radio_label"> + <li role="radio">Item #1</li> + <li role="radio">Item #2</li> + <li role="radio">Item #3</li> +</ul> +</pre> + +<h4 id="示例4_对话框标签_Dialog_Label">示例4: 对话框标签 Dialog Label</h4> + +<p>在下面的示例中，标记对话框的标题元素通过aria-labeledby属性被引用</p> + +<pre><div role="dialog" aria-labelledby="dialogheader"> + <h2 id="dialogheader">Choose a File</h2> + ... Dialog contents +</div> +</pre> + +<h4 id="示例5_内联定义_Inline_Definition">示例5: 内联定义 Inline Definition</h4> + +<p>在下面的示例中，某一事物的被一个叙述性的自然流所描述的定义与这一事物本身通过<strong>aria-labeledby</strong>属性相联结：</p> + +<pre><p>The doctor explained it had been a <dfn id="placebo">placebo</dfn>, or <span role="definition" aria-labelledby="placebo"> +an inert preparation prescribed more for the mental relief of the patient than for its actual effect on a disorder.</span> +</p> +</pre> + +<h4 id="示例6_定义列表_Definition_Lists">示例6: 定义列表 Definition Lists</h4> + +<p>在下面的示例中，正式的定义列表中的定义与他们所定义的项目通过aria-labeledby属性相联结：</p> + +<pre><dl> + <dt id="anathema">anthema</dt> + <dd role="definition" aria-labelledby="anathema">a ban or curse solemnly pronounced by ecclesiastical authority + and accompanied by excommunication</dd> + <dd role="definition" aria-labelledby="anathema">a vigorous denunciation : cursor</dd> + + <dt id="homily">homily</dt> + <dd role="definition" aria-labelledby="homily">a usually short sermon</dd> + <dd role="definition" aria-labelledby="homily">a lecture or discourse on or of a moral theme</dd> + +</dl> +</pre> + +<h4 id="示例7_菜单">示例7: 菜单</h4> + +<p>在下面的示例中，一个<a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-haspopup_attribute" title="Using the aria-required attribute">popup menu</a>通过aria-labeledby属性与其标签相联结：</p> + +<pre><div role="menubar"> + <div role="menuitem" aria-haspopup="true" id="fileMenu">File</div> + <div role="menu" aria-labelledby="fileMenu"> + <div role="menuitem">Open</div> + <div role="menuitem">Save</div> + <div role="menuitem">Save as ...</div> + ... + </div> + ... +</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> + +<h3 id="Used_by_ARIA_roles">Used by ARIA roles</h3> + +<p>all elements of the base markup</p> + +<h3 id="Related_ARIA_techniques">Related ARIA techniques </h3> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">Using the aria-label attribute</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">Using the aria-describedby attribute</a></li> +</ul> + +<h3 id="Compatibility">Compatibility</h3> + +<p>TBD: Add support information for common UA and AT product combinations</p> + +<h3 id="Additional_resources">Additional resources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">WAI-ARIA specification for aria-labelledby</a></li> +</ul> diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_button_role/index.html b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_button_role/index.html new file mode 100644 index 0000000000..e0e35c449a --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_button_role/index.html @@ -0,0 +1,122 @@ +--- +title: Using the button role +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role +tags: + - ARIA + - 可访问性 + - 无障碍 +translation_of: Web/Accessibility/ARIA/Roles/button_role +--- +<p><strong><a href="https://www.w3.org/TR/wai-aria/roles#button">button</a></strong> 角色应该用于可单击的元素， 当用户激活时触发响应。 在其本身，<code>role="button"</code> 可以使任何元素 (e.g. {{HTMLElement("p")}}, {{HTMLElement("span")}} or {{HTMLElement("div")}}) 作为一个屏幕阅读器的按钮控件出现。此外，该角色还可以与 <code>aria-pressed</code> 属性组合使用，以创建切换按钮。</p> + +<div class="note"><strong>注意: </strong>在可能的情况下，建议使用原生HTML按钮 (<code><button></code>, <code><input type="button" /></code>, <code><input type="submit" />, <input type="reset" /> </code>and <code><input type="image" /></code>) 而不是按钮角色，因为原生HTML按钮得到了较老用户代理和辅助技术的广泛支持。原生HTML按钮也支持键盘和焦点需求，不需要额外的定制。</div> + +<h2 id="键盘_and_聚焦">键盘 and 聚焦</h2> + +<p>按钮是交互式控件，因此其本身是可聚焦的。如果<code>button</code> 角色被添加到一个自身不可聚焦的元素(such as <code><span></code>, <code><div></code> or <code><p></code>) 那么必须使用<code>tabindex</code> 属性来使按钮可聚焦。</p> + +<p>按钮可以由鼠标用户和键盘用户操作。 对于原生HTML <code><button></code> 元素 ，按钮的 <code>onclick</code> 事件会在鼠标单击和按下键盘的 <kbd>Space</kbd> or <kbd>Enter</kbd> 时被触发， 同时这个按钮处于聚焦状态。 但是如果使用其他标签来创建“自定义按钮”，那么<code>onclick</code>事件只会在点击鼠标光标时触发，即使使用<code>role="button"</code> 。因此，开发人员必须向元素添加一个单独的关键事件处理程序，以便在按下 <kbd>Space</kbd> or <kbd>Enter</kbd> 时触发按钮。</p> + +<p class="warning"><strong>Warning:</strong> 把给一个链接标记为按钮角色的链接时要谨慎。按钮将使用 <kbd>Space</kbd> or <kbd>Enter</kbd> 键触发，而链接被期望使用 <kbd>Enter</kbd> 键触发。 换句话说，当链接被用来作为按钮的时候，仅仅添加<code>role="button"</code>是不够的。还需要添加一个 key 事件处理程序来侦听 <kbd>Space</kbd> 键，以便与原生按钮保持一致。</p> + +<h2 id="可切换的按钮">可切换的按钮</h2> + +<p>使用<code>role="button"</code>的一个优点是它允许创建切换按钮。一个切换按钮可以有两个状态:pressed，not pressed。除了 <code>button</code>角色之外，按钮是否为切换按钮，也可以用<code>aria-pressed</code>的属性来表示。</p> + +<ul> + <li>如果没有 <code>aria-pressed</code>表明这不是一个切换按钮。</li> + <li>如果 <code>aria-pressed="false"</code> 表示这个按钮当前是 not pressed 的。</li> + <li>如果 <code><code>aria-pressed="true"</code></code> 表示这个按钮当前是 pressed 的。</li> + <li>如果 <code>aria-pressed="mixed"</code> 则认为按钮部分是 partially pressed 的。</li> +</ul> + +<h2 id="Labeling_buttons">Labeling buttons</h2> + +<p>按钮应该总是有一个可访问的名称。对于大多数按钮，这个名称将与按钮中的文本相同。在某些情况下，例如图标按钮，可通过 <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code> 或 <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> 属性提供可访问的名称。</p> + +<h2 id="对用户代理和辅助技术的可能影响">对用户代理和辅助技术的可能影响</h2> + +<p>当使用 <code>button</code> 角色时，用户代理应该将该元素公开为操作系统的易访问性API中的按钮控件。屏幕阅读器应该将元素声明为一个按钮并描述其可访问的名称。语音识别软件应该可以通过说："点击"+按钮的可访问的name 就能激活这个按钮。</p> + +<div class="note"><strong>Note:</strong> 关于辅助技术如何处理这种技术，意见可能有所不同。上面所提供的信息是其中之一，因此并非规范。</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="ARIA_Basic_Button">ARIA Basic Button</h3> + +<p>在下面的代码片段中，一个span元素已经被赋予了按钮角色。由于使用的是 <code><span></code> 元素，因此需要提供 <code>tabindex</code> 属性使按钮的可聚焦并成为tab顺序流中的一部分。注意，这段代码提供了CSS样式，以使 <code><span></code>元素看起来像一个按钮， <code>handleBtnClick</code> 和<code>handleBtnKeyPress</code> 是事件处理程序，当鼠标单击、 <kbd>Space</kbd> or <kbd>Enter</kbd> 被按下时，执行该按钮的操作。</p> + +<pre class="brush: html"><span role="button" tabindex="0" onclick="handleBtnClick()" onKeyPress="handleBtnKeyPress()">Save</span> +</pre> + +<h3 id="ARIA_Toggle_Button">ARIA Toggle Button</h3> + +<p>在这个片段中，使用 <code>button</code> 角色和 <code>aria-pressed</code> 属性，来将 <code><span></code> 元素转换为一个切换按钮，当按钮被激活时， <code>aria-pressed</code> 的值在true和false之间切换。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><button type="button" aria-pressed="false" onclick="handleBtnClick(event)"> + Native button toggle +</button> + +<span role="button" tabindex="0" + aria-pressed="false" onclick="handleBtnClick(event)" + onKeyPress="handleBtnKeyPress(event)"> + Span button toggle +</span></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">button, +[role="button"] { + padding: 3px; + border: 1px solid #CCC; +} + +button[aria-pressed="true"], +[role="button"][aria-pressed="true"] { + border: 2px solid #000; +} +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">function handleBtnClick(event) { + toggleButton(event.target); +} + +function handleBtnKeyPress(event) { + // Check to see if space or enter were pressed + if (event.key === " " || event.key === "Enter") { + // Prevent the default action to stop scrolling when space is pressed + event.preventDefault(); + toggleButton(event.target); + } +} + +function toggleButton(element) { + // Check to see if the button is pressed + var pressed = (element.getAttribute("aria-pressed") === "true"); + // Change aria-pressed to the opposite state + element.setAttribute("aria-pressed", !pressed); +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('ARIA_Toggle_Button')}}</p> + +<h2 id="Notes">Notes </h2> + +<h3 id="ARIA_attributes_used">ARIA attributes used</h3> + +<ul> + <li><code><a href="https://www.w3.org/TR/wai-aria/roles#button">button</a></code></li> + <li><code><a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed">aria-pressed</a></code></li> +</ul> + +<h3 id="Additional_resources">Additional resources</h3> + +<ul> + <li><a href="https://www.w3.org/TR/html5/dom.html#aria-usage-note">Strong native semantics in HTML5</a></li> + <li><a href="https://www.w3.org/TR/aria-in-html/">Notes on Using ARIA in HTML</a></li> +</ul> diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/使用aria-hidden属性/index.html b/files/zh-cn/web/accessibility/aria/aria_techniques/使用aria-hidden属性/index.html new file mode 100644 index 0000000000..8b7f706afa --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/aria_techniques/使用aria-hidden属性/index.html @@ -0,0 +1,94 @@ +--- +title: 使用aria-hidden属性 +slug: Web/Accessibility/ARIA/ARIA_Techniques/使用aria-hidden属性 +tags: + - HTML + - Rôle + - 代码脚本 + - 可访问性 + - 可访问的富网络应用 + - 客户端 + - 警告 +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute +--- +<p>{{draft}}</p> + +<p>本文用来说明如何使用aria-hidden属性。aria-hidden属性可以用来控制一系列可访问API中的非交互内容的显示或隐藏。</p> + +<h2 id="描述">描述</h2> + +<div class="summary"> +<p>把 <code>aria-hidden="true"</code> 加到元素上会把该元素和它的所有子元素从可访问性树上移除。这样做可以通过隐藏下列内容来提升使用辅助技术的用户体验：</p> + +<ul> + <li>纯装饰性的内容，如图标、图片</li> + <li>重复的内容，如重复的文本</li> + <li>屏幕外或被折叠的内容，如菜单</li> +</ul> + +<p>根据<a href="https://www.w3.org/TR/using-aria/#fourth">可访问性的第四条规则</a>，<code>aria-hidden="true"</code> 不应该被用在可聚焦的元素上。 而且，由于这个属性是可以被子元素继承的，它也不应该被用在可聚焦元素的父元素上。</p> + +<p>如果父元素带有 <code>aria-hidden="true"</code> ，那么即使使用 <code>aria-hidden="false"</code> 也无法将该元素显示出来。</p> +</div> + +<div class="blockIndicator warning"> +<p>WAI-ARIA Authoring Practices 1.1 提示 <code>aria-hidden="false"</code> 在现阶段 <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden">各个浏览器中表现不同</a>.</p> +</div> + +<h3 id="比较_aria-hiddentrue，_rolepresentation_和_rolenone">比较 <code>aria-hidden="true"</code>， <code>role="presentation"<font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #333333;"> 和 </span></font></code><code>role="none"</code></h3> + +<p>表面上，<code>aria-hidden="true"</code>，<code>role="presentation"</code>，和<code>role="none"</code> 很相似，因为这三者都有以下特性:</p> + +<ul> + <li>根据辅助即使隐藏页面内容</li> + <li>无法在可聚焦元素上使用</li> + <li>无法在可互动元素的父级元素上使用</li> +</ul> + +<p dir="ltr">尽管有上面这些相同点，但是各个属性的意图是不同的。</p> + +<ul dir="ltr"> + <li><code>aria-hidden="true"</code> 会把整个元素从可访问性API中移除</li> + <li><code>role="presentation"</code> 和<code>role="none"</code> 会将元素从语义上移除，仍然会将元素暴露给辅助技术。</li> +</ul> + +<p dir="ltr"></p> + +<h3 id="可选值">可选值</h3> + +<dl> + <dt><code>false</code></dt> + <dd>（默认）元素会暴露给可访问性API。</dd> + <dt><code>true</code></dt> + <dd>元素不会暴露给可访问性API。</dd> + <dt><code>undefined</code></dt> + <dd>（默认）客户端决定元素是否暴露给可访问性API。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"> <i class="icon" <code>aria-hidden="true" /></code> + </pre> + +<h2 id="无障碍问题">无障碍问题</h2> + +<h2 id="最佳实践">最佳实践</h2> + +<p> <code>aria-hidden="true"</code> 在以下场景不应该被使用:</p> + +<ul> + <li>HTML的<code>hidden</code>属性被设置了</li> + <li>祖先元素被<code>display: none</code>属性设置成不显示状态</li> + <li>祖先元素被<code>visibility: hidden</code>属性设置成不显示状态</li> +</ul> + +<p dir="ltr">在以上三个场景中，元素已经被隐藏，从可访问树种移除了，无需再添加<code>aria-hidden="true"</code>属性。</p> + +<h2 dir="ltr" id="技术规格">技术规格</h2> + +<h2 dir="ltr" id="另见">另见</h2> + +<ul dir="ltr"> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">使用展示角色</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_none_role">role="none"</a></li> +</ul> diff --git a/files/zh-cn/web/accessibility/aria/forms/alerts/index.html b/files/zh-cn/web/accessibility/aria/forms/alerts/index.html new file mode 100644 index 0000000000..485633647c --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/forms/alerts/index.html @@ -0,0 +1,143 @@ +--- +title: Alerts +slug: Web/Accessibility/ARIA/forms/alerts +translation_of: Web/Accessibility/ARIA/forms/alerts +--- +<h2 id="问题">问题</h2> + +<p>您有一个表单（例如联系表单），您希望将一些可访问的错误检查放入其中。 常见问题的示例包括无效的电子邮件地址，或至少不包含名字或姓氏的名称字段。</p> + +<h2 id="表单">表单</h2> + +<p>首先，请阅读有关<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints#Required_and_invalid_fields" title="/en/Web/Accessibility/ARIA/forms/Basic_form_hints"><code>aria-required</code> technique</a>所需的技术（如果您尚未这样做的话），因为该技术会以此为基础进行扩展。</p> + +<p>这是一个示例表单：</p> + +<pre class="brush: html notranslate"> <form method="post" action="post.php"> + <fieldset> + <legend>Please enter your contact details</legend> + <label for="name">Your name (required):</label> + <input name="name" id="name" aria-required="true"/> + <br /> + <label for="email">E-Mail address (required):</label> + <input name="email" id="email" aria-required="true"/> + <br /> + <label for="website">Website (optional):</label> + <input name="website" id="website"/> + </fieldset> + <label for="message">Please enter your message (required):</label> + <br /> + <textarea name="message" id="message" rows="5" cols="80" + aria-required="true"></textarea> + <br /> + <input type="submit" name="submit" value="Send message"/> + <input type="reset" name="reset" value="Reset form"/> + </form> +</pre> + +<h2 id="检查有效性并通知用户"><span>检查有效性并通知用户</span></h2> + +<p>表单有效性检验由这几个步骤组成：</p> + +<ol> + <li>检查电子邮件地址或输入的名称是否有效。 每个字段都有一组必须通过验证的标准。 为了简化此示例，我们将检查电子邮件地址是否包含“ @”符号，以及名称条目是否包含至少1个字符。</li> + <li>如果不满足上述条件，则该字段的<code>aria-invalid</code>属性将被赋予“ <code>true</code>”值。</li> + <li>如果不符合条件，用户将被通过警报来通知。 我们将使用简单的WAI-ARIA小部件来进行通知，而不是使用JavaScript的“<code>alert</code>”功能。 这会通知用户错误，但允许他们继续修改表单而不会失去焦点（由JavaScript默认的“<code>alert</code>”功能中的“ <code>onblur</code>”处理函数引起）。</li> +</ol> + +<p>下面是一个能够被插入在结束“ <code>head</code>”标签上方的示例JavaScript代码 </p> + +<pre class="brush: js notranslate"> <script type="application/javascript"> + function removeOldAlert() + { + var oldAlert = document.getElementById("alert"); + if (oldAlert){ + document.body.removeChild(oldAlert); + } + } + + function addAlert(aMsg) + { + removeOldAlert(); + var newAlert = document.createElement("div"); + newAlert.setAttribute("role", "alert"); + newAlert.setAttribute("id", "alert"); + var msg = document.createTextNode(aMsg); + newAlert.appendChild(msg); + document.body.appendChild(newAlert); + } + + function checkValidity(aID, aSearchTerm, aMsg) + { + var elem = document.getElementById(aID); + var invalid = (elem.value.indexOf(aSearchTerm) < 0); + if (invalid) { + elem.setAttribute("aria-invalid", "true"); + addAlert(aMsg); + } else { + elem.setAttribute("aria-invalid", "false"); + removeOldAlert(); + } + } + </script> +</pre> + +<h2 id="checkValidity_函数"><span class="mw-headline" id="The_checkValidity_function"><code>checkValidity</code> 函数</span></h2> + +<p>JavaScript中用于表单验证的主要方法是<code>checkValidity</code>函数。 此方法采用三个参数：要验证的<code>输入</code>的ID，要确保有效性的搜索项，以及要插入警报中的错误消息。</p> + +<p>要查看其是否有效，该函数将检查<code>输入</code>的<code>indexOf</code>值是否大于<code>-1</code>。 如果在值内找不到搜索词的索引，则返回<code>-1</code>或更小的值。</p> + +<p>如果无效，这个函数会执行这两个事情：</p> + +<ol> + <li>它会把这个字段的<code>aria-invalid</code>属性设置为“<code>true</code>”，指示用户那里有无效的内容。</li> + <li>它会调用<code>addAlert</code>函数来使用给定的错误信息添加警告。</li> +</ol> + +<p>如果搜索词被找到，<code>aria-invalid</code>值会被重置为“<code>false</code>”。此外，所有剩余警告都将被删除。</p> + +<h2 id="addAlert_函数"><span class="mw-headline" id="The_addAlert_function"><code>addAlert</code> 函数</span></h2> + +<p>此功能首先删除所有旧警报。 该函数很简单：它查找ID为“<code>alert</code>”的元素，如果找到，则将其从<a href="https://wiki.developer.mozilla.org/zh_CN/docs/Mozilla/Tech/XUL/Tutorial/Document_Object_Model">文档对象模型</a>中删除。</p> + +<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">接下来，这个函数创建一个</span></font><code>div</code>元素来保存警告文本。 它得到了一个 “<code>alert</code>”的ID.，并且它具有“<code>alert</code>”角色集。 这实际上是受ARIA启发的，即使它在属性名称中没有标明“aria”。 这是因为该角色基于<a href="http://www.w3.org/TR/xhtml-role/">XHTML角色属性模块</a>，为简单起见，该模块简单地移植到HTML。</p> + +<p>这些文字被加入这个<code>div</code>元素，然后这个<code>div</code>元素被加入文档。</p> + +<p>发生这种情况时，当此<code>div</code>出现时，Firefox将向辅助技术触发“警报”事件。 大多数屏幕阅读器都会自动选择并说出来。 这类似于Firefox中的提示栏，提示您是否要保存密码。 我们刚刚创建的警报没有任何可按的按钮，只是告诉我们出了什么问题。</p> + +<h2 id="修改“onblur”_事件"><span class="mw-headline" id="Adding_the_magic_to_the_.E2.80.9Conblur.E2.80.9D_event">修改“<code>onblur</code>” 事件</span></h2> + +<p>现在剩下的就是添加事件处理程序。 我们需要为此更改电子邮件和名称的两个输入：</p> + +<pre class="brush: html notranslate"> <input name="name" id="name" aria-required="true" + onblur="checkValidity('name', ' ', 'Invalid name entered!');"/> + <br /> + <input name="email" id="email" aria-required="true" + onblur="checkValidity('email', '@', 'Invalid e-mail address');"/> +</pre> + +<p><strong>测试示例</strong></p> + +<p>如果你在使用Firefox 3和一个当前支持的屏幕阅读器，试试看下面的操作：</p> + +<ol> + <li>在姓名输入框中，只输入你的名。按下Tab键时，您会听到警告，提示您输入了无效的姓名。 然后，您可以向后移Tab键并更正错误。</li> + <li>输入不带“ @”符号的电子邮件地址。 跳出此字段时，您应该听到一条警告，提示您未输入有效的电子邮件地址。</li> +</ol> + +<p>在两种情况下，当将焦点返回到相关字段时，您的屏幕阅读器应该告诉您该字段无效。 JAWS 9 支持这个功能，但是JAWS 8不支持，所以这个功能不一定能够在所有版本的支持的屏幕阅读器中正常工作。</p> + +<h2 id="您可能遇到的一些问题"><span class="mw-headline" id="A_few_questions_that_you_might_have">您可能遇到的一些问题</span></h2> + +<dl> + <dt> + <p>Q. 为什么在某些输入中同时在标签文本和“<code>aria-required</code>”属性中都添加了“<code>(required)</code>”？</p> + </dt> + <dd>A. 如果这是一个实例中的表格，并且尚不支持ARIA的浏览器正在访问该网站，我们仍然希望表明这是必填字段。</dd> + <dt>Q. 为什么不将焦点自动设置回无效字段？</dt> + <dd>A. 因为Windows API规范（可能还有其他规范）不允许这样做。 同样，让焦点在没有实际用户交互的情况下过于频繁地跳动通常也不是一件好事。</dd> +</dl> + +<div class="warning">TBD:<span>让我们重新考虑一下-就个人而言，我认为如果不引起键盘陷阱，设置焦点可能会很好。</span></div> diff --git a/files/zh-cn/web/accessibility/aria/forms/index.html b/files/zh-cn/web/accessibility/aria/forms/index.html new file mode 100644 index 0000000000..a7deb829f0 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/forms/index.html @@ -0,0 +1,16 @@ +--- +title: Forms +slug: Web/Accessibility/ARIA/forms +translation_of: Web/Accessibility/ARIA/forms +--- +<p>The following pages provide various techniques for improving the accessibility of web forms:</p> + +<p>接下来的网页会为web表单技术的人提供一系列的知识：</p> + +<ul> + <li><a href="/en/Accessibility/ARIA/Basic_form_hints" title="Basic form hints">Basic form hints</a>: Adding hints and descriptions for invalid or required fields</li> + <li><a href="/en/Accessibility/ARIA/forms/alerts" title="alerts">Alerts</a>: Using alerts to provide client-side validation error messages</li> + <li><a href="/en/Accessibility/ARIA/forms/Multipart_labels" title="https://developer.mozilla.org/en/aria/forms/Multipart_labels">Multi-part labels</a>: Enabling complex form labels with a control inside each label</li> +</ul> + +<p>See also the <a class="external" href="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html" title="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html">Yahoo! article on form validation and ARIA</a>, covering much of the same content.</p> diff --git a/files/zh-cn/web/accessibility/aria/index.html b/files/zh-cn/web/accessibility/aria/index.html new file mode 100644 index 0000000000..da650a78f6 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/index.html @@ -0,0 +1,177 @@ +--- +title: ARIA +slug: Web/Accessibility/ARIA +tags: + - ARIA + - Accessibility + - NeedsTranslation + - TopicStub +translation_of: Web/Accessibility/ARIA +--- +<p>Accessible Rich Internet Applications <strong>(ARIA)</strong> 是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用（特别是那些由JavaScript 开发的）的一套机制。</p> + +<p>ARIA是对超文本标记语言（HTML ）的补充，以便在没有其他机制的情况下，使得应用程序中常用的交互和小部件可以传递给辅助交互技术。例如，ARIA支持HTML4中的可访问导航地标、JavaScript小部件、表单提示和错误消息、实时内容更新等。</p> + +<p>ARIA 是一组特殊的易用性属性，可以添加到任意标签上，尤其适用于 HTML。role 属性定义了对象的通用类型（例如文章、警告，或幻灯片）。额外的 ARIA 属性提供了其他有用的特性，例如表单的描述或进度条的当前值。</p> + +<p>ARIA 在大多数流行的浏览器和屏幕阅读器中得到了实现。尽管如此，实现方式有所不同，而且旧的技术对其支持不好（或者不支持）。使用可以优雅降级的“安全的” ARIA，或者要求用户升级使用新的技术。</p> + +<div class="blockIndicator warning"> +<p>这些小部件中的许多后来被合并到HTML5中，如果存在这样的元素，<strong>开发人员应该更倾向使用对应的语义化HTML元素，而不是使用ARIA</strong>。例如，原生元素具有内置的<a href="https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">键盘可访问性</a>、角色和状态。但是，如果您选择使用ARIA，您有责任在脚本中模仿(等效的)浏览器行为。</p> +</div> + +<p>下面是一段进度条组件的代码：</p> + +<pre class="brush: html notranslate"><code><div id="percent-loaded" role="progressbar" aria-valuenow="75" + aria-valuemin="0" aria-valuemax="100" /></code> +</pre> + +<p>由于这个滚动条是用<code><div></code>写的，没有字面含义。然而，对开发者来说，在HTML4中，又没有更多的语义化的标签，所以我们需要引入ARIA这个角色和属性，这些是通过向元素添加属性来指定的。举个例子，<code>role="progressbar"</code>这个属性告诉浏览器，该元素其实是一个JavaScript实现的进度条组件。<code>aria-valuemin </code>和<code>aria-valuemax</code> 属性表明了进度条的最小值和最大值。 <code>aria-valuenow</code>则描述了当前进度条的状态， 因此它得用JavaScript来更新。</p> + +<p>除了直接给标签加属性，还可以通过JavaScript代码把ARIA属性添加到元素并动态地更新，如下面所示：</p> + +<pre class="brush: js notranslate"><code>// Find the progress bar <div> in the DOM. + var progressBar = document.getElementById("percent-loaded");</code> + +<code>// Set its ARIA roles and states, +// so that assistive technologies know what kind of widget it is.</code> + progressBar.setAttribute("role", "progressbar"); + progressBar.setAttribute("aria-valuemin", 0); + progressBar.setAttribute("aria-valuemax", 100); + +// Create a function that can be called at any time to update +// the value of the progress bar. + function updateProgress(percentComplete) { + progressBar.setAttribute("aria-valuenow", percentComplete); + } + +</pre> + +<div class="note"> +<p>注意由于ARIA是在HTML4之后引入的，所以在HTML4或XTHML中没有提供验证。然而，它提供的可访问性收益远远超过任何技术上的无效性。</p> + +<p>在HTML5中，所有的ARIA属性都是有效的。新的标记元素（<code><main></code>, <code><header></code>, <code><nav></code>等）都已具有了ARIA角色，所以就没必要再标注说明了。</p> +</div> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h3 id="Documentation" name="Documentation">ARIA 入门</h3> + + <dl> + <dt><a href="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="An overview of accessible web applications and widgets">ARIA 介绍</a></dt> + <dd>关于借助 ARIA 使得动态内容可访问的快速介绍。也可参考经典的 <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/" title="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA 介绍 - Gez Lemon</a>，2008 年。</dd> + <dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ" title="https://developer.mozilla.org/en-US/docs/Accessibility/Web_applications_and_ARIA_FAQ">Web 应用与 ARIA FAQ</a></dt> + <dd>解答关于WAI-ARIA的问题并且解释为什么网站需要ARIA。</dd> + <dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/" title="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">在视频频和屏幕阅读器使用 ARIA</a></dt> + <dd>从网上看到真实和简单的例子，包括“before”和“after”ARIA视频。</dd> + <dt><a class="external" href="http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html">在 HTML 使用 ARIA</a></dt> + <dd>A practical guide for developers. It suggests what ARIA attributes to use on HTML elements. Suggestions are based on implementation realities.一份为开发人员提供实用指南。它建议一些基于基于执行的在HTML元素上使用哪些ARIA属性。</dd> + </dl> + + <h3 id="ARIA_初级进阶">ARIA 初级进阶</h3> + + <dl> + <dt><a class="external" href="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/" rel="external" title="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/">通过ARIA标签增强页面导航</a></dt> + <dd>A nice intro to using ARIA landmarks to improve web page navigation for screen reader users. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external" title="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">See also, ARIA landmark implementation notes</a> and examples on real sites (updated as of July '11).</dd> + <dt><a href="/en-US/docs/ARIA/forms" rel="internal" title="/en-US/docs/ARIA/forms">提高表单可访问性</a></dt> + <dd>ARIA is not just for dynamic content! Learn how to improve accessibility of HTML forms using additional ARIA attributes. </dd> + <dt><a class="external" href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" rel="external" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">ARIA 活动区域 </a></dt> + <dd>活动区域为屏幕阅读器提供关于如何处理一个页面内容变更的建议。</dd> + <dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm" rel="external" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">用ARIA 活动区域去通知内容的改变</a></dt> + <dd>A quick summary of live regions, by the makers of JAWS screen reader software. Note that live regions are also supported by NVDA in Firefox, and VoiceOver with Safari (as of OS X Lion and iOS 5).</dd> + </dl> + + <h3 id="ARIA_与脚本组件">ARIA 与脚本组件</h3> + + <dl> + <dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">键盘导航与组件焦点</a></dt> + <dd>The first step in developing an accessible JavaScript widget is to make it keyboard navigable. This article steps through the process. The <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/" title="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">Yahoo! focus management article</a> is a great resource as well.</dd> + <dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/" title="http://dev.aol.com/dhtml_style_guide">Style Guide for Keyboard Navigation</a></dt> + <dd>A challenge with ARIA is getting developers to implement consistent behavior -- clearly best for users. This style guide describes the keyboard interface for common widgets.</dd> + </dl> + + <h3 id="ARIA_资源">ARIA 资源</h3> + + <dl> + <dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview" title="en-US/docs/aria/widgets/overview">Widget Techniques, Tutorials, and Examples</a></dt> + <dd>Need a slider, a menu, or another kind of widget? Find resources here.</dd> + <dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">ARIA-Enabled JavaScript UI Libraries</a></dt> + <dd>If you're starting a new project, choose a UI widget library with ARIA support already built-in. Warning: this is from 2009 -- content should be moved to an MDN page where it can be updated.</dd> + <dt><a class="external" href="http://dl.dropbox.com/u/573324/CSUN2012/index.html" title="http://dl.dropbox.com/u/573324/CSUN2012/index.html">Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 Workshop Materials</a></dt> + <dd>Includes slide presentations and examples.</dd> + </dl> + </td> + <td> + <h3 id="Community" name="Community">邮件列表</h3> + + <dl> + <dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria" title="https://groups.google.com/forum/#!forum/free-aria">Free ARIA Google Group</a></dt> + <dd>A place to ask questions about ARIA, as well as make suggestions for improving the ARIA documentation found on these pages.</dd> + </dl> + + <h3 id="Community" name="Community">博客</h3> + + <p>ARIA information on blogs tends to get out of date quickly. Still, there is some great info out there from other developers making ARIA work today.</p> + + <p><a class="external" href="http://www.paciellogroup.com/blog/category/wai-aria/" title="http://www.paciellogroup.com/blog/category/wai-aria/">Paciello Group</a></p> + + <p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/" title="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p> + + <p><a class="external" href="http://yaccessibilityblog.com/library/category/code/aria" title="http://yaccessibilityblog.com/library/category/code/aria">Yahoo! Accessibility</a></p> + + <h3 id="提交_Bug">提交 Bug</h3> + + <p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">File ARIA bugs on browsers, screen readers, and JavaScript libraries</a>.</p> + + <h3 id="示例">示例</h3> + + <dl> + <dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases" title="en-US/docs/ARIA/examples">ARIA 示例库</a></dt> + <dd>A set of barebones example files which are easy to learn from.</dd> + <dt><span class="external">可访问的 JS 组件库演示</span></dt> + <dd><a class="external" href="http://dojotoolkit.org/widgets" title="http://dojotoolkit.org/widgets">Dojo</a>, <a class="external" href="http://hanshillen.github.com/jqtest/" title="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://wiki.fluidproject.org/display/fluid/Components" title="http://wiki.fluidproject.org/display/fluid/Components">Fluid</a>, <a class="external" href="http://yuilibrary.com/gallery/" title="http://yuilibrary.com/gallery/">YUI</a></dd> + </dl> + + <dl> + <dt><a class="external" href="http://mail.yahoo.com" title="http://mail.yahoo.com">Yahoo! 邮箱</a></dt> + <dd>Yahoo! puts it all together with Yahoo! Mail, a web app that almost looks like a native app. It works very well. As a <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/" title="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">review of Yahoo! Mail</a> by screen reader Marco Zehe says, "Keep up the good work!".</dd> + </dl> + + <dl> + <dt><a class="external" href="http://search.yahoo.com" title="http://search.yahoo.com">Yahoo! 搜索</a></dt> + <dd>Yahoo! has done an amazing job of advancing ARIA here, by exercising ARIA's full capabilities and <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/" title="http://ycorpblog.com/2011/03/23/searchdirect/">sharing their techniques</a>. Yahoo! Search uses a combination of ARIA landmarks, live regions, and widgets.</dd> + </dl> + + <h3 id="规范特性">规范特性</h3> + + <dl> + <dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA Activities Overview at W3C</a></dt> + <dd>Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)</dd> + <dt><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></dt> + <dd>The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.</dd> + <dt><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/" title="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt> + <dd>Like the W3C WAI-ARIA specification, the official best practices represents a future ideal -- a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.<br> + <br> + For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.</dd> + <dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility" title="http://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt> + <dd>The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.</dd> + <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">Under Construction: WCAG 2.0 ARIA Techniques</a></dt> + <dd>The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is mostly important when regulations or policies are based on WCAG.</dd> + </dl> + </td> + </tr> + </tbody> + <tbody> + <tr> + <td colspan="2"> + <h3 id="Related_Topics" name="Related_Topics">相关主题</h3> + + <dl> + <dd><a href="/en-US/docs/Accessibility" title="en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> |