path: root/files/zh-cn/learn/tools_and_testing/cross_browser_testing/accessibility/index.html

---
title: 解决常见的可访问性问题
slug: Learn/Tools_and_testing/Cross_browser_testing/Accessibility
tags:
  - CSS
  - CodingScripting
  - HTML
  - JavaScript
  - 初学者
  - 可访问性
  - 学习
  - 工具
  - 文章
  - 测试
  - 跨浏览器
  - 键盘
translation_of: Learn/Tools_and_testing/Cross_browser_testing/Accessibility
original_slug: Learn/Tools_and_testing/Cross_browser_testing/可访问性
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}</div>

<p class="summary">接下来，我们将关注可访问性，提供关于一些常见问题的信息，如何进行简单测试以及如何使用审核/自动化工具来查找可访问性问题。</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">前提:</th>
   <td>熟悉<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>语言; 理解<a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">跨浏览器测试原理</a></td>
  </tr>
  <tr>
   <th scope="row">目标:</th>
   <td>能够诊断常见的可访问性问题，并使用适当的工具和技术解决问题。</td>
  </tr>
 </tbody>
</table>

<h2 id="什么是可访问性？">什么是可访问性？</h2>

<p>当我们在web技术的背景下说可访问性时，大多数人立即想到确保残疾人可以使用网站/应用程序，例如：</p>

<ul>
 <li>视障人士使用屏幕阅读器或放大/缩放浏览文本</li>
 <li>有运动功能障碍的人使用键盘（或其他非鼠标功能）使用网站。</li>
 <li>有听力障碍的人依赖于替代音频/视频内容的文本。</li>
</ul>

<p>但是，说可访问性仅与残疾人有关是错误的。实际上，可访问性的目的是使你的网站/应用程序在尽可能多的环境中被尽可能多的人使用，而不仅仅是那些使用高性能台式计算机的用户。极端的例子可能包括：</p>

<ul>
 <li>移动端用户</li>
 <li>使用其他浏览设备（例如电视，手表等）</li>
 <li>使用较旧设备的用户（他们可能没有最新的浏览器）</li>
 <li>设备性能不高的用户（他们可能具有较慢的处理器）</li>
</ul>

<p>在某种程度上，本模块都是关于可访问性的 — 跨浏览器测试可确保你的网站可以被尽可能多的人使用。这篇<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility/What_is_accessibility">可访问性是什么？</a> 更全面透彻地定义了什么是可访问性。</p>

<p>也就是说，本文将涵盖跨浏览器和有关残疾人的测试问题以及他们如何使用Web。我们在其他地方已经讨论过其他领域，例如<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1%E9%97%AE%E9%A2%98">响应式设计问题</a>和<a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Performance_issues">性能</a>。</p>

<div class="note">
<p><strong>Note</strong>: 就像Web开发中的许多事情一样，可访问性不是100%的成功或失败可以定义的；对于所有内容而言，几乎不可能实现100％的可访问性，尤其是当站点变得越来越复杂时。我们更多的是通过防御性编码并遵循最佳实践，努力使尽可能多的人可以访问尽可能多的内容。</p>
</div>

<h2 id="常见可访问性问题">常见可访问性问题</h2>

<p>在本节中，我们将围绕Web可访问性，详细介绍与特定技术相关的一些主要问题、要遵循的最佳实践，以及可以进行的一些快速测试，以查看你的网站是否朝着正确的方向发展。</p>

<div class="note">
<p><strong>Note</strong>: 可访问性在道德上是正确的事情，对企业也有好处(残疾用户，移动用户等构成了重要的细分市场), 并且在世界许多地方，提供出来的网络媒体资源无法为残疾人服务也是违法的。阅读<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility/What_is_accessibility#%E6%97%A0%E9%9A%9C%E7%A2%8D%E6%8C%87%E5%8D%97%E5%92%8C%E6%B3%95%E5%BE%8B">无障碍指南和法律</a>获取更多相关信息。</p>
</div>

<h3 id="HTML">HTML</h3>

<p>HTML语义化 (语义化正确地使用HTML标签)对于可访问性来说是开箱即用的 — 这类内容可供无视障人士阅读（前提是你不会做任何愚蠢的事情，例如使文本变小或使用CSS隐藏它），也可被屏幕阅读器（从字面上读出网页的应用）之类的辅助技术使用，并赋予其他优势。</p>

<h4 id="语义化结构">语义化结构</h4>

<p>HTML语义化最重要的捷径是为你的内容使用标题和段落的结构；这是因为屏幕阅读器用户倾向于将文档标题用作导航，以更快地找到他们需要的内容。如果你的内容没有标题，那么他们将获得的是一大坨文字，没有任何可定位的标记。坏的例子和好的例子如下：</p>

<pre class="brush: html example-bad">&lt;font size="7"&gt;My heading&lt;/font&gt;
&lt;br&gt;&lt;br&gt;
This is the first section of my document.
&lt;br&gt;&lt;br&gt;
I'll add another paragraph here too.
&lt;br&gt;&lt;br&gt;
&lt;font size="5"&gt;My subheading&lt;/font&gt;
&lt;br&gt;&lt;br&gt;
This is the first subsection of my document. I'd love people to be able to find this content!
&lt;br&gt;&lt;br&gt;
&lt;font size="5"&gt;My 2nd subheading&lt;/font&gt;
&lt;br&gt;&lt;br&gt;
This is the second subsection of my content. I think is more interesting than the last one.</pre>

