HTML: A good basis for accessibility

先决条件:	基本的计算机素养，对HTML的基本了解(请参见 HTML简介)，以及了解可用性 a>。
目的:	熟悉HTML的哪些功能具有辅助功能，以及如何在Web文档中正确使用它们。

HTML和辅助功能

当你了解更多的HTML - 阅读更多的资源，看看更多的例子，等等 - 你会看到一个共同的主题，使用语义HTML(有时称为POSH或简单的语义HTML)的重要性。 这意味着尽可能使用正确的HTML元素用于正确的目的。

你可能想知道为什么这么重要。 毕竟，你可以使用CSS和JavaScript的组合，使任何HTML元素以任何你想要的方式行为。 例如，在您的网站上播放视频的控制按钮可以标记为:

<div>Play video</div>

但是，正如你稍后将更详细地看到的，使用正确的元素为作业是很有意义的:

<button>Play video</button>

不仅HTML < button> 在默认情况下应用了一些合适的样式(您可能想要覆盖)，它们还具有内置的键盘辅助功能 - 它们可以在选项卡之间 使用Return / Enter。

语义HTML比非语义(坏)标记花费的时间更长，如果你从项目开始就一直这样做，并且它还具有超出可访问性的其他好处:

1. Easier to develop with — as mentioned above, you get some functionality for free, plus it is arguably easier to understand.
2. Better on mobile — semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive.
3. Good for SEO — search engines give more importance to keywords inside headings, links, etc., than keywords included in non-semantic <div>s, etc., so your documents will be more findable by customers.

让我们更加详细地看看可访问的HTML。

良好的语义

我们已经谈到了良好语义的重要性，以及为什么我们应该使用正确的HTML元素为正确的工作。 这不能被忽略，因为它是主要的地方之一，如果没有正确处理可访问性严重破坏。

在网络上，事实是，人们做一些很奇怪的事情与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>

我们准备了一个更长的文本版本供您使用屏幕阅读器进行试用(请参阅 "external"> good-semantics.html )。 如果您尝试通过此导航，您会看到这是很容易导航:

1. The screenreader reads each header out as you progress through the content, notifying you what is a heading, what is a paragraph, etc.
2. It stops after each element, letting you go at whatever pace is comfortable for you.
3. You can jump to next/previous heading in many secreenreaders.
4. You can also bring up a list of all headings in many screenreaders, allowing you to use them like a handy table of contents to find specific content.

人们有时使用演示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.

如果您使用屏幕阅读器尝试我们的较长版本(请参阅错误语义 .html )，你不会有一个很好的经验 - screenreader没有任何东西用作路标，所以你不能检索一个有用的目录，而整个页面被视为一个 单个巨型块，所以它只是一次读出，一次。

除了可访问性之外还有其他问题 - 使用CSS对内容进行风格化或使用JavaScript进行操作更加困难，因为没有元素可以用作选择器。

Using clear language

您使用的语言也会影响辅助功能。 一般来说，你应该使用清晰的语言，不要过于复杂，不要使用不必要的行话或俚语。 这不仅有益于认知或其他残疾的人; 它有利于读者，他们的文本不是用他们的第一语言写的，年轻的人...事实上每个人！ 除此之外，你应该尽量避免使用不能被屏幕阅读器清楚地读出的语言和字符。 例如:

• Don't use dashes if you can avoid it. Instead of writing 5–7, write 5 to 7.
• Expand abbreviations — instead of writing Jan, write January.
• Expand acronyms, at least once or twice. Instead of writing HTML in the first instance, write Hypertext Markup Language, or HTML.

页面布局

在糟糕的旧时代，人们习惯于使用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支持在浏览器中不普遍时，它们有意义，但是它们对screenreader用户造成混乱，以及由于许多其他原因(滥用表，可能需要更多的标记，make 设计更不灵活)。 不要这样做！

您可以通过将您以前的体验与更现代的 网站结构示例，它可能看起来像这样:

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

如果你使用屏幕阅读器尝试我们更现代的结构示例，你会看到布局标记不再妨碍和混淆内容读出。 它在代码大小方面也更精简和更小，这意味着更容易维护代码，并且用户下载的带宽更小(对于缓慢连接上的那些特别普遍)。

