From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- .../accessibility/css_and_javascript/index.html | 367 ++++++++++++++ .../css\345\222\214javascript/index.html" | 367 -------------- files/zh-cn/learn/accessibility/html/index.html | 542 +++++++++++++++++++++ .../index.html" | 542 --------------------- .../learn/accessibility/multimedia/index.html | 354 ++++++++++++++ .../index.html" | 354 -------------- 6 files changed, 1263 insertions(+), 1263 deletions(-) create mode 100644 files/zh-cn/learn/accessibility/css_and_javascript/index.html delete mode 100644 "files/zh-cn/learn/accessibility/css\345\222\214javascript/index.html" create mode 100644 files/zh-cn/learn/accessibility/html/index.html delete mode 100644 "files/zh-cn/learn/accessibility/html_colon_\344\270\272\345\217\257\350\256\277\351\227\256\346\200\247\346\217\220\344\276\233\344\270\200\344\270\252\350\211\257\345\245\275\347\232\204\345\237\272\347\241\200/index.html" create mode 100644 files/zh-cn/learn/accessibility/multimedia/index.html delete mode 100644 "files/zh-cn/learn/accessibility/\345\244\232\345\252\222\344\275\223/index.html" (limited to 'files/zh-cn/learn/accessibility') diff --git a/files/zh-cn/learn/accessibility/css_and_javascript/index.html b/files/zh-cn/learn/accessibility/css_and_javascript/index.html new file mode 100644 index 0000000000..bdc3b01b2e --- /dev/null +++ b/files/zh-cn/learn/accessibility/css_and_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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
+ +

当CSS和JavaScript使用得当，很有可能改善Web访问体验，相反如果滥用的话，则会极大的损害可访问性。本文概述了一些应该被考虑的CSS和JavaScript 的最佳实践，这些实践保证了即使是复杂的内容也可以尽可能容易的被访问。

+ + + + + + + + + + + + +
准备： +

基本的计算机读写能力，对HTML、CSS和JavaScript的基本理解，以及对可访问性的理解。

+
目标：熟悉在 Web 文档中适当地使用 CSS 和 JavaScript,以最大限度地提高可访问性,并且不损害它。
+ +

CSS和JavaScript是可访问的吗？

+ +

CSS和JavaScript对于作为HTML的可访问性没有直接的重要性，但是它们仍然能够帮助或破坏可访问性，这取决于它们是如何使用的。换句话说，重要的是考虑一些最佳实践建议，以确保使用CSS和JavaScript不会破坏文档的可访问性。

+ +

CSS

+ +

让我们从CSS开始吧！

+ +

正确的语义和用户期望

+ +

可以使用 CSS 使任何 HTML 元素看起来像任何东西,但这并不意味着您应该这样做。正如我们经常提到的HTML: A good basis for accessibility,您应该尽可能为作业使用适当的语义元素。如果不这样做,它可能会导致混乱和可用性问题,对每个人,尤其是残障用户。使用正确的语义与用户期望有很大的帮助 –– 元素的外观和功能会根据它们的功能进行某些方式的显示,而且用户期望这些常见的约定。

+ +

例如,如果开发人员没有适当地使用标题元素标记内容,则屏幕阅读器用户无法通过标题元素导航页面。同样,如果对标题进行样式设置,则标题将失去其视觉目的,使其看起来不像标题。

+ +

经验法则是,您可以更新页面功能的样式以适应您的设计,但不要更改它太多,使其不再按预期的外观或活动。以下各节总结了要考虑的主要 HTML 功能。

+ +

“标准”的内容结构

+ +

标题、段落、列表和页面的核心文本内容:

+ +
<h1>Heading</h1>
+
+<p>Paragraph</p>
+
+<ul>
+  <li>My list</li>
+  <li>has two items.</li>
+</ul>
+ +

一些典型的 CSS 如下所示:

+ +
h1 {
+  font-size: 5rem;
+}
+
+p, li {
+  line-height: 1.5;
+  font-size: 1.6rem;
+}
+ +

你应该：

+ + + +

有关详细信息,请参阅 HTML text fundamentals和Styling text 。

+ +

强调的文本

+ +

内联标记,赋予其包裹的文本特别强调:

+ +
<p>The water is <em>very hot</em>.</p>
+
+<p>Water droplets collecting on surfaces is called <strong>condensation</strong>.</p>
+ +

您可能希望向强调的文本添加一些简单的颜色:

+ +
strong, em {
+  color: #a60000;
+}
+ +

但是,您很少需要以任何显著的方式设置强调元素的样式。粗体和斜体文本的标准约定非常容易识别,更改样式可能会导致混淆。有关强调的更多信息,请参阅Emphasis and importance。

+ +

缩写

+ +

允许缩写、首字母缩略词或初始化与其扩展关联的元素:

+ +
<p>Web content is marked up using <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
+ +

同样,您可能希望以某种简单方式设置样式:

+ +
abbr {
+  color: #a60000;
+}
+ +

缩写的公认样式约定是虚线下划线,偏离这一原则明显是不明智的。有关缩写的更多,请参阅Abbreviations。

+ +

链接

+ +

超链接 — 您到达新网站的方式:

+ +
<p>Visit the <a href="https://www.mozilla.org">Mozilla homepage</a>.</p>
+ +

一些非常简单的链接样式如下所示:

+ +
a {
+  color: #ff0000;
+}
+
+a:hover, a:visited, a:focus {
+  color: #a60000;
+  text-decoration: none;
+}
+
+a:active {
+  color: #000000;
+  background-color: #a60000;
+}
+ +

标准链接约定为下划线,标准状态为不同颜色(默认:蓝色),以前访问过链接时另一种颜色变化(默认:紫色),以及激活链接时的另一种颜色(默认:红色)。此外,当链接被鼠标悬停时,鼠标指针将变为指针图标,并且链接在聚焦(例如通过 tabbing)或激活时变成高亮。下图显示了 Firefox(虚线轮廓)和 Chrome(蓝色轮廓)中的高光:

+ +

+ +

+ +

您可以使用链接样式进行创意,只要用户在与链接交互时不断提供反馈即可。当状态发生变化时,确实应该发生某些情况,并且不应删除指针光标或大纲 - 对于使用键盘控件的人来说,两者都是非常重要的辅助功能。

+ +

表单元素

+ +

允许用户将数据输入到网站的元素:

+ +
<div>
+  <label for="name">Enter your name</label>
+  <input type="text" id="name" name="name">
+</div>
+ +

您可以在我们的form-css.html 示例中看到一些很好的示例 CSS(查看示例)。

+ +

您将为表单编写的大多数 CSS 将用于调整元素大小、排列标签和输入,以及让它们看起来整洁。

+ +

但是,您不应过多偏离元素在聚焦时接收的预期视觉反馈表单,这与链接基本相同(见上文)。您可以设置焦点/悬停状态样式,使这种行为在浏览器中更加一致,或者更适合您的页面设计,但不要完全摆脱它 ––同样,人们依靠这些线索来帮助他们了解发生了什么。

+ +

表格

+ +

用于显示表格数据的表。

+ +

您可以在table-css.html示例中看到表 HTML 和 CSS 的一个很好的简单示例(查看示例)。

+ +

表 的CSS 通常使表更适合您的设计,看起来不那么难看。最好确保表标题醒目(通常使用粗体),并使用斑马条带化使不同的行更易于解析。

+ +

颜色和颜色对比度

+ +

为网站选择配色方案时,请确保文本(前景)颜色与背景颜色对比度良好。您的设计可能看起来很酷,但如果有视觉障碍(如色盲)的人无法阅读您的内容,则设计就无一好可做。

+ +

有一个简单的方法来检查您的对比度是否足够大,不会引起问题。有许多对比检查工具可以在线输入您的前景和背景颜色,以检查它们。例如,WebAIM 的颜色对比度检查器易于使用,并说明了您需要满足有关颜色对比度的 WCAG 标准的内容。

+ +
+

注意：高对比度还允许任何使用带有光面屏幕的智能手机或平板电脑的人在明亮的环境中(如阳光)更好地阅读页面。

+
+ +

另一个提示是不要仅仅依靠颜色来提供路标/信息,因为对于那些看不到颜色的人来说,这没有什么用。例如,不要用红色标记所需的表单字段,而是用星号和红色标记它们。

+ +

隐藏的东西

+ +

在很多情况下,可视化设计需要并非同时显示所有内容。例如,在我们的Tabbed info box example (请参阅源码),我们有三个信息面板,但我们将它们放在彼此之上,并提供可以单击以显示每个选项卡的选项卡(也可以使用键盘 - 您也可以使用 Tab 和 Enter/Return以选择它们)。

+ +

+ +

屏幕阅读器用户并不关心这些内容 , 只要资源的顺序有意义,他们就对内容感到满意, 并且他们可以获得所有内容。绝对定位(如本示例所示)通常被视为隐藏内容以进行视觉效果的最佳机制之一,因为它不会阻止屏幕阅读器访问它。

+ +

另一方面,不应使用 {{cssxref("visibility")}}:hidden或 {{cssxref("display")}}:none,因为它们会隐藏屏幕阅读器中的内容。当然,除非您希望从屏幕阅读器中隐藏此内容,这是有充分理由的。

+ +
+

注意：Invisible Content Just for Screen Reader Users有围绕本主题的更多有用详细信息。

+
+ +

接受用户覆盖样式

+ +

接受用户覆盖您的样式

+ +

用户可以使用自己的自定义样式覆盖样式,例如:

+ + + +

用户可能出于各种原因执行此操作。视力受损的用户可能希望使其访问的所有网站上的文本变大，严重色缺乏（severe color difeciency）的用户可能希望将所有网站置于易于查看的高对比度颜色中。无论需要什么，您都应该对此感到满意，并使您的设计足够灵，以便此类更改在您的设计中起作用。例如，您可能希望确保主要内容区域可以处理较大的文本(可能它将开始滚动以允许查看所有文本)，并且不会只是隐藏它，或者完全中断。

+ +

JavaScript

+ +

JavaScript 还可能会中断可访问性，具体取决于其使用方式。

+ +

现代 JavaScript 是一种功能强大的语言,如今我们可以使用它,从简单的内容和 UI 更新到成熟的 2D 和 3D 游戏。没有任何规则规定所有内容都必须对所有人 100% 可访问 ––您只需尽力而为，并使你的应用尽可能可访问。

+ +

简单的内容和功能可以说是很容易使访问 - 例如文本,图像,表格,窗体和按钮,激活功能。正如我们在 HTML: A good basis for accessibility文中提到的,主要注意事项包括:

+ + + +

我们还查看了如何使用 JavaScript 在缺少功能的地方构建的示例 , 请参阅 Building keyboard accessibility back in。这不是理想的 - 实际上,你应该只使用正确的元素为正确的作业 –– 但它表明在情况下它是可能的,由于某种原因,你不能控制使用的标记。提高非语义 JavaScript 支持的小部件的可访问性的另一种方法是使用 WAI-ARIA 为屏幕阅读器用户提供额外的语义。下一篇文章还将详细介绍这一点。

+ +

复杂的功能,如3D游戏是不容易提高可访问性的 ––使用WebGL创建的复杂3D游戏将在 {{htmlelement("canvas")}}元素上呈现,该元素目前没有提供文本替代或其他信息的功能视障用户使用。可以说,这样的游戏并没有真正有这群人作为它的主要目标观众的一部分,这将是不合理的,期望你使它100%访问盲人,但你可以实现键盘控制,所以它可以使用非鼠标用户,并使配色方案的对比度足以让有颜色缺陷的人使用。

+ +

太多JavaScript导致的问题

+ +

过于依赖JavaScript会导致许多问题。有时你会看到一个网站，其中一切都已经用JavaScript完成 ––JavaScript生成HTML，CSS等等。随之而来，会出现各种可访问性问题，因此这样做是不建议的。

+ +

正确的工作需要使用正确的元素和技术！仔细考虑：消息框是否必须用JavaScript 3D实现，纯文本是否就刚好。仔细考虑是否需要复杂的非标准表单小部件,或者文本输入是否就行。如果可能，不要使用 JavaScript 生成所有 HTML 内容。

+ +

保持别抢眼

+ +

在创建内容时，应牢记 unobtrusive JavaScript原则。unobtrusive JavaScript 的想法是，它应该尽可能用于增强功能，而不是完全构建它 - 基本功能最好在没有 JavaScript 的情况下正常工作，尽管人们认识到，这并不总是一个选项。但同样，它的大部分是尽可能使用内置的浏览器功能。

+ +

unobtrusive JavaScript 使用的良好示例包括：

+ + + +

例如，我们编写了一个快速而糟糕的客户端客户端表单验证示例 — 请参form-validation.html(see the demo live)。在示例中，你会看到一个简单的表格；当您尝试提交一个或两个字段为空的表单时，提交将失败，并且会出现一个错误消息框，告诉您出了什么问题。