<pre class="brush: html example-good">&lt;h1&gt;My heading&lt;/h1&gt;

&lt;p&gt;This is the first section of my document.&lt;/p&gt;

&lt;p&gt;I'll add another paragraph here too.&lt;/p&gt;

&lt;h2&gt;My subheading&lt;/h2&gt;

&lt;p&gt;This is the first subsection of my document. I'd love people to be able to find this content!&lt;/p&gt;

&lt;h2&gt;My 2nd subheading&lt;/h2&gt;

&lt;p&gt;This is the second subsection of my content. I think is more interesting than the last one.&lt;/p&gt;</pre>

<p>此外，你的内容应该在逻辑顺序上讲得通的 — 你总能在以后再为它们写CSS，但你应该在一开始就确定内容正确的顺序。</p>

<p>作为测试，你可以关闭网站的CSS，然后看看没有了CSS网站是否能被理解。你可以通过从代码中删除CSS来手动完成此操作，但是最简单的方法是使用浏览器功能，例如：</p>

<ul>
 <li>Firefox: 选择<em>查看 &gt; 页面样式 &gt; 无样式</em></li>
 <li>Safari: 选择<em>开发 &gt; 停用样式</em> (需要开启“开发”菜单, 点击<em>Safari &gt; 偏好设置 &gt; 高级 &gt; 在菜单栏中显示“开发”菜单</em>)</li>
 <li>Chrome: 安装Web Developer Toolbar扩展程序, 然后重启浏览器。点击图标，选择<em>CSS &gt; 停用所有样式</em></li>
 <li>Edge: 选择<em>查看 &gt; 样式 &gt; 无样式</em></li>
</ul>

<h4 id="使用键盘">使用键盘</h4>

<p>某些HTML功能可以使用键盘来选择 — 这是默认的，从早期web开始就是这样的。具有此功能的元素是允许用户与网页交互的常见元素，比如links, {{htmlelement("button")}}s, 以及表单元素，比如{{htmlelement("input")}}.</p>

<p>浏览<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" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p>

<p>然后，你可以按Enter / Return键来关注焦点链接，或者按一个按钮（我们已经包含一些JavaScript来使按钮提醒消息），或者在输入框开始输入文本，（其他表单元素具有不同的控件，例如{{htmlelement("select")}}元素可以使用向上和向下箭头键显示和循环显示其选项）。</p>

<p>请注意，不同的浏览器可能具有不同的键盘控制选项。大多数现代浏览器都遵循上述的标签模式（你也可以执行Shift + Tab来向后移动可聚焦元素），但是某些浏览器具有自己的特性：</p>

<ul>
 <li>Firefox for the Mac doesn't do tabbing by default. To turn it on, you have to go to <em>Preferences &gt; Advanced &gt; General</em>, then uncheck "Always use the cursor keys to navigate within pages". Next, you have to open your Mac's System Preferences app, then go to <em>Keyboard &gt; Shortcuts</em>, then select the <em>All Controls</em> radio button.</li>
 <li>Safari默认情况下不允许你按tab遍历链接；要启用此功能，你需要打开Safari的“<em>偏好设置</em>”，转到“<em>高级</em>”，然后选中“<em>按下Tab键以高亮显示网页上的每一项</em>”。</li>
</ul>

<div class="warning">
<p><strong>重要</strong>: 你应该在所写的任何新页面上执行这种测试 — 确保可以通过键盘使用功能。</p>
</div>

<p>这个例子强调了正确使用语义元素的重要性。可以用CSS将任何元素的样式设置为看起来像链接或按钮，并使用JavaScript让其表现为像链接或按钮一样，但实际上它们不是链接或按钮，你将失去很多语义化元素带给你的可访问性。因此，尽量避免这样做。</p>

<p>另一个技巧 — 如我们的示例所示，你可以使用<a href="/zh-CN/docs/Web/CSS/:focus">:focus</a>伪类控制可聚焦元素在聚焦时的外观。最好将焦点和悬停样式加重显示，这样无论是使用鼠标还是键盘的用户，都能直观地察觉控件在被激活时将执行的操作</p>

<pre class="brush: css">a:hover, input:hover, button:hover, select:hover,
a:focus, input:focus, button:focus, select:focus {
  font-weight: bold;
}</pre>

<div class="note">
<p><strong>Note</strong>: 如果你决定使用CSS删除默认的焦点样式，请确保将其替换为更适合你的设计的其他样式 — 这是一种非常有价值的可访问性工具，不应删除。</p>
</div>

<h4 id="模拟键盘">模拟键盘</h4>

<p>有时可能无法使用键盘完成可访问性。你可能有一个语义不是很好的网站（也许你最终得到了一个糟糕的CMS网页，该CMS生成了由&lt;div&gt; 组成的按钮），或者你正在使用一个没有内置键盘可访问性的复杂控件，例如HTML5 {{htmlelement("video")}} 元素（令人惊奇的是，Opera是唯一允许你在&lt;video&gt;元素的默认浏览器控件之间进行制表的浏览器）。你有几种选择：</p>