content sectioning\">创建布局时的另一个考虑因素是使用HTML5语义元素，如上例所示(请参阅内容分段) — you can create a layout using only nested <div&gt\">) - 您只能使用嵌套的 < div> elements, but it is better to use appropriate sectioning elements to wrap your main navigation (; 元素，但最好使用适当的sectioning元素来包装您的主导航(<nav>), footer (/ Element / nav"> < nav> )，页脚(<footer>), repeating content units (元素/页脚"> < footer> )，重复内容单元(<article>), etc. These provide extra semantics for screenreaders (and other tools) to give user extra clues about the content they are navigating (see / element / article"> < article> )等。这些为屏幕阅读器(和其他工具)提供了额外的语义以向用户提供关于他们正在浏览的内容的额外线索Screen Reader Support for new\">a href ="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/"class ="external">屏幕阅读器支持新的 for an idea of what screen reader support is like).\">HTML5部分元素，了解什么是屏幕阅读器支持)。

UI控件

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

UI控件的可访问性的一个关键方面是，默认情况下，浏览器允许它们由键盘操纵。 您可以使用我们的 "> native-keyboard-accessibility.html 示例(请参阅 accessibility / native-keyboard-accessibility.html"class ="external">源代码) - 在新标签页中打开，然后尝试按Tab键; 几个按下后，你应该看到标签焦点开始移动通过不同的可聚焦元素; 焦点元素在每个浏览器中都有一个突出显示的默认样式(它在不同浏览器之间略有不同)，以便您可以知道所关注的元素。

height:39px; margin:0px auto; width:288px;">

然后，您可以按Enter / Return键以关注焦点链接或按下按钮(我们已包含一些JavaScript以使按钮发出警告消息)，或开始输入以在文本输入中输入文本(其他表单元素具有不同的控件， 例如 < select> 元素可以 使用向上和向下箭头键之间显示和循环其选项)。

您基本上可以免费获得此行为，只需使用适当的元素即可。

<h1>Links</h1>

<p>This is a link to <a href="https://www.mozilla.org" rel="external nofollow" target="_blank" >Mozilla</a>.</p>

<p>Another link, to the <a href="https://developer.mozilla.org" rel="external nofollow" target="_blank" >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>

然而，再次的情况是，人们有时用HTML做奇怪的事情。 例如，有时您会看到使用 < 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>

但不建议使用此类代码 - 如果您刚刚使用 元素/按钮"> < button> 元素，此外，您没有获得任何默认的CSS样式的按钮。

Building keyboard accessibility back in

将这些优点添加回来需要一些工作(您可以在我们的 -div-buttons.html"class ="external-icon external"> fake-div-buttons.html 示例 - 也可以查看 /blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html"class ="external-icon external">源代码)。 在这里，我们通过给每个属性 tabindex ="0"赋予我们假的< div>

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

基本上， tabindex 属性主要 旨在允许可重绘元素具有自定义的Tab顺序(以正数字顺序指定)，而不仅仅是以默认源顺序标签。 这几乎总是一个坏主意，因为它可能造成严重的混乱。 只有当你真的需要时才使用它，例如如果布局以与源代码非常不同的视觉顺序显示事物，并且希望使事情在逻辑上更加工作。 tabindex 有两个其他选项:

• tabindex="0" — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of tabindex.
• tabindex="-1" — this allows not normally tabbable elements to receive focus programmatically, e.g. via JavaScript, or as the target of links. 

虽然上面的添加允许我们标签到按钮，它不允许我们通过Enter / Return键激活它们。 要做到这一点，我们不得不添加以下位的JavaScript诡计:

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

这里我们向 document 对象添加一个监听器来检测在键盘上按下按钮的时间。 我们通过事件对象的 keyCode 代码>属性; 如果它是匹配Return / Enter的键码，我们使用 document.activeElement.onclick()运行存储在按钮的 onclick activeElement 为我们提供了当前关注的元素 在页面上。

这是一个很多额外的麻烦，建立的功能回来。有一定的其他问题。 最好只是在正确的工作中使用正确的元素。

Meaningful text labels