+ +

这种表单验证并不引人注目 - 在 JavaScript 不可用的情况下，您仍然可以很好的使用表单，并且任何合理的表单实现都将激活服务器端验证，因为恶意用户很容易绕过客户端验证(例如，通过在浏览器中关闭 JavaScript)。客户端验证对于报告错误仍然非常有用 ––用户可以立即了解他们所犯的错误，而不必等待到服务器的往返和页面重新加载。这是一个明确的可用性优势。

+ +
+

注意：此简单示例中尚未实现服务器端验证。

+
+ +

我们使此表单验证非常容易访问。我们使用 {{htmlelement("label")}}元素来确保表单标签明确链接到其输入，因此屏幕阅读器可以一起读取它们：

+ +
<label for="name">Enter your name:</label>
+<input type="text" name="name" id="name">
+ +

我们仅在提交表单时执行验证— 这样，我们就不会过于频繁地更新 UI，并可能混淆屏幕阅读器(可能还有其他)用户：

+ +
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();
+  }
+}
+ +
+

注意：在此示例中，我们使用绝对定位而不是其他方法(如可见性或显示)隐藏和显示错误消息框，因为它不会干扰屏幕阅读器从中读取内容。

+
+ +

实际表单验证会比这复杂得多 - 您需要检查输入的名称实际上看起来像一个名称，输入的年龄实际上是一个数字，并且与真实情况符合(例如，不是负数或四位数字)。在这里，我们刚刚实现了一个简单的验证，是否将值填充到每个输入字段(if(testItem.input.value === ''))。

+ +

执行验证后，如果测试通过，则提交表单。如果存在错误(if(errorList.innerHTML !== '')) ，则我们停止表单提交(使用preventDefault())，并显示已创建的任何错误消息(见下文)。此机制意味着只有存在错误时才会显示错误消息，这是一个明确的可用性优势。

+ +

对于提交表单时没有填写值的每个输入，我们创建一个包含链接的列表项，并将其插入到 errorList 中。

+ +
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);
+}
+ +

每个链接都有双重用途 - 它不仅告诉您错误是什么，而且可以单击它/激活它直接跳转到有问题的输入元素，并且更正输入。

+ +
+

注意：此示例的 focus() 部分有点棘手。Chrome 和 Edge(以及较新版本的 IE)将在单击链接时聚焦元素，而无需onclick/focus()代码块。Safari 只会突出显示表单元素，并自行显示链接，因此需要 onclick/focus()代码块来实际聚焦它。Firefox 没有在上下文中正确的聚焦输入，因此 Firefox 用户目前无法利用这一点(尽管其他一切都正常)。Firefox 问题应该尽快会得到修复 — 现在的工作是使 Firefox 行为与其他浏览器的行为相同(参见 {{bug(277178)}})。

+
+ +

此外，errorField 被放置在源顺序的顶部(与 UI 中使用 CSS时相比，位置不同)，这意味着用户可以准确找出表单提交时的问题，并通过返回到页面的开头，来获悉有问题的输入元素。

+ +

最后，我们在演示中使用了一些 WAI-ARIA 属性，以帮助解决因为内容区域不断更新而未重新加载页面，导致的辅助功能问题(默认情况下,屏幕阅读器不会选取该属性或提醒用户)：

+ +
<div class="errors" role="alert" aria-relevant="all">
+  <ul>
+  </ul>
+</div>
+ +

我们将在下一篇文章中解释这些属性，其中将更详细地介绍 WAI-ARIA 。

+ +
+

注意：一些人可能会考虑这样一个事实，即 HTML5 表单有内置的验证机制,如required， min/minlength和max/maxlength属性(详细信息，请参阅 {{htmlelement("input")}}元素引用)。我们最终没有在演示中使用这些功能，因为不是所有的浏览器都支持(例如，仅 IE10 及以上版本支持，Safari不支持)。

+
+ +
+

注意：WebAIM 的Usable and Accessible Form Validation and Error Recovery提供了一些有关可访问表单验证的更多的有用信息。

+
+ +

其他 JavaScript 可访问性问题

+ +

在实现 JavaScript 和考虑可访问性时，还有其他需要注意的事项。一旦发现将会添加更多。

+ +

鼠标特定事件

+ +

正如你所知，客户端JavaScript使用事件处理程序，实现大多数用户交互，它允许我们运行函数以响应某些事件的发生。某些事件可能有辅助功能问题。您将遇到的主要示例是鼠标特定的事件,如鼠标悬停（ mouseover）、鼠标划出（mouseout）、双击（dblclick） 等。使用其他机制(如键盘控件)无法访问为这些事件而运行的功能。

+ +

为了缓解此类问题，您应该将这些事件与可以通过其他方式(所谓的设备独立事件处理程序)激活的类似事件相结合 —— focus和blur将为键盘用户提供可访问性。

+ +

让我们看一个示例：突出显示了何时可能有用。我们想要实现一个缩略图：当鼠标悬停或聚焦在图像上，可以放大图像（正如电子商务产品目录所展示的）。

+ +

我们做了一个非常简单的示例，您可以在mouse-and-keyboard-events.html 中找到(另请参阅源码)。该代码具有显示和隐藏放大图像的两个函数；它由以下几行行实现，这些行将它们设置为事件处理程序：

+ +
imgThumb.onmouseover = showImg;
+imgThumb.onmouseout = hideImg;
+
+imgThumb.onfocus = showImg;
+imgThumb.onblur = hideImg;
+ +

当鼠标指针在缩略图上悬停或者移开，将分别调用前两行代码。此时不允许我们通过键盘访问缩略图 —— 为了允许这一点，我们调用后两行代码，它们在图像聚焦和失焦时(聚焦停止)运行函数。这可以在图像加tab键实现，因为我们为图像的属性设置tabindex="0"。

+ +

Click 事件很有趣 ––听起来它依赖于鼠标，但是大多数的浏览器，在有焦点的链接或者表单元素上，按下 enter/return 之后，或者在触屏设备上点击一个元素，都将会激活 onclick 事件处理程序。但是，当您允许非默认可聚焦事件使用 tabindex 进行焦点处理时，默认情况下不起作用 ， 在这种情况下，您需要在按下确切键时进行专门检测(请参阅Building keyboard accessibility back in)。

+ +

总结

+ +

我们希望这篇文章在网页设计中关于CSS和JavaScript的无障碍问题提供了足够多的细节。

+ +

下一篇内容是，WAI-ARIA！

+ +
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
+ +
+

在本模块中

+ + +
diff --git "a/files/zh-cn/learn/accessibility/css\345\222\214javascript/index.html" "b/files/zh-cn/learn/accessibility/css\345\222\214javascript/index.html" deleted file mode 100644 index bdc3b01b2e..0000000000 --- "a/files/zh-cn/learn/accessibility/css\345\222\214javascript/index.html" +++ /dev/null @@ -1,367 +0,0 @@ ---- -title: CSS 和 JavaScript 无障碍最佳实践 -slug: learn/Accessibility/CSS和JavaScript -tags: - - CSS - - hiding - - unobtursive - - 初学者 - - 对比 - - 导航 - - 文章 - - 无障碍 - - 编码脚本 - - 颜色 -translation_of: Learn/Accessibility/CSS_and_JavaScript ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
- -

当CSS和JavaScript使用得当，很有可能改善Web访问体验，相反如果滥用的话，则会极大的损害可访问性。本文概述了一些应该被考虑的CSS和JavaScript 的最佳实践，这些实践保证了即使是复杂的内容也可以尽可能容易的被访问。

- - - - - - - - - - - - -
准备： -

基本的计算机读写能力，对HTML、CSS和JavaScript的基本理解，以及对可访问性的理解。

-
目标：熟悉在 Web 文档中适当地使用 CSS 和 JavaScript,以最大限度地提高可访问性,并且不损害它。
- -

CSS和JavaScript是可访问的吗？

- -

CSS和JavaScript对于作为HTML的可访问性没有直接的重要性，但是它们仍然能够帮助或破坏可访问性，这取决于它们是如何使用的。换句话说，重要的是考虑一些最佳实践建议，以确保使用CSS和JavaScript不会破坏文档的可访问性。

- -

CSS

- -

让我们从CSS开始吧！

- -

正确的语义和用户期望

- -

可以使用 CSS 使任何 HTML 元素看起来像任何东西,但这并不意味着您应该这样做。正如我们经常提到的HTML: A good basis for accessibility,您应该尽可能为作业使用适当的语义元素。如果不这样做,它可能会导致混乱和可用性问题,对每个人,尤其是残障用户。使用正确的语义与用户期望有很大的帮助 –– 元素的外观和功能会根据它们的功能进行某些方式的显示,而且用户期望这些常见的约定。

- -

例如,如果开发人员没有适当地使用标题元素标记内容,则屏幕阅读器用户无法通过标题元素导航页面。同样,如果对标题进行样式设置,则标题将失去其视觉目的,使其看起来不像标题。

- -

经验法则是,您可以更新页面功能的样式以适应您的设计,但不要更改它太多,使其不再按预期的外观或活动。以下各节总结了要考虑的主要 HTML 功能。

- -

“标准”的内容结构

- -

标题、段落、列表和页面的核心文本内容:

- -
<h1>Heading</h1>
-
-<p>Paragraph</p>
-
-<ul>
-  <li>My list</li>
-  <li>has two items.</li>
-</ul>
- -

一些典型的 CSS 如下所示:

- -
h1 {
-  font-size: 5rem;
-}
-
-p, li {
-  line-height: 1.5;
-  font-size: 1.6rem;
-}
- -

你应该：

- - - -

有关详细信息,请参阅 HTML text fundamentals和Styling text 。

- -

强调的文本

- -

内联标记,赋予其包裹的文本特别强调:

- -
<p>The water is <em>very hot</em>.</p>
-
-<p>Water droplets collecting on surfaces is called <strong>condensation</strong>.</p>
- -

您可能希望向强调的文本添加一些简单的颜色:

- -
strong, em {
-  color: #a60000;
-}
- -

但是,您很少需要以任何显著的方式设置强调元素的样式。粗体和斜体文本的标准约定非常容易识别,更改样式可能会导致混淆。有关强调的更多信息,请参阅Emphasis and importance。

- -

缩写

- -

允许缩写、首字母缩略词或初始化与其扩展关联的元素:

- -
<p>Web content is marked up using <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
- -

同样,您可能希望以某种简单方式设置样式:

- -
abbr {
-  color: #a60000;
-}
- -

缩写的公认样式约定是虚线下划线,偏离这一原则明显是不明智的。有关缩写的更多,请参阅Abbreviations。

- -

链接

- -

超链接 — 您到达新网站的方式:

- -
<p>Visit the <a href="https://www.mozilla.org">Mozilla homepage</a>.</p>
- -

一些非常简单的链接样式如下所示:

- -
a {
-  color: #ff0000;
-}
-
-a:hover, a:visited, a:focus {
-  color: #a60000;
-  text-decoration: none;
-}
-
-a:active {
-  color: #000000;
-  background-color: #a60000;
-}
- -

标准链接约定为下划线,标准状态为不同颜色(默认:蓝色),以前访问过链接时另一种颜色变化(默认:紫色),以及激活链接时的另一种颜色(默认:红色)。此外,当链接被鼠标悬停时,鼠标指针将变为指针图标,并且链接在聚焦(例如通过 tabbing)或激活时变成高亮。下图显示了 Firefox(虚线轮廓)和 Chrome(蓝色轮廓)中的高光:

- -

- -

- -

您可以使用链接样式进行创意,只要用户在与链接交互时不断提供反馈即可。当状态发生变化时,确实应该发生某些情况,并且不应删除指针光标或大纲 - 对于使用键盘控件的人来说,两者都是非常重要的辅助功能。

- -

表单元素

- -

允许用户将数据输入到网站的元素:

- -
<div>
-  <label for="name">Enter your name</label>
-  <input type="text" id="name" name="name">
-</div>
- -

您可以在我们的form-css.html 示例中看到一些很好的示例 CSS(查看示例)。

- -

您将为表单编写的大多数 CSS 将用于调整元素大小、排列标签和输入,以及让它们看起来整洁。

- -

但是,您不应过多偏离元素在聚焦时接收的预期视觉反馈表单,这与链接基本相同(见上文)。您可以设置焦点/悬停状态样式,使这种行为在浏览器中更加一致,或者更适合您的页面设计,但不要完全摆脱它 ––同样,人们依靠这些线索来帮助他们了解发生了什么。

- -

表格

- -

用于显示表格数据的表。

- -

您可以在table-css.html示例中看到表 HTML 和 CSS 的一个很好的简单示例(查看示例)。