<ol>
 <li>使用&lt;button&gt;元素（默认情况下都是可以在button间使用Tab键）和JavaScript创建自定义控件，以连接其功能。有关此示例，请参见<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>。</li>
 <li>通过JavaScript创建键盘快捷键，因此当你按键盘上的某些键时，功能被激活。请参阅<a href="/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">Desktop mouse and keyboard controls</a>，以获取一些可用于任何目的（比如游戏）的例子。</li>
 <li>使用一些有趣的策略来伪造按钮行为。以我们的<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>tabindex="0"</code>（请参阅​​WebAIM的<a href="http://webaim.org/techniques/keyboard/tabindex">tabindex文章</a>以获取更多详细信息），使假的&lt;div&gt;按钮能够被聚焦（包括通过制表符）。这使我们可以跳到按钮上，但不能通过回车键激活它们。为此，我们必须添加以下JavaScript代码：
  <pre class="brush: js">document.onkeydown = function(e) {
  if(e.keyCode === 13) { // The Enter/Return key
    document.activeElement.onclick(e);
  }
};</pre>
  在这里，我们向<code>document</code>对象添加了一个监听器，以检测何时按下了键盘上的按钮。我们通过事件对象的keyCode属性检查按下了什么按钮；如果它是与回车键匹配的键码，则使用<code>document.activeElement.onclick()</code>运行存储在按钮的onclick处理程序中的函数。<code>document.activeElement</code>为我们提供了当前页面上被聚焦的元素。</li>
</ol>

<div class="note">
<p><strong>Note</strong>: 仅当你通过事件处理程序属性（例如<code>onclick</code>）设置原始事件处理程序时，此技术才有效。<code>addEventListener</code>将无法正常工作。重新构建功能会有很多额外的麻烦。并且肯定还有其他问题。最好能从根源解决问题，使用正确的语义化元素。</p>
</div>

<h4 id="替代文本">替代文本</h4>

<p>替代文本对于可访问性非常重要 — 如果一个人有视觉或听觉障碍使他们无法看到或听到某些内容，那么这就是一个问题。可用的最简单的文本替代方法是<code>alt</code>属性，我们应该在所有包含相关内容的图像上包括该属性。其中应包含对图像的描述，该描述可在页面上成功传达其含义和内容，并由屏幕阅读器读取并读出给用户。</p>

<div class="note">
<p><strong>Note</strong>: 更多信息请阅读<a href="https://developer.mozilla.org/zh-CN/docs/learn/Accessibility/HTML:%E4%B8%BA%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7%E6%8F%90%E4%BE%9B%E4%B8%80%E4%B8%AA%E8%89%AF%E5%A5%BD%E7%9A%84%E5%9F%BA%E7%A1%80#%E6%96%87%E6%9C%AC%E6%9B%BF%E4%BB%A3%E5%93%81">Text alternatives</a></p>
</div>

<p>可以通过多种方法来测试缺少的替代文本，例如，使用可访问性<a href="#审计工具">审计工具</a>。</p>

<p>对于视频和音频内容，Alt文本稍微复杂一些。有一种方法可以定义文本轨道（例如，字幕）并在播放视频时以{{htmlelement("track")}}元素和<a href="/zh-CN/docs/Web/API/WebVTT_API">WebVTT</a>格式的形式显示它们（请参见<a href="/zh-CN/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>以获取详细信息）。这些功能的<a href="/zh-CN/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9">浏览器兼容性</a>相当好，但是如果你想提供音频的替代文本或支持较旧的浏览器，则在页面某处或单独页面上显示一个简单的文本记录可能是个好主意。</p>

<h4 id="元素关系和上下文">元素关系和上下文</h4>

<p>HTML中有某些功能和最佳实践，旨在提供元素之间的上下文和关系。三个最常见的示例是链接，表单标签和数据表。</p>

<p>使用屏幕阅读器的人们通常会使用一项共同的功能，即他们会拉出页面上所有链接的列表。在这种情况下，链接文本需要脱离上下文。例如，标记为“单击此处”，“单击此处”等的链接列表确实对可访问性不利。链接文本最好在上下文和上下文之外都有意义。</p>

<p>表单{{htmlelement("label")}}元素是允许我们使表单可访问的主要功能之一。表单的麻烦在于，你需要标签来说明应在每个表单输入中输入哪些数据。每个标签都必须包含在{{htmlelement("label")}}内，以将其明确链接到其对应的表单输入框（属性值的每个<code>&lt;label&gt;</code>的<code>for</code>属性值必须与表单元素<code>id</code>值匹配），即使源顺序不是完全合乎逻辑的，也能提供很好的可访问性。</p>

<div class="note">
<p><strong>Note</strong>: 更多关于链接文本和表单标签，请阅读<a href="/zh-CN/docs/learn/Accessibility/HTML:%E4%B8%BA%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7%E6%8F%90%E4%BE%9B%E4%B8%80%E4%B8%AA%E8%89%AF%E5%A5%BD%E7%9A%84%E5%9F%BA%E7%A1%80#%E6%9C%89%E6%84%8F%E4%B9%89%E7%9A%84%E6%96%87%E5%AD%97%E6%A0%87%E7%AD%BE">有意义的文字标签</a></p>
</div>

<p>最后，简要介绍一下数据表。基本数据表可以用非常简单的标记编写（请参阅<a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a>和<a href="https://github.com/mdn/learning-area/blob/master/accessibility/html/bad-table.html">源码</a>)），但这存在问题 — 屏幕阅读器用户无法将行或列作为数据分组关联在一起，但你需要知道标题行是什么，以及标题行行的标题还是列的标题等。这些只能从可视化的表格才能知道。</p>

