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/learn/accessibility | |
| 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/learn/accessibility')
8 files changed, 2397 insertions, 0 deletions
diff --git a/files/zh-cn/learn/accessibility/accessibility_troubleshooting/index.html b/files/zh-cn/learn/accessibility/accessibility_troubleshooting/index.html new file mode 100644 index 0000000000..c7fdf045ba --- /dev/null +++ b/files/zh-cn/learn/accessibility/accessibility_troubleshooting/index.html @@ -0,0 +1,101 @@ +--- +title: 'Assessment: Accessibility troubleshooting' +slug: learn/Accessibility/Accessibility_troubleshooting +translation_of: Learn/Accessibility/Accessibility_troubleshooting +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div> + +<p class="summary">In the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">先决条件:</th> + <td>基础的计算机知识，对HTML,CSS和JavaScript有基础的理解，理解<a href="/zh-CN/docs/Learn/Accessibility">本课程的前期内容</a>。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>理解可访问性的基础知识。</td> + </tr> + </tbody> +</table> + +<h2 id="开始之前">开始之前</h2> + +<p>To get this assessment started, you should go and grab the <a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">ZIP containing the files that comprise the example</a>. Decompress the contents into a new directory somewhere on your local computer.</p> + +<p>The finished assessment site should look like so:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p> + +<p>You will see some differences/issues with the display of the starting state of the assessment — this is mainly due to the differences in the markup, which in turn cause some styling issues as the CSS is not applied properly. Don't worry — you'll be fixing these problems in the upcoming sections!</p> + +<h2 id="项目简要">项目简要</h2> + +<p>For this project, you are presented with a fictional nature site displaying a "factual" article about bears. As it stands, it has a number of accessibility issues — your task is to explore the existing site and fix them to the best of your abilities, answering the questions given below.</p> + +<h3 id="颜色">颜色</h3> + +<p>The text is difficult to read because of the current color scheme. Can you do a test of the current color contrast (text/background), report the results of the test, and then fix it by changing the assigned colors?</p> + +<h3 id="Semantic_HTML">Semantic HTML</h3> + +<ol> + <li>The content is still not very accessible — report on what happens when you try to navigate it using a screenreader.</li> + <li>Can you update the article text to make it easier for screenreader users to navigate?</li> + <li>The navigation menu part of the site (wrapped in <code><div class="nav"></div></code>) could be made more accessible by putting it in a proper HTML5 semantic element. Which one should it be updated to? Make the update.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: You'll need to update the CSS rule selectors that style the <font> tags to their proper equivalents for the semantic headings. Once you add paragraph elements, you'll notice the styling looking better.</font></p> +</div> + +<h3 id="The_images"><font>The images</font></h3> + +<p><font>The images are currently inaccessible to screenreader users. Can you fix this?</font></p> + +<h3 id="The_audio_player"><font>The audio player </font></h3> + +<ol> + <li><font>The <code><audio></code> player isn't accessible to hearing impaired (deaf) people — can you add some kind of accessible alternative for these users?</font></li> + <li><font>The <code><audio></code> player isn't accessible to those using older browsers that don't support HTML5 audio. How can you allow them to still access the audio?</font></li> +</ol> + +<h3 id="The_forms"><font>The forms</font></h3> + +<ol> + <li><font>The <code><input></code> element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users. How can you add a label that is only accessible to screenreaders?</font></li> + <li><font>The two <code><input></code> elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this? Note that you'll need to update some of the CSS rule as well.</font></li> +</ol> + +<h3 id="The_showhide_comment_control"><font>The show/hide comment control</font></h3> + +<p><font>The show/hide comment control button is not current keyboard-accessible. Can you make it keyboard accessible, both in terms of focusing it using the tab key, and activating it using the return key?</font></p> + +<h3 id="The_table"><font>The table</font></h3> + +<p><font>The data table is not currently very accessible — it is hard for screenreader users to associate data rows and columns together, and the table also has no kind of summary to make it clear what it shows. Can you add some features to your HTML to fix this problem?</font></p> + +<h3 id="Other_considerations"><font>Other considerations?</font></h3> + +<p><font>Can you list two more ideas for improvements that would make the website more accessible?</font></p> + +<h2 id="Assessment"><font>Assessment</font></h2> + +<p><font>If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the </font><a href="https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691">discussion thread for this exercise</a><font>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Try the exercise first — there is nothing to be gained by cheating!</font></p> + +<p><font>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</font></p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> +</ul> diff --git a/files/zh-cn/learn/accessibility/css和javascript/index.html b/files/zh-cn/learn/accessibility/css和javascript/index.html new file mode 100644 index 0000000000..bdc3b01b2e --- /dev/null +++ b/files/zh-cn/learn/accessibility/css和javascript/index.html @@ -0,0 +1,367 @@ +--- +title: CSS 和 JavaScript 无障碍最佳实践 +slug: learn/Accessibility/CSS和JavaScript +tags: + - CSS + - hiding + - unobtursive + - 初学者 + - 对比 + - 导航 + - 文章 + - 无障碍 + - 编码脚本 + - 颜色 +translation_of: Learn/Accessibility/CSS_and_JavaScript +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> + +<p class="summary">当CSS和JavaScript使用得当，很有可能改善Web访问体验，相反如果滥用的话，则会极大的损害可访问性。本文概述了一些应该被考虑的CSS和JavaScript 的最佳实践，这些实践保证了即使是复杂的内容也可以尽可能容易的被访问。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">准备：</th> + <td> + <p>基本的计算机读写能力，对HTML、CSS和JavaScript的基本理解，以及对<a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility">可访问性</a>的理解。</p> + </td> + </tr> + <tr> + <th scope="row">目标：</th> + <td>熟悉在 Web 文档中适当地使用 CSS 和 JavaScript,以最大限度地提高可访问性,并且不损害它。</td> + </tr> + </tbody> +</table> + +<h2 id="CSS和JavaScript是可访问的吗？">CSS和JavaScript是可访问的吗？</h2> + +<p>CSS和JavaScript对于作为HTML的可访问性没有直接的重要性，但是它们仍然能够帮助或破坏可访问性，这取决于它们是如何使用的。换句话说，重要的是考虑一些最佳实践建议，以确保使用CSS和JavaScript不会破坏文档的可访问性。</p> + +<h2 id="CSS">CSS</h2> + +<p>让我们从CSS开始吧！</p> + +<h3 id="正确的语义和用户期望">正确的语义和用户期望</h3> + +<p>可以使用 CSS 使任何 HTML 元素看起来像任何东西,但这并不意味着您应该这样做。正如我们经常提到的<a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a>,您应该尽可能为作业使用适当的语义元素。如果不这样做,它可能会导致混乱和可用性问题,对每个人,尤其是残障用户。使用正确的语义与用户期望有很大的帮助 –– 元素的外观和功能会根据它们的功能进行某些方式的显示,而且用户期望这些常见的约定。</p> + +<p>例如,如果开发人员没有适当地使用标题元素标记内容,则屏幕阅读器用户无法通过标题元素导航页面。同样,如果对标题进行样式设置,则标题将失去其视觉目的,使其看起来不像标题。</p> + +<p>经验法则是,您可以更新页面功能的样式以适应您的设计,但不要更改它太多,使其不再按预期的外观或活动。以下各节总结了要考虑的主要 HTML 功能。</p> + +<h4 id="“标准”的内容结构">“标准”的内容结构</h4> + +<p>标题、段落、列表和页面的核心文本内容:</p> + +<pre class="brush: html notranslate"><h1>Heading</h1> + +<p>Paragraph</p> + +<ul> + <li>My list</li> + <li>has two items.</li> +</ul></pre> + +<p>一些典型的 CSS 如下所示:</p> + +<pre class="brush: css notranslate">h1 { + font-size: 5rem; +} + +p, li { + line-height: 1.5; + font-size: 1.6rem; +}</pre> + +<p>你应该：</p> + +<ul> + <li>选择合理的字体大小、行高、字母间距等,使文本具有逻辑性、清晰性和阅读舒适性。</li> + <li>确保标题从正文文本中脱颖而出,通常像默认样式一样大而粗壮。您的列表应类似于列表。</li> + <li>文本颜色应与背景颜色形成良好对比。</li> +</ul> + +<p>有关详细信息,请参阅 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>和<a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a> 。</p> + +<h4 id="强调的文本">强调的文本</h4> + +<p>内联标记,赋予其包裹的文本特别强调:</p> + +<pre class="brush: html notranslate"><p>The water is <em>very hot</em>.</p> + +<p>Water droplets collecting on surfaces is called <strong>condensation</strong>.</p></pre> + +<p>您可能希望向强调的文本添加一些简单的颜色:</p> + +<pre class="brush: css notranslate">strong, em { + color: #a60000; +}</pre> + +<p>但是,您很少需要以任何显著的方式设置强调元素的样式。粗体和斜体文本的标准约定非常容易识别,更改样式可能会导致混淆。有关强调的更多信息,请参阅<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Emphasis and importance</a>。</p> + +<h4 id="缩写">缩写</h4> + +<p>允许缩写、首字母缩略词或初始化与其扩展关联的元素:</p> + +<pre class="brush: html notranslate"><p>Web content is marked up using <abbr title="Hypertext Markup Language">HTML</abbr>.</p></pre> + +<p>同样,您可能希望以某种简单方式设置样式:</p> + +<pre class="brush: css notranslate">abbr { + color: #a60000; +}</pre> + +<p>缩写的公认样式约定是虚线下划线,偏离这一原则明显是不明智的。有关缩写的更多,请参阅<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">Abbreviations</a>。</p> + +<h4 id="链接">链接</h4> + +<p>超链接 — 您到达新网站的方式:</p> + +<pre class="brush: html notranslate"><p>Visit the <a href="https://www.mozilla.org">Mozilla homepage</a>.</p></pre> + +<p>一些非常简单的链接样式如下所示:</p> + +<pre class="brush: css notranslate">a { + color: #ff0000; +} + +a:hover, a:visited, a:focus { + color: #a60000; + text-decoration: none; +} + +a:active { + color: #000000; + background-color: #a60000; +}</pre> + +<p>标准链接约定为下划线,标准状态为不同颜色(默认:蓝色),以前访问过链接时另一种颜色变化(默认:紫色),以及激活链接时的另一种颜色(默认:红色)。此外,当链接被鼠标悬停时,鼠标指针将变为指针图标,并且链接在聚焦(例如通过 tabbing)或激活时变成高亮。下图显示了 Firefox(虚线轮廓)和 Chrome(蓝色轮廓)中的高光:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14371/focus-highlight-firefox.png" style="display: block; height: 173px; margin: 0px auto; width: 319px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14369/focus-highlight-chrome.png" style="display: block; height: 169px; margin: 0px auto; width: 309px;"></p> + +<p>您可以使用链接样式进行创意,只要用户在与链接交互时不断提供反馈即可。当状态发生变化时,确实应该发生某些情况,并且不应删除指针光标或大纲 - 对于使用键盘控件的人来说,两者都是非常重要的辅助功能。</p> + +<h4 id="表单元素">表单元素</h4> + +<p>允许用户将数据输入到网站的元素:</p> + +<pre class="brush: html notranslate"><div> + <label for="name">Enter your name</label> + <input type="text" id="name" name="name"> +</div></pre> + +<p>您可以在我们的<a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">form-css.html</a> 示例中看到一些很好的示例 CSS(<a href="http://mdn.github.io/learning-area/accessibility/css/form-css.html">查看示例</a>)。</p> + +<p>您将为表单编写的大多数 CSS 将用于调整元素大小、排列标签和输入,以及让它们看起来整洁。</p> + +<p>但是,您不应过多偏离元素在聚焦时接收的预期视觉反馈表单,这与链接基本相同(见上文)。您可以设置焦点/悬停状态样式,使这种行为在浏览器中更加一致,或者更适合您的页面设计,但不要完全摆脱它 ––同样,人们依靠这些线索来帮助他们了解发生了什么。</p> + +<h4 id="表格">表格</h4> + +<p>用于显示表格数据的表。</p> + +<p>您可以在<a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html">table-css.html</a>示例中看到表 HTML 和 CSS 的一个很好的简单示例(<a href="http://mdn.github.io/learning-area/accessibility/css/table-css.html">查看示例</a>)。</p> + +<p>表 的CSS 通常使表更适合您的设计,看起来不那么难看。最好确保表标题醒目(通常使用粗体),并使用斑马条带化使不同的行更易于解析。</p> + +<h3 id="颜色和颜色对比度">颜色和颜色对比度</h3> + +<p>为网站选择配色方案时,请确保文本(前景)颜色与背景颜色对比度良好。您的设计可能看起来很酷,但如果有视觉障碍(如色盲)的人无法阅读您的内容,则设计就无一好可做。</p> + +<p>有一个简单的方法来检查您的对比度是否足够大,不会引起问题。有许多对比检查工具可以在线输入您的前景和背景颜色,以检查它们。例如,WebAIM 的颜色对比度检查器易于使用,并说明了您需要满足有关颜色对比度的 WCAG 标准的内容。</p> + +<div class="note"> +<p><strong>注意：</strong>高对比度还允许任何使用带有光面屏幕的智能手机或平板电脑的人在明亮的环境中(如阳光)更好地阅读页面。</p> +</div> + +<p>另一个提示是不要仅仅依靠颜色来提供路标/信息,因为对于那些看不到颜色的人来说,这没有什么用。例如,不要用红色标记所需的表单字段,而是用星号和红色标记它们。</p> + +<h3 id="隐藏的东西">隐藏的东西</h3> + +<p>在很多情况下,可视化设计需要并非同时显示所有内容。例如,在我们的<a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Tabbed info box example</a> (请参阅<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">源码</a>),我们有三个信息面板,但我们将它们放在彼此之上,并提供可以单击以显示每个选项卡的选项卡(也可以使用键盘 - 您也可以使用 Tab 和 Enter/Return以选择它们)。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> + +<p>屏幕阅读器用户并不关心这些内容 , 只要资源的顺序有意义,他们就对内容感到满意, 并且他们可以获得所有内容。绝对定位(如本示例所示)通常被视为隐藏内容以进行视觉效果的最佳机制之一,因为它不会阻止屏幕阅读器访问它。</p> + +<p>另一方面,不应使用 {{cssxref("visibility")}}<code>:hidden</code>或 {{cssxref("display")}}<code>:none</code>,因为它们会隐藏屏幕阅读器中的内容。当然,除非您希望从屏幕阅读器中隐藏此内容,这是有充分理由的。</p> + +<div class="note"> +<p><strong>注意：</strong><span class="subtitle"><a href="http://webaim.org/techniques/css/invisiblecontent/">Invisible Content Just for Screen Reader Users</a></span>有围绕本主题的更多有用详细信息。</p> +</div> + +<h3 id="接受用户覆盖样式">接受用户覆盖样式</h3> + +<h4 id="接受用户覆盖您的样式">接受用户覆盖您的样式</h4> + +<p>用户可以使用自己的自定义样式覆盖样式,例如:</p> + +<ul> + <li>请参阅 Sarah Maddox 的<a class="external external-icon" href="https://www.itsupportguides.com/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/" rel="noopener">How to use a custom style sheet (CSS) with Firefox</a> 以获得有用的指南（介绍了如何在 Firefox 中手动执行此操作），以及Adrian Gordon的<a href="https://www.itsupportguides.com/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/">How to use a custom style sheet (CSS) with Internet Explorer</a>是介绍关于 IE 浏览器类似文章。</li> + <li>使用扩展程序可能更容易,例如,时尚扩展适用于 <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/">Firefox</a>、<a href="https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45">Safari</a>、<a href="https://addons.opera.com/en/extensions/details/stylish/">Opera</a> 和 <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe">Chrome</a>。</li> +</ul> + +<p>用户可能出于各种原因执行此操作。视力受损的用户可能希望使其访问的所有网站上的文本变大，严重色缺乏（severe color difeciency）的用户可能希望将所有网站置于易于查看的高对比度颜色中。无论需要什么，您都应该对此感到满意，并使您的设计足够灵，以便此类更改在您的设计中起作用。例如，您可能希望确保主要内容区域可以处理较大的文本(可能它将开始滚动以允许查看所有文本)，并且不会只是隐藏它，或者完全中断。</p> + +<h2 id="JavaScript">JavaScript</h2> + +<p>JavaScript 还可能会中断可访问性，具体取决于其使用方式。</p> + +<p>现代 JavaScript 是一种功能强大的语言,如今我们可以使用它,从简单的内容和 UI 更新到成熟的 2D 和 3D 游戏。没有任何规则规定所有内容都必须对所有人 100% 可访问 ––您只需尽力而为，并使你的应用尽可能可访问。</p> + +<p>简单的内容和功能可以说是很容易使访问 - 例如文本,图像,表格,窗体和按钮,激活功能。正如我们在 <a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a>文中提到的,主要注意事项包括:</p> + +<ul> + <li>良好的语义:为正确的工作使用正确的元素。例如,确保您使用标题和段落,以及 {{htmlelement("button")}}和 {{htmlelement("a")}} 元素</li> + <li>确保内容以文本形式提供,要么直接作为文本内容、表单元素的良好文本标签,也可以确保 <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">text alternatives</a>(例如图像的 alt 文本)。</li> +</ul> + +<p>我们还查看了如何使用 JavaScript 在缺少功能的地方构建的示例 , 请参阅 <a href="/en-US/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a>。这不是理想的 - 实际上,你应该只使用正确的元素为正确的作业 –– 但它表明在情况下它是可能的,由于某种原因,你不能控制使用的标记。提高非语义 JavaScript 支持的小部件的可访问性的另一种方法是使用 WAI-ARIA 为屏幕阅读器用户提供额外的语义。下一篇文章还将详细介绍这一点。</p> + +<p>复杂的功能,如3D游戏是不容易提高可访问性的 ––使用<a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>创建的复杂3D游戏将在 {{htmlelement("canvas")}}元素上呈现,该元素目前没有提供文本替代或其他信息的功能视障用户使用。可以说,这样的游戏并没有真正有这群人作为它的主要目标观众的一部分,这将是不合理的,期望你使它100%访问盲人,但你可以实现键盘控制,所以它可以使用非鼠标用户,并使配色方案的对比度足以让有颜色缺陷的人使用。</p> + +<h3 id="太多JavaScript导致的问题">太多JavaScript导致的问题</h3> + +<p>过于依赖JavaScript会导致许多问题。有时你会看到一个网站，其中一切都已经用JavaScript完成 ––JavaScript生成HTML，CSS等等。随之而来，会出现各种可访问性问题，因此这样做是不建议的。</p> + +<p>正确的工作需要使用正确的元素和技术！仔细考虑：消息框是否必须用JavaScript 3D实现，纯文本是否就刚好。仔细考虑是否需要复杂的非标准表单小部件,或者文本输入是否就行。如果可能，不要使用 JavaScript 生成所有 HTML 内容。</p> + +<h3 id="保持别抢眼">保持别抢眼</h3> + +<p>在创建内容时，应牢记 <strong>unobtrusive </strong> <strong> JavaScript</strong>原则。unobtrusive JavaScript 的想法是，它应该尽可能用于增强功能，而不是完全构建它 - 基本功能最好在没有 JavaScript 的情况下正常工作，尽管人们认识到，这并不总是一个选项。但同样，它的大部分是尽可能使用内置的浏览器功能。</p> + +<p>unobtrusive JavaScript 使用的良好示例包括：</p> + +<ul> + <li>提供客户端表单验证，它快速提醒用户表单条目出现的问题，而无需等待服务器检查数据。如果表单不可用，则窗口仍然有效，但验证速度可能较慢。</li> + <li>为 HTML5 <code><video></code>s提供自定义控件，这些控件仅供键盘用户访问，以及如果 JavaScript 不可用(默认 <code><video></code>浏览器控件在大多数浏览器中无法使用键盘访问)，就直接通过链接访问视频。</li> +</ul> + +<p id="Client-side_form_validation">例如，我们编写了一个快速而糟糕的客户端客户端表单验证示例 — 请参<a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a>(<a href="http://mdn.github.io/learning-area/accessibility/css/form-validation.html">see the demo live</a>)。在示例中，你会看到一个简单的表格；当您尝试提交一个或两个字段为空的表单时，提交将失败，并且会出现一个错误消息框，告诉您出了什么问题。</p> + +<p>这种表单验证并不引人注目 - 在 JavaScript 不可用的情况下，您仍然可以很好的使用表单，并且任何合理的表单实现都将激活服务器端验证，因为恶意用户很容易绕过客户端验证(例如，通过在浏览器中关闭 JavaScript)。客户端验证对于报告错误仍然非常有用 ––用户可以立即了解他们所犯的错误，而不必等待到服务器的往返和页面重新加载。这是一个明确的可用性优势。</p> + +<div class="note"> +<p><strong>注意：</strong>此简单示例中尚未实现服务器端验证。</p> +</div> + +<p>我们使此表单验证非常容易访问。我们使用 {{htmlelement("label")}}元素来确保表单标签明确链接到其输入，因此屏幕阅读器可以一起读取它们：</p> + +<pre class="brush: html notranslate"><label for="name">Enter your name:</label> +<input type="text" name="name" id="name"></pre> + +<p>我们仅在提交表单时执行验证— 这样，我们就不会过于频繁地更新 UI，并可能混淆屏幕阅读器(可能还有其他)用户：</p> + +<pre class="brush: js notranslate">form.onsubmit = validate; + +function validate(e) { + errorList.innerHTML = ''; + for(var i = 0; i < formItems.length; i++) { + var testItem = formItems[i]; + if(testItem.input.value === '') { + errorField.style.left = '360px'; + createLink(testItem); + } + } + + if(errorList.innerHTML !== '') { + e.preventDefault(); + } +}</pre> + +<div class="note"> +<p><strong>注意</strong>：在此示例中，我们使用绝对定位而不是其他方法(如可见性或显示)隐藏和显示错误消息框，因为它不会干扰屏幕阅读器从中读取内容。</p> +</div> + +<p>实际表单验证会比这复杂得多 - 您需要检查输入的名称实际上看起来像一个名称，输入的年龄实际上是一个数字，并且与真实情况符合(例如，不是负数或四位数字)。在这里，我们刚刚实现了一个简单的验证，是否将值填充到每个输入字段(<code>if(testItem.input.value === '')</code>)。</p> + +<p>执行验证后，如果测试通过，则提交表单。如果存在错误(<code>if(errorList.innerHTML !== '')</code>) ，则我们停止表单提交(使用<code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code>)，并显示已创建的任何错误消息(见下文)。此机制意味着只有存在错误时才会显示错误消息，这是一个明确的可用性优势。</p> + +<p>对于提交表单时没有填写值的每个输入，我们创建一个包含链接的列表项，并将其插入到<code> errorList </code>中。</p> + +<pre class="brush: js notranslate">function createLink(testItem) { + var listItem = document.createElement('li'); + var anchor = document.createElement('a'); + anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.'; + anchor.href = '#' + testItem.input.name; + anchor.onclick = function() { + testItem.input.focus(); + }; + listItem.appendChild(anchor); + errorList.appendChild(listItem); +}</pre> + +<p>每个链接都有双重用途 - 它不仅告诉您错误是什么，而且可以单击它/激活它直接跳转到有问题的输入元素，并且更正输入。</p> + +<div class="note"> +<p><strong>注意</strong>：此示例的 <code>focus() </code>部分有点棘手。Chrome 和 Edge(以及较新版本的 IE)将在单击链接时聚焦元素，而无需<code>onclick</code>/<code>focus()</code>代码块。Safari 只会突出显示表单元素，并自行显示链接，因此需要 <code>onclick/focus()</code>代码块来实际聚焦它。Firefox 没有在上下文中正确的聚焦输入，因此 Firefox 用户目前无法利用这一点(尽管其他一切都正常)。Firefox 问题应该尽快会得到修复 — 现在的工作是使 Firefox 行为与其他浏览器的行为相同(参见 {{bug(277178)}})。</p> +</div> + +<p>此外，<code>errorField </code>被放置在源顺序的顶部(与 UI 中使用 CSS时相比，位置不同)，这意味着用户可以准确找出表单提交时的问题，并通过返回到页面的开头，来获悉有问题的输入元素。</p> + +<p>最后，我们在演示中使用了一些 WAI-ARIA 属性，以帮助解决因为内容区域不断更新而未重新加载页面，导致的辅助功能问题(默认情况下,屏幕阅读器不会选取该属性或提醒用户)：</p> + +<pre class="notranslate"><div class="errors" role="alert" aria-relevant="all"> + <ul> + </ul> +</div></pre> + +<p>我们将在下一篇文章中解释这些属性，其中将更详细地介绍 <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> 。</p> + +<div class="note"> +<p><strong>注意</strong>：一些人可能会考虑这样一个事实，即 HTML5 表单有内置的验证机制,如<code>required</code>， <code>min</code>/<code>minlength</code>和<code>max</code>/<code>maxlength</code>属性(详细信息，请参阅 {{htmlelement("input")}}元素引用)。我们最终没有在演示中使用这些功能，因为不是所有的浏览器都支持(例如，仅 IE10 及以上版本支持，Safari不支持)。</p> +</div> + +<div class="note"> +<p><strong>注意：</strong>WebAIM 的<a href="http://webaim.org/techniques/formvalidation/">Usable and Accessible Form Validation and Error Recovery</a>提供了一些有关可访问表单验证的更多的有用信息。</p> +</div> + +<h3 id="其他_JavaScript_可访问性问题">其他 JavaScript 可访问性问题</h3> + +<p>在实现 JavaScript 和考虑可访问性时，还有其他需要注意的事项。一旦发现将会添加更多。</p> + +<h4 id="鼠标特定事件">鼠标特定事件</h4> + +<p>正如你所知，客户端JavaScript使用事件处理程序，实现大多数用户交互，它允许我们运行函数以响应某些事件的发生。某些事件可能有辅助功能问题。您将遇到的主要示例是鼠标特定的事件,如鼠标悬停（ <a href="/en-US/docs/Web/Events/mouseover">mouseover</a>）、鼠标划出（<a href="/en-US/docs/Web/Events/mouseout">mouseout</a>）、双击（<a href="/en-US/docs/Web/Events/dblclick">dblclick</a>） 等。使用其他机制(如键盘控件)无法访问为这些事件而运行的功能。</p> + +<p>为了缓解此类问题，您应该将这些事件与可以通过其他方式(所谓的设备独立事件处理程序)激活的类似事件相结合 —— <a href="/en-US/docs/Web/Events/focus">focus</a>和<a href="/en-US/docs/Web/Events/blur">blur</a>将为键盘用户提供可访问性。</p> + +<p>让我们看一个示例：突出显示了何时可能有用。我们想要实现一个缩略图：当鼠标悬停或聚焦在图像上，可以放大图像（正如电子商务产品目录所展示的）。</p> + +<p>我们做了一个非常简单的示例，您可以在<a href="http://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html">mouse-and-keyboard-events.html</a> 中找到(另请参阅<a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">源码</a>)。该代码具有显示和隐藏放大图像的两个函数；它由以下几行行实现，这些行将它们设置为事件处理程序：</p> + +<pre class="brush: js notranslate">imgThumb.onmouseover = showImg; +imgThumb.onmouseout = hideImg; + +imgThumb.onfocus = showImg; +imgThumb.onblur = hideImg;</pre> + +<p>当鼠标指针在缩略图上悬停或者移开，将分别调用前两行代码。此时不允许我们通过键盘访问缩略图 —— 为了允许这一点，我们调用后两行代码，它们在图像聚焦和失焦时(聚焦停止)运行函数。这可以在图像加tab键实现，因为我们为图像的属性设置<code>tabindex="0"</code>。</p> + +<p><a href="/en-US/docs/Web/Events/click">Click</a> 事件很有趣 ––听起来它依赖于鼠标，但是大多数的浏览器，在有焦点的链接或者表单元素上，按下 enter/return 之后，或者在触屏设备上点击一个元素，都将会激活 <a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a> 事件处理程序。但是，当您允许非默认可聚焦事件使用 tabindex 进行焦点处理时，默认情况下不起作用 ， 在这种情况下，您需要在按下确切键时进行专门检测(请参阅<a href="/en-US/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a>)。</p> + +<h2 id="总结">总结</h2> + +<p>我们希望这篇文章在网页设计中关于CSS和JavaScript的无障碍问题提供了足够多的细节。</p> + +<p>下一篇内容是，WAI-ARIA！</p> + +<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> + +<div> +<h2 id="在本模块中">在本模块中</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility">什么是无障碍？</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS和JavaScript无障碍的最佳实践</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA 基础知识基础知识</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia">无障碍的多媒体</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Mobile">移动端无障碍</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">无障碍故障排除</a></li> +</ul> +</div> diff --git a/files/zh-cn/learn/accessibility/html_colon_为可访问性提供一个良好的基础/index.html b/files/zh-cn/learn/accessibility/html_colon_为可访问性提供一个良好的基础/index.html new file mode 100644 index 0000000000..beeb753338 --- /dev/null +++ b/files/zh-cn/learn/accessibility/html_colon_为可访问性提供一个良好的基础/index.html @@ -0,0 +1,542 @@ +--- +title: 'HTML: 为可访问性提供一个良好的基础' +slug: 'learn/Accessibility/HTML:为可访问性提供一个良好的基础' +translation_of: Learn/Accessibility/HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</div> + +<p class="summary">在网页开发的过程中，用正确的HTML标签来表达正确的意图，可以提升网页的可访问性。这篇文章将会详细介绍如何最大化地提升网页的可访问性。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提:</th> + <td>有一定的HTML基础(可参阅 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML入门</a>)，理解<a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">什么是可访问性</a>。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>了解可访问性为网页带来的好处和如何在网页中进行实现。</td> + </tr> + </tbody> +</table> + +<h2 id="HTML_和可访问性">HTML 和可访问性</h2> + +<p>在学习HTML的过程当中，经常可以看到这样一个主题：HTML语义化的重要性。意思是指我们应尽可能地用正确的HTML标签来表达正确的意图。</p> + +<p>你可能在想，为什么语义化对于一个网页来说如此重要。总的来说，正确的语义化可使 CSS 和 JavaScript 更为便利地操作网页的样式和行为。例如，一个用来操作视频播放的按钮可以写成这样一种形式:</p> + +<pre><div>Play video</div></pre> + +<p>接下来你将看到一种更好的写法，它使用了正确的HTML标签，看上去更加合理:</p> + +<pre><button>Play video</button></pre> + +<p><code><button></code>标签不仅提供了按钮的样式（虽然有时会重新编写样式），还提供了键盘的可访问性，如：使用tab键更换按钮，使用回车键点击按钮。</p> + +<p>如果你在项目的一开始就使用HTML语义化，不仅不会花更多的时间，而且又有以下的可访问性优点：</p> + +<ol> + <li><strong>更便于开发</strong> — 如上所述，你可以使HTML更易于理解，并且可以毫不费力的获得一些功能。</li> + <li><strong>更适配移动端</strong> — 语义化的HTML文件比非语义化的HTML文件更加轻便，并且更易于响应式开发。</li> + <li><strong>更便于SEO优化</strong> — 比起使用非语义化的<div>标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。</li> +</ol> + +<p>让我们来继续学习HTML语义化实现细则。</p> + +<div class="blockIndicator note"> +<p><strong>注意:</strong>在本地计算机上设置屏幕阅读器是一个不错的主意，因此您可以对下面显示的示例进行一些测试。更多内容请查阅 <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Screenreaders guide</a>。</p> +</div> + +<h2 id="良好的语义">良好的语义</h2> + +<p>上面我们讨论了语义化的重要性以及为什么我们要使用正确的HTML标签来表达正确的意图。语义化是我们不可忽视的一部分，因为它往往决定了网页的可访问性。</p> + +<p>在网络上，事实上人们用HTML标签做一些非常奇怪的事情。人们滥用一些即将废弃或已经废弃的标签。不管在什么情况下，我们都应该将这些错误的代码改正过来。</p> + +<p>话虽如此，但是有些情况我们往往不能摆脱错误的标签，例如一个网页是从服务端的框架生成的，或者网页上存在第三方的内容（如广告），这些都是我们所不能控制的。</p> + +<p>我们的目标并不是“全有或全无”，实际上，你所做的每一个改进都可以提升网页的可访问性。</p> + +<h3 id="文本内容">文本内容</h3> + +<p>对于屏幕阅读器用户来讲，最佳辅助功能之一是拥有标题，段落，列表等内容的良好结构。一个好的语义示例可能如下所示：</p> + +<pre><code><h1>My heading</h1> + +<p>This is the first section of my document.</p> + +<p>I'll add another paragraph here too.</p> + +<ol> + <li>Here is</li> + <li>a list for</li> + <li>you to read</li> +</ol> + +<h2>My subheading</h2> + +<p>This is the first subsection of my document. I'd love people to be able to find this content!</p> + +<h2>My 2nd subheading</h2> + +<p>This is the second subsection of my content. I think is more interesting than the last one.</p></code></pre> + +<p>我们已经准备了一个更长的文本版本，供您试用于屏幕阅读器（请查看 <a href="http://mdn.github.io/learning-area/accessibility/html/good-semantics.html">good-semantics.html</a>）。如果您尝试在此过程中导航，您将看到这非常容易导航：</p> + +<ol> + <li>屏幕阅读器会在您浏览内容时读取每个标题，通知您标题是什么，段落是什么等。</li> + <li>它在每个元素之后停止，让你以任何适合你的速度前进。</li> + <li>你可以在许多屏幕阅读器中跳到下一个/上一个标题。</li> + <li>你还可以在许多屏幕阅读器中显示所有标题的列表，使您可以像使用便利的目录一样使用它们以查找特定内容。</li> +</ol> + +<p>人们有时会使用表现性 HTML 和换行符来编写标题，段落等，如下所示：</p> + +<pre><code><font size="7">My heading</font> +<br><br> +This is the first section of my document. +<br><br> +I'll add another paragraph here too. +<br><br> +1. Here is +<br><br> +2. a list for +<br><br> +3. you to read +<br><br> +<font size="5">My subheading</font> +<br><br> +This is the first subsection of my document. I'd love people to be able to find this content! +<br><br> +<font size="5">My 2nd subheading</font> +<br><br> +This is the second subsection of my content. I think is more interesting than the last one.</code></pre> + +<p>如果你使用屏幕阅读器试用更长内容的版本（请查阅 <a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a>），你不会有一个很好的经验 — 屏幕阅读器没有任何东西可以用作路标，所以你无法检索有用的目录，整个页面被看作一个巨大的块，所以它只是一次读出所有的内容。</p> + +<p>除了可访问性之外，还有其他一些问题 - 使用CSS设计内容的风格更难，或者使用JavaScript来操作它比较困难，因为没有可用作选择器的元素。</p> + +<h4 id="使用通俗易懂的语言">使用通俗易懂的语言</h4> + +<p>你使用的语言也会影响可访问性。一般来说，你应该使用不太复杂的清晰语言，不要使用不必要的行话或俚语。这不仅有利于有认知或其他残疾的人；它有利于那些没有用母语写作的读者，年轻人...事实上是每个人！除此之外，你应该尽量避免使用没有被屏幕阅读器清楚读出的语言和字符。例如:</p> + +<ul> + <li>如果可以避免的话，不要用破折号。写 5 到 7 ，来替代 5-7。</li> + <li>展开缩写 — 写 January，来替代 Jan 。</li> + <li>展开首字母缩略词，至少一次或两次。 例如写明 “超文本标记语言”（ Hypertext Markup Language），而不是直接用缩写 HTML。</li> +</ul> + +<h3 id="页面布局">页面布局</h3> + +<p>在旧时代，人们曾经使用HTML表格创建页面布局 - 使用不同的表格单元格来包含页眉，页脚，边栏，主要内容栏等。这不是一个好主意，因为屏幕阅读器可能会读出给人造成困惑的结果，特别是如果布局复杂，并且有许多嵌套表格的话。</p> + +<p>试试我们的例子<a href="http://mdn.github.io/learning-area/accessibility/html/table-layout.html">table-layout.html</a>，它看起来像这样：</p> + +<pre><table width="1200"> + <!-- main heading row --> + <tr id="heading"> + <td colspan="6"> + + <h1 align="center">Header</h1> + + </td> + </tr> + <!-- nav menu row --> + <tr id="nav" bgcolor="#ffffff"> + <td width="200"> + <a href="#" align="center">Home</a> + </td> + <td width="200"> + <a href="#" align="center">Our team</a> + </td> + <td width="200"> + <a href="#" align="center">Projects</a> + </td> + <td width="200"> + <a href="#" align="center">Contact</a> + </td> + <td width="300"> + <form width="300"> + <input type="search" name="q" placeholder="Search query" width="300"> + </form> + </td> + <td width="100"> + <button width="100">Go!</button> + </td> + </tr> + <!-- spacer row --> + <tr id="spacer" height="10"> + <td> + + </td> + </tr> + <!-- main content and aside row --> + <tr id="main"> + <td id="content" colspan="4" bgcolor="#ffffff"> + + <!-- main content goes here --> + </td> + <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> + <h2>Related</h2> + + <!-- aside content goes here --> + + </td> + </tr> + <!-- spacer row --> + <tr id="spacer" height="10"> + <td> + + </td> + </tr> + <!-- footer row --> + <tr id="footer" bgcolor="#ffffff"> + <td colspan="6"> + <p>©Copyright 2050 by nobody. All rights reversed.</p> + </td> + </tr> + </table></pre> + +<p>如果您尝试使用屏幕阅读器浏览此内容，它可能会告诉您需要查看一个表格（尽管某些屏幕阅读器可以猜测表格布局和数据表格之间的区别）。 然后，您可能（取决于您使用的屏幕阅读器）必须需要进入到表格对象中，并单独地查看表格的内容，然后再次离开表格，以继续浏览其他内容。</p> + +<p>用表格布局网页是过去旧时代的遗迹 - 在“CSS”在浏览器中并不普遍被支持时，它们是有意义的，但是它们会为屏幕阅读器用户造成混淆，并且由于许多其他原因变得很糟糕（滥用表格，可能因此需要更多的标记， 使设计更不灵活）。不要这样做！</p> + +<p>您可以通过将您之前的体验与 <a href="http://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">更现代的网站结构示例</a> 进行比较，来验证这些声明，该示例如下所示：</p> + +<pre><header> + <h1>Header</h1> +</header> + +<nav> + <!-- main navigation in here --> +</nav> + +<!-- Here is our page's main content --> +<main> + + <!-- It contains an article --> + <article> + <h2>Article heading</h2> + + <!-- article content in here --> + </article> + + <aside> + <h2>Related</h2> + + <!-- aside content in here --> + </aside> + +</main> + +<!-- And here is our main footer that is used across all the pages of our website --> + +<footer> + <!-- footer content in here --> +</footer></pre> + + + +<p>如果您使用屏幕阅读器阅读更现代的结构示例，则会看到布局标记不再会妨碍内容的读取。 它在代码大小方面也更加精简和小巧，这意味着代码更容易维护，并且用户下载的带宽更少（特别适合慢速连接的用户）。</p> + +<p>创建布局时的另一个考虑因素是使用HTML5语义元素，如上例所示（请参阅 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning">此内容部分</a>） - 您只能使用嵌套的 <code>{{htmlelement("div")}}</code> 元素创建布局，但最好使用适当的分段元素包裹您的主导航（<code>{{htmlelement("nav")}}</code>），<code>footer</code> (<code>{{htmlelement("footer")}}</code>），重复内容单元 (<code>{{htmlelement("article")}}</code>) 等 。这些为屏幕阅读器（和其他工具）提供额外的语义，为用户提供有关他们正在浏览的内容的额外信息（请参阅 <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">屏幕阅读器支持的新的HTML5章节元素</a> ，了解屏幕阅读器的支持是什么样的原理）。</p> + +<div class="note"> +<p><strong>注意</strong>：除了您的内容具有良好的语义和有吸引力的布局之外，它的源代码顺序应该是合理的 - 您可以随时将它放在您想要使用CSS的位置，但是您应该先从源代码开始， 如此这样，屏幕阅读器读取给他们的内容将会非常便于理解。</p> +</div> + +<h3 id="UI_控制">UI 控制</h3> + +<p>通过UI控件，我们指的是与用户交互的Web文档的主要部分 - 通常是按钮，链接和表单控件。 在本节中，我们将介绍创建此类控件时要注意的基本可访问性问题。 稍后关于WAI-ARIA和多媒体的文章将着眼于UI可访问性的其他方面。</p> + +<p>UI控件可访问性的一个关键方面是，默认情况下，浏览器允许用户通过键盘操作它们。 您可以使用我们的 <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">native-keyboard-accessibility.html</a> 示例（请参阅 <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">源代码</a> ）。尝试此操作 - 在新选项卡中打开此项，然后尝试按Tab键; 几次按下后，您应该看到标签焦点开始移动到不同的元素; 在每个浏览器中，获得焦点元素都会有一个“突出显示“的默认样式（它在不同浏览器之间略有不同），以便您可以确定当前哪些元素获得焦点。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png"></p> + +<p>接着你可以按Enter / Return来追踪当前获得焦点的链接，或者按按钮来实现（我们已经使用JavaScript使按钮同时显示提示消息），或者开始在文本输入中输入文本（其他表单元素具有不同的控件， 例如<code> {{htmlelement("select")}}</code> 元素拥有自己的显示选项， 可以使用向上和向下箭头键进行循环）。</p> + +<div class="note"> +<p><strong>注意</strong>：不同的浏览器可能有不同的键盘控制选项。 请参阅 <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">使用本机键盘辅助功能</a> 获取更多详细信</p> +</div> + +<p>实际上，您只需使用适当的元素即可免费获得此功能，例如，</p> + +<pre><h1>Links</h1> + +<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p> + +<p>Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p> + +<h2>Buttons</h2> + +<p> + <button data-message="This is from the first button">Click me!</button> + <button data-message="This is from the second button">Click me too!</button> + <button data-message="This is from the third button">And me!</button> +</p> + +<h2>Form</h2> + +<form> + <div> + <label for="name">Fill in your name:</label> + <input type="text" id="name" name="name"> + </div> + <div> + <label for="age">Enter your age:</label> + <input type="text" id="age" name="age"> + </div> + <div> + <label for="mood">Choose your mood:</label> + <select id="mood" name="mood"> + <option>Happy</option> + <option>Sad</option> + <option>Angry</option> + <option>Worried</option> + </select> + </div> +</form></pre> + + + +<p>这意味着适当地使用链接，按钮，表单元素和标签（包括表单控件的 <code>{{htmlelement("label")}}</code> 元素）。</p> + +<p>然而，人们有时候会用HTML做奇怪的事情。 例如，您有时会看到使用 <code>{{htmlelement("div")}}</code> 标记的按钮，例如：</p> + +<pre><div data-message="This is from the first button">Click me!</div> +<div data-message="This is from the second button">Click me too!</div> +<div data-message="This is from the third button">And me!</div></pre> + +<p>但是不建议使用这样的代码 - 你会立即失去本机键盘的可访问性。但如果你使用了<code>{{htmlelement("button")}}</code> 元素，你将可以通过键盘控制。 此外你也将不会获得任何的按钮默认拥有的CSS样式。</p> + +<h4 id="重新建立键盘的可访问性"><strong>重新建立键盘的可访问性</strong></h4> + +<p>重新添加这些优点需要一些工作（您可以在我们的 <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> 示例中使用示例代码 - 另请参阅 <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">源代码</a> ）。 在这里，我们通过赋予每个 <code><div></code> 按钮属性<code>tabindex =“0”</code> 来使它能够被聚焦（包括通过选项卡）：</p> + +<pre><div data-message="This is from the first button" tabindex="0">Click me!</div> +<div data-message="This is from the second button" tabindex="0">Click me too!</div> +<div data-message="This is from the third button" tabindex="0">And me!</div></pre> + +<p>基本上，<code>{{htmlattrxref("tabindex")}}</code> 属性主要用于允许 tabbable 元素具有自定义Tab键顺序（以正数顺序指定），而不是仅按其默认源顺序进行标记。 这几乎总是一个糟糕的主意，因为它可能会造成重大混乱。 例如，如果布局以与源代码非常不同的视觉顺序显示事物，而且你想让事情更符合逻辑。 这里 <code>tabindex</code> 有另外两个选项：</p> + +<ul> + <li><code>tabindex="0"</code> — 如上所述，该值允许 通常不可放置的元素（tabbable elements） 变为可放置的。 这是 tabindex 最有用的的地方。</li> + <li><code>tabindex="-1"</code> — 这允许 通常不可放置的元素（tabbable elements） 以编程的方式接收焦点，例如， 通过JavaScript，或作为链接的目标。</li> +</ul> + +<p>虽然上面的添加允许我们用 <code>tab</code> 选择按钮，但它不允许我们通过 <code>Enter / Return</code> 键来激活它们。 要做到这一点，我们必须添加下面的 JS 小绝招（JavaScript trickery）：</p> + +<pre><code>document.onkeydown = function(e) { + if(e.keyCode === 13) { // The Enter/Return key + document.activeElement.onclick(e); + } +};</code></pre> + +<p>在这里，我们向文档对象 <code>document</code> 添加一个侦听器，以检测什么时候键盘上按下按钮 我们通过事件对象 <code>event object</code> 的 <code>keyCode </code>属性,检查用户按下了哪个按钮; 如果它是与 <code>Return / Enter</code> 匹配的关键代码，我们通过按钮的 onclick 函数，即 <code>document.activeElement.onclick()</code> 。<code>activeElement</code> 提供给我们页面当前被focused的元素。</p> + +<p>我们使用<code>document.activeElement.onclick（）</code>运行存储在按钮的onclick处理函数中的函数。 <code>activeElement</code> 为我们提供了当前关注页面的元素。</p> + +<div class="note"> +<p><strong>注意</strong>：您应该记住，只有通过事件处理程序属性（例如onclick）设置原始事件处理程序，此技巧才会起作用。 <code>addEventListener</code> 将不起作用。</p> +</div> + +<p>这对于重新构建功能而言是一个额外的麻烦。而且这肯定会带来其他问题。 使用正确的元素处理正确的工作是非常重要的。（<strong>Better to just use the right element for the right job in the first place.</strong>）</p> + +<h4 id="有意义的文字标签"><strong>有意义的文字标签</strong></h4> + +<p>用户界面控件的 文本标签 对所有用户都非常有用，但是对于残疾用户来说，让他们正确使用尤其重要。</p> + +<p>你应该确保你的按钮和链接文本标签是可以理解和独特的。 不要使用“点击这里”（"Click here"）此类的标签，因为屏幕阅读器用户有时会列出按钮和表格控件列表。 以下屏幕截图显示了我们的控件在Mac上由 VoiceOver 列出。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14335/voiceover-formcontrols.png"></p> + +<p>确保您的标签在上下文中有意义，可以单独阅读，也可以在他们所在的段落的上下文中进行阅读。例如，下面显示了良好链接文本的示例：</p> + +<pre><p>Whales are really awesome creatures. <a href="whales.html">Find out more about whales</a>.</p></pre> + +<p>但这是不好的链接文字：</p> + +<pre><p>Whales are really awesome creatures. To find more out about whales, <a href="whales.html">click here</a>.</p></pre> + +<div class="note"> +<p><strong>注意</strong>：您可以在我们的 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">创建超链接 </a>文章中找到更多关于链接实现和最佳实践的信息。 您还可以在 <a href="http://mdn.github.io/learning-area/accessibility/html/good-links.html">good-links.html</a> 和 <a href="http://mdn.github.io/learning-area/accessibility/html/bad-links.html">bad-links.html</a> 中看到一些好的和不好的例子。</p> +</div> + +<p>表单标签也很重要，可以让您了解您需要输入每个表单输入的内容。 以下似乎是一个足够合理的例子：</p> + +<pre>Fill in your name: <input type="text" id="name" name="name"></pre> + +<p>但是，这对于残疾用户来说并不是那么有用。 在上面的示例中，没有任何内容将标签与表单输入明确关联。因此如果看不到它，请让用户明确该如何填写。 如果您使用某些屏幕阅读器访问该屏幕，则只能按照“编辑文本”（“edit text”）的方式给出说明。</p> + +<p>以下是一个更好的例子：</p> + +<pre><div> + <label for="name">Fill in your name:</label> + <input type="text" id="name" name="name"> +</div></pre> + +<p>通过这样的代码，标签将清晰地与输入相关联; 描述将更像如下这种形式：“填写你的姓名：编辑文本”。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14337/voiceover-good-form-label.png"></p> + +<p>作为额外的好处，在大多数将标签与表单输入相关联的浏览器中，您可以单击标签来 选择/激活 表单元素。 这给输入一个更大的可选中区域，使其更容易选择。</p> + +<div class="note"> +<p>注意：您可以在 <a href="http://mdn.github.io/learning-area/accessibility/html/good-form.html">good-form.html</a> 和 <a href="http://mdn.github.io/learning-area/accessibility/html/bad-form.html">bad-form.html</a> 中看到一些好的和不好的表单示例。</p> +</div> + +<h2 id="可访问的表格"><strong>可访问的表格</strong></h2> + +<p>基本的表格（译者注：“data table”被翻译成“表格”）可以用非常简单的标记来编写，例如：</p> + +<pre><table> + <tr> + <td>Name</td> + <td>Age</td> + <td>Gender</td> + </tr> + <tr> + <td>Gabriel</td> + <td>13</td> + <td>Male</td> + </tr> + <tr> + <td>Elva</td> + <td>8</td> + <td>Female</td> + </tr> + <tr> + <td>Freida</td> + <td>5</td> + <td>Female</td> + </tr> +</table></pre> + +<p>但是这有问题 - 屏幕阅读器用户无法将行或列作为数据分组关联在一起。 要做到这一点，你需要知道标题行是什么，以及它们是否在行，列等标题上。这只能在上面的表中以可视化方式完成（参见 <a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a> ，并自己尝试这个例子）。</p> + +<p>现在看看我们的 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">punk bands table example</a> - 您可以在这里看到一些辅助工具（accessibility aids）：</p> + +<ul> + <li>表头使用 <code>{{htmlelement("th")}}</code> 元素定义 - 您还可以使用 <code>scope</code> 属性指定它们是行还是列的标题。 这提供给了屏幕阅读器可以理解的完整数据组。</li> + <li> <code>{{htmlelement("caption")}}</code> 元素和 <code><table></code> <code>summary</code> 属性都执行类似的工作 - 它们充当表格的替代文本，为屏幕阅读器用户提供有用的表格内容快速摘要。 <code><caption></code> 通常是首选，因为它使内容可供视力良好的用户访问，而且他们也可能会发现它很有用。 你并不需要两者都使用！。</li> +</ul> + +<div class="note"> +<p>注意：有关可访问数据表的更多详细信息，请参阅我们的 <a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML表格高级功能和可访问性</a> 文章。</p> +</div> + +<h2 id="文本替代品"><strong>文本替代品</strong></h2> + +<p>尽管文本内容本身是可访问的，但对于多媒体内容而言也不一定是这样 - 图像/视频内容不能被视觉障碍人士看到，并且听觉障碍人士不能听到音频内容。 稍后我们将在可访问多媒体文章中详细介绍视频和音频内容，但对于本文，我们将探讨低微（humble ）的 <code>{{htmlelement("img")}}</code> 元素的可访问性。</p> + +<p>我们编写了一个简单的例子， <a href="http://mdn.github.io/learning-area/accessibility/html/accessible-image.html">accessible-image.html</a> ，它具有相同图像的四个副本：</p> + +<pre><img src="dinosaur.png"> + +<img src="dinosaur.png" + alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> + +<img src="dinosaur.png" + alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." + title="The Mozilla red dinosaur"> + + +<img src="dinosaur.png" aria-labelledby="dino-label"> + +<p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p> +</pre> + +<p>第一张图片，当用屏幕阅读器查看时，并不真正为用户提供很多帮助 - 例如VoiceOver会读出 “/dinosaur.png，image” 。 它读出文件名以尝试提供一些帮助。 在这个例子中，用户至少知道它是某种恐龙，但通常文件可以用机器生成的文件名（例如来自数码相机）上传，这些文件名可能不会提供图像内容的信息。</p> + +<div class="note"> +<p>注意：这就是为什么你不应该在图像中包含文本内容 - 屏幕阅读器根本无法访问它。 还有其他的缺点 - 你不能选择它并复制/粘贴它。不要这样做！</p> +</div> + +<p>当屏幕阅读器遇到第二张图像时，它会读出完整的 <code>alt</code> 属性 - “红色霸王龙雷克斯：一只像人一样直立的双腿恐龙，手臂小，头部大而锋利。”</p> + +<p>这突出了不仅在所谓的替代文本不可用的情况下使用有意义的文件名的重要性，而且还确保尽可能地在替换属性 <code>alt</code> 中提供替代文本。 请注意，<code>alt</code> 属性的内容应始终提供图像的直接表示以及它在视觉上传达的内容。 任何个人知识或额外描述都不应该包含在这里，因为它对以前没有碰到过这个图像的人没有用处。</p> + +<p>需要考虑的一件事是，你的图片是否在你的内容中有意义，或者它们纯粹是为了视觉装饰，所以没有意义。 如果它们是装饰性的，最好将它们包含在页面中作为CSS背景图像。</p> + +<div class="note"> +<p>注意：请阅读 <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML中的图片</a> 和 <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图片</a> 以获得更多关于图片实施和最佳做法的信息。</p> +</div> + +<p>如果您确实想要提供额外的上下文信息，则应该将其放在图像周围的文本中，或放置在“标题” <code>title</code> 属性中，如上所示。 在这种情况下，大多数屏幕阅读器会读出替代文本，标题属性和文件名。 此外，鼠标滑过时，浏览器会将 <code>title</code> 的内容作为工具提示的形式显示出来。</p> + + + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/14333/title-attribute.png"></p> + +<p>我们再来看看第四种方法：</p> + +<pre><img src="dinosaur.png" aria-labelledby="dino-label"> + +<p id="dino-label">The Mozilla red Tyrannosaurus ... </p></pre> + +<p>在这种情况下，我们不使用“alt”属性 —— 相反，我们已经将图像的描述作为常规文本段落给出，并给出它的“id”，然后使用 “<code>aria-labelledby</code>” 属性并链接到对应“<code>id</code>”，它使屏幕阅读器将该段落用作该图像的替代文本/标签。 如果您想将相同的文本用作多个图像的标签，这是特别有用的 - 这是使用“<code>alt</code>”不可能实现的。</p> + +<div class="note"> +<p>注意：“<code>aria-labelledby</code>”是 <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> 规范的一部分，它允许开发人员在其标记中添加额外的语义，以提高屏幕阅读器的可访问性。 要了解更多关于它是如何工作的，请阅读我们的 <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA Basics</a> 文章。</p> +</div> + + + +<h3 id="其他文字替代机制">其他文字替代机制</h3> + +<p>图像还有其他机制可用于提供描述性文字。 例如，有一个 <code>longdesc</code> 属性用于指向包含图像的扩展描述的单独Web文档，例如：</p> + +<pre><img src="dinosaur.png" longdesc="dino-info.html"></pre> + +<p>这听起来像个好主意，尤其是对于像大图表这样的信息图，其中有很多信息可能可以表示为可访问的数据表（请参阅上一部分）。 但是，屏幕阅读器不支持<code>longdesc</code>，非屏幕阅读器用户完全无法访问内容。 将长描述包含在与图像相同的页面中，或者通过常规链接链接到它可能会更好。</p> + +<p>HTML5包含两个新元素 - <code>{{htmlelement("figure")}}</code> 和<code>{{htmlelement("figcaption")}}</code> ，它们应该将某种形象（可以是任何东西，不一定是图像）与数字标题相关联：</p> + +<pre><figure> + <img src="dinosaur.png" alt="The Mozilla Tyrannosaurus"> + <figcaption>A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</figcaption> +</figure></pre> + +<p>不幸的是，大多数屏幕阅读器似乎并没有将图形标题与他们的图形相关联，但是元素结构对CSS样式非常有用，并且它提供了一种方法在源代码中将图像放置在旁边。</p> + +<h3 id="空alt属性">空alt属性</h3> + +<pre><h3> + <img src="article-icon.png" alt=""> + Tyrannosaurus Rex: the king of the dinosaurs +</h3></pre> + +<p>可能有时候图像被包含在页面的设计中，但其主要目的是用于视觉装饰。 在上面的代码示例中，您会注意到图像的“alt”属性为空 - 这是为了让屏幕阅读器识别图像，但不试图描述图像（阅读器只是说 “图像” 等类似的语句）。</p> + +<p>使用空白“alt”而不包含它的原因是因为如果没有提供“alt”，许多屏幕阅读器会公布整个图像URL。 在上面的示例中，图像充当与其关联的标题的视觉装饰。 在这种情况下，以及在图像只是装饰并且没有内容值的情况下，您应该在图像上放置一个空白的“alt”。 另一种选择是使用 aria role 属性 <code>role =“presentation”</code> - 这也会阻止屏幕阅读器读出替代文本。</p> + +<div class="note"> +<p>注意：如果可能的话，你应该使用CSS来显示只有装饰的图像。</p> +</div> + +<h2 id="总结Summary">总结Summary</h2> + +<p>您现在应该精通编写大多数场合可访问的HTML。 我们的 WAI-ARIA 基础知识文章也将填补这些知识中的一些空白，但本文已经关注了此基础知识。 接下来，我们将探索 CSS 和 JavaScript ，以及可访问性如何受其好坏影响。</p> + + + +<p>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</p> + + + +<h2 id="在此模块">在此模块</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility">什么是可访问性 (What is accessibility?)</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML">可访问性的良好的基础 (HTML: A good basis for accessibility)</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS 和JavaScript可访问性的最好练习(CSS and JavaScript accessibility best practices)</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI_ARIA基础(WAI-ARIA basics)</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia">多媒体的可访问性(Accessible multimedia)</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Mobile">移动端的可访问性(Mobile accessibility)</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">可访问性问题的解决处理(Accessibility troubleshooting)</a></li> +</ul> diff --git a/files/zh-cn/learn/accessibility/index.html b/files/zh-cn/learn/accessibility/index.html new file mode 100644 index 0000000000..77f9fc0d53 --- /dev/null +++ b/files/zh-cn/learn/accessibility/index.html @@ -0,0 +1,50 @@ +--- +title: 可访问性 +slug: learn/Accessibility +translation_of: Learn/Accessibility +--- +<div> +<h1 id="可访问性">可访问性</h1> +</div> + +<p class="summary">如果你想成为一个web开发者，学习一些HTML,CSS和JavaScript是很有用的, 但是仅仅使用这些技术是不够的, 你应该更进一步拓展你的知识 — 你需要响应式地使用它们来最大程度地发展你的用户, 并且使用这些技术时不能把任何一门排斥出去。 为了达到这个目的, 要遵循一般最佳实践（这些最佳实践已经被 <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, 和 <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> 相关的话题所证明）,进行跨浏览器测试, 并且从项目最初阶段就把易使用性考虑在内。在这个模块中我们将会详细讨论后者。</p> + +<h2 id="预备知识">预备知识:</h2> + +<p>为了充分理解这个模块,你至少需要读过 <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, 和 <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> 各个话题的前两个模块, 或者有可能的话, 在你学习相关联的技术话题时也把可访问性相关的内容学习了, 这样会更好。</p> + +<div class="note"> +<p><strong>注意</strong>: 如果在你所使用的设备上你不能建立自己的文件,你可以使用在线编码平台运行大多数样例代码, 比如 <a href="http://jsbin.com/">JSBin</a> 或者 <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="参考指南">参考指南</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">什么是可访问性?</a></dt> + <dd>这篇文章开头很好地阐述了到底什么是'可访问性' — 这包括我们要考虑哪一群人以及为什么要考虑这些人,不同用户使用什么工具与网页交互,以及我们在网页开发流中如何构建可用性部分.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: 确保可访问性的良好基础</a></dt> + <dd>只要确保恰当的 HTML 元素被用于适当的目的, 大量的网页内容即可具有可用性, 这篇文章详细地讲述了 HTML 的用法, 以确保网页有最大的可访问性.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS 与 JavaScript 可用性最佳实践</a></dt> + <dd>CSS 与 JavaScript, 当正确使用的时候, 也能够使得网页具有很好的可访问性, 但是如果错误地使用他们将极大地破坏可访问性. 这篇文章罗列了一些应该被考虑的CSS 和 JavaScript的最佳实践, 确保再复杂的内容都可以有尽可能好的可访问性.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">无障碍网页应用基础</a></dt> + <dd>继上一篇文章之后，有时候制作复杂的UI控件会涉及到非语义的HTML和动态的JavaScript更新内容会很难。 WAI-ARIA是一种可以帮助解决这些问题的技术，通过增加浏览器和辅助技术可以识别和使用的进一步语义来让用户知道正在发生的事情。 在这里，我们将展示如何在基本级别上使用它来提高可访问性。</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">多媒体</a></dt> + <dd>可以提高可访问性的另一类内容是多媒体 - 视频，音频和图像内容需要提供适当的文本替代方案，以便辅助技术和相应的用户能够理解。 这篇文章展示了永达。</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">移动设备可访问性</a></dt> + <dd>随着移动设备上网页访问的流行，以及主流平台（如iOS和Android）具备了完善的辅助功能工具，考虑在这些平台上Web内容的可访问性也是非常重要的。 本文讨论针对移动设备的可访问性注意事项。</dd> +</dl> + +<h2 id="评估">评估</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">可访问性诊断</a></dt> + <dd>针对这篇模块, 对于您的理解程度, 我们提供了评估方法，我们向您展示了一个简单的网站，其中包含许多您需要诊断和修复的可访问性问题。</dd> +</dl> + +<h2 id="另见">另见</h2> + +<ul> + <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today"> 现在开始构建可访问性的web应用</a> — 来自Marcy Sutton的一系列优质的视频教程.</li> + <li><a href="https://dequeuniversity.com/resources/">DequeUniversity 资源</a> — 包含代码示例，屏幕阅读参考和其他有用的资源.</li> + <li><a href="http://webaim.org/resources/">WebAIM 资源</a> — 包含向导，清单，工具和其他资源.</li> +</ul> diff --git a/files/zh-cn/learn/accessibility/mobile/index.html b/files/zh-cn/learn/accessibility/mobile/index.html new file mode 100644 index 0000000000..8eebaf2abd --- /dev/null +++ b/files/zh-cn/learn/accessibility/mobile/index.html @@ -0,0 +1,314 @@ +--- +title: 移动设备上的无障碍 +slug: learn/Accessibility/Mobile +tags: + - 初学者 + - 响应式 + - 学习 + - 屏幕阅读器 + - 文章 + - 无障碍 + - 移动端 + - 编程 + - 触摸 +translation_of: Learn/Accessibility/Mobile +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</div> + +<p>随着通过手机设备访问网络越来越受欢迎，例如iOS和Android等流行的平台都拥有了完善的无障碍工具，在这些平台上考虑你网页的无障碍访问性是一件很重要事情。本文将着重介绍移动端无障碍的注意事项。</p> + +<table> + <tbody> + <tr> + <th scope="row">前置条件:</th> + <td>基本的计算机素养, 对Javascript,html,css有基本的认识, 对<a href="/en-US/docs/Learn/Accessibility">之前的课程</a>有一定的理解。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>了解移动端上无障碍的存在的问题，即如何解决他们。</td> + </tr> + </tbody> +</table> + +<h2 id="移动设备上的无障碍">移动设备上的无障碍</h2> + +<p>现代移动设备对无障碍和大多数Web标准有很好的支持。那个因为移动设备和桌面设备使用了完全不同的技术而强制要求开发者根据设备不同将用户分发到不同的域名的时代已经结束了（虽然现在还有一些公司仍然在检测用户移动设备的使用，并为他提供一个独立的手机域名）。</p> + +<p>目前，移动设备一般都可以处理“full fat”的网站了，同时，为了能够让盲人成功的使用网站，主流平台甚至还内置了阅读器。移动设备也倾向于对<a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">“</a><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">”</a>有个好的支持。</p> + +<p>你只要需要遵守好的web设计规范和最佳的无障碍实践，就可以让你的网站在手机上可用且无障碍。</p> + +<p>移动设备需要特别考虑一些例外情况; 主要的是:</p> + +<ul> + <li>控件交互 - 确保类似于按钮的UI控件可以在移动端（主要是触摸屏）和桌面端（主要是鼠标/键盘）无障碍的使用</li> + <li>用户输入 - 在移动端尽可能的减少用户输入的要求（例如在表单中，尽量少打字）。</li> + <li>响应式设计 - 确保移动端布局正常的情况下，节省需要下载的图片大小，并考虑为高分辨率的屏幕提供图片。</li> +</ul> + +<h2 id="Android和iOS上的屏幕阅读器测试总结">Android和iOS上的屏幕阅读器测试总结</h2> + +<p>最常见的移动端平台具有功能全面的屏幕阅读器。这些功能和桌面端屏幕阅读器大致相同，除了移动端屏幕阅读器大量的使用手势操作而不是按键组合操作。</p> + +<p>让我们来看看最主要的两个 - Android上的TalkBack和iOS上的VoiceOver。</p> + +<h3 id="Android_TalkBack">Android TalkBack</h3> + +<p>TalkBack是运行在Android系统上的。</p> + +<p>在菜单中选择 设置 > 无障碍 > TalkBack，打开开关即可打开TalkBack。按照屏幕提示操作即可。</p> + +<p><strong>注意</strong>: 旧版本的TalkBack的打开方式有<a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">一点不同</a>。</p> + +<p>当TalkBack打开时，你的android设备的基本操作将有一点点不同。举个例子：</p> + +<ol> + <li>点击一个应用将会选择它，同时，你的设备将会告诉你这个APP是什么。</li> + <li>如果你按在功能键上向左右滑动，将会在应用、按钮或控件之间切换。设备将会读出每一项。</li> + <li>双击任何地方将会打开某个应用或者选择某个选项。 </li> + <li>你也可以“通过触摸来探索”-将手指按在屏幕上并拖拽，然后你的设备将会读出你移动经过的不同的应用或项目。</li> +</ol> + +<p>如果你想关掉TalkBack:</p> + +<ol> + <li>通过上面的手势导航到“设置”</li> + <li>导航到 无障碍 > TalkBack</li> + <li>导航到滑动的开关，并激活它将其关闭。</li> +</ol> + +<p><strong>注意</strong>: 你可以通过向左上方滑动返回桌面，如果你有多个桌面，你可以通过两个手指在屏幕上左右滑动来切换桌面。</p> + +<p><strong>注意</strong>: 关于“TalkBack”的收拾完整列表，查看<a href="https://support.google.com/accessibility/android/answer/6151827">使用TalkBack手势</a>。</p> + +<h4 id="解锁手机">解锁手机</h4> + +<p>当TalkBack处于打开状态时，解锁手机有一点点不同。</p> + +<p>你可以通过双根手指从底部向上滑动去锁定手机。如果你设置了密码或者手势，你将会进入相关的入口页去输入密码或手势。</p> + +<p>你可以通过触摸屏幕的中下部去找到解锁按钮，然后双击它解锁手机。</p> + +<h4 id="全局菜单和本地菜单">全局菜单和本地菜单</h4> + +<p>TalkBack允许你使用全局和本地菜单，无论你已经导航到哪个位置。前者提供和设备相关的全局选项，后者提供和当前你所在的应用或屏幕相关的选项。</p> + +<p>要进入这些菜单：</p> + +<ol> + <li>快速向下然后向右滑动唤起全局菜单。</li> + <li>快速向上然后向右滑动唤起本地菜单。</li> + <li>向左右滑动可以选择不同的菜单。</li> + <li>一旦你选择了你想要的选项，双击它可以直接选择。</li> +</ol> + +<p>想要查看全局和本地上下文菜单的详细选项，请查看<a href="https://support.google.com/accessibility/android/answer/6007066">使用全局和本地上下文菜单</a></p> + +<h4 id="浏览网页">浏览网页</h4> + +<p>你可以在浏览器中使用本地上下文菜单来查看仅使用标题，或者表单控件，或者链接，或者逐行浏览的方式浏览网页。</p> + +<p>例如，当“TalkBack”处于开启状态：</p> + +<ol> + <li>打开浏览器</li> + <li>激活地址栏</li> + <li>进入一个有一堆标题的网页，就像bbc.co.uk的首页。输入网址的文字： + <ol> + <li>通过左右滑动来找到地址栏，然后双击它</li> + <li>手指按在虚拟键盘上，选择你想要的字符，松开手指输入它，重复上述操作输入完所有的字符</li> + <li>输入完之后，找到Enter键并按下</li> + </ol> + </li> + <li>向左右滑动在页面上不同的项目之间切换</li> + <li>向上然后向右滑动进入本地内容菜单</li> + <li>向右滑动直到你找到“标题和标识”选项</li> + <li>双击选择它。现在你就可以通过左右滑动在标题和ARIA标识之间切换</li> + <li>向右向上滑动之后，进去本地上下文菜单，选择“默认”，就可以返回默认模式</li> +</ol> + +<p><strong>注意</strong>: 查看<a href="https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=3529932">TalkBack入门</a>获取更完整的文档。</p> + +<h3 id="iOS_VoiceOver">iOS VoiceOver</h3> + +<p>它是在iOS系统上的一个移动端VoiceOver。</p> + +<p>要打开它，请在设置中选择 常规 > 无障碍 > VoiceOver。按下VoiceOver的开关去启动它（你还会在页面中看到很多和VoiceOver相关的其他选项）。</p> + +<p>一旦开启VoiceOver，iOS的基本操作手势将有所不同：</p> + +<ol> + <li>单击将会导致项目被选中，你的设备将会告诉你，你点击的是什么应用。</li> + <li>你也可以通过向左右滑动屏幕来移动屏幕上的项目，或者在屏幕上滑动手指以移动项目（当你找到你想要的项目的时候，把手指离开屏幕来选中它）。</li> + <li>双击屏幕上的任意位置，可以激活选中的项目（例如，打开选中的App）。</li> + <li>通过三根手指滑动浏览页面。</li> + <li>用两个手指点击来执行上下文相关的操作，例如在相机里拍摄照片。</li> +</ol> + +<p>要再次将其关闭，你必须使用上述手势导航到 设置 > 常规 > 无障碍 > VoiceOver，然后将VoiceOver切换回关闭状态。</p> + +<h4 id="解锁手机_2">解锁手机</h4> + +<p>你需要正常的按下HOME键（或划过）就可以解锁手机了。如果你设置了密码，你可以通过滑动来选择每一个数字，然后在找到合适的数字后双击输入每一个数字。</p> + +<h4 id="使用转子">使用转子</h4> + +<p>当VoiceOver打开时，您可以使用一种名为“转子”的导航功能，该功能可让您快速从多种常用选项中进行选择。 要使用它:</p> + +<ol> + <li>像转动拨号盘一样在屏幕上扭动两根手指。 当你扭动更多的时候，每个选项都会被朗读。 你可以来回循环选项。</li> + <li>一旦你找到你想要的选项： + <ol> + <li>松开手指来选择它。</li> + <li>如果这个选项可以调整大小（例如音量或说话频率）的值，则可以通过上下滑动来控制所选项的值。</li> + </ol> + </li> +</ol> + +<p>转子上的提供的选项是上下文相关的，他们会根据你所在的APP或者试图不同而不同。（参见下面的例子）</p> + +<h4 id="浏览网页_2">浏览网页</h4> + +<p>让我们用VoiceOver浏览网页：</p> + +<ol> + <li>打开你的浏览器</li> + <li>激活地址栏</li> + <li>进入这一个有一堆标题的网站，就像bbc.co.uk的首页。输入网址： + <ol> + <li>通过向左右滑动来选择地址栏，找到之后双击它</li> + <li>对于每一个字符，手指在虚拟键盘上长按，直到找到你想要的字符，然后释放手指来选择他。双击它输入</li> + <li>完成后，找到Enter键并按下</li> + </ol> + </li> + <li>向左右滑动来在页面上切换不同的项目。你可以通过双击来选择他（例如，按住链接）。</li> + <li>默认情况下，被选中的转子选项应该是说话频率，你可以通过上下滑动来增加或减少讲话速率。</li> + <li>现在像拨号盘一样围绕屏幕转动两根手指，以显示转子并在其选项之间移动。以下是可用选项的一些示例： + <ol> + <li><em>说话速率：改变说话速率</em></li> + <li><em>容器：在页面不同予以的容器间切换</em></li> + <li><em>标题：在页面上的标题之间切换</em></li> + <li><em>链接：在页面上的链接之间切换</em></li> + <li><em>表单控件：在页面上的表单控件之间切换</em></li> + <li>语言：在不同的翻译之间切换，如果可用的话</li> + </ol> + </li> + <li>选择标题，现在你可以通过上下滑动在页面的不同标题中切换</li> +</ol> + +<p><strong>注意</strong>: 有关iOS上可用的VoiceOver手势以及有关辅助功能的其他提示的更完整资料可以查看<a href="https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3">在你的设备上用VoiceOver测试辅助功能</a></p> + +<h2 id="控制机制">控制机制</h2> + +<p>在我们的CSS和JavaScript可访问性文章中，我们研究了特定于某种控制机制的事件的概念（请参阅<a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events">鼠标特定的事件</a>）。 回顾一下，因为其他控制机制不能激活相关的功能，将会导致辅助功能的问题。</p> + +<p>举例来说，<a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick">点击事件</a>在可访问性方面是好的 - 通过点击处理器设置的元素，选中它并按下回车或返回，或者在触摸屏设备上点击它，可以调用关联的事件处理程序。试试我们的例子<a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html">simple-button-example.html</a>(<a href="https://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html">查看在线例子</a>)来看看我们是什么意思。</p> + +<p>另一方面，像<a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmousedown">mousedown</a>和<a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmouseup">mouseup</a>这些特定的鼠标事件会产生一些问题 - 他们的事件处理程序不能使用除了鼠标意外的设备操作。</p> + +<p>如果你尝试通过键盘或触摸来试试我们的<a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html">simple-box-drag.html</a>(<a href="https://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html">查看在线例子</a>)，你将发现问题。它发生的原因是我们用了下面的代码：</p> + +<pre>div.onmousedown = function() { + initialBoxX = div.offsetLeft; + initialBoxY = div.offsetTop; + movePanel(); +} + +document.onmouseup = stopMove;</pre> + +<p>为了能其他表单空间起作用，你需要使用其他同等的事件代替，比如在触屏设备上用touch事件：</p> + +<pre>div.ontouchstart = function(e) { + initialBoxX = div.offsetLeft; + initialBoxY = div.offsetTop; + positionHandler(e); + movePanel(); +} + +panel.ontouchend = stopMove;</pre> + +<p>我们提供了一个简单的例子来展示如何使用鼠标和触摸事件 - <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html">multi-control-box-drag.html </a>(<a href="https://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html">查看在线例子</a>)</p> + +<p><strong>注意</strong>: 你可以看到一个功能完善的例子，展示如何在实现<a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms">游戏控制机制</a>中实现不同的控制机制。</p> + +<h2 id="响应式设计">响应式设计</h2> + +<p><a href="/en-US/Apps/Progressive/Responsive">响应式设计</a>是根据屏幕大小和分辨率等因素动态更改您的应用程序的布局和其他功能的做法，因此对于不同设备类型的用户来说，它们是可用和可访问的。</p> + +<p>特别是，移动端设备需要解决的最常见的问题是：</p> + +<ul> + <li>移动端设备布局的适用性。例如，在窄屏上多列布局不能很好的工作，需要提高文字大小以便变成可读。这些问题可以通过<a href="/en-US/docs/Web/CSS/Media_Queries">媒体查询</a>、<a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>、<a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">弹性布局</a>来解决上面的问题。</li> + <li>节省下载的图片大小。一般来说，小屏幕设备不需要与桌面设备一样大的图像，而且它们将更可能在慢速网络连接上。因此，适当地缩小屏幕设备以缩小图像是明智的。您可以使用<a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">响应式图像技术</a>处理此问题。</li> + <li>考虑高分辨率。许多移动设备具有高分辨率屏幕，因此需要更高分辨率的图像，使得显示器可以继续看起来清晰和锐利。再次，您可以使用响应式图像技术来适当地提供图像。此外，使用SVG矢量图像格式可以满足许多图像要求，这些格式在目前的浏览器中得到了很好的支持。 SVG有一个小文件大小，并将保持清晰的大小显示在（请参阅<a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">向网络添加矢量图形</a>一些更多的细节）。</li> +</ul> + +<p><strong>注意</strong>: 我们不会在这里对响应式设计进行完整的讨论，因为他们在MDN其他地方都有涉及（参考上面的链接）。</p> + +<h3 id="具体的需要注意的点">具体的需要注意的点</h3> + +<p>这里有很多其他重要的需要考虑的点，他们可以让我们通过移动设备访问网站时更无障碍。</p> + +<h4 id="不能缩放">不能缩放</h4> + +<p>我们可以利用<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>来禁止用户缩放，在你的<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head"><head></a>中加入下列代码即可：</p> + +<pre><meta name="viewport" content="user-scalable=no"></pre> + +<p>如果可能的话，你绝对不应该这么做 - 很多人都会依靠缩放来看你网站的内容，所以不使用缩放这个功能是一个很糟糕的主意。在某些情况下缩放会破坏UI；这种情况下，你觉得你绝对需要缩放，你可以提供一些别的近似的方法。例如增加一个控制文字大小的控件，通过这种方式就不会破坏UI了。</p> + +<h4 id="保持菜单可用">保持菜单可用</h4> + +<p>因为移动设备上的屏幕非常窄，所以使用媒体查询和其他技术使得导航菜单缩小到显示屏顶部的一个小图标，只有在需要的时候才展示菜单，这种方式在移动设备上很常见的。 这通常由“三横线”图标表示，并且设计模式因此被称为“汉堡菜单”。</p> + +<p>在实现这样的菜单时，需要确保显示控件的控件可以通过适当的控制机制（通常为移动触摸）进行访问，如上面的控制机制中所讨论的，并且页面的其余部分被移开 或在菜单被访问时以某种方式隐藏，以避免与导航混淆。</p> + +<p>让我们来看一个很好的“<a href="http://fritz-weisshart.de/meg_men/">汉堡包菜单”的例子</a></p> + +<h2 id="用户输入">用户输入</h2> + +<p>在移动设备上，输入数据往往比在台式计算机上的同等体验更令用户恼火。使用桌面或笔记本电脑键盘输入文本到表单输入比触摸屏虚拟键盘或微小的移动物理键盘更方便。</p> + +<p>出于这个原因，值得尽量减少所需的输入量。作为一个例子，与其让用户每次使用常规文本输入来填写他们的工作标题，而是可以提供一个<select>菜单，其中包含最常见的选项（这也有助于数据输入的一致性），并提供一个“其他”选项，显示一个文本字段来输入任何异常值。你可以在<a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html">common-job-types.html</a>中看到这个想法的一个简单的例子（查看<a href="https://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html">在线例子</a>）。</p> + +<p>也值得考虑在移动平台上使用HTML5格式输入类型（如日期），因为它们可以很好地处理它们 - 例如，Android和iOS都会显示可用于设备体验的可用小部件。有关示例，请参阅<a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html">html5-form-examples.html</a>（请查看<a href="https://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html">HTML5表单示例</a>） - 尝试加载这些内容并在移动设备上对其进行操作。例如：</p> + +<ul> + <li>在输入数字、电话和邮件时，展示合适的虚拟键盘来输入数字。</li> + <li>在输入时间和日期时展示合适的选择器来选择时间和日期。</li> +</ul> + +<p>如果你想为桌面端提供不同的解决方案，则可以使用功能检测为您的移动设备始终提供不同的标记。有关检测不同输入类型的原始信息，请参阅<a href="http://diveinto.html5doctor.com/detect.html#input-types">输入类型</a>，还可以查看我们的<a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">功能检测文章</a>获取更多信息。</p> + +<h2 id="总结">总结</h2> + +<p>在本文中，我们向您提供了有关常见移动设备可访问性问题的一些细节以及如何克服这些问题。我们还通过使用最常用的屏幕阅读器来帮助您进行无障碍测试。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="https://www.smashingmagazine.com/guidelines-for-mobile-web-development/">移动Web开发指南</a> — “Smashing”杂志的文章列表，涵盖移动网页设计的不同技术。</li> + <li><a href="http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644">使您的网站在触摸设备上工作</a> — 有关使用触摸事件来获得在移动设备上进行交互的有用文章。</li> +</ul> + +<div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div> + +<div> </div> + +<div> +<div> +<h2 id="在这个模块中">在这个模块中</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility">什么是可访问性?</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> +</ul> +</div> +</div> diff --git a/files/zh-cn/learn/accessibility/wai-aria_basics/index.html b/files/zh-cn/learn/accessibility/wai-aria_basics/index.html new file mode 100644 index 0000000000..c50974a562 --- /dev/null +++ b/files/zh-cn/learn/accessibility/wai-aria_basics/index.html @@ -0,0 +1,433 @@ +--- +title: WAI-ARIA basics +slug: learn/Accessibility/WAI-ARIA_basics +tags: + - WAI-ARIA + - Web无障碍 + - 无障碍 +translation_of: Learn/Accessibility/WAI-ARIA_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}</div> + +<p class="summary">紧接上文继续，有时候，我们制作涉及非语义HTML 和动态的JavaScript 内容更新的复杂UI控件可能很困难。<strong>WAI-ARIA </strong>是一项技术，它可以通过浏览器和一些辅助技术来帮助我们进一步地识别以及实现语义化，这样一来能帮助我们解决问题，也让用户可以了解发生了什么。接下来我们将展示如何运用它来优化无障碍体验：</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提要求:</th> + <td>基础的电脑知识，对于HTML，CSS，JavaScript 的了解，<a href="/zh-CN/docs/Learn/Accessibility/">还有对于前文课程的了解</a>。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>进一步了解WAI-ARIA，明白他如何提供有效的语义，以便接下来在有需要的时候提供无障碍优化。</td> + </tr> + </tbody> +</table> + +<h2 id="何为_WAI-ARIA">何为 WAI-ARIA?</h2> + +<p>让我们开始看看何为 WAI-ARIA，以及它能给我们什么用。</p> + +<h3 id="一堆新的问题">一堆新的问题</h3> + +<p>当Web 应用开始变得越来越复杂和动态化，一堆全新的无障碍访问问题和特性接踵而至。</p> + +<p>例如，HTML5 提出了几种语义化标签用于定义常规页面的特性(例如 nav, footer 等等) 。在这些标签可用之前，我们一般简单地用div 带上ID 抑或是class 来解决问题，例如：<code><div class="nav"></code>。但是这种实践是问题丛生的，因为没有简单的方法可以轻松地用可编程的方法找到特定页面功能，例如主导航。</p> + +<p>最早的解决方案是加一个或者多个隐藏的链接来跳转到我们想要的位置，例如（这里用导航举例）：</p> + +<pre class="brush: html"><a href="#hidden" class="hidden">Skip to navigation</a></pre> + +<p>但这仍然是不准确的，而且只能在屏幕阅读器开启页面顶部读取时使用。</p> + +<p>另一个例子：应用开始支持一些复杂的类型输入，像是日期选择器可选择日期，抑或是范围选择器可以用滑块选择值，HTML5 提供了以下的类型：</p> + +<pre class="brush: html"><input type="date"> +<input type="range"></pre> + +<p>他对于跨浏览器的支持并不好，而且他的样式修改也很麻烦，这使得他在网页的集成设计上难以有所用途。所以我们常常会用JavaScript 库来做这事，所以会用一系列嵌套的div 或者带有class 的table 元素，然后用CSS 来制定样式，JavaScript 来控制行为。</p> + +<p>这样的问题是视觉上这样做事可行的，但屏幕阅读器对此会感到一无所知，他只能告诉用户她看到一堆复杂结构的元素，且毫无语义可言。</p> + +<h3 id="进入_WAI-ARIA">进入 WAI-ARIA</h3> + +<p><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> 是W3C编写的规范，定义了一组可用于其他元素的HTML 特性，用于提供额外的语义化以及改善缺乏的可访问性。以下是规范中三个主要的特性：</p> + +<ul> + <li><strong>角色</strong> — 这定义了元素是干什么的。许多「标志性的角色」，其实重复了HTML5 的结构元素的语义价值。例如 <code>role="navigation"</code> ({{htmlelement("nav")}}) 或者 <code>role="complementary"</code> ({{htmlelement("aside")}})，这也有一些描述其他页面结构的（角色）， 例如 <code>role="banner"</code>, <code>role="search"</code>, <code>role="tabgroup"</code>, <code>role="tab"</code> 等等。我们通常能从UI 层面找到它们。</li> + <li><strong>属性</strong> — 我们能通过定义一些属性给元素，让他们具备更多的语义。例如： <code>aria-required="true"</code> 意味着元素在表单上是必填的。 然而 <code><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a>="label"</code> 允许你在元素上设置一个ID，用于<code><a href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">labelledby</a></code>引用作为屏幕阅读器指定的label 内容 ，多个也可以。当然，下面这个代码是不行的： <code><label for="input"></code> 。举个例子：你可以用 <code>aria-labelledby</code> 指定包含在a 标签中的key 描述{{htmlelement("div")}} 是多个 table 表格的label ，或者将它指定为 img 标签的alt 内容 — 而无需重复在每一个img 里头定义。如果迷糊了，你可以在这里看到例子： <a href="/en-US/docs/Learn/Accessibility/HTML?document_saved=true#Text_alternatives">Text alternatives</a>.</li> + <li><strong>状态</strong> —用于表达元素当前的条件的特殊属性，例如 <code>aria-disabled="true"</code>，屏幕阅读器就会这个表单禁止输入。状态和属性的差异之处就是：属性在应用的生命周期中不会改变，而状态可以，通常我们用编程的方法改变它，例如Javascript。</li> +</ul> + +<p>关于 WAI-ARIA 属性重要的一点是它不会对web 页面有任何影响，除了让更多的信息从浏览器暴露给 accessibility APIs (无障碍API)，这也是屏幕阅读器这一类软件的信息源。WAI-ARIA 不会影响网页的结构，以及DOM 等等，尽管这些属性可用于作为css 选择器。</p> + +<div class="note"> +<p><strong>Note</strong>: 关于ARIA 的角色和他的用法，如需了解更多信息，尽在WAI-ARIA 规范，查看 <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">角色定义</a></p> + +<p>规范同时也包含了属性和状态的一个列表，链接有更多详尽信息：<a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">查看 属性和状态的定义（所有的aria-* 属性）</a></p> +</div> + +<h3 id="在哪里支持WAI-ARIA？">在哪里支持WAI-ARIA？</h3> + +<p>这不是一个容易回答的问题。很难找到一个确定的资源，说明支持WAI-ARIA 的哪些功能，以及在哪里，因为</p> + +<ol> + <li>WAI-ARIA 规范的特性太多了。</li> + <li>操作系统、浏览器、屏幕阅读器三者相加的组合太多了，这些都需要考虑。</li> +</ol> + +<p>最后一个关键点——首先使用屏幕阅读器，你的操作系统需要运行具有必要的辅助功能API的浏览器，以便公开屏幕阅读器完成工作所需的信息。大部分流行的操作系统都有一到两个支持屏幕阅读器的浏览器。Paciello组织有一个新的帖子，以供参考： <a href="https://www.paciellogroup.com/blog/2014/10/rough-guide-browsers-operating-systems-and-screen-reader-support-updated/">Rough Guide: browsers, operating systems and screen reader support updated</a>.</p> + +<p>接下来，你需要考虑下有问题的浏览器是否支持无障碍特性以及提供他们API 格式的信息暴露，并且屏幕阅读器是否识别信息并且正确地传达给用户。</p> + +<ol> + <li>文章到现在，可以看得出浏览器端对于无障碍的支持做的很好。 <a href="http://caniuse.com/#feat=wai-aria">caniuse.com</a> 这一网站显示全球浏览器支持 WAI-ARIA 的比率达到了88%。</li> + <li>屏幕阅读器支持无障碍特性反而没达到这个水平，但是主流的屏幕阅读器做到了。 你可以通过查看Powermapper来了解支持级别 <a href="http://www.powermapper.com/tests/screen-readers/aria/">WAI-ARIA Screen reader compatibility</a><span> 。</span></li> +</ol> + +<p>我们目的不是详细介绍所有的 WAI-ARIA 特性，以及它大部分支持的细节。相反，介绍最主要的 WAI-ARIA功能。我们没有提到的任何支持细节，您可以假定该特性得到了良好的支持。我们将清楚地介绍例外情况。</p> + +<div class="note"> +<p><strong>笔记</strong>：一些JavaScript 库支持 WAI-ARIA，意味着生成UI 界面时，例如复杂的表单控件，他们会添加 ARIA 属性来优化它的无障碍特性。如果你再找一些第三方JavaScript 解决方案来进行快速的UI 开发，当你做选择的时候，必须重视 UI小部件的可访问性。一个良好的例子就是 jQuery UI (请看 <a href="https://jqueryui.com/about/#deep-accessibility-support">About jQuery UI: Deep accessibility support</a>), <a href="https://www.sencha.com/products/extjs/">ExtJS</a> 还有 <a href="https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html">Dojo/Dijit</a>。</p> +</div> + +<h3 id="何时你应使用_WAI-ARIA">何时你应使用 WAI-ARIA?</h3> + +<p>我们过去讨论了一些促使WAI-ARIA 诞生的问题。但基本上是以下四个主要领域：</p> + +<ol> + <li><strong>路标/地标</strong>（<strong>Signposts/Landmarks</strong>）<strong>：</strong> ARIA 的 <code>角色</code> 属性值可以作为地标来复制HTML5 元素的语义化（例如 nav tag）。或者超越HTML5 的语义，给不同的功能块提供「路标」，例如 <code>search</code>, <code>tabgroup</code>, <code>tab</code>, <code>listbox</code> 等等 。</li> + <li><strong>动态的内容更新：</strong> 屏幕阅读器往往难以报告一直变化的内容，用无障碍特性我们能使用 <code>aria-live</code> 来通知屏幕阅读器某一部分的内容更新了。例如<a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> 或者 <a href="/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>。</li> + <li><strong>优化键盘的无障碍操作</strong>: 默认的HTML 元素是具有自带的键盘辅助功能的。当其他元素与JavaScript一起进行交互时，键盘的辅助功能和屏幕阅读器的报告会因此收到影响（例如你将会难以用tab 到达理想的位置）。这是无法避免的，WAI-ARIA 提供了提供了一种允许其他元素获得焦点的方法 （使用 <code>tabindex</code>）。</li> + <li><strong>非语义控件的可访问性</strong>： 当一系列嵌套的 <code><div></code> 与CSS / JavaScript一起用于创建复杂的UI功能，或者通过JavaScript大大地增强或者更改原生的控件，可访问性将会变得极其困难——屏幕阅读器将会难以找到语义内容线索。在这种情况下，AIRA 可以帮助提供缺少了的功能，例如 <code>button</code>, <code>listbox</code>，或者 <code>tabgroup</code>，另外和aria-required 或aria-posinset 这样的属性可以提供有关功能的更多线索。</li> +</ol> + +<p>注意：<strong>你只在需要的情况下使用无障碍特性！</strong>理想的情况下，你只要用原生的HTML 来实现屏幕阅读器所需的语义化内容即可。有些时候这是不可能的，一来是你对于代码的整体的控制是有限的，另一方面是总会有复杂到原生HTML 无法支持的功能需要你实现。在这个场景下，WAI-ARIA 将会变成有价值的可访问优化功能。</p> + +<p><strong>但还是要重申：当你需要的时候再使用无障碍特性！</strong></p> + +<div class="note"> +<p><strong>注释</strong>：另外， 请尝试确保你的真实用户来测试你的网站：普通人，使用屏幕阅读器的用户，使用键盘导航的人。他们会提供你更多的见解。</p> +</div> + +<h2 id="实用的_WAI-ARIA_实现">实用的 WAI-ARIA 实现</h2> + +<p>在下一节中，我们将更详细地研究这四个方，并提供一些实例。继续之前你最好安装一个屏幕阅读器，以便你测试接下来的用例。（接下来的屏幕阅读器默认为 Mac 的VoiceOver，Windows 用户可以尝试JAWS 或者 Window Eyes ）</p> + +<p>查看我们的 <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">testing screenreaders</a> 得到更多关于屏幕阅读器的信息。</p> + +<h3 id="路牌地标_（SignpostsLandmarks）">路牌/地标 （<strong>Signposts/Landmarks</strong>）</h3> + +<p>WAI-ARIA 给浏览器增加了 <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions"><code>role</code> </a>属性，这允许我们给站点中的元素增加我们想要的语义属性。第一个主要区域便是用于为屏幕阅读器提供信息，以便用户可以找到常见的页面元素。我们来举个例子，一个<a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-no-roles">没有角色的站点</a>的例子（<a href="http://mdn.github.io/learning-area/accessibility/aria/website-no-roles/">在线demo</a>）的页面结构：</p> + +<pre class="brush: html"><header> + <h1>...</h1> + <nav> + <ul>...</ul> + <form> + <!-- search form --> + </form> + </nav> +</header> + +<main> + <article>...</article> + <aside>...</aside> +</main> + +<footer>...</footer></pre> + +<p>如果你用现代浏览器打开，并用屏幕阅读器测试，你就已经得到你要的信息了。例如VoiceOver 会给你以下信息（会以英文念出）：</p> + +<ul> + <li>在 <code><header></code> 元素 — "banner, 2 items" (它包含标题和 <code><nav></code>).</li> + <li>在 <code><nav></code> 元素 — "navigation 2 items" (它包含一个列表和一个表单).</li> + <li>在 <code><main></code> 元素 — "main 2 items" (它包含文章和侧边栏).</li> + <li>在 <code><aside></code> 元素 — "complementary 2 items" (它包含列表和标题.</li> + <li>在搜索表单输入 — "Search query, insertion at beginning of text".</li> + <li>在 <code><footer></code> 元素 — "footer 1 item".</li> +</ul> + +<p>如果你转到VoiceOver的地标菜单（使用VoiceOver 绑定键（你可以在VoiceOver Utility 中设置） + U 访问，然后使用光标或者键盘来选择菜单选项），你将看到大部分元素都已很好地列出，因此可以快速访问它们。</p> + +<p><br> + <img alt="" src="https://mdn.mozillademos.org/files/14420/landmarks-list.png" style="display: block; margin: 0 auto;"></p> + +<p>尽管如此，我们可以做的更好。这个搜索表单是一个人们愿意找到的重要的地标，我们可以设置input 的类别为search (<code><input type="search"></code>)。 另外，在一些老的浏览器（尤其是IE8） 是无法识别的这些HTML5 的元素语义化的。</p> + +<p>让我们来优化上文代码并且用上无障碍特性。首先我们给HTML 的结构加上角色。你可以复制上文demo 的index.html 和style.css 继续修改，或者看我们的网站无障碍角色版本例子（<a href="http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">在线demo</a>），结构如下：</p> + +<pre class="brush: html"><header> + <h1>...</h1> + <nav role="navigation"> + <ul>...</ul> + <form role="search"> + <!-- search form --> + </form> + </nav> +</header> + +<main> + <article role="article">...</article> + <aside role="complementary">...</aside> +</main> + +<footer>...</footer></pre> + +<p>我们用了一个额外的功能：input元素用了属性 <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code>, 它给它一个描述性标签，可以由屏幕阅读器读出，尽管我们没有label 元素。在这些情况下，这非常有用——像这样的搜索表单是一个非常常见的，易于识别的功能，添加label 会破坏页面设计。</p> + +<pre class="brush: html"><input type="search" name="q" placeholder="Search query" aria-label="Search through site content"></pre> + +<p>现在我们再用VoiceOver，会得到以下改进：</p> + +<ul> + <li>搜索表单在浏览页面时和地标菜单中都作为单独的项目存在。</li> + <li>因为有 <code>aria-label</code> ，那么读取到这个input 他的内容会被高亮念出。</li> +</ul> + +<p>除此之外，为了让 IE8 等旧版浏览器的用户更容易访问该网站，ARIA 角色的使用就很值得了。 如果由于某种原因，你的网站仅使用<div> 构建，那么你肯定很需要用 ARIA 角色以提供所需的语义！</p> + +<p>搜索表单的改进语义表明当超出HTML5中可用的语义时 ARIA 可以实现的功能。你接下来可以看到这些语义和ARIA 属性的强大功能，尤其是 {{anch("非语义控件的可访问性")}}那一段。接下来我们将明白ARIA 如何在进行动态内容更新时给我们帮助。</p> + +<h3 id="动态内容更新">动态内容更新</h3> + +<p>使用屏幕阅读器可以轻松访问读取到DOM 中的内容，从文本内容到附加到图像的alt 文本。 所以具有大量文本内容的传统静态网站易于为视碍人士提供信息。</p> + +<p>问题在于现代Web 应用程序通常不仅仅是静态文本——它们往往有很多动态更新内容，即通过 <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>，<a href="/en-US/docs/Web/API/Fetch_API">Fetch</a> 或<a href="/en-US/docs/Web/API/Document_Object_Model">DOM API</a> 等机制重新加载整个页面的内容。 这些有时被称为<strong>实时区域</strong>。</p> + +<p>我们来看一个小例子—— <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html">在线demo</a>)。在这个例子我们哟一个小的随机引用块：</p> + +<pre class="brush: html"><section> + <h1>Random quote</h1> + <blockquote> + <p></p> + </blockquote> +</section></pre> + +<p>我们的JavaScript 从 <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> 加载一个JSON 文件里头包含了一系列的名人名言，一旦完成我们就开始用一个 <code><a href="/en-US/docs/Web/API/WindowTimers/setInterval">setInterval()</a></code> 循环以十秒一次的频率显示出来。</p> + +<pre class="brush: js">var intervalID = window.setInterval(showQuote, 10000);</pre> + +<p>这当然是可行的，但是对于无障碍可不友善——这种内容变化是不会被屏幕阅读器察觉到的，所以用户不会发现发生了什么。这是一个简单的例子，但你可以想象一下：如果你开发的一个复杂UI 而且内容频繁变化的应用，例如聊天室，或者一个策略游戏的界面，或者一个实时更新的购物车展示。如果没有某种方式提示用户有内容更新，那就不可能以任何有效的方式来使用应用。</p> + +<p>幸运的是，WAI-ARIA 提供了一种有效的机制来发起提示 —— <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-live">aria-live</a></code>。 将此应用于元素会让屏幕阅读器读出更新的内容。 读取内容的紧急程度取决于属性值：</p> + +<ul> + <li><code>off:</code> 默认值，更新不会提醒。</li> + <li><code>polite</code>: 只有用户空闲的情况下提醒。</li> + <li><code>assertive</code>: 尽快提醒。</li> + <li><code>rude</code>: 会以打断用户操作的方式直接提醒。</li> +</ul> + +<p>通常来说 <code>assertive</code> 设置足以让你的更新在显示时按时序读出，因此，如果改变多次，那么他只会念出最后一个改变。除非紧急程度高到需要覆盖其他的更新才选择使用 <code>rude</code> 。</p> + +<p>我们可以复制 <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> 和 <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/quotes.json">quotes.json</a> ，然后像下面一样更新你的 <code><section></code> tag ：</p> + +<pre class="brush: html"><section aria-live="assertive"></pre> + +<p>这会让你的屏幕阅读器在更新时可以读取内容。</p> + +<div class="note"> +<p><strong>笔记</strong>: 当你用<code>file://</code>协议头来发 <code>XMLHttpRequest</code> 大部分浏览器会抛出 security exception 。所以你可能要设置一个web 服务器来作为请求源，例如 用Github: <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">using GitHub</a>，或者设置一个本地服务器 <a href="http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/">Python's SimpleHTTPServer</a>。</p> +</div> + +<p>这里有一个附加的考虑—— 只读取更新的文本位。如果我们总是读出标题可能会很好，这样用户就可以记住正在读出的内容。为了能做到这个，我们增加了 <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-atomic">aria-atomic</a></code> 给section 。再次更新 <code><section></code> ，像这样：</p> + +<pre class="brush: html"><section aria-live="assertive" aria-atomic="true"></pre> + +<p>这个 <code>aria-atomic="true"</code> 属性告诉屏幕阅读器去读取整个元素的内容作为一个原子单位， 而不是里头某个字符串更新了。</p> + +<div class="note"> +<p><strong>笔记</strong>: 你可在此完成此例子 <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html">aria-live.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/aria-live.html">在线demo</a>).</p> +</div> + +<div class="note"> +<p><strong>笔记</strong>: <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code> 属性对于控制更新实时区域时读取的内容也非常有用。例如，你读取内容添加或删除。</p> +</div> + +<h3 id="优化键盘的无障碍操作"><strong>优化键盘的无障碍操作</strong></h3> + +<p>正如上下文中其他几处讨论的，HTML 在可访问性方面的关键优势之一是按钮，表单控件和链接等功能的内置键盘可访问性。 平时你可以使用Tab 键在控件之间移动，使用Enter / Return 键选择或激活控件，偶尔也可以根据需要使用其他控件（例如上下光标在<code><select></code> 框中的选项之间移动）。</p> + +<p>但是在一些时候，你最终还是得编写代码去使用非语义元素作为按钮（或其他类型的控件），或者使用可聚焦控件来达到错误的目的。 您可能正在尝试修复一些您之前的错误代码，或者您可能正在构建某种需要它的复杂小部件。</p> + +<p>在让不可聚焦代码可聚焦这一方面，WAI-ARIA 用一些新的值来扩展了<code>tabindex</code> 的属性：</p> + +<ul> + <li><code>tabindex="0"</code> — 如上所述， 这个值让不能被tab 的元素变得 tabbable。这是 <code>tabindex</code> 最有用的值。</li> + <li><code>tabindex="-1"</code> — 这允许通常不可列表的元素以编程方式来接收focus。例如用： JavaScript，或者作为链接的目标。</li> +</ul> + +<p>我们更详细地讨论了这一点，并在HTML辅助功能文章中显示了一个典型的实现<br> + ——请看 <a href="/en-US/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a>.</p> + +<h3 id="非语义控件的可访问性">非语义控件的可访问性</h3> + +<p>当一系列嵌套的 <code><div></code>s 与CSS / JavaScript一起用于创建复杂的UI功能，或者通过JavaScript大大地增强或者更改原生的控件，不仅键盘可访问性受损。而且如果没有语义或其他线索，屏幕阅读器用户会发现很难弄清楚该功能的作用。在这种情况下，ARIA可以帮助提供那些缺失的语义。</p> + + + +<h4 id="表单验证和错误显示">表单验证和错误显示</h4> + + + +<p>首先， 让我们在此访问之前的文章（重读 <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive">Keeping it unobtrusive</a>）。 在本节的最后，我们展示了当您尝试提交表单时，如果存在验证错误，我们在错误消息框中包含了一些ARIA属性：</p> + +<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>errors<span class="punctuation token">"</span></span> <span class="attr-name token">role</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>alert<span class="punctuation token">"</span></span> <span class="attr-name token">aria-relevant</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>all<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<ul> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">role="alert"</a></code> 自动将其转变为实时区域，所以它一变化就会念出来。也语义化地说明了这是一个alert 信息（重要的 时间/上下文 敏感信息），而且展现了一种更好，更加易于读取的警告用户的方式（模态警告例如 <code><a href="/en-US/docs/Web/API/Window/alert">alert()</a></code> 的调用会导致一系列的可访问性问题，详情请看<a href="http://webaim.org/techniques/javascript/other#popups">Popup Windows</a> ）。</li> + <li>一个 <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code> 的值为 <code>all</code> 会指示屏幕阅读器在对其进行任何更改时读出错误列表的内容 — 即为错误的增加或者消失。这是很有用的，因为用户需要知道具体哪个错误的出现或者消失，不仅仅是表单错误列表出现了增加或者删除。</li> +</ul> + +<p>我们可以在 ARIA 的应用上更进一步，并提供更多验证上的帮助。例如支出某个字段是否必填，或者是要填的年龄的区间该是多少？</p> + + + +<ol> + <li>首先，复制刚刚的 <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> 还有 <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/validation.js">validation.js</a> 文件，然后保存到本地。</li> + <li>把两个文件都用文本编辑器打开并且看看运作原理。</li> + <li>首先，在<code><form> </code>标签的正上方添加一个段落，如下，并用星号标记表单<label>。 这通常是我们为有视力的用户标记必填字段的一个常用手法。 + <pre class="brush: html"><p>Fields marked with an asterisk (*) are required.</p></pre> + </li> + <li>这对于具备视力的人显而易见，但是对于屏幕阅读器用户而言就不友好了。所幸 WAI-ARIA 提供了 <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-required">aria-required</a></code> 属性来让屏幕阅读器获取提示来告诉用户这个input 必须填写，更新你的 <code><input></code> 元素如下： + <pre class="brush: html"><input type="text" name="name" id="name" aria-required="true"> + +<input type="number" name="age" id="age" aria-required="true"></pre> + </li> + <li>你过你保存了并且现在用屏幕阅读器测试，你会听到如下内容：「Enter your name star, required, edit text」</li> + <li>回到第二个关于数值范围的讨论，通常我们会用一个tooltips 来展示，或者用placeholder 显示提示信息。 WAI-ARIA 有一个 <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin">aria-valuemin</a></code> 和 <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax">aria-valuemax</a></code> 属性来执行最大最小值，但现阶段看来支持程度并不好。另一个好办法就是用 <code>placeholder</code> 属性，当用户输入的时候，就会念出placeholder 的内容最为信息提示。更新你的数值输入 input 如下： + <pre class="brush: html"><input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true"></pre> + </li> +</ol> + +<div class="note"> +<p><strong>笔记</strong>： 你可以在这里看这个在线完成的例子 <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html">form-validation-updated.html</a>.</p> +</div> + +<p>除了经典的 {{htmlelement("label")}} 元素之外，WAI-ARIA 还支持一些高级表单标注技术。 我们已经讨论过使用 <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code> 属性来提供标签，我们不希望标签对于有视力的用户是可见的（参见上面的 {{anch("路牌/地标 （Signposts/Landmarks）")}} 部分）。 还有一些其他标签技术使用其他属性，例如 <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a></code> ，如果你想将非<label>元素指定为标签或标签多个表单输入具有相同的标签，并且 <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a></code>，如果你想关联 带有表单输入的其他信息，并将其读出。 请查阅文章获得更多细节： <a href="http://webaim.org/techniques/forms/advanced">WebAIM's Advanced Form Labeling article</a></p> + +<p>还有许多其他有用的属性和状态，用于指示表单元素的状态。 例如：<span class="subtitle"><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a>="true" </code></span>可用于表示该表单字段已禁用。 许多浏览器只会跳过禁用的表单字段，它们甚至不会被屏幕阅读器读出，但在某些情况下它们会被识别出来，所以最好包含这个属性让屏幕阅读器知道禁用的输入事实上已经被禁用。</p> + +<p>如果输入的禁用状态可能会改变，那么指示它何时发生以及结果是什么也是一个好主意。 例如，在我们的<span class="subtitle"><a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-checkbox-disabled.html">form-validation-checkbox-disabled.html</a> </span>这一demo 中 ，有一个复选框，选中后，启用另一个表单输入以允许输入更多信息。 我们已经建立了一个隐藏的实时区域：</p> + +<pre class="brush: html"><p class="hidden-alert" aria-live="assertive"></p></pre> + +<p>这是使用绝对定位隐藏的视图。 当选中/取消选中此项时，我们会更新隐藏的实时区域内的文本，以告诉屏幕阅读器用户检查此复选框的结果是什么，以及更新<code>aria-disabled</code>状态和一些可视指示器：</p> + +<pre class="brush: js">function toggleMusician(bool) { + var instruItem = formItems[formItems.length-1]; + if(bool) { + instruItem.input.disabled = false; + instruItem.label.style.color = '#000'; + instruItem.input.setAttribute('aria-disabled', 'false'); + hiddenAlert.textContent = 'Instruments played field now enabled; use it to tell us what you play.'; + } else { + instruItem.input.disabled = true; + instruItem.label.style.color = '#999'; + instruItem.input.setAttribute('aria-disabled', 'true'); + instruItem.input.removeAttribute('aria-label'); + hiddenAlert.textContent = 'Instruments played field now disabled.'; + } +}</pre> + +<h4 id="描述非语义的button_是个button">描述非语义的button 是个button</h4> + +<p>在本课程中已经有几次，我们已经提到了原生的无障碍（以及使用其他元素伪造导致的无障碍问题）按钮，链接或表单元素（请参阅HTML辅助功能文章中的<a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI 控件</a> ，以及{{anch("优化键盘的无障碍操作")}}，上面）。 基本上，利用 tabindex 和一些JavaScript的话，大部分情况下添加键盘辅助功能不会有多少麻烦。</p> + + + +<p>但是屏幕阅读器呢？他们还是看着这个元素并不是一个button，如果你用屏幕阅读器测试我们的 <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> 例子，你会听到一段短语描述这个按钮，内容大概是 "Click me!, group"，显然这会让人疑惑。</p> + +<p>依旧，WAI-ARIA 的角色可以解决一切，复制文件 <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a>，然后加上 <code><a href="https://www.w3.org/TR/wai-aria-1.1/#button">role="button"</a></code> 到每一个button <code><div></code>，如下所示</p> + +<pre><div data-message="This is from the first button" tabindex="0" role="button">Click me!</div></pre> + +<p>这时候再用屏幕阅读器，这次你会听到短语 "Click me!, button" ——舒服了。</p> + +<div class="note"> +<p><strong>笔记</strong>：别忘了无论如何用正确的语义化元素是最佳选择。如果你想创建一个按钮，你可用 {{htmlelement("button")}} 元素，你应该用 {{htmlelement("button")}} 元素！</p> +</div> + +<h4 id="通过复杂的小部件做引导用户">通过复杂的小部件做引导用户</h4> + +<p>还有许多其他 <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">roles</a> 可以将非语义元素结构识别为常见的UI功能，这些功能超出了标准HTML中可用的功能，例如 <code><a href="https://www.w3.org/TR/wai-aria-1.1/#combobox">combobox</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#slider">slider</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tree">tree</a></code>.。 你可以在 <a href="https://dequeuniversity.com/library/">Deque university code library</a> 中看到许多有用的示例，以便了解如何使这些控件做到无障碍的。</p> + +<p>让我们来看看我们自己的一个例子。 我们将返回到我们简单的绝对定位选项卡界面（请参阅我们的CSS和JavaScript 无障碍的文章的 <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Hiding_things">Hiding things</a> 段落），你可以在 <a class="external external-icon" href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Tabbed info box example</a>中找到它（<a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">源码地址</a>）。</p> + +<p>这个例子在键盘可访问性方面运行良好 —— 你可以愉快地在不同选项卡之间进行tab 并选择它们然后显示选项卡内容。 它也是相当容易访问的 —— 你可以滚动浏览内容并使用标题进行导航，即使你无法看到屏幕上发生的事情。 然而，内容并不明显 —— 屏幕阅读器目前将内容报告为链接列表，以及一些内容包含三个标题。 它不会让你知道内容之间的关系。 为用户提供有关内容结构的更多线索总是好的。</p> + +<p>为了优化它，我们创建了一个新的例子，名为： <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-tabbed-info-box.html">aria-tabbed-info-box.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/aria-tabbed-info-box.html">看在线demo</a>). 我们更新了选项卡式界面的结构，如下所示：</p> + +<pre class="brush: html"><ul role="tablist"> + <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li> + <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li> + <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li> +</ul> +<div class="panels"> + <article class="active-panel" role="tabpanel" aria-hidden="false"> + ... + </article> + <article role="tabpanel" aria-hidden="true"> + ... + </article> + <article role="tabpanel" aria-hidden="true"> + ... + </article> +</div></pre> + +<div class="note"> +<p><strong>笔记</strong>：这里最明显的变化是我们删除了最初在示例中出现的链接，并且只使用了列表项作为选项卡 - 这样做是因为它使屏幕阅读器用户不那么容易混淆（链接并不会跳转，它们只更改视图），它允许 大小修改/位置变化 一类的feature 更好地工作 —— 当这些被放在链接上时，浏览器始终报告"1 of 1"，而不是"1 of 3 "，"2 of 3"等</p> +</div> + +<p>以下刚刚用上的新特性:</p> + +<ul> + <li>新角色 — <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tablist">tablist</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tab">tab</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a></code> — 这些确定几个tab 表界面的重要区域——tabs 的容器，tabs 自身，还有他们的一致性tabpanels。</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-selected">aria-selected</a></code> — 定义了tab 当前正在被选中。和tabs 被用户选中不同，这种值一般是由JavaScript 修改。</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden">aria-hidden</a></code> — 对屏幕阅读器隐藏一些元素，和tabs 被用户选中不同，这种值一般是由JavaScript 修改。</li> + <li><code>tabindex="0"</code> — 当我们删除链接时，我们需要为列表项提供此属性，以便为其提供键盘焦点。（为没有tabindex 特性的元素也提供tabindex 特性）</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-setsize">aria-setsize</a></code> — 此属性允许您指定屏幕阅读器元素是某个系列的一部分，以及该系列具有多少项。</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-posinset">aria-posinset</a></code> — 这个属性允许你设置一个元素在一个系列中的位置，随着 <code>aria-setsize</code>，他告诉屏幕阅读器（用于设置文件目录树视图）足够的信息去告诉你现在在item "1 of 3" 位置等。大部分情况下，浏览器是可以从DOM 层次结构中推断出这些信息，但它肯定有助于提供更多线索。</li> +</ul> + +<p>在我们的测试中，这个新结构确实有助于改善整体情况。 这些选项卡现在被识别为选项卡（例如，屏幕阅读器说出 「选项卡」），所选选项卡由“选择”表示，并使用选项卡名称读出，屏幕阅读器还会告诉你当前所在的选项卡编号。 此外，由于<code>aria-hidden</code> 设置（只有非隐藏的选项卡有 <code>aria-hidden="false"</code> 设置），非隐藏内容是唯一可以向下导航的内容，这意味着所选内容更容易找到。</p> + +<div class="note"> +<p><strong>笔记</strong>：如果你有不想让屏幕阅读器读出来的东西，你可以给它一个 <code>aria-hidden="true"</code> 属性。</p> +</div> + +<h2 id="总结">总结</h2> + +<p>本文并不是 WAI-ARIA 中的所有内容，但它应该为你提供足以了解使用它的信息，并提供了最常见的几种模式。</p> + +<h2 id="其他链接">其他链接</h2> + +<ul> + <li><a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">Definition of Roles</a> — ARIA roles reference.</li> + <li><a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Definitions of States and Properties (all aria-* attributes)</a> — properties and states reference.</li> + <li><a href="https://dequeuniversity.com/library/">Deque university code library</a> — a library of really useful practical examples showing complex UI controls made accessible using WAI-ARIA features.</li> + <li><a href="http://w3c.github.io/aria-practices/">WAI-ARIA Authoring Practices</a> — very detailed design patterns from the W3C, explaining how to implement different types of complex UI control whilst making them accessible using WAI-ARIA features.</li> + <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a> — A W3C spec that defines, for each HTML feature, what accessibility (ARIA) semantics that feature implicitly has set on it by the browser, and what WAI-ARIA features you may set on it if extra semantics are required.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}</p> + + + +<h2 id="在这个模块：">在这个模块：</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> +</ul> diff --git a/files/zh-cn/learn/accessibility/what_is_accessibility/index.html b/files/zh-cn/learn/accessibility/what_is_accessibility/index.html new file mode 100644 index 0000000000..8d63d61112 --- /dev/null +++ b/files/zh-cn/learn/accessibility/what_is_accessibility/index.html @@ -0,0 +1,236 @@ +--- +title: What is accessibility? +slug: Learn/Accessibility/What_is_accessibility +tags: + - AT + - CSS + - CodingScripting + - HTML + - JavaScript + - keyboard + - 初学者 + - 可访问性 + - 可访问性技术 + - 屏幕阅读器 + - 工具 + - 文章 + - 用户 +translation_of: Learn/Accessibility/What_is_accessibility +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</div> + +<p class="summary">本文作为本模块的开篇阐述了究竟什么是“可访问性” — 主要包括哪些用户群体是我们所需要和为什么需要考虑的，不同用户使用哪些工具与网页交互，以及我们在网站开发流程中如何构建可访问性。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">预备知识:</th> + <td>基本的计算机知识，对HTML和CSS的基本理解。</td> + </tr> + <tr> + <th scope="row">目标:</th> + <td>熟悉可访问性，包括它是什么，以及它对web开发人员的影响。</td> + </tr> + </tbody> +</table> + +<h2 id="什么是可访问性">什么是可访问性?</h2> + +<p>可访问性是一种让尽可能多的用户可以使用你的网站的做法。传统上我们认为这只与残疾人士有关，但提升网站的可访问性也可以让其他用户群体受益。比如使用移动设备的人群，那些使用低速网络连接的人群。</p> + +<p>你也可以把可访问性看成是同等地对待每一个人，给他们平等的机会，无论他们的能力或所处的环境如何。就像不能让坐轮椅的人可以进入大楼是错误的(现代公共建筑通常有轮椅坡道或电梯)；不能让视觉有障碍的人士可以浏览我们的网站同样不正确。我们都是不同的，但我们都是人，因此享有同等的人权。</p> + +<p>使网站具备可访问性才是正确的做法。它也是一些国家法律的一部分，它打开了一些重要的市场，否则那些市场的用户无法使用你的服务或者购买你的产品。</p> + +<p>建立可访问的网站能让每个人都受益：</p> + +<ul> + <li> + <p>使用原语HTML(译注：仅使用非样式标记而样式用CSS定义的HTML称为原语HTML。那些描述内容呈现效果的标记如<b>标记是样式标记，这些样式标记在HTML5中已经废弃），不仅提升了可访问性，也增强了搜索引擎优化，使你的网站更容易被找到。</p> + </li> + <li> + <p>关心可访问性表露出良好的道德品质，它提升了你的公众形象。</p> + </li> + <li> + <p>其他一些改善可访问性的做法也会让你的网站更容易被其他群体使用，比如手机用户，低速网络环境的用户等等。事实上，每个人都可以从这此改善中受益。</p> + </li> + <li> + <p>我们是否也曾提到过到这也是某些地方的法律规定?</p> + </li> +</ul> + +<h2 id="我们应关注的残疾都有哪些种类">我们应关注的残疾都有哪些种类?</h2> + +<p>残疾人士和正常人一样是多样化的，他们身患的残疾也多种多样。此处课题的关键是抛开思考你自己的电脑和你自己使用网页的方式，而是要开始了解别人如何使用网页——你不是你的用户。接下来会讲解需要考虑的主要残疾类型，以及他们访问网页内容时用到的一些特殊工具(被称为辅助技术或ATs)。</p> + +<div class="note"> +<p><strong>注意</strong>：世界卫生组织的“残疾和健康”状况说明书指出：“超过10亿人，约占世界总人口的15%，患有某种形式的残疾”，而且“有1.1亿至1.9亿之间的成年人在身体功能上存在重大困难。”</p> +</div> + +<h3 id="有视觉障碍的人">有视觉障碍的人</h3> + +<p>有视觉障碍的人包括盲人、视力水平低下者、色盲。许多视觉障碍人士使用屏幕放大镜，要么是物理放大镜或是软件缩放功能。现今大多数浏览器和操作系统都具备缩放功能。某些用户使用屏幕阅读器，这是一种可以大声朗读数字文本的软件。一些屏幕阅读器的示例如下：</p> + +<ul> + <li>有些是付费产品， 比如 <a class="external external-icon" href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a> (Windows) 和 <a class="external external-icon" href="http://www.gwmicro.com/window-eyes/">Window Eyes</a> (Windows).</li> + <li>有些是免费产品， 比如 <a class="external external-icon" href="http://www.nvaccess.org/">NVDA</a> (Windows)， <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (Chrome, Windows 和 Mac OS X)， 和 <a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux).</li> + <li>有些内置在操作系统中，比如 <a class="external external-icon" href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a> (Mac OS X and iOS)， <a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a> (Microsoft Windows)， <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (on Chrome OS)，和 <a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li> +</ul> + +<p>让自己熟悉屏幕阅读器是个好主意；您还应该设置一个屏幕阅读器并充分的使用它（盘它），以了解它是如何工作的。请参阅我们的<a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7#%E5%B1%8F%E5%B9%95%E9%98%85%E8%AF%BB%E5%99%A8">跨浏览器屏幕阅读器测试向导</a>，以了解更多使用它们的细节。下面的视频还提供了一个简单的例子说明了体验是怎样的。</p> + +<p>{{EmbedYouTube("IK97XMibEws")}}</p> + +<p>据统计，世界卫生组织估计“全球有2.85亿人视力受损：3900万人失明，2.46亿人视力低下。”(参见<a href="http://www.who.int/mediacentre/factsheets/fs282/en/">视力障碍和失明</a>)。这是一个庞大而重要的用户群却仅因为你的网站没有合理的设计代码而流失——几乎相当于美国的人口总数。</p> + +<h3 id="有听觉障碍的人">有听觉障碍的人</h3> + +<p>也被称为有听力障碍的人或聋子，这群人要么听力水平较低要么或者完全听不到。这些人使用辅助技术（请参考 <a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">听力、语音、说话或语言障碍患者的辅助设备</a>）， 但是并没有专用于计算机/网页的辅助技术。</p> + +<p>但是，现在有专门的技术用于将文本转换成音频内容，范围从转换简单的文本文字到转换与视频一起显示的字幕。 稍后，有文章将讨论这些技术。</p> + +<p>听力受损的人也代表着一个重要的用户群体——“全世界有4.66亿人患有听力障碍”，世界卫生组织的耳聋和听力受损状况报告如此宣称。</p> + +<h3 id="行动障碍的人">行动障碍的人</h3> + +<p>这些人在行动方面存在着残疾，可能是因为纯粹的身体问题（例如肢体丧失或瘫痪），或导致肢体无力或失去控制的神经系统/遗传疾病。 有些人可能难以做出使用鼠标所需的精准手部动作，而另一些人则可能受到的影响更为严重，可能会严重瘫痪到需要使用<a href="https://www.performancehealth.com/baseball-cap-head-pointer">头部指针</a>与计算机进行交互的地步。</p> + +<p>这种残疾也可能是由于年老体衰导致，而不是任何特定的创伤或状况造成，也可能是由于硬件限制所致——有些用户可能没有鼠标。</p> + +<p>这些残疾通常影响Web开发工作的方式是要求通过键盘就可以访问控件——我们将在本模块的后续文章中讨论键盘可访问性，但最好是仅通过使用键盘来尝试访问一些网站，看看你能够做些什么。例如，您可以使用Tab键在Web表单的不同控件之间移动吗？ 您可以在我们的“<a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">跨浏览器测试使用本机键盘的可访问性</a>”章节中找到有关键盘控制的更多详细信息。</p> + +<p>据统计，有相当多的人患有行动障碍症。美国疾病控制与防御中心的“<a href="https://www.cdc.gov/nchs/fastats/disability.htm">残疾与机能（18岁及以上的非住院成年人）</a>”报道称美国有15.1%的成年人都患有身体功能疾病。</p> + +<h3 id="有认知障碍的人">有认知障碍的人</h3> + +<p>认知障碍涵盖了一类范围广泛的残疾，从能力最受限的智障人士到随着年龄增长而导致思考和记忆困难的所有人。 该范围包括了患有精神疾病的人，例如抑郁症和精神分裂症患者。 还包括有学习障碍的人，例如阅读障碍患者和有注意力缺陷的多动症患者。 重要的是，尽管认知障碍的临床定义存在很多差异，但与之相关的人们会遇到同一类功能问题。 这类问题包括很难理解页面内容，难以记住如何完成任务，以及因不一致的网页布局而产生困惑。</p> + +<p>对认识障碍人士来说一个好的可访问性机制包括：</p> + +<ul> + <li>使用多种方式传达内容，比如从文本到语音或是视频；</li> + <li>更易理解的内容，例如使用更通俗的语言书写的文本；</li> + <li>将注意力集中在重要内容上；</li> + <li>尽量减少干扰，例如不必要的内容或广告；</li> + <li>一致的网页布局和导航；</li> + <li>相似的元素，比如未访问的下划线链接使用蓝色而访问过的使用紫色；</li> + <li>将过程划分为更有逻辑的，必要的步骤并附上进度指示器；</li> + <li>在不影响安全性的情况下尽可能让网站认证更简单；并且</li> + <li>使表单容易完成，例如带有清晰的错误消息和简单的错误恢复。</li> +</ul> + +<h3 id="注意">注意</h3> + +<ul> + <li>具有<a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility">认知可访问性</a>的设计将导致良好的设计实践。 他们将使所有人受益。</li> + <li>许多有认知障碍的人也可能患有身体残疾。网站必须遵循W3C的“<a href="https://www.w3.org/WAI/standards-guidelines/wcag/">网页内容可访问性指南</a>”包括<a href="/en-US/docs/Web/Accessibility/Cognitive_accessibility#Guidelines">认知可访问性指南</a>。</li> + <li>W3C的“<a href="https://www.w3.org/WAI/GL/task-forces/coga/">认知和学习残疾无障碍专案组</a>”为认知障碍人士制作了web可访问性指南。</li> + <li>WebAIM有一个<a href="https://webaim.org/articles/cognitive/">认知网页</a>提供了相关的信息和资源。</li> + <li>美国疾病控制中心估计，截至2018年，美国四分之一的公民有残疾，<a href="https://www.cdc.gov/media/releases/2018/p0816-disability.html">其中认知障碍是年轻人最常见的疾病</a>。</li> + <li>在美国，“智力障碍”是“智力低下”的新术语。 在英国，“智力障碍”通常是指“学习障碍”或“学习困难”。</li> +</ul> + +<h2 id="在你的项目中实现可访问性">在你的项目中实现可访问性</h2> + +<p>一个流行的关于可访问性的传言认为：可访问性是实施在项目上的昂贵“附加功能”。这个传言确实可能成立，只要遇到以下任一情况：</p> + +<ul> + <li>你正在试图为一个现有存在重大可访问性问题的网站“改造”可访问性。</li> + <li>您只是在项目后期才开始考虑可访问性和此时才暴露的相关问题。</li> +</ul> + +<p>然而如果你能在项目的开始阶段就考虑到可访问性的话，使大多数内容无障碍化的代价就会相当微小。</p> + +<p>在规划项目时，将可访问性测试纳入测试体系，就像对其他任何重要目标受众群体（例如台式机或移动浏览器的目标用户）进行测试一样。 尽早和经常进行测试，理想情况下运行自动化测试找出程序化方式可检测到的缺失功能（例如，缺少图像<a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">替代文本</a>或不良链接文字——请参阅<a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context">元素关系与上下文</a>），并对残疾人士的用户群进行一些测试，以查看更复杂的网站功能是否对他们可用。 例如：</p> + +<ul> + <li>我的日期选择器小部件是否可供使用屏幕阅读器的人使用？</li> + <li>如果内容动态更新，视力受损的人知道吗？</li> + <li>我的UI按钮是否可以使用键盘和触碰界面进行访问？</li> +</ul> + +<p>您可以并且应该在内容中记下潜在的问题区域，这些地方需要进行一些工作才能使其变得可访问，确保对其进行了彻底的测试并考虑解决方案/替代方法。 文本内容（如您将在下一篇文章中看到的）相对容易，但是多媒体内容和时髦的3D图形又如何呢？ 您应该查看项目预算，并考虑可以使用哪些解决方案来实现这类内容的可访问性。 转录所有多媒体内容是一种选择，当然成本可能很高。</p> + +<p>还有，现实一点。“100%的可访问性”是一个无法实现的理想——你总是会遇到某种边缘情况，导致某个用户发现某些内容难以使用——但你应该尽你所能去做。如果您计划包含一个使用WebGL呈现的时髦三维饼图，您可能希望也包含一个数据表，作为数据的可访问的替代表示。或者，您可能只需要包含表而去除3D饼图——这样每个人都可以访问该表，编写起来也更快，还能减少运行时的CPU耗费，维护也更容易。</p> + +<p>另一方面，如果您正在一个画廊网站上展示有趣的3D艺术，期望每件艺术品都能被视觉障碍人士完美的访问是不合理的，毕竟它是一种完全的视觉媒体。</p> + +<p>为了表明您关心并考虑了可访问性，请在您的网站上发布可访问性声明，其中详细说明您对可访问性的政策以及为使该站点可访问而采取的步骤。 如果有人确实反映您的网站存在可访问性问题，请与他们展开对话，保持同情心，并采取合理的步骤尝试解决问题。</p> + +<div class="note"> +<p><strong>注意：我们的“<a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">处理常见的可访问性问题</a>”一文涵盖了应更详细地测试的可访问性细节。</strong></p> +</div> + +<p>总结：</p> + +<ul> + <li>从项目一开始就考虑可访问性，并尽早进行测试。就像任何其他bug一样，越晚发现可访问性问题，修复它的代价会更高。</li> + <li>请记住，许多可访问性的最佳实践对每个人都有好处，而不仅仅局限于残疾人士。例如，原语标记不仅对屏幕阅读器有好处，而且使加载速度和性能也更快，因此对每个人来说都更有益，尤其是那些使用移动设备和/或慢速网络连接环境的人。</li> + <li>在您的站点上发布可访问性声明，并与遇到问题的人接触。</li> +</ul> + +<h2 id="无障碍指南和法律">无障碍指南和法律</h2> + +<p>有许多可用于基于可访问性测试的检查列表和指南集，乍一看，这些准则可能会让人望而却步。我们的建议是让自己熟悉你需要注意的基本领域，以及理解与你最相关的指导方针的高层结构。</p> + +<ul> + <li>首先，W3C发布了一个庞大而详细的文档，其中包含了非常精确的、与技术无关的可访问性一致性标准。这些被称为Web内容可访问性指南(WCAG)，它们绝不是短读的。这些标准分为四大类，它们指定如何使实现具有可感知性、可操作性、可理解性和鲁棒性。最好的地方得到一个简单的介绍和开始学习是一目了然。没有必要用心学习WCAG——注意主要关注的领域，并使用各种技术和工具来突出任何不符合WCAG标准的区域(更多信息见下文)。</li> + <li>贵国还可能有具体立法，规定为其人口提供服务的网站必须能够访问-例如，美国“康复法”第508条、德国关于无障碍信息技术的联邦法令、联合王国的“平等法”、意大利的“无障碍法”、澳大利亚的“残疾歧视法”等。</li> +</ul> + +<p>因此，虽然WCAG是一套指导方针，但您的国家可能会有关于网络可访问性的法律，或者至少是对公众提供的服务的无障碍(包括网站、电视、物理空间等)。找出你的法律是个好主意。如果您不努力检查您的内容是否可访问，您可能会陷入法律的麻烦，如果有二重性的人抱怨它。</p> + +<p>这听起来很严肃，但正如上文所述，您只需要将可访问性视为Web开发实践的主要优先事项。如果有疑问，请咨询合格的律师。我们不会提供比这更多的建议，因为我们不是律师。</p> + +<h2 id="可访问性API">可访问性API</h2> + +<p>Web浏览器使用特殊的可访问性API(由底层操作系统提供)，这些API公开对辅助技术(ATS)有用的信息-ATS大多倾向于使用原语信息，因此这些信息不包括样式信息或javascript之类的内容。此信息是在一个称为可访问性树的信息树中构造的。</p> + +<p>不同的操作系统有不同的可访问性API：</p> + +<ul> + <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li> + <li>Mac OS X: NSAccessibility</li> + <li>Linux: AT-SPI</li> + <li>Android: Accessibility framework</li> + <li>iOS: UIAccessibility</li> +</ul> + +<p>如果 Web 应用中的 HTML 元素提供的本机语义信息失效，则可以使用 <a href="https://www.w3.org/TR/wai-aria/">WAI-ARIA specification</a> 的功能来补充该信息，这些功能向辅助功能树添加语义信息以提高可访问性。在 <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a> 文章中了解有关 WAI-ARIA 的更多详细信息。</p> + +<h2 id="摘要">摘要</h2> + +<p>本文应该给您提供一个有用的可访问性的高级概述，向您展示为什么它是重要的，并研究如何将它融入您的工作流程。现在，您还应该渴望了解可以使站点可访问的实现细节，我们将在下一节中开始，了解为什么HTML是可访问性的良好基础。</p> + +<p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p> + +<h2 id="在本模块中">在本模块中</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> +</ul> + +<h2 id="另见">另见</h2> + +<ul> + <li><a href="/zh-CN/docs/"><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></a><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG">WCAG</a><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> + + <ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable">Perceivable</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable">Operable</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable">Understandable</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust">Robust</a></li> + </ul> + </li> +</ul> + +<dl> +</dl> diff --git a/files/zh-cn/learn/accessibility/多媒体/index.html b/files/zh-cn/learn/accessibility/多媒体/index.html new file mode 100644 index 0000000000..660ebca836 --- /dev/null +++ b/files/zh-cn/learn/accessibility/多媒体/index.html @@ -0,0 +1,354 @@ +--- +title: 多媒体的可访问性(Accessible multimedia) +slug: learn/Accessibility/多媒体 +translation_of: Learn/Accessibility/Multimedia +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div> + +<p class="summary"><font>可能导致可访问性问题（</font>accessibility problems <font>）的另一类内容是多媒体 ——视频，音频和图像内容需要提供适当的文本替代方式，以便辅助技术及其用户能够理解它们。本文展示了具体内容。</font></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">先决条件:</th> + <td><font><font>基本的计算机素养，对HTML，CSS和JavaScript的基本理解，</font></font><font><font><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility">对可访问性</a> </font></font><font><font>的理解</font><font>。</font></font></td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>了解多媒体背后的可访问性问题，以及如何克服这些问题。</td> + </tr> + </tbody> +</table> + +<h2 id="多媒体和可访问性"><font><font>多媒体和可访问性</font></font></h2> + +<p><font><font>到目前为止，在这个模块中，我们已经查看了各种内容以及需要做些什么来确保其可访问性，从简单的文本内容到数据表，图像，本机控件（如表单元素和按钮）以及更复杂的标记结构（具有</font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics"><font><font>WAI-ARIA</font></font></a><font><font>属性）。</font></font></p> + +<p><font><font>另一方面，这篇文章着眼于另一个一般的内容类别，可以说它不容易确保对多媒体的可访问性。</font><font>图像，视频，</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas" title="使用HTML <canvas>元素与画布脚本API或WebGL API绘制图形和动画。"><code><canvas></code></a><font><font>元素，Flash电影等不易被屏幕阅读器理解或被键盘导航，我们需要帮助他们。</font></font></p> + +<p><font><font>但不要绝望 - 在这里我们将帮助您浏览可用于使多媒体更容易访问的技术。</font></font></p> + +<h2 id="简单图像">简单图像</h2> + +<p>我们已经介绍了 HTML 图像的简单文本替代<a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a> –– 您可以参考其中了解详细信息。简而言之,应确保在可能的情况下,视觉内容具有替代文本,供屏幕阅读器拾取和读取给其用户。</p> + +<p>示例：</p> + +<pre class="brush: html"><img src="dinosaur.png" + alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> +</pre> + +<h2 id="可访问的音频和视频控件">可访问的音频和视频控件</h2> + +<p>基于 Web 的音频/视频执行控件不应该成为问题,对吗?让我们来调查一下。</p> + +<h3 id="本地_HTML5_控件的问题">本地 HTML5 控件的问题</h3> + +<p>HTML5 视频和音频实例甚至附带一组内置控件,允许您直接在盒子控制媒体。例如(请参阅<a href="om/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html">本地控件.html</a> 源代码和<a href="http://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html">实时演示</a>):</p> + +<pre class="brush: html"><audio controls> + <source src="viper.mp3" type="audio/mp3"> + <source src="viper.ogg" type="audio/ogg"> + <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p> +</audio> + +<br> + +<video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> +</video></pre> + +<p>控件属性提供播放/暂停按钮、搜索栏等 - 您期望从媒体播放器获得的基本控件。它看起来像在Firefox 和 Chrome:</p> + +<p><img alt="Screenshot of Video Controls in Firefox" src="https://mdn.mozillademos.org/files/14440/native-controls-firefox.png" style="display: block; height: 361px; margin: 0px auto; width: 400px;"></p> + +<p><img alt="Screenshot of Video Controls in Chrome" src="https://mdn.mozillademos.org/files/14438/native-controls-chrome.png" style="display: block; height: 344px; margin: 0px auto; width: 400px;"></p> + +<p>但是,这些控件存在问题:</p> + +<ul> + <li>在除Opera 以外任何浏览器中，它们不可通过键盘访问。</li> + <li>Different browsers give the native controls differing styling and functionality, and they aren't stylable, meaning that they can't be easily made to follow a site style guide.不同的浏览器为本地控件提供了不同的样式和功能（非样式化的），这意味着它们不容易按照网站样式指南进行。</li> +</ul> + +<p>为了解决这个问题,我们可以创建自己的自定义控件。让我们来看看如何。</p> + +<h3 id="创建自定义音频和视频控件">创建自定义音频和视频控件</h3> + +<p>HTML5 视频和音频共享 API — HTML Media Element — 允许您将自定义功能映射到按钮和其他控件––这两个控件都是您自己定义的。</p> + +<p>让我们从上面获取视频示例,并向其添加自定义控件。</p> + +<h4 id="基本设置">基本设置</h4> + +<p>首先,获取我们的<a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html">custom-controls-start.html</a>、<a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css">custom-controls.css</a>、 <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4">rabbit320.mp4</a> 和 <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm">rabbit320.webm</a>文件的副本,并将它们保存在硬盘上的新目录中。</p> + +<p>创建一个名为 main.js 的新文件并将其保存在同一目录中。</p> + +<p>首先,让我们在 HTML 中查看视频播放器的 HTML:</p> + +<pre class="brush: html"><section class="player"> + <video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> + </video> + + <div class="controls"> + <button class="playpause">Play</button> + <button class="stop">Stop</button> + <button class="rwd">Rwd</button> + <button class="fwd">Fwd</button> + <div class="time">00:00</div> + </div> +</section></pre> + +<h4 id="JavaScript基本设置">JavaScript基本设置</h4> + +<p>我们在视频下方插入了一些简单的控制按钮。当然,这些控件在默认情况下不会执行任何操作。要添加功能,我们将使用 JavaScript。</p> + +<p>我们首先需要存储对每个控件的引用––将以下内容添加到 JavaScript 文件的顶部:</p> + +<pre class="brush: js">var playPauseBtn = document.querySelector('.playpause'); +var stopBtn = document.querySelector('.stop'); +var rwdBtn = document.querySelector('.rwd'); +var fwdBtn = document.querySelector('.fwd'); +var timeLabel = document.querySelector('.time');</pre> + +<p>接下来,我们需要获取对视频/音频播放器本身的引用––在前面的代码行下方添加此行代码:</p> + +<pre class="brush: js">var player = document.querySelector('video');</pre> + +<p>这包含对{{domxref("HTMLMediaElement")}}对象的引用,该对象具有几个有用的属性和方法,可用于将功能连接到我们的按钮。</p> + +<p>在开始创建按钮功能之前,让我们删除本地控件,以免它们妨碍我们的自定义控件。在 JavaScript 的底部再次添加以下内容:</p> + +<pre class="brush: js">player.removeAttribute('controls');</pre> + +<p>这样做,而不是仅仅不包括控件属性摆在首位有一个优势,如果我们的JavaScript失败,用户仍然有一些控件可用。</p> + +<h4 id="连接按钮">连接按钮</h4> + +<p>首先,让我们设置播放/暂停按钮。我们可以使用一个简单的条件函数在播放和暂停之间切换,如下所示。将其添加到代码底部:</p> + +<pre class="brush: js">playPauseBtn.onclick = function() { + if(player.paused) { + player.play(); + playPauseBtn.textContent = 'Pause'; + } else { + player.pause(); + playPauseBtn.textContent = 'Play'; + } +};</pre> + +<p>接下来,将此代码添加到底部,该代码控制停止按钮:</p> + +<pre class="brush: js">stopBtn.onclick = function() { + player.pause(); + player.currentTime = 0; + playPauseBtn.textContent = 'Play'; +};</pre> + +<p>在 {{domxref("HTMLMediaElement")}}s上没有可用的 <code>stop() </code>函数,因此我们改为<code>pause()</code>它,同时将当前时间设置为 0。</p> + +<p>接下来,我们的快退和快进按钮–– 将以下块添加到代码的底部:</p> + +<pre class="brush: js">rwdBtn.onclick = function() { + player.currentTime -= 3; +}; + +fwdBtn.onclick = function() { + player.currentTime += 3; + if(player.currentTime >= player.duration || player.paused) { + player.pause(); + player.currentTime = 0; + playPauseBtn.textContent = 'Play'; + } +};</pre> + +<p>这些非常简单,每次单击它们时,只需将 3 秒添加到<code>currentTime</code>。在真正的视频播放器中,您可能想要一个更精细的查找栏或类似功能。</p> + +<p>请注意,当按下 Fwd 按钮时,我们还会检查<code>currentTime</code>是否超过总媒体的<code>duration</code>,或者媒体是否未播放。如果任一条件为 true,我们只需停止视频,以避免用户界面出错,如果他们试图在视频未播放时快进,或快进通过视频结束。</p> + +<p>最后,将以下内容添加到代码末尾,以控制显示的时间:</p> + +<pre class="brush: js">player.ontimeupdate = function() { + var minutes = Math.floor(player.currentTime / 60); + var seconds = Math.floor(player.currentTime - minutes * 60); + var minuteValue; + var secondValue; + + if (minutes<10) { + minuteValue = "0" + minutes; + } else { + minuteValue = minutes; + } + + if (seconds<10) { + secondValue = "0" + seconds; + } else { + secondValue = seconds; + } + + mediaTime = minuteValue + ":" + secondValue; + timeLabel.textContent = mediaTime; +};</pre> + +<p>每次更新时间(每秒一次)时,我们都会触发此功能。它算出给定的当前时间值(以秒为单位)的分钟和秒数,如果分钟或秒值小于 10,则添加前导 0,然后创建显示读出并将其添加到时间标签。</p> + +<h4 id="阅读延伸">阅读延伸</h4> + +<p>这为您提供了如何向视频/音频播放器实例添加自定义播放器功能的基本想法。有关如何向视频/音频播放器添加更复杂的功能(包括旧版浏览器的 Flash 回退)的详细信息,请参阅:</p> + +<ul> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a></li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a></li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a></li> +</ul> + +<p>我们还创建了一个高级示例,以演示如何创建面向对象的系统,该系统可查找页面上的每个视频和音频播放器(无论有多少个视频和音频播放器),并将自定义控件添加到其中。请参阅<a href="http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/">custom-controls-oojs</a>(<a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS">see the source code</a>)。</p> + +<h2 id="音频脚本">音频脚本</h2> + +<p>要为聋人提供访问音频内容的机会,您确实需要创建文本脚本。这些可以以某种方式与音频一样包含在与音频相同的页面上,也可以包含在单独的页面上并链接到</p> + +<p>在实际创建脚本方面,您的选项包括:</p> + +<ul> + <li>商业服务––您可以向专业人士支付报酬进行转录,例如 <a href="https://scribie.com/">Scribie</a>、<a href="https://castingwords.com/">Casting Words</a>或<a href="https://www.rev.com/">Rev</a>公司. 询问并征求意见,以确保您找到一家信誉良好的公司,您可以有效地合作。</li> + <li>社区/草根/自我转录 – 如果您是工作场所中活跃社区或团队的一员,您可以请求他们帮助翻译。你甚至可以自己去做。</li> + <li>自动服务 – 提供自动服务,例如,当您将视频上传到 YouTube 时,您可以选择生成自动字幕/脚本。根据语音音频的清晰程度,生成的脚本质量将有很大差异。</li> +</ul> + +<p>和生活中的大多数事情一样,你倾向于得到你所付出的;不同的服务在准确性和制作成绩单所花时间方面会有所不同。如果你支付一个有信誉的公司做转录,你可能会得到它迅速和高质量的。如果你不想付钱,你很可能会以较低的质量完成,并且/或缓慢完成。</p> + +<p>发布音频资源是不行的,但承诺稍后会发布脚本 - 此类承诺通常不会兑现,这将削弱您和您的用户之间的信任。如果您演示的音频类似于面对面会议或现场演讲表演,则可以在演出期间做笔记,与音频一起完整发布笔记,然后寻求帮助,以便稍后清理笔记。</p> + +<h3 id="脚本示例">脚本示例</h3> + +<p>如果使用自动服务,则可能需要使用该工具提供的用户界面。例如,查看<a href="https://www.youtube.com/watch?v=zFFBsj97Od8">Audio Transcription Sample 1</a>并选择" <em>More > Transcript</em>"。</p> + +<p>如果要创建自己的用户界面来显示音频和相关脚本,您可以随心所欲地执行此操作,但将其包含在可显示/可隐藏面板中可能有意义;请参阅我们的<a href="http://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/">audio-transcript-ui</a> 示例(另请参阅<a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui">source code</a>)。</p> + +<h3 id="音频描述">音频描述</h3> + +<p>在音频附带视频的情况下,您需要提供某种音频说明来描述该额外内容。</p> + +<p>在许多情况下,这只会采取视频的形式,在这种情况下,您可以使用本文下一节中介绍的技术实现字幕。</p> + +<p>但是,有一些边缘情况。例如,您可能有一个会议的音频录制,该录音引用了附带的资源,如电子表格或图表。在这种情况下,应确保资源与音频和脚本一起提供,并在成绩单中提及它们的位置专门链接到这些资源。这当然会帮助所有用户,而不仅仅是聋人。</p> + +<div class="note"> +<p><strong>注意</strong>:音频脚本通常有助于多个用户组。除了让聋人用户访问音频中包含的信息外,还考虑一个带宽连接较低的用户,他们会发现下载音频不方便。还要考虑在嘈杂的环境中(如酒吧或酒吧)中的用户,他们试图访问信息,但无法通过噪音听到信息。</p> +</div> + +<h2 id="视频文本轨道">视频文本轨道</h2> + +<p>要使聋人、盲人甚至其他用户组(如低带宽用户或不理解视频录制的语言的用户)可以访问视频,您需要在视频内容中包括文本轨道。</p> + +<div class="note"> +<p><strong>注意</strong>:文本轨道对于潜在的任何用户也很有用,而不仅仅是那些残障用户。例如,有些用户可能无法听到音频,因为他们处于嘈杂的环境中(如显示体育游戏时的拥挤的酒吧),或者如果其他人在安静的地方(如图书馆),则可能不想打扰其他人。</p> +</div> + +<p>这不是一个新概念 ––电视服务已经关闭了字幕相当长的时间了:</p> + +<p><img alt='Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"' src="https://mdn.mozillademos.org/files/14436/closed-captions.png" style="display: block; height: 240px; margin: 0px auto; width: 320px;"></p> + +<p>许多国家/地区提供以英语为母语的字幕的英语电影,例如,DVD 上通常提供不同的语言字幕</p> + +<p><img alt='An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"' src="https://mdn.mozillademos.org/files/14442/Subtitles_German.jpg" style="display: block; margin: 0 auto;"></p> + +<p>不同类型的文本轨道具有不同的目的。你遇到的主要情况是:</p> + +<ul> + <li>标题 ––对于听不到音轨(包括所讲的单词，还有环境信息,如说话、以及用来营造喜怒气氛的音乐等)的聋人用户而言是有利的。</li> + <li>字幕––为不懂所讲语言的用户提供音频对话框的翻译。</li> + <li>说明–– 这些描述包括无法观看视频的盲人的描述,例如场景的外观。</li> + <li>章节标题––旨在帮助用户导航媒体资源的章节标记</li> +</ul> + +<h3 id="实现_HTML5_视频文本轨道">实现 HTML5 视频文本轨道</h3> + +<p>使用 HTML5 视频显示的文本轨道需要用 WebVTT 编写,WebVTT 是一种文本格式,其中包含多个文本字符串以及元数据,例如您希望在视频中显示每个文本字符串的时间,甚至限制样式/定位信息。这些文本字符串称为提示。</p> + +<p>典型的 WebVTT 文件如下所示:</p> + +<pre>WEBVTT + +1 +00:00:22.230 --> 00:00:24.606 +This is the first subtitle. + +2 +00:00:30.739 --> 00:00:34.074 +This is the second. + + ...</pre> + +<p>要将此信息与 HTML 媒体播放一起显示,您需要:</p> + +<ul> + <li>将其保存为 .vtt 文件,放在一个合理的地方。</li> + <li>Link to the .vtt file with the {{htmlelement("track")}} element. <code><track></code> should be placed within <code><audio></code> or <code><video></code>, but after all <code><source></code> elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are subtitles, captions, or descriptions. Furthermore, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.使用 {{htmlelement("track")}} 元素链接到 .vtt 文件。<code><track></code>应放在<code><audio></code>或<code><video></code>内,但在<code><source></code>元素之后。使用 {{htmlattrxref("kind","track")}}属性指定提示是字幕、标题还是说明。此外,使用 {{htmlattrxref("srclang","track")}} 告诉浏览器您用什么语言编写字幕。</li> +</ul> + +<p>下面是一个示例:</p> + +<pre class="brush: html"><video controls> + <source src="example.mp4" type="video/mp4"> + <source src="example.webm" type="video/webm"> + <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> +</video></pre> + +<p>这将产生显示字幕的视频,如下所示:</p> + +<p><img alt='Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> + +<p>有关详细信息,请阅读<a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>。您可以找到与本文一起使用本文的<a href="http://iandevlin.github.io/mdn/video-player-with-captions/">the example</a>,本文由 Ian Devlin 编写(请参阅<a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">source code</a>)。此示例使用一些 JavaScript 允许用户在不同的字幕之间进行选择。请注意,要打开字幕,您需要按"CC"按钮并选择一个选项 - 英语、德语或西班牙语。</p> + +<div class="note"> +<p><strong>注意</strong>:文本轨道和转录也可以帮助您使用{{glossary("SEO")}},因为搜索引擎在文本上尤其繁荣。文本轨道甚至允许搜索引擎通过视频直接链接到一个点部分。</p> +</div> + +<h2 id="其他多媒体内容">其他多媒体内容</h2> + +<p>以上各节未涵盖您可能要放在网页上的所有类型的多媒体内容。您可能还需要处理使用其他可用技术创建的游戏、动画、幻灯片、嵌入式视频和内容,例如:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/Canvas_API">HTML5 canvas</a></li> + <li>Flash</li> + <li>Silverlight</li> +</ul> + +<p>对于此类内容,您需要根据案例处理辅助功能问题。在某些情况下,它不是那么糟糕,例如:</p> + +<ul> + <li>如果您使用 Flash 或 Silverlight 等插件技术嵌入音频内容,您可能只需以与上面在 {{anch("Transcript examples")}} 部分中所示的相同方式提供音频脚本。</li> + <li>如果您使用 Flash 或 Silverlight 等插件技术嵌入视频内容,则可以利用这些技术可用的字幕/字幕技术。例如, 参考 <a href="http://www.adobe.com/accessibility/products/flash/captions.html">Flash captions</a>, <a href="https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning">Using the Flash-Only Player API for Closed Captioning</a>, or <a href="https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/">Playing Subtitles with Videos in Silverlight</a>.</li> +</ul> + +<p>然而,其他多媒体不是那么容易使访问。例如,如果您正在处理沉浸式 3D 游戏或虚拟现实应用,那么为此类体验提供文本替代方案确实非常困难,您可能会认为盲人用户实际上并不在此类应用的目标受众范围内。</p> + +<p>但是,您可以确保此类应用具有足够的颜色对比度和清晰的显示,以便对视力低下/色盲的人来说可以感知,并且还可以使其键盘可访问。请记住,辅助功能就是尽可能多地做,而不是一直追求 100% 的可访问性,这通常是不可能的。</p> + +<h2 id="总结">总结</h2> + +<p>本章概述了多媒体内容的可访问性问题,以及一些实用的解决方案。</p> + +<p>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> +</ul> |