- -

表 的CSS 通常使表更适合您的设计,看起来不那么难看。最好确保表标题醒目(通常使用粗体),并使用斑马条带化使不同的行更易于解析。

- -

颜色和颜色对比度

- -

为网站选择配色方案时,请确保文本(前景)颜色与背景颜色对比度良好。您的设计可能看起来很酷,但如果有视觉障碍(如色盲)的人无法阅读您的内容,则设计就无一好可做。

- -

有一个简单的方法来检查您的对比度是否足够大,不会引起问题。有许多对比检查工具可以在线输入您的前景和背景颜色,以检查它们。例如,WebAIM 的颜色对比度检查器易于使用,并说明了您需要满足有关颜色对比度的 WCAG 标准的内容。

- -
-

注意：高对比度还允许任何使用带有光面屏幕的智能手机或平板电脑的人在明亮的环境中(如阳光)更好地阅读页面。

-
- -

另一个提示是不要仅仅依靠颜色来提供路标/信息,因为对于那些看不到颜色的人来说,这没有什么用。例如,不要用红色标记所需的表单字段,而是用星号和红色标记它们。

- -

隐藏的东西

- -

在很多情况下,可视化设计需要并非同时显示所有内容。例如,在我们的Tabbed info box example (请参阅源码),我们有三个信息面板,但我们将它们放在彼此之上,并提供可以单击以显示每个选项卡的选项卡(也可以使用键盘 - 您也可以使用 Tab 和 Enter/Return以选择它们)。

- -

- -

屏幕阅读器用户并不关心这些内容 , 只要资源的顺序有意义,他们就对内容感到满意, 并且他们可以获得所有内容。绝对定位(如本示例所示)通常被视为隐藏内容以进行视觉效果的最佳机制之一,因为它不会阻止屏幕阅读器访问它。

- -

另一方面,不应使用 {{cssxref("visibility")}}:hidden或 {{cssxref("display")}}:none,因为它们会隐藏屏幕阅读器中的内容。当然,除非您希望从屏幕阅读器中隐藏此内容,这是有充分理由的。

- -
-

注意：Invisible Content Just for Screen Reader Users有围绕本主题的更多有用详细信息。

-
- -

接受用户覆盖样式

- -

接受用户覆盖您的样式

- -

用户可以使用自己的自定义样式覆盖样式,例如:

- - - -

用户可能出于各种原因执行此操作。视力受损的用户可能希望使其访问的所有网站上的文本变大，严重色缺乏（severe color difeciency）的用户可能希望将所有网站置于易于查看的高对比度颜色中。无论需要什么，您都应该对此感到满意，并使您的设计足够灵，以便此类更改在您的设计中起作用。例如，您可能希望确保主要内容区域可以处理较大的文本(可能它将开始滚动以允许查看所有文本)，并且不会只是隐藏它，或者完全中断。

- -

JavaScript

- -

JavaScript 还可能会中断可访问性，具体取决于其使用方式。

- -

现代 JavaScript 是一种功能强大的语言,如今我们可以使用它,从简单的内容和 UI 更新到成熟的 2D 和 3D 游戏。没有任何规则规定所有内容都必须对所有人 100% 可访问 ––您只需尽力而为，并使你的应用尽可能可访问。

- -

简单的内容和功能可以说是很容易使访问 - 例如文本,图像,表格,窗体和按钮,激活功能。正如我们在 HTML: A good basis for accessibility文中提到的,主要注意事项包括:

- - - -

我们还查看了如何使用 JavaScript 在缺少功能的地方构建的示例 , 请参阅 Building keyboard accessibility back in。这不是理想的 - 实际上,你应该只使用正确的元素为正确的作业 –– 但它表明在情况下它是可能的,由于某种原因,你不能控制使用的标记。提高非语义 JavaScript 支持的小部件的可访问性的另一种方法是使用 WAI-ARIA 为屏幕阅读器用户提供额外的语义。下一篇文章还将详细介绍这一点。

- -

复杂的功能,如3D游戏是不容易提高可访问性的 ––使用WebGL创建的复杂3D游戏将在 {{htmlelement("canvas")}}元素上呈现,该元素目前没有提供文本替代或其他信息的功能视障用户使用。可以说,这样的游戏并没有真正有这群人作为它的主要目标观众的一部分,这将是不合理的,期望你使它100%访问盲人,但你可以实现键盘控制,所以它可以使用非鼠标用户,并使配色方案的对比度足以让有颜色缺陷的人使用。

- -

太多JavaScript导致的问题

- -

过于依赖JavaScript会导致许多问题。有时你会看到一个网站，其中一切都已经用JavaScript完成 ––JavaScript生成HTML，CSS等等。随之而来，会出现各种可访问性问题，因此这样做是不建议的。

- -

正确的工作需要使用正确的元素和技术！仔细考虑：消息框是否必须用JavaScript 3D实现，纯文本是否就刚好。仔细考虑是否需要复杂的非标准表单小部件,或者文本输入是否就行。如果可能，不要使用 JavaScript 生成所有 HTML 内容。

- -

保持别抢眼

- -

在创建内容时，应牢记 unobtrusive JavaScript原则。unobtrusive JavaScript 的想法是，它应该尽可能用于增强功能，而不是完全构建它 - 基本功能最好在没有 JavaScript 的情况下正常工作，尽管人们认识到，这并不总是一个选项。但同样，它的大部分是尽可能使用内置的浏览器功能。

- -

unobtrusive JavaScript 使用的良好示例包括：

- - - -

例如，我们编写了一个快速而糟糕的客户端客户端表单验证示例 — 请参form-validation.html(see the demo live)。在示例中，你会看到一个简单的表格；当您尝试提交一个或两个字段为空的表单时，提交将失败，并且会出现一个错误消息框，告诉您出了什么问题。

- -

这种表单验证并不引人注目 - 在 JavaScript 不可用的情况下，您仍然可以很好的使用表单，并且任何合理的表单实现都将激活服务器端验证，因为恶意用户很容易绕过客户端验证(例如，通过在浏览器中关闭 JavaScript)。客户端验证对于报告错误仍然非常有用 ––用户可以立即了解他们所犯的错误，而不必等待到服务器的往返和页面重新加载。这是一个明确的可用性优势。

- -
-

注意：此简单示例中尚未实现服务器端验证。

-
- -

我们使此表单验证非常容易访问。我们使用 {{htmlelement("label")}}元素来确保表单标签明确链接到其输入，因此屏幕阅读器可以一起读取它们：

- -
<label for="name">Enter your name:</label>
-<input type="text" name="name" id="name">
- -

我们仅在提交表单时执行验证— 这样，我们就不会过于频繁地更新 UI，并可能混淆屏幕阅读器(可能还有其他)用户：

- -
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();
-  }
-}
- -
-

注意：在此示例中，我们使用绝对定位而不是其他方法(如可见性或显示)隐藏和显示错误消息框，因为它不会干扰屏幕阅读器从中读取内容。

-
- -

实际表单验证会比这复杂得多 - 您需要检查输入的名称实际上看起来像一个名称，输入的年龄实际上是一个数字，并且与真实情况符合(例如，不是负数或四位数字)。在这里，我们刚刚实现了一个简单的验证，是否将值填充到每个输入字段(if(testItem.input.value === ''))。

- -

执行验证后，如果测试通过，则提交表单。如果存在错误(if(errorList.innerHTML !== '')) ，则我们停止表单提交(使用preventDefault())，并显示已创建的任何错误消息(见下文)。此机制意味着只有存在错误时才会显示错误消息，这是一个明确的可用性优势。

- -

对于提交表单时没有填写值的每个输入，我们创建一个包含链接的列表项，并将其插入到 errorList 中。

- -
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);
-}
- -

每个链接都有双重用途 - 它不仅告诉您错误是什么，而且可以单击它/激活它直接跳转到有问题的输入元素，并且更正输入。

- -
-

注意：此示例的 focus() 部分有点棘手。Chrome 和 Edge(以及较新版本的 IE)将在单击链接时聚焦元素，而无需onclick/focus()代码块。Safari 只会突出显示表单元素，并自行显示链接，因此需要 onclick/focus()代码块来实际聚焦它。Firefox 没有在上下文中正确的聚焦输入，因此 Firefox 用户目前无法利用这一点(尽管其他一切都正常)。Firefox 问题应该尽快会得到修复 — 现在的工作是使 Firefox 行为与其他浏览器的行为相同(参见 {{bug(277178)}})。

-
- -

此外，errorField 被放置在源顺序的顶部(与 UI 中使用 CSS时相比，位置不同)，这意味着用户可以准确找出表单提交时的问题，并通过返回到页面的开头，来获悉有问题的输入元素。

- -

最后，我们在演示中使用了一些 WAI-ARIA 属性，以帮助解决因为内容区域不断更新而未重新加载页面，导致的辅助功能问题(默认情况下,屏幕阅读器不会选取该属性或提醒用户)：

- -
<div class="errors" role="alert" aria-relevant="all">
-  <ul>
-  </ul>
-</div>
- -

我们将在下一篇文章中解释这些属性，其中将更详细地介绍 WAI-ARIA 。

- -
-

注意：一些人可能会考虑这样一个事实，即 HTML5 表单有内置的验证机制,如required， min/minlength和max/maxlength属性(详细信息，请参阅 {{htmlelement("input")}}元素引用)。我们最终没有在演示中使用这些功能，因为不是所有的浏览器都支持(例如，仅 IE10 及以上版本支持，Safari不支持)。

-
- -
-

注意：WebAIM 的Usable and Accessible Form Validation and Error Recovery提供了一些有关可访问表单验证的更多的有用信息。

-
- -

其他 JavaScript 可访问性问题

- -

在实现 JavaScript 和考虑可访问性时，还有其他需要注意的事项。一旦发现将会添加更多。

- -

鼠标特定事件

- -

正如你所知，客户端JavaScript使用事件处理程序，实现大多数用户交互，它允许我们运行函数以响应某些事件的发生。某些事件可能有辅助功能问题。您将遇到的主要示例是鼠标特定的事件,如鼠标悬停（ mouseover）、鼠标划出（mouseout）、双击（dblclick） 等。使用其他机制(如键盘控件)无法访问为这些事件而运行的功能。

- -

为了缓解此类问题，您应该将这些事件与可以通过其他方式(所谓的设备独立事件处理程序)激活的类似事件相结合 —— focus和blur将为键盘用户提供可访问性。

- -

让我们看一个示例：突出显示了何时可能有用。我们想要实现一个缩略图：当鼠标悬停或聚焦在图像上，可以放大图像（正如电子商务产品目录所展示的）。

- -

我们做了一个非常简单的示例，您可以在mouse-and-keyboard-events.html 中找到(另请参阅源码)。该代码具有显示和隐藏放大图像的两个函数；它由以下几行行实现，这些行将它们设置为事件处理程序：

- -
imgThumb.onmouseover = showImg;
-imgThumb.onmouseout = hideImg;
-
-imgThumb.onfocus = showImg;
-imgThumb.onblur = hideImg;
- -

当鼠标指针在缩略图上悬停或者移开，将分别调用前两行代码。此时不允许我们通过键盘访问缩略图 —— 为了允许这一点，我们调用后两行代码，它们在图像聚焦和失焦时(聚焦停止)运行函数。这可以在图像加tab键实现，因为我们为图像的属性设置tabindex="0"。

- -

Click 事件很有趣 ––听起来它依赖于鼠标，但是大多数的浏览器，在有焦点的链接或者表单元素上，按下 enter/return 之后，或者在触屏设备上点击一个元素，都将会激活 onclick 事件处理程序。但是，当您允许非默认可聚焦事件使用 tabindex 进行焦点处理时，默认情况下不起作用 ， 在这种情况下，您需要在按下确切键时进行专门检测(请参阅Building keyboard accessibility back in)。

- -

总结

- -

我们希望这篇文章在网页设计中关于CSS和JavaScript的无障碍问题提供了足够多的细节。

- -

下一篇内容是，WAI-ARIA！

- -
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
- -
-

在本模块中

- - -
diff --git a/files/zh-cn/learn/accessibility/html/index.html b/files/zh-cn/learn/accessibility/html/index.html new file mode 100644 index 0000000000..beeb753338 --- /dev/null +++ b/files/zh-cn/learn/accessibility/html/index.html @@ -0,0 +1,542 @@ +--- +title: 'HTML: 为可访问性提供一个良好的基础' +slug: 'learn/Accessibility/HTML:为可访问性提供一个良好的基础' +translation_of: Learn/Accessibility/HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
+ +

在网页开发的过程中，用正确的HTML标签来表达正确的意图，可以提升网页的可访问性。这篇文章将会详细介绍如何最大化地提升网页的可访问性。