<p>相反，如果你看一下我们的<code>punk-bands-complete.html</code>示例（<a href="https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">示例</a>，<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">源码</a>），则可以在此处看到一些可访问性辅助，例如表头（{{htmlelement("th")}}和<code>作用域</code>属性），{{htmlelement("caption")}}元素等。</p>

<div class="note">
<p><strong>Note</strong>: 更多信息，请阅读<a href="/zh-CN/docs/learn/Accessibility/HTML:%E4%B8%BA%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7%E6%8F%90%E4%BE%9B%E4%B8%80%E4%B8%AA%E8%89%AF%E5%A5%BD%E7%9A%84%E5%9F%BA%E7%A1%80#%E5%8F%AF%E8%AE%BF%E9%97%AE%E7%9A%84%E8%A1%A8%E6%A0%BC">可访问的表格</a></p>
</div>

<h3 id="CSS">CSS</h3>

<p>CSS往往提供的基本可访问性功能要比HTML少得多，但是如果使用不当，它仍然会对可访问性造成同样的损害。下面是一些涉及CSS的可访问性的点：</p>

<ul>
 <li>使用正确的语义元素修饰HTML中的不同内容；如果要创建不同的视觉效果，请使用CSS-不要滥用HTML元素来获得所需的外观。例如，如果你想要更大的文本，请使用{{cssxref("font-size")}}，而不是{{htmlelement("h1")}}标签。</li>
 <li>确保内容顺序在没有CSS的情况下有意义；你可以随时使用CSS设置页面样式。</li>
 <li>你应该确保按钮和链接之类的交互元素具有适当的聚焦/悬停/活动状态设置，以便用户能姨一目了然。如果出于风格原因删除默认设置，请确保包括一些替代的样式。</li>
</ul>

<p>还有其他几个需要注意的地方。</p>

<h4 id="颜色和颜色对比度">颜色和颜色对比度</h4>

<p>为你的网站选择配色方案时，应确保文本（前景）颜色与背景颜色形成鲜明对比。你的设计可能看起来很酷，但是如果视力障碍者（例如色盲）无法阅读你的内容，那就不好了。使用WebAIM的<a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a>之类的工具来检查你的方案是否有足够对比度。</p>

<p>另一个提示是不要仅依靠颜色来表示界标/信息，因为这对于看不见颜色的人来说是不好的。例如，不要将所需的表单字段标记为红色，而应使用星号和红色标记它们。</p>

<div class="note">
<p><strong>Note</strong>: 高对比度也可以让使用带有光滑屏幕的设备（例如智能手机或平板电脑）的人在明亮的环境（例如阳光）下可以更好地阅读页面。</p>
</div>

<h4 id="隐藏的内容">隐藏的内容</h4>

<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键和回车键选择它们）。</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>Note</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="JavaScript">JavaScript</h3>

<p>就可访问性而言，JavaScript具有与CSS相同的问题 — 如果使用不当或使用过度，可访问性可能会很糟糕。我们已经提到了与JavaScript相关的一些可访问性问题，主要是在HTML语义化那块 — 你应该始终使用适当的语义化HTML来在合适的地方实现功能，例如，适当地使用链接和按钮。尽量不要使用JavaScript代码中结合<code>&lt;div&gt;</code>元素来伪造功能 — 容易出错，并且比直接使用HTML标签还要做更多的工作。</p>

<h4 id="简单的功能">简单的功能</h4>

<p>通常，简单的功能只应使用HTML标签完成 — JavaScript仅用于增强功能，而不能用于实现简单功能。好的JavaScript用法包括：</p>

<ul>
 <li>提供客户端表单验证，可在不等待服务器检查数据的情况下，迅速向用户发出有关表单条目问题的警报。如果不能在客户端验证，则该表格仍然可以使用，但验证速度可能会较慢。</li>
 <li>提供全键盘用户可访问的HTML5 <code>&lt;video&gt;</code>的自定义控件（如我们之前所述，默认浏览器视频控件在大多数浏览器中均无法通过键盘访问）。</li>
</ul>

<div class="note">
<p><strong>Note</strong>: WebAIM的<a href="http://webaim.org/techniques/javascript/">Accessible JavaScript</a>提供了一些关于JavaScript可访问性注意事项的信息。</p>
</div>

<p>更复杂的JavaScript实现可能会带来可访问性问题 — 你需要尽力而为。例如，期望让使用WebGL编写的复杂3D游戏对盲人来说100％可访问性是不合理的，但是你可以实现键盘控件，以便非鼠标用户可以使用它，并使配色方案具有足够的对比度供有颜色分辨障碍的人使用。</p>

<h4 id="复杂的功能">复杂的功能</h4>

<p>可访问性存在问题的主要领域之一是复杂的应用程序，其中涉及复杂的表单控件（例如日期选择器）和动态内容，内容会经常增量更新。</p>

<p>非自带的复杂的表单控件可能会存在问题，因为它们往往涉及大量嵌套的<code>&lt;div&gt;</code>，浏览器默认情况下不知道如何处理它们。如果你自己开发控件，则需要确保它们可以通过键盘访问。如果你使用的是某种第三方框架，请在开始使用之前仔细检查可用的选项以了解它们是否具有完备的可访问性。例如，Bootstrap就对可访问性有相当好的支持（尽管Rhiana Heath的<span class="l-d-i l-pa2 t-bg-white"><a href="https://www.sitepoint.com/making-bootstrap-accessible/">Making Bootstrap a Little More Accessible</a></span>探讨了它的一些问题（主要与色彩对比度有关），并着眼于一些解决方案）。</p>