UI控件文本标签对所有用户都非常有用，但让他们正确对于残疾用户尤其重要。

您应该确保您的按钮和链接文字标签是可理解和独特的。 不要只是使用"点击这里"为您的标签，作为screenreader用户有时拿起一个按钮和表单控件的列表。 以下屏幕截图显示了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>

表单标签也很重要，给你一个线索你需要输入到每个表单输入。 以下似乎是一个足够合理的例子:

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

但是，这对残疾用户不那么有用。 上述示例中没有任何内容可以将标签明确地与表单输入关联，并清楚地说明如果您看不到它，如何填写它。 如果您通过某些屏幕阅读器访问此类广告，则系统只会向您提供"编辑文字"一行的说明。

下面是一个更好的例子:

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

使用这样的代码，标签将清楚地与输入相关联; 该描述将更像"填写您的姓名:编辑文本"。

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

可访问的数据表

基本数据表可以用非常简单的标记来编写，例如:

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

但这有问题 - 屏幕阅读器用户没有办法将行或列联合在一起作为数据分组 - 要做到这一点，你需要知道标题行是什么，如果他们是向上的行，列等。 这只能在上表中直观显示(请参见坏表 .html ，然后自己尝试一下例子)。

现在，请查看我们的 外部">朋克表表示例 - 您可以在这里看到几个辅助工具:

• Table headers are defined using <th> elements — you can also specify if they are headers for rows or columns using the scope attribute. This gives you complete groups of data that can be consumed by screen readers as single units.
• The <caption> element and <table> summary attribute both do similar jobs — they act as alt text for a table, giving a screen reader user a useful quick summary of the table's contents. <caption> is generally preferred as it makes it's content accessible to sighted users too, who might also find it useful. You don't really need both.

文本替代

虽然文本内容是固有地可访问的，但是对于多媒体内容来说同样没有必要说明 - 视觉障碍的人不能看到图像/视频内容，并且听觉受损的人不能听到音频内容。 我们稍后将在"无障碍"多媒体文章中详细介绍视频和音频内容，但对于本文，我们将介绍无障碍的 / Web / HTML / Element / img"> < img> 元素。

我们写了一个简单的例子， accessible-image.html a>，其中包含同一图像的四个副本:

<img src="dinosaur.png">

<img src="dinosaur.png"
     >

<img src="dinosaur.png"
     
     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背景图像。

如果你想提供额外的上下文信息，你应该将它放在图像周围的文本中，或者放在一个 title 属性中，如上所示。 在这种情况下，大多数屏幕阅读器将读出alt文本，title属性和文件名。 此外，浏览器在鼠标悬停时显示标题文本作为工具提示。

让我们再看一下第四种方法:

<img src="dinosaur.png" aria-labelledby="dino-label">

<p id="dino-label">The Mozilla red Tyrannosaurus ... </p>

在这种情况下，我们不使用 alt 属性 - 而是，我们已经将图像的描述呈现为常规文本段落，给定一个 id 然后使用 aria-labelledby 属性引用 id ，这会导致屏幕阅读器使用该段落作为该图像的替代文本/标签。 如果您想要使用与多个图片的标签相同的文字，这是非常有用的 - 这是使用 alt 是不可能的。

其他文本替代机制

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

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

这听起来像一个好主意，特别是对于信息图表，大图表有很多信息可能被表示为一个可访问的数据表(见上一节)。 但是，screenreaders不支持 longdesc ，并且非屏幕阅读器用户完全无法访问该内容。 可以说更好的方法是将长描述包含在与图像相同的页面上，或者使用常规链接链接到该图像。

HTML5包含两个新元素: < figure> >和 < figcaption> - 这是 应该将某种形式的图形(它可以是任何东西，不一定是图像)与图形标题相关联:

<figure>
  <img src="dinosaur.png">
  <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样式很有用，此外它还提供了一种在源中对图像进行描述的方法。

概要

你现在应该精通在大多数情况下编写可访问的HTML。 我们的WAI-ARIA基础文章也将填补这方面的一些空白，但这篇文章已经照顾了基础。 接下来，我们将探讨CSS和JavaScript，以及无障碍如何影响他们的好或坏的使用。