+ + + + + + + + + + + + +
前提:有一定的HTML基础(可参阅 HTML入门)，理解什么是可访问性。
目标:了解可访问性为网页带来的好处和如何在网页中进行实现。
+ +

HTML 和可访问性

+ +

在学习HTML的过程当中，经常可以看到这样一个主题：HTML语义化的重要性。意思是指我们应尽可能地用正确的HTML标签来表达正确的意图。

+ +

你可能在想，为什么语义化对于一个网页来说如此重要。总的来说，正确的语义化可使 CSS 和  JavaScript 更为便利地操作网页的样式和行为。例如，一个用来操作视频播放的按钮可以写成这样一种形式:

+ +
<div>Play video</div>
+ +

接下来你将看到一种更好的写法，它使用了正确的HTML标签，看上去更加合理:

+ +
<button>Play video</button>
+ +

<button>标签不仅提供了按钮的样式（虽然有时会重新编写样式），还提供了键盘的可访问性，如：使用tab键更换按钮，使用回车键点击按钮。

+ +

如果你在项目的一开始就使用HTML语义化，不仅不会花更多的时间，而且又有以下的可访问性优点：

+ +
    +
  1. 更便于开发 — 如上所述，你可以使HTML更易于理解，并且可以毫不费力的获得一些功能。
    2. +
  2. 更适配移动端 — 语义化的HTML文件比非语义化的HTML文件更加轻便，并且更易于响应式开发。
    3. +
  3. 更便于SEO优化 — 比起使用非语义化的<div>标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。
    4. +
+ +

让我们来继续学习HTML语义化实现细则。

+ +
+

注意:在本地计算机上设置屏幕阅读器是一个不错的主意，因此您可以对下面显示的示例进行一些测试。更多内容请查阅 Screenreaders guide。

+
+ +

良好的语义

+ +

上面我们讨论了语义化的重要性以及为什么我们要使用正确的HTML标签来表达正确的意图。语义化是我们不可忽视的一部分，因为它往往决定了网页的可访问性。

+ +

在网络上，事实上人们用HTML标签做一些非常奇怪的事情。人们滥用一些即将废弃或已经废弃的标签。不管在什么情况下，我们都应该将这些错误的代码改正过来。

+ +

话虽如此，但是有些情况我们往往不能摆脱错误的标签，例如一个网页是从服务端的框架生成的，或者网页上存在第三方的内容（如广告），这些都是我们所不能控制的。

+ +

我们的目标并不是“全有或全无”，实际上，你所做的每一个改进都可以提升网页的可访问性。

+ +

文本内容

+ +

对于屏幕阅读器用户来讲，最佳辅助功能之一是拥有标题，段落，列表等内容的良好结构。一个好的语义示例可能如下所示：

+ +
<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>
+ +

我们已经准备了一个更长的文本版本，供您试用于屏幕阅读器（请查看 good-semantics.html）。如果您尝试在此过程中导航，您将看到这非常容易导航：

+ +
    +
  1. 屏幕阅读器会在您浏览内容时读取每个标题，通知您标题是什么，段落是什么等。
    2. +
  2. 它在每个元素之后停止，让你以任何适合你的速度前进。
    3. +
  3. 你可以在许多屏幕阅读器中跳到下一个/上一个标题。
    4. +
  4. 你还可以在许多屏幕阅读器中显示所有标题的列表，使您可以像使用便利的目录一样使用它们以查找特定内容。
    5. +
+ +

人们有时会使用表现性 HTML 和换行符来编写标题，段落等，如下所示：

+ +
<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.
+ +

如果你使用屏幕阅读器试用更长内容的版本（请查阅 bad-semantics.html），你不会有一个很好的经验 — 屏幕阅读器没有任何东西可以用作路标，所以你无法检索有用的目录，整个页面被看作一个巨大的块，所以它只是一次读出所有的内容。

+ +

除了可访问性之外，还有其他一些问题 - 使用CSS设计内容的风格更难，或者使用JavaScript来操作它比较困难，因为没有可用作选择器的元素。

+ +

使用通俗易懂的语言

+ +

你使用的语言也会影响可访问性。一般来说，你应该使用不太复杂的清晰语言，不要使用不必要的行话或俚语。这不仅有利于有认知或其他残疾的人；它有利于那些没有用母语写作的读者，年轻人...事实上是每个人！除此之外，你应该尽量避免使用没有被屏幕阅读器清楚读出的语言和字符。例如:

+ + + +

页面布局

+ +

在旧时代，人们曾经使用HTML表格创建页面布局 - 使用不同的表格单元格来包含页眉，页脚，边栏，主要内容栏等。这不是一个好主意，因为屏幕阅读器可能会读出给人造成困惑的结果，特别是如果布局复杂，并且有许多嵌套表格的话。

+ +

试试我们的例子table-layout.html，它看起来像这样：

+ +
<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>
+ +

如果您尝试使用屏幕阅读器浏览此内容，它可能会告诉您需要查看一个表格（尽管某些屏幕阅读器可以猜测表格布局和数据表格之间的区别）。 然后，您可能（取决于您使用的屏幕阅读器）必须需要进入到表格对象中，并单独地查看表格的内容，然后再次离开表格，以继续浏览其他内容。

+ +

用表格布局网页是过去旧时代的遗迹 - 在“CSS”在浏览器中并不普遍被支持时，它们是有意义的，但是它们会为屏幕阅读器用户造成混淆，并且由于许多其他原因变得很糟糕（滥用表格，可能因此需要更多的标记， 使设计更不灵活）。不要这样做！

+ +

您可以通过将您之前的体验与 更现代的网站结构示例 进行比较，来验证这些声明，该示例如下所示：

+ +
<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>
+ + + +

如果您使用屏幕阅读器阅读更现代的结构示例，则会看到布局标记不再会妨碍内容的读取。 它在代码大小方面也更加精简和小巧，这意味着代码更容易维护，并且用户下载的带宽更少（特别适合慢速连接的用户）。

+ +