<p>定期更新的动态内容可能会成为问题，因为屏幕阅读器用户可能会错过这些内容，尤其是在意外更新的情况下。如果你有一个包含主要内容面板的单页应用程序，该应用程序使用<a href="/zh-CN/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>或<a href="/zh-CN/docs/Web/API/Fetch_API">Fetch</a>定期更新，那么屏幕阅读器用户可能会错过这些更新。</p>

<h4 id="WAI-ARIA">WAI-ARIA</h4>

<p>你是否需要使用这种复杂的功能，或者使用普通的旧语义化HTML代替？如果确实需要复杂性，则应考虑使用<a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a>（Accessible Rich Internet Applications - 可访问的互联网应用），该规范为诸如复杂的表单控件和更新面板之类的项目提供了语义（以新的HTML属性形式），这样大部分浏览器和屏幕阅读器就能理解内容。</p>

<p>要处理复杂的表单窗口小部件，你需要使用ARIA属性（例如<code>roles</code>）来声明窗口小部件中不同元素的角色（例如，它们是选项卡还是选项卡面板？），用<code>aria-disabled</code>来表示控件是否禁用等。</p>

<p>要处理内容定期更新的区域，可以使用<code>aria-live</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>例子如下：</p>

<pre class="brush: html">&lt;p&gt;&lt;span id="LiveRegion1" aria-live="polite" aria-atomic="false"&gt;&lt;/span&gt;&lt;/p&gt;</pre>

<p>浏览Freedom Scientific的<a href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">ARIA (Accessible Rich Internet Applications)动态更新区域</a>示例 — 高亮显示的段落每10秒更新一次内容，屏幕阅读器应将此内容读出给用户。<a href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegionsAtomic.htm">ARIA Live Regions - Atomic</a>是另一个很有用的例子。</p>

<p>我们这里没有足够的空间来详细介绍WAI-ARIA，你可以在<a href="/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a>了解更多。</p>

<h2 id="可访问性测试工具">可访问性测试工具</h2>

<p>现在，我们已经介绍了不同Web技术的可访问性注意事项，包括一些测试方法（例如键盘导航和颜色对比度检查器），让我们看一下在进行可访问性测试时可以使用的其他工具。</p>

<h3 id="审计工具">审计工具</h3>

<p>你可以使用许多审计工具检查你的网页，这些审计工具将检查它们并返回页面上存在的可访问性问题列表。一些审计工具：</p>

<ul>
 <li><a href="https://tenon.io">Tenon</a>: 一个相当不错的在线应用程序，它通过提供的URL遍历代码，并返回有关可访问性错误的结果，包括度量标准，特定错误以及它们影响的WCAG标准以及建议的修复方式。</li>
 <li><a href="http://khan.github.io/tota11y/">tota11y</a>: Khan Academy的可访问性工具，采用JavaScript库的形式，你可以将其附加到页面上，以提供许多可访问性工具。</li>
 <li><a href="http://wave.webaim.org/">Wave</a>: 另一个在线可访问性测试工具，它接受网址并返回该页面带注释的视图，其中高亮显示了可访问性问题。</li>
</ul>

<p>看下面的例子，我们用的是Tenon。</p>

<ol>
 <li>访问<a href="https://tenon.io">Tenon主页</a>。</li>
 <li>使用<a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a>示例测试，输入链接地址并按下<em>Analyse Your Webpage（译者注：开始分析你的网页）。</em></li>
 <li>下滑，直到你看到错误/描述部分，如下图。</li>
</ol>

<p><img alt="" src="https://mdn.mozillademos.org/files/14217/tenon-screenshot.png" style="border-style: solid; border-width: 1px; display: block; height: 593px; margin: 0px auto; width: 870px;"></p>

<p>你还可以探索一些选项（请参阅页面顶部附近的<em>Show Options（译者注：显示选项）</em>链接），或者使用Tenon的API。</p>

<div class="note">
<p><strong>Note</strong>: 这些工具不足以单独解决你的所有可访问性问题。你需要将这些，知识和经验，用户测试等结合起来才能获得完整的解决方案。</p>
</div>

<h3 id="自动化工具">自动化工具</h3>

<p><a href="https://www.deque.com/products/axe/">Deque's aXe tool</a>比我们上面提到的审计工具更优秀。和其他工具一样，它检查页面并返回可访问性错误。它很有用，可以提供浏览器扩展程序：</p>

<ul>
 <li><a href="http://bitly.com/aXe-Chrome">aXe for Chrome</a></li>
 <li><a href="http://bit.ly/aXe-Firefox">aXe for Firefox</a></li>
</ul>

<p>扩展程序将可访问性选项卡添加到浏览器开发人员工具。例如，我们安装了Firefox版本，然后使用它来审核<a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a>示例。我们得到以下结果：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14213/aXe-screenshot.png" style="display: block; height: 580px; margin: 0px auto; width: 800px;"></p>

<p>aXe也可以使用<code>npm</code>安装，并且可以与任务运行器（如<a href="http://gruntjs.com/">Grunt</a> 和<a href="http://gulpjs.com/">Gulp</a>），自动化框架（如<a href="http://www.seleniumhq.org/">Selenium</a>和<a href="https://cucumber.io/">Cucumber</a>），单元测试框架（如<a href="http://jasmine.github.io/">Jasmin</a>）集成，以及更多其他功能（详见<a href="https://www.deque.com/products/axe/">main aXe page</a> ）。</p>