创建布局时的另一个考虑因素是使用HTML5语义元素，如上例所示（请参阅 此内容部分） - 您只能使用嵌套的 {{htmlelement("div")}} 元素创建布局，但最好使用适当的分段元素包裹您的主导航（{{htmlelement("nav")}}），footer ({{htmlelement("footer")}}），重复内容单元  ({{htmlelement("article")}}) 等 。这些为屏幕阅读器（和其他工具）提供额外的语义，为用户提供有关他们正在浏览的内容的额外信息（请参阅 屏幕阅读器支持的新的HTML5章节元素 ，了解屏幕阅读器的支持是什么样的原理）。

+ +
+

注意：除了您的内容具有良好的语义和有吸引力的布局之外，它的源代码顺序应该是合理的 - 您可以随时将它放在您想要使用CSS的位置，但是您应该先从源代码开始， 如此这样，屏幕阅读器读取给他们的内容将会非常便于理解。

+
+ +

UI 控制

+ +

通过UI控件，我们指的是与用户交互的Web文档的主要部分 - 通常是按钮，链接和表单控件。 在本节中，我们将介绍创建此类控件时要注意的基本可访问性问题。 稍后关于WAI-ARIA和多媒体的文章将着眼于UI可访问性的其他方面。

+ +

UI控件可访问性的一个关键方面是，默认情况下，浏览器允许用户通过键盘操作它们。 您可以使用我们的 native-keyboard-accessibility.html 示例（请参阅 源代码 ）。尝试此操作 - 在新选项卡中打开此项，然后尝试按Tab键; 几次按下后，您应该看到标签焦点开始移动到不同的元素; 在每个浏览器中，获得焦点元素都会有一个“突出显示“的默认样式（它在不同浏览器之间略有不同），以便您可以确定当前哪些元素获得焦点。

+ +

+ +

接着你可以按Enter / Return来追踪当前获得焦点的链接，或者按按钮来实现（我们已经使用JavaScript使按钮同时显示提示消息），或者开始在文本输入中输入文本（其他表单元素具有不同的控件， 例如 {{htmlelement("select")}} 元素拥有自己的显示选项， 可以使用向上和向下箭头键进行循环）。

+ +
+

注意：不同的浏览器可能有不同的键盘控制选项。 请参阅 使用本机键盘辅助功能 获取更多详细信

+
+ +

实际上，您只需使用适当的元素即可免费获得此功能，例如，

+ +
<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>
+ + + +

这意味着适当地使用链接，按钮，表单元素和标签（包括表单控件的 {{htmlelement("label")}} 元素）。

+ +

然而，人们有时候会用HTML做奇怪的事情。 例如，您有时会看到使用 {{htmlelement("div")}} 标记的按钮，例如：

+ +
<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>
+ +

但是不建议使用这样的代码 - 你会立即失去本机键盘的可访问性。但如果你使用了{{htmlelement("button")}} 元素，你将可以通过键盘控制。 此外你也将不会获得任何的按钮默认拥有的CSS样式。

+ +

重新建立键盘的可访问性

+ +

重新添加这些优点需要一些工作（您可以在我们的 fake-div-buttons.html 示例中使用示例代码 - 另请参阅 源代码 ）。 在这里，我们通过赋予每个 <div> 按钮属性tabindex =“0” 来使它能够被聚焦（包括通过选项卡）：

+ +
<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>
+ +

基本上，{{htmlattrxref("tabindex")}} 属性主要用于允许 tabbable 元素具有自定义Tab键顺序（以正数顺序指定），而不是仅按其默认源顺序进行标记。 这几乎总是一个糟糕的主意，因为它可能会造成重大混乱。 例如，如果布局以与源代码非常不同的视觉顺序显示事物，而且你想让事情更符合逻辑。 这里 tabindex 有另外两个选项：

+ + + +

虽然上面的添加允许我们用 tab 选择按钮，但它不允许我们通过 Enter / Return 键来激活它们。 要做到这一点，我们必须添加下面的 JS 小绝招（JavaScript trickery）：

+ +
document.onkeydown = function(e) {
+  if(e.keyCode === 13) { // The Enter/Return key
+    document.activeElement.onclick(e);
+  }
+};
+ +

在这里，我们向文档对象 document 添加一个侦听器，以检测什么时候键盘上按下按钮 我们通过事件对象 event object 的 keyCode 属性,检查用户按下了哪个按钮; 如果它是与 Return / Enter 匹配的关键代码，我们通过按钮的 onclick 函数，即 document.activeElement.onclick() 。activeElement 提供给我们页面当前被focused的元素。

+ +

我们使用document.activeElement.onclick（）运行存储在按钮的onclick处理函数中的函数。 activeElement 为我们提供了当前关注页面的元素。

+ +
+

注意：您应该记住，只有通过事件处理程序属性（例如onclick）设置原始事件处理程序，此技巧才会起作用。 addEventListener 将不起作用。

+
+ +

这对于重新构建功能而言是一个额外的麻烦。而且这肯定会带来其他问题。 使用正确的元素处理正确的工作是非常重要的。（Better to just use the right element for the right job in the first place.）

+ +

有意义的文字标签

+ +

用户界面控件的 文本标签 对所有用户都非常有用，但是对于残疾用户来说，让他们正确使用尤其重要。

+ +

你应该确保你的按钮和链接文本标签是可以理解和独特的。 不要使用“点击这里”（"Click here"）此类的标签，因为屏幕阅读器用户有时会列出按钮和表格控件列表。 以下屏幕截图显示了我们的控件在Mac上由 VoiceOver 列出。

+ +

+ +

确保您的标签在上下文中有意义，可以单独阅读，也可以在他们所在的段落的上下文中进行阅读。例如，下面显示了良好链接文本的示例：

+ +
<p>Whales are really awesome creatures. <a href="whales.html">Find out more about whales</a>.</p>
+ +

但这是不好的链接文字：

+ +
<p>Whales are really awesome creatures. To find more out about whales, <a href="whales.html">click here</a>.</p>
+ +
+

注意：您可以在我们的 创建超链接 文章中找到更多关于链接实现和最佳实践的信息。 您还可以在 good-links.html 和 bad-links.html 中看到一些好的和不好的例子。

+
+ +

表单标签也很重要，可以让您了解您需要输入每个表单输入的内容。 以下似乎是一个足够合理的例子：

+ +
Fill in your name: <input type="text" id="name" name="name">
+ +

但是，这对于残疾用户来说并不是那么有用。 在上面的示例中，没有任何内容将标签与表单输入明确关联。因此如果看不到它，请让用户明确该如何填写。 如果您使用某些屏幕阅读器访问该屏幕，则只能按照“编辑文本”（“edit text”）的方式给出说明。

+ +

以下是一个更好的例子：

+ +
<div>
+  <label for="name">Fill in your name:</label>
+  <input type="text" id="name" name="name">
+</div>
+ +

通过这样的代码，标签将清晰地与输入相关联;  描述将更像如下这种形式：“填写你的姓名：编辑文本”。

+ +

+ +

作为额外的好处，在大多数将标签与表单输入相关联的浏览器中，您可以单击标签来 选择/激活 表单元素。 这给输入一个更大的可选中区域，使其更容易选择。

+ +
+

注意：您可以在 good-form.html 和 bad-form.html 中看到一些好的和不好的表单示例。

+
+ +

可访问的表格

+ +

基本的表格（译者注：“data table”被翻译成“表格”）可以用非常简单的标记来编写，例如：

+ +
<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>
+ +

但是这有问题 - 屏幕阅读器用户无法将行或列作为数据分组关联在一起。 要做到这一点，你需要知道标题行是什么，以及它们是否在行，列等标题上。这只能在上面的表中以可视化方式完成（参见 bad-table.html ，并自己尝试这个例子）。

+ +

现在看看我们的 punk bands table example  - 您可以在这里看到一些辅助工具（accessibility aids）：

+ + + +
+

注意：有关可访问数据表的更多详细信息，请参阅我们的 HTML表格高级功能和可访问性 文章。

+
+ +

文本替代品

+ +

尽管文本内容本身是可访问的，但对于多媒体内容而言也不一定是这样 - 图像/视频内容不能被视觉障碍人士看到，并且听觉障碍人士不能听到音频内容。 稍后我们将在可访问多媒体文章中详细介绍视频和音频内容，但对于本文，我们将探讨低微（humble ）的 {{htmlelement("img")}} 元素的可访问性。

+ +

我们编写了一个简单的例子， accessible-image.html ，它具有相同图像的四个副本：

+ +
<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>
+
+ +

第一张图片，当用屏幕阅读器查看时，并不真正为用户提供很多帮助 - 例如VoiceOver会读出 “/dinosaur.png，image” 。 它读出文件名以尝试提供一些帮助。 在这个例子中，用户至少知道它是某种恐龙，但通常文件可以用机器生成的文件名（例如来自数码相机）上传，这些文件名可能不会提供图像内容的信息。

+ +
+

注意：这就是为什么你不应该在图像中包含文本内容 - 屏幕阅读器根本无法访问它。 还有其他的缺点 - 你不能选择它并复制/粘贴它。不要这样做！

+
+ +

当屏幕阅读器遇到第二张图像时，它会读出完整的 alt 属性 - “红色霸王龙雷克斯：一只像人一样直立的双腿恐龙，手臂小，头部大而锋利。”

+ +

这突出了不仅在所谓的替代文本不可用的情况下使用有意义的文件名的重要性，而且还确保尽可能地在替换属性 alt 中提供替代文本。 请注意，alt 属性的内容应始终提供图像的直接表示以及它在视觉上传达的内容。 任何个人知识或额外描述都不应该包含在这里，因为它对以前没有碰到过这个图像的人没有用处。

+ +

需要考虑的一件事是，你的图片是否在你的内容中有意义，或者它们纯粹是为了视觉装饰，所以没有意义。 如果它们是装饰性的，最好将它们包含在页面中作为CSS背景图像。

+ +
+

注意：请阅读 HTML中的图片 和 响应式图片 以获得更多关于图片实施和最佳做法的信息。

+
+ +

如果您确实想要提供额外的上下文信息，则应该将其放在图像周围的文本中，或放置在“标题” title 属性中，如上所示。 在这种情况下，大多数屏幕阅读器会读出替代文本，标题属性和文件名。 此外，鼠标滑过时，浏览器会将 title 的内容作为工具提示的形式显示出来。

+ + + + + +

+ +

我们再来看看第四种方法：

+ +
<img src="dinosaur.png" aria-labelledby="dino-label">
+
+<p id="dino-label">The Mozilla red Tyrannosaurus ... </p>
+ +

在这种情况下，我们不使用“alt”属性 —— 相反，我们已经将图像的描述作为常规文本段落给出，并给出它的“id”，然后使用 “aria-labelledby” 属性并链接到对应“id”，它使屏幕阅读器将该段落用作该图像的替代文本/标签。 如果您想将相同的文本用作多个图像的标签，这是特别有用的 - 这是使用“alt”不可能实现的。

+ +
+

注意：“aria-labelledby”是 WAI-ARIA 规范的一部分，它允许开发人员在其标记中添加额外的语义，以提高屏幕阅读器的可访问性。 要了解更多关于它是如何工作的，请阅读我们的 WAI-ARIA Basics 文章。

+
+ + + +

其他文字替代机制

+ +

图像还有其他机制可用于提供描述性文字。 例如，有一个 longdesc 属性用于指向包含图像的扩展描述的单独Web文档，例如：

+ +
<img src="dinosaur.png" longdesc="dino-info.html">
+ +

这听起来像个好主意，尤其是对于像大图表这样的信息图，其中有很多信息可能可以表示为可访问的数据表（请参阅上一部分）。 但是，屏幕阅读器不支持longdesc，非屏幕阅读器用户完全无法访问内容。 将长描述包含在与图像相同的页面中，或者通过常规链接链接到它可能会更好。

+ +

HTML5包含两个新元素 -  {{htmlelement("figure")}} 和{{htmlelement("figcaption")}} ，它们应该将某种形象（可以是任何东西，不一定是图像）与数字标题相关联：

+ +
<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>
+ +

不幸的是，大多数屏幕阅读器似乎并没有将图形标题与他们的图形相关联，但是元素结构对CSS样式非常有用，并且它提供了一种方法在源代码中将图像放置在旁边。

+ +

空alt属性

+ +
<h3>
+  <img src="article-icon.png" alt="">
+  Tyrannosaurus Rex: the king of the dinosaurs
+</h3>
+ +

可能有时候图像被包含在页面的设计中，但其主要目的是用于视觉装饰。 在上面的代码示例中，您会注意到图像的“alt”属性为空 - 这是为了让屏幕阅读器识别图像，但不试图描述图像（阅读器只是说 “图像” 等类似的语句）。

+ +

使用空白“alt”而不包含它的原因是因为如果没有提供“alt”，许多屏幕阅读器会公布整个图像URL。 在上面的示例中，图像充当与其关联的标题的视觉装饰。 在这种情况下，以及在图像只是装饰并且没有内容值的情况下，您应该在图像上放置一个空白的“alt”。 另一种选择是使用 aria role 属性 role =“presentation” - 这也会阻止屏幕阅读器读出替代文本。

+ +
+

注意：如果可能的话，你应该使用CSS来显示只有装饰的图像。

+
+ +

总结Summary

+ +

您现在应该精通编写大多数场合可访问的HTML。 我们的 WAI-ARIA 基础知识文章也将填补这些知识中的一些空白，但本文已经关注了此基础知识。 接下来，我们将探索 CSS 和 JavaScript ，以及可访问性如何受其好坏影响。

+ + + +

{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}

+ + + +

在此模块

+ + diff --git "a/files/zh-cn/learn/accessibility/html_colon_\344\270\272\345\217\257\350\256\277\351\227\256\346\200\247\346\217\220\344\276\233\344\270\200\344\270\252\350\211\257\345\245\275\347\232\204\345\237\272\347\241\200/index.html" "b/files/zh-cn/learn/accessibility/html_colon_\344\270\272\345\217\257\350\256\277\351\227\256\346\200\247\346\217\220\344\276\233\344\270\200\344\270\252\350\211\257\345\245\275\347\232\204\345\237\272\347\241\200/index.html" deleted file mode 100644 index beeb753338..0000000000 --- "a/files/zh-cn/learn/accessibility/html_colon_\344\270\272\345\217\257\350\256\277\351\227\256\346\200\247\346\217\220\344\276\233\344\270\200\344\270\252\350\211\257\345\245\275\347\232\204\345\237\272\347\241\200/index.html" +++ /dev/null @@ -1,542 +0,0 @@ ---- -title: 'HTML: 为可访问性提供一个良好的基础' -slug: 'learn/Accessibility/HTML:为可访问性提供一个良好的基础' -translation_of: Learn/Accessibility/HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
- -

在网页开发的过程中，用正确的HTML标签来表达正确的意图，可以提升网页的可访问性。这篇文章将会详细介绍如何最大化地提升网页的可访问性。

- - - - - - - - - - - - -
前提:有一定的HTML基础(可参阅 HTML入门)，理解什么是可访问性。
目标:了解可访问性为网页带来的好处和如何在网页中进行实现。
- -

HTML 和可访问性

- -

在学习HTML的过程当中，经常可以看到这样一个主题：HTML语义化的重要性。意思是指我们应尽可能地用正确的HTML标签来表达正确的意图。

- -

你可能在想，为什么语义化对于一个网页来说如此重要。总的来说，正确的语义化可使 CSS 和  JavaScript 更为便利地操作网页的样式和行为。例如，一个用来操作视频播放的按钮可以写成这样一种形式:

- -
<div>Play video</div>
- -

接下来你将看到一种更好的写法，它使用了正确的HTML标签，看上去更加合理:

- -
<button>Play video</button>
- -

<button>标签不仅提供了按钮的样式（虽然有时会重新编写样式），还提供了键盘的可访问性，如：使用tab键更换按钮，使用回车键点击按钮。

- -

如果你在项目的一开始就使用HTML语义化，不仅不会花更多的时间，而且又有以下的可访问性优点：

- -
    -
  1. 更便于开发 — 如上所述，你可以使HTML更易于理解，并且可以毫不费力的获得一些功能。
    2. -
  2. 更适配移动端 — 语义化的HTML文件比非语义化的HTML文件更加轻便，并且更易于响应式开发。
    3. -
  3. 更便于SEO优化 — 比起使用非语义化的<div>标签，搜索引擎更加重视在“标题、链接等”里面的关键字，使用语义化可使网页更容易被用户搜索到。
    4. -
- -

让我们来继续学习HTML语义化实现细则。

- -
-

注意:在本地计算机上设置屏幕阅读器是一个不错的主意，因此您可以对下面显示的示例进行一些测试。更多内容请查阅 Screenreaders guide。

-
- -

良好的语义

- -

上面我们讨论了语义化的重要性以及为什么我们要使用正确的HTML标签来表达正确的意图。语义化是我们不可忽视的一部分，因为它往往决定了网页的可访问性。

- -

在网络上，事实上人们用HTML标签做一些非常奇怪的事情。人们滥用一些即将废弃或已经废弃的标签。不管在什么情况下，我们都应该将这些错误的代码改正过来。

- -

话虽如此，但是有些情况我们往往不能摆脱错误的标签，例如一个网页是从服务端的框架生成的，或者网页上存在第三方的内容（如广告），这些都是我们所不能控制的。

- -

我们的目标并不是“全有或全无”，实际上，你所做的每一个改进都可以提升网页的可访问性。

- -

文本内容

- -

对于屏幕阅读器用户来讲，最佳辅助功能之一是拥有标题，段落，列表等内容的良好结构。一个好的语义示例可能如下所示：

- -
<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>
- -

我们已经准备了一个更长的文本版本，供您试用于屏幕阅读器（请查看 good-semantics.html）。如果您尝试在此过程中导航，您将看到这非常容易导航：

- -
    -
  1. 屏幕阅读器会在您浏览内容时读取每个标题，通知您标题是什么，段落是什么等。
    2. -
  2. 它在每个元素之后停止，让你以任何适合你的速度前进。
    3. -
  3. 你可以在许多屏幕阅读器中跳到下一个/上一个标题。
    4. -
  4. 你还可以在许多屏幕阅读器中显示所有标题的列表，使您可以像使用便利的目录一样使用它们以查找特定内容。
    5. -
- -

人们有时会使用表现性 HTML 和换行符来编写标题，段落等，如下所示：

- -
<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.
- -

如果你使用屏幕阅读器试用更长内容的版本（请查阅 bad-semantics.html），你不会有一个很好的经验 — 屏幕阅读器没有任何东西可以用作路标，所以你无法检索有用的目录，整个页面被看作一个巨大的块，所以它只是一次读出所有的内容。

- -

除了可访问性之外，还有其他一些问题 - 使用CSS设计内容的风格更难，或者使用JavaScript来操作它比较困难，因为没有可用作选择器的元素。

- -

使用通俗易懂的语言

- -

你使用的语言也会影响可访问性。一般来说，你应该使用不太复杂的清晰语言，不要使用不必要的行话或俚语。这不仅有利于有认知或其他残疾的人；它有利于那些没有用母语写作的读者，年轻人...事实上是每个人！除此之外，你应该尽量避免使用没有被屏幕阅读器清楚读出的语言和字符。例如:

- - - -

页面布局

- -

在旧时代，人们曾经使用HTML表格创建页面布局 - 使用不同的表格单元格来包含页眉，页脚，边栏，主要内容栏等。这不是一个好主意，因为屏幕阅读器可能会读出给人造成困惑的结果，特别是如果布局复杂，并且有许多嵌套表格的话。

- -

试试我们的例子table-layout.html，它看起来像这样：

- -
<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>
- -

如果您尝试使用屏幕阅读器浏览此内容，它可能会告诉您需要查看一个表格（尽管某些屏幕阅读器可以猜测表格布局和数据表格之间的区别）。 然后，您可能（取决于您使用的屏幕阅读器）必须需要进入到表格对象中，并单独地查看表格的内容，然后再次离开表格，以继续浏览其他内容。

- -

用表格布局网页是过去旧时代的遗迹 - 在“CSS”在浏览器中并不普遍被支持时，它们是有意义的，但是它们会为屏幕阅读器用户造成混淆，并且由于许多其他原因变得很糟糕（滥用表格，可能因此需要更多的标记， 使设计更不灵活）。不要这样做！

- -

您可以通过将您之前的体验与 更现代的网站结构示例 进行比较，来验证这些声明，该示例如下所示：

- -
<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>
- - - -

如果您使用屏幕阅读器阅读更现代的结构示例，则会看到布局标记不再会妨碍内容的读取。 它在代码大小方面也更加精简和小巧，这意味着代码更容易维护，并且用户下载的带宽更少（特别适合慢速连接的用户）。

- -

创建布局时的另一个考虑因素是使用HTML5语义元素，如上例所示（请参阅 此内容部分） - 您只能使用嵌套的 {{htmlelement("div")}} 元素创建布局，但最好使用适当的分段元素包裹您的主导航（{{htmlelement("nav")}}），footer ({{htmlelement("footer")}}），重复内容单元  ({{htmlelement("article")}}) 等 。这些为屏幕阅读器（和其他工具）提供额外的语义，为用户提供有关他们正在浏览的内容的额外信息（请参阅 屏幕阅读器支持的新的HTML5章节元素 ，了解屏幕阅读器的支持是什么样的原理）。

- -
-

注意：除了您的内容具有良好的语义和有吸引力的布局之外，它的源代码顺序应该是合理的 - 您可以随时将它放在您想要使用CSS的位置，但是您应该先从源代码开始， 如此这样，屏幕阅读器读取给他们的内容将会非常便于理解。

-
- -

UI 控制

- -

通过UI控件，我们指的是与用户交互的Web文档的主要部分 - 通常是按钮，链接和表单控件。 在本节中，我们将介绍创建此类控件时要注意的基本可访问性问题。 稍后关于WAI-ARIA和多媒体的文章将着眼于UI可访问性的其他方面。

- -

UI控件可访问性的一个关键方面是，默认情况下，浏览器允许用户通过键盘操作它们。 您可以使用我们的 native-keyboard-accessibility.html 示例（请参阅 源代码 ）。尝试此操作 - 在新选项卡中打开此项，然后尝试按Tab键; 几次按下后，您应该看到标签焦点开始移动到不同的元素; 在每个浏览器中，获得焦点元素都会有一个“突出显示“的默认样式（它在不同浏览器之间略有不同），以便您可以确定当前哪些元素获得焦点。

- -

- -

接着你可以按Enter / Return来追踪当前获得焦点的链接，或者按按钮来实现（我们已经使用JavaScript使按钮同时显示提示消息），或者开始在文本输入中输入文本（其他表单元素具有不同的控件， 例如 {{htmlelement("select")}} 元素拥有自己的显示选项， 可以使用向上和向下箭头键进行循环）。

- -
-

注意：不同的浏览器可能有不同的键盘控制选项。 请参阅 使用本机键盘辅助功能 获取更多详细信

-
- -

实际上，您只需使用适当的元素即可免费获得此功能，例如，

- -
<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>
- - - -

这意味着适当地使用链接，按钮，表单元素和标签（包括表单控件的 {{htmlelement("label")}} 元素）。

- -

然而，人们有时候会用HTML做奇怪的事情。 例如，您有时会看到使用 {{htmlelement("div")}} 标记的按钮，例如：

- -
<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>
- -

但是不建议使用这样的代码 - 你会立即失去本机键盘的可访问性。但如果你使用了{{htmlelement("button")}} 元素，你将可以通过键盘控制。 此外你也将不会获得任何的按钮默认拥有的CSS样式。

- -

重新建立键盘的可访问性

- -

重新添加这些优点需要一些工作（您可以在我们的 fake-div-buttons.html 示例中使用示例代码 - 另请参阅 源代码 ）。 在这里，我们通过赋予每个 <div> 按钮属性tabindex =“0” 来使它能够被聚焦（包括通过选项卡）：

- -
<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>
- -

基本上，{{htmlattrxref("tabindex")}} 属性主要用于允许 tabbable 元素具有自定义Tab键顺序（以正数顺序指定），而不是仅按其默认源顺序进行标记。 这几乎总是一个糟糕的主意，因为它可能会造成重大混乱。 例如，如果布局以与源代码非常不同的视觉顺序显示事物，而且你想让事情更符合逻辑。 这里 tabindex 有另外两个选项：

- - - -

虽然上面的添加允许我们用 tab 选择按钮，但它不允许我们通过 Enter / Return 键来激活它们。 要做到这一点，我们必须添加下面的 JS 小绝招（JavaScript trickery）：

- -
document.onkeydown = function(e) {
-  if(e.keyCode === 13) { // The Enter/Return key
-    document.activeElement.onclick(e);
-  }
-};
- -

在这里，我们向文档对象 document 添加一个侦听器，以检测什么时候键盘上按下按钮 我们通过事件对象 event object 的 keyCode 属性,检查用户按下了哪个按钮; 如果它是与 Return / Enter 匹配的关键代码，我们通过按钮的 onclick 函数，即 document.activeElement.onclick() 。activeElement 提供给我们页面当前被focused的元素。

- -

我们使用document.activeElement.onclick（）运行存储在按钮的onclick处理函数中的函数。 activeElement 为我们提供了当前关注页面的元素。

- -
-

注意：您应该记住，只有通过事件处理程序属性（例如onclick）设置原始事件处理程序，此技巧才会起作用。 addEventListener 将不起作用。

-
- -

这对于重新构建功能而言是一个额外的麻烦。而且这肯定会带来其他问题。 使用正确的元素处理正确的工作是非常重要的。（Better to just use the right element for the right job in the first place.）

- -

有意义的文字标签

- -

用户界面控件的 文本标签 对所有用户都非常有用，但是对于残疾用户来说，让他们正确使用尤其重要。

- -

你应该确保你的按钮和链接文本标签是可以理解和独特的。 不要使用“点击这里”（"Click here"）此类的标签，因为屏幕阅读器用户有时会列出按钮和表格控件列表。 以下屏幕截图显示了我们的控件在Mac上由 VoiceOver 列出。

- -

- -

确保您的标签在上下文中有意义，可以单独阅读，也可以在他们所在的段落的上下文中进行阅读。例如，下面显示了良好链接文本的示例：

- -
<p>Whales are really awesome creatures. <a href="whales.html">Find out more about whales</a>.</p>
- -

但这是不好的链接文字：

- -
<p>Whales are really awesome creatures. To find more out about whales, <a href="whales.html">click here</a>.</p>
- -
-

注意：您可以在我们的 创建超链接 文章中找到更多关于链接实现和最佳实践的信息。 您还可以在 good-links.html 和 bad-links.html 中看到一些好的和不好的例子。

-
- -

表单标签也很重要，可以让您了解您需要输入每个表单输入的内容。 以下似乎是一个足够合理的例子：

- -
Fill in your name: <input type="text" id="name" name="name">
- -

但是，这对于残疾用户来说并不是那么有用。 在上面的示例中，没有任何内容将标签与表单输入明确关联。因此如果看不到它，请让用户明确该如何填写。 如果您使用某些屏幕阅读器访问该屏幕，则只能按照“编辑文本”（“edit text”）的方式给出说明。

- -

以下是一个更好的例子：

- -
<div>
-  <label for="name">Fill in your name:</label>
-  <input type="text" id="name" name="name">
-</div>
- -

通过这样的代码，标签将清晰地与输入相关联;  描述将更像如下这种形式：“填写你的姓名：编辑文本”。

- -

- -

作为额外的好处，在大多数将标签与表单输入相关联的浏览器中，您可以单击标签来 选择/激活 表单元素。 这给输入一个更大的可选中区域，使其更容易选择。

- -
-

注意：您可以在 good-form.html 和 bad-form.html 中看到一些好的和不好的表单示例。

-
- -

可访问的表格

- -

基本的表格（译者注：“data table”被翻译成“表格”）可以用非常简单的标记来编写，例如：

- -
<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>
- -

但是这有问题 - 屏幕阅读器用户无法将行或列作为数据分组关联在一起。 要做到这一点，你需要知道标题行是什么，以及它们是否在行，列等标题上。这只能在上面的表中以可视化方式完成（参见 bad-table.html ，并自己尝试这个例子）。

- -

现在看看我们的 punk bands table example  - 您可以在这里看到一些辅助工具（accessibility aids）：

- - - -
-

注意：有关可访问数据表的更多详细信息，请参阅我们的 HTML表格高级功能和可访问性 文章。

-
- -

文本替代品

- -

尽管文本内容本身是可访问的，但对于多媒体内容而言也不一定是这样 - 图像/视频内容不能被视觉障碍人士看到，并且听觉障碍人士不能听到音频内容。 稍后我们将在可访问多媒体文章中详细介绍视频和音频内容，但对于本文，我们将探讨低微（humble ）的 {{htmlelement("img")}} 元素的可访问性。

- -

我们编写了一个简单的例子， accessible-image.html ，它具有相同图像的四个副本：

- -
<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>
-
- -

第一张图片，当用屏幕阅读器查看时，并不真正为用户提供很多帮助 - 例如VoiceOver会读出 “/dinosaur.png，image” 。 它读出文件名以尝试提供一些帮助。 在这个例子中，用户至少知道它是某种恐龙，但通常文件可以用机器生成的文件名（例如来自数码相机）上传，这些文件名可能不会提供图像内容的信息。

- -
-

注意：这就是为什么你不应该在图像中包含文本内容 - 屏幕阅读器根本无法访问它。 还有其他的缺点 - 你不能选择它并复制/粘贴它。不要这样做！

-
- -

当屏幕阅读器遇到第二张图像时，它会读出完整的 alt 属性 - “红色霸王龙雷克斯：一只像人一样直立的双腿恐龙，手臂小，头部大而锋利。”

- -

这突出了不仅在所谓的替代文本不可用的情况下使用有意义的文件名的重要性，而且还确保尽可能地在替换属性 alt 中提供替代文本。 请注意，alt 属性的内容应始终提供图像的直接表示以及它在视觉上传达的内容。 任何个人知识或额外描述都不应该包含在这里，因为它对以前没有碰到过这个图像的人没有用处。

- -

需要考虑的一件事是，你的图片是否在你的内容中有意义，或者它们纯粹是为了视觉装饰，所以没有意义。 如果它们是装饰性的，最好将它们包含在页面中作为CSS背景图像。

- -
-

注意：请阅读 HTML中的图片 和 响应式图片 以获得更多关于图片实施和最佳做法的信息。

-
- -

如果您确实想要提供额外的上下文信息，则应该将其放在图像周围的文本中，或放置在“标题” title 属性中，如上所示。 在这种情况下，大多数屏幕阅读器会读出替代文本，标题属性和文件名。 此外，鼠标滑过时，浏览器会将 title 的内容作为工具提示的形式显示出来。

- - - - - -

- -

我们再来看看第四种方法：

- -
<img src="dinosaur.png" aria-labelledby="dino-label">
-
-<p id="dino-label">The Mozilla red Tyrannosaurus ... </p>
- -

在这种情况下，我们不使用“alt”属性 —— 相反，我们已经将图像的描述作为常规文本段落给出，并给出它的“id”，然后使用 “aria-labelledby” 属性并链接到对应“id”，它使屏幕阅读器将该段落用作该图像的替代文本/标签。 如果您想将相同的文本用作多个图像的标签，这是特别有用的 - 这是使用“alt”不可能实现的。

- -
-

注意：“aria-labelledby”是 WAI-ARIA 规范的一部分，它允许开发人员在其标记中添加额外的语义，以提高屏幕阅读器的可访问性。 要了解更多关于它是如何工作的，请阅读我们的 WAI-ARIA Basics 文章。

-
- - - -

其他文字替代机制

- -

图像还有其他机制可用于提供描述性文字。 例如，有一个 longdesc 属性用于指向包含图像的扩展描述的单独Web文档，例如：

- -
<img src="dinosaur.png" longdesc="dino-info.html">
- -

这听起来像个好主意，尤其是对于像大图表这样的信息图，其中有很多信息可能可以表示为可访问的数据表（请参阅上一部分）。 但是，屏幕阅读器不支持longdesc，非屏幕阅读器用户完全无法访问内容。 将长描述包含在与图像相同的页面中，或者通过常规链接链接到它可能会更好。

- -

HTML5包含两个新元素 -  {{htmlelement("figure")}} 和{{htmlelement("figcaption")}} ，它们应该将某种形象（可以是任何东西，不一定是图像）与数字标题相关联：

- -
<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>
- -

不幸的是，大多数屏幕阅读器似乎并没有将图形标题与他们的图形相关联，但是元素结构对CSS样式非常有用，并且它提供了一种方法在源代码中将图像放置在旁边。

- -

空alt属性

- -
<h3>
-  <img src="article-icon.png" alt="">
-  Tyrannosaurus Rex: the king of the dinosaurs
-</h3>
- -

可能有时候图像被包含在页面的设计中，但其主要目的是用于视觉装饰。 在上面的代码示例中，您会注意到图像的“alt”属性为空 - 这是为了让屏幕阅读器识别图像，但不试图描述图像（阅读器只是说 “图像” 等类似的语句）。

- -

使用空白“alt”而不包含它的原因是因为如果没有提供“alt”，许多屏幕阅读器会公布整个图像URL。 在上面的示例中，图像充当与其关联的标题的视觉装饰。 在这种情况下，以及在图像只是装饰并且没有内容值的情况下，您应该在图像上放置一个空白的“alt”。 另一种选择是使用 aria role 属性 role =“presentation” - 这也会阻止屏幕阅读器读出替代文本。

- -
-

注意：如果可能的话，你应该使用CSS来显示只有装饰的图像。

-
- -

总结Summary

- -

您现在应该精通编写大多数场合可访问的HTML。 我们的 WAI-ARIA 基础知识文章也将填补这些知识中的一些空白，但本文已经关注了此基础知识。 接下来，我们将探索 CSS 和 JavaScript ，以及可访问性如何受其好坏影响。

- - - -

{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}

- - - -

在此模块

- - diff --git a/files/zh-cn/learn/accessibility/multimedia/index.html b/files/zh-cn/learn/accessibility/multimedia/index.html new file mode 100644 index 0000000000..660ebca836 --- /dev/null +++ b/files/zh-cn/learn/accessibility/multimedia/index.html @@ -0,0 +1,354 @@ +--- +title: 多媒体的可访问性(Accessible multimedia) +slug: learn/Accessibility/多媒体 +translation_of: Learn/Accessibility/Multimedia +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}
+ +

可能导致可访问性问题（accessibility problems ）的另一类内容是多媒体 ——视频，音频和图像内容需要提供适当的文本替代方式，以便辅助技术及其用户能够理解它们。本文展示了具体内容。

+ + + + + + + + + + + + +
先决条件:基本的计算机素养，对HTML，CSS和JavaScript的基本理解，对可访问性 的理解。
目的:了解多媒体背后的可访问性问题，以及如何克服这些问题。
+ +

多媒体和可访问性

+ +

到目前为止，在这个模块中，我们已经查看了各种内容以及需要做些什么来确保其可访问性，从简单的文本内容到数据表，图像，本机控件（如表单元素和按钮）以及更复杂的标记结构（具有WAI-ARIA属性）。

+ +

另一方面，这篇文章着眼于另一个一般的内容类别，可以说它不容易确保对多媒体的可访问性。图像，视频，<canvas>元素，Flash电影等不易被屏幕阅读器理解或被键盘导航，我们需要帮助他们。

+ +

但不要绝望 - 在这里我们将帮助您浏览可用于使多媒体更容易访问的技术。

+ +

简单图像

+ +

我们已经介绍了 HTML 图像的简单文本替代HTML: A good basis for accessibility –– 您可以参考其中了解详细信息。简而言之,应确保在可能的情况下,视觉内容具有替代文本,供屏幕阅读器拾取和读取给其用户。

+ +

示例：

+ +
<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.">
+
+ +

可访问的音频和视频控件

+ +

基于 Web 的音频/视频执行控件不应该成为问题,对吗?让我们来调查一下。

+ +

本地 HTML5 控件的问题

+ +

HTML5 视频和音频实例甚至附带一组内置控件,允许您直接在盒子控制媒体。例如(请参阅本地控件.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>
+ +

控件属性提供播放/暂停按钮、搜索栏等 - 您期望从媒体播放器获得的基本控件。它看起来像在Firefox 和 Chrome:

+ +

Screenshot of Video Controls in Firefox

+ +

Screenshot of Video Controls in Chrome

+ +

但是,这些控件存在问题:

+ + + +

为了解决这个问题,我们可以创建自己的自定义控件。让我们来看看如何。

+ +

创建自定义音频和视频控件

+ +

HTML5 视频和音频共享 API — HTML Media Element — 允许您将自定义功能映射到按钮和其他控件––这两个控件都是您自己定义的。

+ +

让我们从上面获取视频示例,并向其添加自定义控件。

+ +

基本设置

+ +

首先,获取我们的custom-controls-start.html、custom-controls.css、 rabbit320.mp4 和 rabbit320.webm文件的副本,并将它们保存在硬盘上的新目录中。

+ +

创建一个名为 main.js 的新文件并将其保存在同一目录中。

+ +

首先,让我们在 HTML 中查看视频播放器的 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>
+ +

JavaScript基本设置

+ +

我们在视频下方插入了一些简单的控制按钮。当然,这些控件在默认情况下不会执行任何操作。要添加功能,我们将使用 JavaScript。

+ +

我们首先需要存储对每个控件的引用––将以下内容添加到 JavaScript 文件的顶部:

+ +
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');
+ +

接下来,我们需要获取对视频/音频播放器本身的引用––在前面的代码行下方添加此行代码:

+ +
var player = document.querySelector('video');
+ +

这包含对{{domxref("HTMLMediaElement")}}对象的引用,该对象具有几个有用的属性和方法,可用于将功能连接到我们的按钮。

+ +

在开始创建按钮功能之前,让我们删除本地控件,以免它们妨碍我们的自定义控件。在 JavaScript 的底部再次添加以下内容:

+ +
player.removeAttribute('controls');
+ +

这样做,而不是仅仅不包括控件属性摆在首位有一个优势,如果我们的JavaScript失败,用户仍然有一些控件可用。

+ +

连接按钮

+ +

首先,让我们设置播放/暂停按钮。我们可以使用一个简单的条件函数在播放和暂停之间切换,如下所示。将其添加到代码底部:

+ +
playPauseBtn.onclick = function() {
+  if(player.paused) {
+    player.play();
+    playPauseBtn.textContent = 'Pause';
+  } else {
+    player.pause();
+    playPauseBtn.textContent = 'Play';
+  }
+};
+ +

接下来,将此代码添加到底部,该代码控制停止按钮:

+ +
stopBtn.onclick = function() {
+  player.pause();
+  player.currentTime = 0;
+  playPauseBtn.textContent = 'Play';
+};
+ +

在 {{domxref("HTMLMediaElement")}}s上没有可用的 stop() 函数,因此我们改为pause()它,同时将当前时间设置为 0。

+ +

接下来,我们的快退和快进按钮–– 将以下块添加到代码的底部:

+ +
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';
+  }
+};
+ +