<h3 id="屏幕阅读器">屏幕阅读器</h3>

<p>为了了解有严重视力障碍的人是如何浏览网页的，我们需要测试屏幕阅读器。有几款屏幕阅读器：</p>

<ul>
 <li>有些是付费产品，比如<a href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a> (Windows) 和<a href="http://www.gwmicro.com/window-eyes/">Window Eyes</a> (Windows).</li>
 <li>有些是免费产品，比如<a href="http://www.nvaccess.org/">NVDA</a> (Windows), <a href="http://www.chromevox.com/">ChromeVox</a> (Chrome, Windows, and Mac OS X), 和<a href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux).</li>
 <li>有些内置在操作系统中，比如<a href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a> (Mac OS X and iOS), <a href="http://www.chromevox.com/">ChromeVox</a> (on Chromebooks), 和<a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li>
</ul>

<p>通常，屏幕阅读器是独立运行的应用程序，并且不仅仅支持阅读网页，也支持阅读其他应用程序。也有例外（比如ChromeVox是一个浏览器扩展程序）。不同的屏幕阅读器可能在控制键和表现上稍有不同，所以你必须查阅你选择的屏幕阅读器的文档来获取相关细节。总体来说他们是大同小异的。</p>

<p>一起看一下我们对几款不同的屏幕阅读器的测试。这将帮助你大致了解它们如何工作以及如何测试它们。</p>

<div class="note">
<p><strong>Note</strong>: WebAIM的 <a href="http://webaim.org/techniques/screenreader/">Designing for Screen Reader Compatibility</a>提供了一些关于屏幕阅读器的使用和如何开发应用以最好的适用屏幕阅读器的信息。你也可以看下<a href="http://webaim.org/projects/screenreadersurvey6/#used">Screen Reader User Survey #6 Results</a>这篇有关屏幕阅读器一些有趣的统计信息的文章。</p>
</div>

<h4 id="VoiceOver">VoiceOver</h4>

<p>VoiceOver (VO)是Mac/iPhone/iPad上的免费应用，所以如果你使用苹果公司的产品，可以用VO来进行测试。 我们在Mac OS X 系统上测试了它。</p>

<p>按下Cmd + Fn + F5打开它。如果你之前没用过VO，将会出现一个可以选择是否开启VO的欢迎界面，并且还会有教程指导你如何使用。再次按下Cmd + Fn + F5可以关闭。</p>

<div class="note">
<p><strong>Note</strong>: 你应该至少看一遍教程，它对于你了解VO是非常有用的。</p>
</div>

<p>当VO开启时，你会看到一个会显示当前选中信息的黑色框在屏幕的左下角，除此之外屏幕显示大体还是相同的。当前选中的部分也会出现一个黑色的边框以进行高亮显示，这个黑色框就是VO的光标。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14219/voiceover.png" style="border-style: solid; border-width: 1px; display: block; height: 386px; margin: 0px auto; width: 800px;"></p>

<p>在使用中，你会用到"VO修饰键"，"VO修饰键"是一个单独键或组合键，当你使用VO的快捷键时，你需要额外按下这个"VO修饰键"。屏幕阅读器通常都会有修饰键，防止它们的快捷键和其他程序的快捷键冲突。VO的修饰键是CapsLock, 或Ctrl + Option。</p>

<p>VO有很多快捷键，我们没有全部列出来。只把测试网页可访问性常用的一些在下面列出了。表格里，"VO"代表"VO修饰键"。</p>

<table class="standard-table">
 <caption>常用的VO快捷键</caption>
 <thead>
  <tr>
   <th scope="col">快捷键</th>
   <th scope="col">描述</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>VO + 方向键</td>
   <td>移动VO光标</td>
  </tr>
  <tr>
   <td>VO + 空格键</td>
   <td>选择/激活高亮的部分，包括Rotor里的内容（关于Rotor见下面）</td>
  </tr>
  <tr>
   <td>VO + Shift + 下</td>
   <td>移动到组合项目里（比如HTML表格，或表单等）。进入组合里，你能使用下面的快捷键。</td>
  </tr>
  <tr>
   <td>VO + Shift + 上</td>
   <td>离开组合项目</td>
  </tr>
  <tr>
   <td>VO + C</td>
   <td>(当在表格里面时) 阅读当前列的头部</td>
  </tr>
  <tr>
   <td>VO + R</td>
   <td>(当在表格里面时) 阅读当前行的头部</td>
  </tr>
  <tr>
   <td>VO + C + C </td>
   <td>(当在表格里面时) 阅读当前列，包括列头</td>
  </tr>
  <tr>
   <td>VO + R + R </td>
   <td>(当在表格里面时) 阅读当前行，包括对应于每个小行的头</td>
  </tr>
  <tr>
   <td>VO + 左, VO + 右</td>
   <td>(当在水平的选项卡里面时，比如日期选择或时间选择) 切换选项</td>
  </tr>
  <tr>
   <td>VO + 上, VO + 下</td>
   <td>(当在垂直的选项卡里面时，比如日期选择或时间选择) 切换选项</td>
  </tr>
  <tr>
   <td>VO + U</td>
   <td>使用Rotor。Rotor使用列表展示标题，链接，表单选项等，以便为我们提供便利的导航。</td>
  </tr>
  <tr>
   <td>VO + 左, VO + 右</td>
   <td>(当在Rotor里) 切换到其他列表</td>
  </tr>
  <tr>
   <td>VO + 上, VO + 下</td>
   <td>(当在Rotor里) 在当前列表里，切换到其他项</td>
  </tr>
  <tr>
   <td>Esc</td>
   <td>(当在Rotor里) 推出Rotor</td>
  </tr>
  <tr>
   <td>Ctrl</td>
   <td>(当VO阅读时) 暂停/继续</td>
  </tr>
  <tr>
   <td>VO + Z</td>
   <td>重复上一句话</td>
  </tr>
  <tr>
   <td>VO + D</td>
   <td>进入Mac的程序坞，你能选择运行哪个应用</td>
  </tr>
 </tbody>