这些非常简单,每次单击它们时,只需将 3 秒添加到currentTime。在真正的视频播放器中,您可能想要一个更精细的查找栏或类似功能。

+ +

请注意,当按下 Fwd 按钮时,我们还会检查currentTime是否超过总媒体的duration,或者媒体是否未播放。如果任一条件为 true,我们只需停止视频,以避免用户界面出错,如果他们试图在视频未播放时快进,或快进通过视频结束。

+ +

最后,将以下内容添加到代码末尾,以控制显示的时间:

+ +
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;
+};
+ +

每次更新时间(每秒一次)时,我们都会触发此功能。它算出给定的当前时间值(以秒为单位)的分钟和秒数,如果分钟或秒值小于 10,则添加前导 0,然后创建显示读出并将其添加到时间标签。

+ +

阅读延伸

+ +

这为您提供了如何向视频/音频播放器实例添加自定义播放器功能的基本想法。有关如何向视频/音频播放器添加更复杂的功能(包括旧版浏览器的 Flash 回退)的详细信息,请参阅:

+ + + +

我们还创建了一个高级示例,以演示如何创建面向对象的系统,该系统可查找页面上的每个视频和音频播放器(无论有多少个视频和音频播放器),并将自定义控件添加到其中。请参阅custom-controls-oojs(see the source code)。

+ +

音频脚本

+ +

要为聋人提供访问音频内容的机会,您确实需要创建文本脚本。这些可以以某种方式与音频一样包含在与音频相同的页面上,也可以包含在单独的页面上并链接到

+ +

在实际创建脚本方面,您的选项包括:

+ + + +

和生活中的大多数事情一样,你倾向于得到你所付出的;不同的服务在准确性和制作成绩单所花时间方面会有所不同。如果你支付一个有信誉的公司做转录,你可能会得到它迅速和高质量的。如果你不想付钱,你很可能会以较低的质量完成,并且/或缓慢完成。

+ +

发布音频资源是不行的,但承诺稍后会发布脚本 - 此类承诺通常不会兑现,这将削弱您和您的用户之间的信任。如果您演示的音频类似于面对面会议或现场演讲表演,则可以在演出期间做笔记,与音频一起完整发布笔记,然后寻求帮助,以便稍后清理笔记。

+ +

脚本示例

+ +

如果使用自动服务,则可能需要使用该工具提供的用户界面。例如,查看Audio Transcription Sample 1并选择" More > Transcript"。

+ +

如果要创建自己的用户界面来显示音频和相关脚本,您可以随心所欲地执行此操作,但将其包含在可显示/可隐藏面板中可能有意义;请参阅我们的audio-transcript-ui 示例(另请参阅source code)。

+ +

音频描述

+ +

在音频附带视频的情况下,您需要提供某种音频说明来描述该额外内容。

+ +

在许多情况下,这只会采取视频的形式,在这种情况下,您可以使用本文下一节中介绍的技术实现字幕。

+ +

但是,有一些边缘情况。例如,您可能有一个会议的音频录制,该录音引用了附带的资源,如电子表格或图表。在这种情况下,应确保资源与音频和脚本一起提供,并在成绩单中提及它们的位置专门链接到这些资源。这当然会帮助所有用户,而不仅仅是聋人。

+ +
+

注意:音频脚本通常有助于多个用户组。除了让聋人用户访问音频中包含的信息外,还考虑一个带宽连接较低的用户,他们会发现下载音频不方便。还要考虑在嘈杂的环境中(如酒吧或酒吧)中的用户,他们试图访问信息,但无法通过噪音听到信息。

+
+ +

视频文本轨道

+ +

要使聋人、盲人甚至其他用户组(如低带宽用户或不理解视频录制的语言的用户)可以访问视频,您需要在视频内容中包括文本轨道。

+ +
+

注意:文本轨道对于潜在的任何用户也很有用,而不仅仅是那些残障用户。例如,有些用户可能无法听到音频,因为他们处于嘈杂的环境中(如显示体育游戏时的拥挤的酒吧),或者如果其他人在安静的地方(如图书馆),则可能不想打扰其他人。

+
+ +

这不是一个新概念 ––电视服务已经关闭了字幕相当长的时间了:

+ +

Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"

+ +

许多国家/地区提供以英语为母语的字幕的英语电影,例如,DVD 上通常提供不同的语言字幕

+ +

An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"

+ +

不同类型的文本轨道具有不同的目的。你遇到的主要情况是:

+ + + +

实现 HTML5 视频文本轨道

+ +

使用 HTML5 视频显示的文本轨道需要用 WebVTT 编写,WebVTT 是一种文本格式,其中包含多个文本字符串以及元数据,例如您希望在视频中显示每个文本字符串的时间,甚至限制样式/定位信息。这些文本字符串称为提示。

+ +

典型的 WebVTT 文件如下所示:

+ +
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.
+
+  ...
+ +

要将此信息与 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>
+ +

这将产生显示字幕的视频,如下所示:

+ +

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."

+ +

有关详细信息,请阅读Adding captions and subtitles to HTML5 video。您可以找到与本文一起使用本文的the example,本文由 Ian Devlin 编写(请参阅source code)。此示例使用一些 JavaScript 允许用户在不同的字幕之间进行选择。请注意,要打开字幕,您需要按"CC"按钮并选择一个选项 - 英语、德语或西班牙语。

+ +
+

注意:文本轨道和转录也可以帮助您使用{{glossary("SEO")}},因为搜索引擎在文本上尤其繁荣。文本轨道甚至允许搜索引擎通过视频直接链接到一个点部分。

+
+ +

其他多媒体内容