</table>

<p>看起来很多，但当你用起来时还好，因为VO通常会给你提醒，在哪里应该用哪个快捷键。现在试试运行VO，在<a href="#屏幕阅读器测试">屏幕阅读器测试</a>屏幕阅读器测试章节做个测试吧。</p>

<h4 id="NVDA">NVDA</h4>

<p>NVDA只能运行在Window系统，你需要安装它。</p>

<ol>
 <li>在<a href="http://www.nvaccess.org/">nvaccess.org</a>下载。你能选择免费下载，或赞助后再下载；你需要在下载前提供你的邮箱地址。</li>
 <li>下载完成后，开始安装 - 双击安装程序，接受条款，一步步按提示来。</li>
 <li>双击NVDA程序或快捷方式，或者按下Ctrl + Alt + N打开它。你会看见欢迎界面。你能选择一些选项，然后按下OK继续。</li>
</ol>

<p>NVDA现在在你的电脑上开启了。</p>

<p>在使用中，你会用到"NVDA修饰键"，"NVDA修饰键"是一个单独键，当你使用NVDA的快捷键时，你需要额外按下这个"NVDA修饰键"。屏幕阅读器通常都会有修饰键，防止它们的快捷键和其他程序的快捷键冲突。NVDA的修饰键是Insert键（默认）, 或CapsLock键（在欢迎界面可以选择使用该键）。</p>

<div class="note">
<p><strong>Note</strong>: 关于高亮方面，NVDA比VoiceOver做的更好。当滚动过标题、列表等元素时，你选中的项目会被一个细微的边框包住以高亮，但不是对于所有元素都是这样的。如果你感觉迷失方向了，可以按Ctrl + F5刷新页面，并从顶部重新开始。</p>
</div>

<p>NVDA有很多快捷键，我们没有全部列出来。只把测试网页可访问性常用的一些在下面列出了。表格里，"NVDA"代表"NVDA修饰键"。</p>

<table class="standard-table">
 <caption>常用的NVDA快捷键</caption>
 <thead>
  <tr>
   <th scope="col">快捷键</th>
   <th scope="col">描述</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>NVDA + Q</td>
   <td>关闭NVDA</td>
  </tr>
  <tr>
   <td>NVDA + 上</td>
   <td>阅读当前行</td>
  </tr>
  <tr>
   <td>NVDA + 下</td>
   <td>在当前位置开始阅读</td>
  </tr>
  <tr>
   <td>上和下, 或者Shift + Tab 和Tab</td>
   <td>移动到上/下一项，开始阅读</td>
  </tr>
  <tr>
   <td>左和右</td>
   <td>移动到当前项的上/下一个字符，开始阅读</td>
  </tr>
  <tr>
   <td>Shift + H 和 H</td>
   <td>移动到上/下一标题，开始阅读</td>
  </tr>
  <tr>
   <td>Shift + K 和 K</td>
   <td>移动到上/下一链接项，开始阅读</td>
  </tr>
  <tr>
   <td>Shift + D 和 D</td>
   <td>移动到上/下一文档界标（比如&lt;nav&gt;），开始阅读</td>
  </tr>
  <tr>
   <td>Shift + 1–6 和 1–6</td>
   <td>移动到上/下一标题（标题1 - 6），开始阅读</td>
  </tr>
  <tr>
   <td>Shift + F 和 F</td>
   <td>移动到上/下一表单选项，聚焦</td>
  </tr>
  <tr>
   <td>Shift + T 和 T</td>
   <td>移动到上/下一数据表，聚焦</td>
  </tr>
  <tr>
   <td>Shift + B 和 B</td>
   <td>移动到上/下一按钮，阅读它的label</td>
  </tr>
  <tr>
   <td>Shift + L 和 L</td>
   <td>移动到上/下一列表，阅读它的第一项</td>
  </tr>
  <tr>
   <td>Shift + I 和 I</td>
   <td>移动到上/下一列表，开始阅读</td>
  </tr>
  <tr>
   <td>Enter/Return</td>
   <td>(当链接或按钮或其他可激活的项选中时) 激活项</td>
  </tr>
  <tr>
   <td>NVDA + 空格</td>
   <td>(当选中表单时) 进入表单，或如果已经在表单里的情况下，离开表单</td>
  </tr>
  <tr>
   <td>Shift Tab 和 Tab</td>
   <td>(当在表单里面时) 切换到下一个input</td>
  </tr>
  <tr>
   <td>上 和 下</td>
   <td>(当在表单里面时) 改变input的值(例如选择框).</td>
  </tr>
  <tr>
   <td>空格</td>
   <td>(当在表单里面时) 选择已选中的值</td>
  </tr>
  <tr>
   <td>Ctrl + Alt + 方向键</td>
   <td>(当选中表格时) 切换表格单元格</td>
  </tr>
 </tbody>