+ +

以上各节未涵盖您可能要放在网页上的所有类型的多媒体内容。您可能还需要处理使用其他可用技术创建的游戏、动画、幻灯片、嵌入式视频和内容,例如:

+ + + +

对于此类内容,您需要根据案例处理辅助功能问题。在某些情况下,它不是那么糟糕,例如:

+ + + +

然而,其他多媒体不是那么容易使访问。例如,如果您正在处理沉浸式 3D 游戏或虚拟现实应用,那么为此类体验提供文本替代方案确实非常困难,您可能会认为盲人用户实际上并不在此类应用的目标受众范围内。

+ +

但是,您可以确保此类应用具有足够的颜色对比度和清晰的显示,以便对视力低下/色盲的人来说可以感知,并且还可以使其键盘可访问。请记住,辅助功能就是尽可能多地做,而不是一直追求 100% 的可访问性,这通常是不可能的。

+ +

总结

+ +

本章概述了多媒体内容的可访问性问题,以及一些实用的解决方案。

+ +

{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}

+ +

In this module

+ + diff --git "a/files/zh-cn/learn/accessibility/\345\244\232\345\252\222\344\275\223/index.html" "b/files/zh-cn/learn/accessibility/\345\244\232\345\252\222\344\275\223/index.html" deleted file mode 100644 index 660ebca836..0000000000 --- "a/files/zh-cn/learn/accessibility/\345\244\232\345\252\222\344\275\223/index.html" +++ /dev/null @@ -1,354 +0,0 @@ ---- -title: 多媒体的可访问性(Accessible multimedia) -slug: learn/Accessibility/多媒体 -translation_of: Learn/Accessibility/Multimedia ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}
- -

可能导致可访问性问题（accessibility problems ）的另一类内容是多媒体 ——视频，音频和图像内容需要提供适当的文本替代方式，以便辅助技术及其用户能够理解它们。本文展示了具体内容。

- - - - - - - - - - - - -
先决条件:基本的计算机素养，对HTML，CSS和JavaScript的基本理解，对可访问性 的理解。
目的:了解多媒体背后的可访问性问题，以及如何克服这些问题。
- -

多媒体和可访问性

- -

到目前为止，在这个模块中，我们已经查看了各种内容以及需要做些什么来确保其可访问性，从简单的文本内容到数据表，图像，本机控件（如表单元素和按钮）以及更复杂的标记结构（具有WAI-ARIA属性）。

- -

另一方面，这篇文章着眼于另一个一般的内容类别，可以说它不容易确保对多媒体的可访问性。图像，视频，<canvas>元素，Flash电影等不易被屏幕阅读器理解或被键盘导航，我们需要帮助他们。

- -

但不要绝望 - 在这里我们将帮助您浏览可用于使多媒体更容易访问的技术。

- -

简单图像

- -

我们已经介绍了 HTML 图像的简单文本替代HTML: A good basis for accessibility –– 您可以参考其中了解详细信息。简而言之,应确保在可能的情况下,视觉内容具有替代文本,供屏幕阅读器拾取和读取给其用户。

- -

示例：

- -
<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.">
-
- -

可访问的音频和视频控件

- -

基于 Web 的音频/视频执行控件不应该成为问题,对吗?让我们来调查一下。

- -

本地 HTML5 控件的问题

- -

HTML5 视频和音频实例甚至附带一组内置控件,允许您直接在盒子控制媒体。例如(请参阅本地控件.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>
- -

控件属性提供播放/暂停按钮、搜索栏等 - 您期望从媒体播放器获得的基本控件。它看起来像在Firefox 和 Chrome:

- -

Screenshot of Video Controls in Firefox

- -

Screenshot of Video Controls in Chrome

- -

但是,这些控件存在问题:

- - - -

为了解决这个问题,我们可以创建自己的自定义控件。让我们来看看如何。

- -

创建自定义音频和视频控件

- -

HTML5 视频和音频共享 API — HTML Media Element — 允许您将自定义功能映射到按钮和其他控件––这两个控件都是您自己定义的。

- -

让我们从上面获取视频示例,并向其添加自定义控件。

- -

基本设置

- -

首先,获取我们的custom-controls-start.html、custom-controls.css、 rabbit320.mp4 和 rabbit320.webm文件的副本,并将它们保存在硬盘上的新目录中。

- -

创建一个名为 main.js 的新文件并将其保存在同一目录中。

- -

首先,让我们在 HTML 中查看视频播放器的 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>
- -

JavaScript基本设置

- -

我们在视频下方插入了一些简单的控制按钮。当然,这些控件在默认情况下不会执行任何操作。要添加功能,我们将使用 JavaScript。

- -

我们首先需要存储对每个控件的引用––将以下内容添加到 JavaScript 文件的顶部:

- -
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');
- -

接下来,我们需要获取对视频/音频播放器本身的引用––在前面的代码行下方添加此行代码:

- -
var player = document.querySelector('video');
- -

这包含对{{domxref("HTMLMediaElement")}}对象的引用,该对象具有几个有用的属性和方法,可用于将功能连接到我们的按钮。

- -

在开始创建按钮功能之前,让我们删除本地控件,以免它们妨碍我们的自定义控件。在 JavaScript 的底部再次添加以下内容:

- -
player.removeAttribute('controls');
- -

这样做,而不是仅仅不包括控件属性摆在首位有一个优势,如果我们的JavaScript失败,用户仍然有一些控件可用。

- -

连接按钮

- -

首先,让我们设置播放/暂停按钮。我们可以使用一个简单的条件函数在播放和暂停之间切换,如下所示。将其添加到代码底部:

- -
playPauseBtn.onclick = function() {
-  if(player.paused) {
-    player.play();
-    playPauseBtn.textContent = 'Pause';
-  } else {
-    player.pause();
-    playPauseBtn.textContent = 'Play';
-  }
-};
- -

接下来,将此代码添加到底部,该代码控制停止按钮:

- -
stopBtn.onclick = function() {
-  player.pause();
-  player.currentTime = 0;
-  playPauseBtn.textContent = 'Play';
-};
- -

在 {{domxref("HTMLMediaElement")}}s上没有可用的 stop() 函数,因此我们改为pause()它,同时将当前时间设置为 0。

- -

接下来,我们的快退和快进按钮–– 将以下块添加到代码的底部:

- -
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';
-  }
-};
- -

这些非常简单,每次单击它们时,只需将 3 秒添加到currentTime。在真正的视频播放器中,您可能想要一个更精细的查找栏或类似功能。

- -

请注意,当按下 Fwd 按钮时,我们还会检查currentTime是否超过总媒体的duration,或者媒体是否未播放。如果任一条件为 true,我们只需停止视频,以避免用户界面出错,如果他们试图在视频未播放时快进,或快进通过视频结束。

- -

最后,将以下内容添加到代码末尾,以控制显示的时间:

- -
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;
-};
- -

每次更新时间(每秒一次)时,我们都会触发此功能。它算出给定的当前时间值(以秒为单位)的分钟和秒数,如果分钟或秒值小于 10,则添加前导 0,然后创建显示读出并将其添加到时间标签。

- -

阅读延伸

- -

这为您提供了如何向视频/音频播放器实例添加自定义播放器功能的基本想法。有关如何向视频/音频播放器添加更复杂的功能(包括旧版浏览器的 Flash 回退)的详细信息,请参阅:

- - - -

我们还创建了一个高级示例,以演示如何创建面向对象的系统,该系统可查找页面上的每个视频和音频播放器(无论有多少个视频和音频播放器),并将自定义控件添加到其中。请参阅custom-controls-oojs(see the source code)。

- -

音频脚本

- -

要为聋人提供访问音频内容的机会,您确实需要创建文本脚本。这些可以以某种方式与音频一样包含在与音频相同的页面上,也可以包含在单独的页面上并链接到

- -

在实际创建脚本方面,您的选项包括:

- - - -

和生活中的大多数事情一样,你倾向于得到你所付出的;不同的服务在准确性和制作成绩单所花时间方面会有所不同。如果你支付一个有信誉的公司做转录,你可能会得到它迅速和高质量的。如果你不想付钱,你很可能会以较低的质量完成,并且/或缓慢完成。

- -

发布音频资源是不行的,但承诺稍后会发布脚本 - 此类承诺通常不会兑现,这将削弱您和您的用户之间的信任。如果您演示的音频类似于面对面会议或现场演讲表演,则可以在演出期间做笔记,与音频一起完整发布笔记,然后寻求帮助,以便稍后清理笔记。

- -

脚本示例

- -

如果使用自动服务,则可能需要使用该工具提供的用户界面。例如,查看Audio Transcription Sample 1并选择" More > Transcript"。

- -

如果要创建自己的用户界面来显示音频和相关脚本,您可以随心所欲地执行此操作,但将其包含在可显示/可隐藏面板中可能有意义;请参阅我们的audio-transcript-ui 示例(另请参阅source code)。

- -

音频描述

- -

在音频附带视频的情况下,您需要提供某种音频说明来描述该额外内容。

- -

在许多情况下,这只会采取视频的形式,在这种情况下,您可以使用本文下一节中介绍的技术实现字幕。

- -

但是,有一些边缘情况。例如,您可能有一个会议的音频录制,该录音引用了附带的资源,如电子表格或图表。在这种情况下,应确保资源与音频和脚本一起提供,并在成绩单中提及它们的位置专门链接到这些资源。这当然会帮助所有用户,而不仅仅是聋人。

- -
-

注意:音频脚本通常有助于多个用户组。除了让聋人用户访问音频中包含的信息外,还考虑一个带宽连接较低的用户,他们会发现下载音频不方便。还要考虑在嘈杂的环境中(如酒吧或酒吧)中的用户,他们试图访问信息,但无法通过噪音听到信息。

-
- -

视频文本轨道

- -

要使聋人、盲人甚至其他用户组(如低带宽用户或不理解视频录制的语言的用户)可以访问视频,您需要在视频内容中包括文本轨道。

- -
-

注意:文本轨道对于潜在的任何用户也很有用,而不仅仅是那些残障用户。例如,有些用户可能无法听到音频,因为他们处于嘈杂的环境中(如显示体育游戏时的拥挤的酒吧),或者如果其他人在安静的地方(如图书馆),则可能不想打扰其他人。

-
- -

这不是一个新概念 ––电视服务已经关闭了字幕相当长的时间了:

- -

Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"

- -

许多国家/地区提供以英语为母语的字幕的英语电影,例如,DVD 上通常提供不同的语言字幕

- -

An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"

- -

不同类型的文本轨道具有不同的目的。你遇到的主要情况是:

- - - -

实现 HTML5 视频文本轨道

- -

使用 HTML5 视频显示的文本轨道需要用 WebVTT 编写,WebVTT 是一种文本格式,其中包含多个文本字符串以及元数据,例如您希望在视频中显示每个文本字符串的时间,甚至限制样式/定位信息。这些文本字符串称为提示。

- -

典型的 WebVTT 文件如下所示:

- -
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.
-
-  ...
- -

要将此信息与 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>
- -

这将产生显示字幕的视频,如下所示:

- -

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."

- -

有关详细信息,请阅读Adding captions and subtitles to HTML5 video。您可以找到与本文一起使用本文的the example,本文由 Ian Devlin 编写(请参阅source code)。此示例使用一些 JavaScript 允许用户在不同的字幕之间进行选择。请注意,要打开字幕,您需要按"CC"按钮并选择一个选项 - 英语、德语或西班牙语。

- -
-

注意:文本轨道和转录也可以帮助您使用{{glossary("SEO")}},因为搜索引擎在文本上尤其繁荣。文本轨道甚至允许搜索引擎通过视频直接链接到一个点部分。

-
- -

其他多媒体内容

- -

以上各节未涵盖您可能要放在网页上的所有类型的多媒体内容。您可能还需要处理使用其他可用技术创建的游戏、动画、幻灯片、嵌入式视频和内容,例如:

- - - -

对于此类内容,您需要根据案例处理辅助功能问题。在某些情况下,它不是那么糟糕,例如:

- - - -

然而,其他多媒体不是那么容易使访问。例如,如果您正在处理沉浸式 3D 游戏或虚拟现实应用,那么为此类体验提供文本替代方案确实非常困难,您可能会认为盲人用户实际上并不在此类应用的目标受众范围内。

- -

但是,您可以确保此类应用具有足够的颜色对比度和清晰的显示,以便对视力低下/色盲的人来说可以感知,并且还可以使其键盘可访问。请记住,辅助功能就是尽可能多地做,而不是一直追求 100% 的可访问性,这通常是不可能的。

- -

总结

- -

本章概述了多媒体内容的可访问性问题,以及一些实用的解决方案。

- -

{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}

- -

In this module

- - -- cgit v1.2.3-54-g00ecf