</table>

<h4 id="屏幕阅读器测试">屏幕阅读器测试</h4>

<p>现在你学会了如何使用屏幕阅读器，来使用它做一些可访问性测试吧。这样你才能了解屏幕阅读器在好的网页和坏的网页之间不同的表现：</p>

<ul>
 <li>浏览<a href="http://mdn.github.io/learning-area/accessibility/html/good-semantics.html">good-semantics.html</a>, 留意屏幕阅读器如何找到标题并将其用于导航。再看一下<a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a>, 留意屏幕阅读器不会得到这些信息。想象一下，当尝试浏览非常长的文本页面时，这会是多么使人烦躁。</li>
 <li>浏览<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> 就无法帮助你理解— 他们仅仅会提示"click here（点击这里）".</li>
 <li>浏览<a href="http://mdn.github.io/learning-area/accessibility/html/good-form.html">good-form.html</a>, 并注意如何使用其标签描述表单输入，因为我们已经正确使用了&lt;label&gt;。在<a href="http://mdn.github.io/learning-area/accessibility/html/bad-form.html">bad-form.html</a>, 只能获取到无用的空白标签。</li>
 <li>浏览<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>, 并查看屏幕阅读器如何将内容的列和行关联起来，并一起读取它们，因为我们已经正确定义了标头。在<a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a>, 无法得知单元格的关联关系。请注意，当页面上只有一个表时，NVDA似乎表现得有些杂乱无章。你可以改用<a href="http://webaim.org/articles/nvda/tables.htm">WebAIM's table test page</a>进行测试。</li>
 <li>看一下之前看过的<a href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">WAI-ARIA live regions example</a>, 并注意屏幕阅读器将实时读取不断更新的部分。</li>
</ul>

<h3 id="用户测试">用户测试</h3>

<p>如上所述，你不能仅依靠自动化工具来确定网站上的可访问性问题。建议在制定测试计划时，包含一些用户测试可访问性的计划(有关更多内容，请参阅前面的<a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#User_testing">用户测试</a>部分)。尝试让一些屏幕阅读器用户，一些全键盘用户，一些有听觉障碍的用户或其他用户参与测试，以满足你的需求。</p>

<h2 id="测试可访问性检查清单">测试可访问性检查清单</h2>

<p>以下列表提供了一个清单，供参考，以确保已对项目执行建议的可访问性测试：</p>

<ol>
 <li>确保HTML尽可能是语义化的。<a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#%E9%AA%8C%E8%AF%81">验证</a>是一个好方法, 就像使用<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%AE%A1%E8%AE%A1%E5%B7%A5%E5%85%B7">审计工具</a>。</li>
 <li>检查当关闭CSS时，你的内容能够被理解。</li>
 <li>确认功能是<a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7#%E4%BD%BF%E7%94%A8%E9%94%AE%E7%9B%98">全键盘可访问</a>的。使用Tab键、回车键等做测试。</li>
 <li>确保非文本内容有<a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7#%E6%9B%BF%E4%BB%A3%E6%96%87%E6%9C%AC">替代文本</a>。 <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%AE%A1%E8%AE%A1%E5%B7%A5%E5%85%B7">审计工具</a>能够很好地发现问题。</li>
 <li>确保<a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7#%E9%A2%9C%E8%89%B2%E5%92%8C%E9%A2%9C%E8%89%B2%E5%AF%B9%E6%AF%94%E5%BA%A6">颜色和颜色对比度</a>是可接受的，使用合适的工具测试。</li>
 <li>确保<a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7#%E9%9A%90%E8%97%8F%E7%9A%84%E5%86%85%E5%AE%B9">隐藏的内容</a>可以被屏幕阅读器读取。</li>
 <li>尽可能的使功能在没有JavaScript的情况下也可以正常使用。</li>
 <li>在合适的地方使用ARIA来提供可访问性。</li>
 <li>使用<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%AE%A1%E8%AE%A1%E5%B7%A5%E5%85%B7">审计工具</a>测试一下你的网站。</li>
 <li>使用屏幕阅读器实际测试一下。</li>
 <li>在你的网站上可以添加可访问性策略/声明，以说明你的为可访问性做了什么。</li>
</ol>

<h2 id="寻找帮助">寻找帮助</h2>

<p>可访问性还会遇到许多其他问题。你要学会如何在线查找答案。请查阅HTML和CSS文章的“<a href="/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#%E5%AF%BB%E6%89%BE%E5%B8%AE%E5%8A%A9">寻找帮助</a>”部分，以获取一些指导。 </p>

<h2 id="总结">总结</h2>

<p>希望本文能让你了解可访问性，以及帮助你解决遇到的一些可访问性问题。</p>

<p>下一篇文章，我们将详细介绍特征检测。</p>

<p>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/JavaScript","Learn/Tools_and_testing/Cross_browser_testing/Feature_detection", "Learn/Tools_and_testing/Cross_browser_testing")}}</p>

<h2 id="指南">指南</h2>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">跨浏览器测试简介</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">测试策略</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">处理常见的HTML和CSS问题</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">处理常见的JavaScript问题</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">处理常见的可访问性问题</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">实现特征检查</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">自动测试简介</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">建立你自己的自动化测试环境</a></li>
</ul>