Handling common accessibility problems

先决条件:	熟悉核心 HTML ， CSS 和 JavaScript 语言; 高级跨浏览器测试原则的概念。
目的:	能够诊断常见的辅助功能问题，并使用适当的工具和技术来解决这些问题。

什么是辅助功能？

当我们在Web技术的上下文中描述辅助功能时，大多数人立即想到确保网站/应用程序可供残疾人使用，例如:

• Visually impaired people using screen readers or magnification/zoom to access text
• People with motor function impairments using the keyboard (or other non-mouse features) to activate website functionality.
• People with hearing impairments relying on captions/subtitles or other text alternatives for audio/video content.

然而，说可及性只是关于残疾是错误的。 真正的，无障碍的目的是使您的网站/应用程序可以尽可能多的人在尽可能多的情况下使用，而不只是那些用户使用大功率的台式电脑。 极端的例子可能包括:

• Users on mobile devices.
• Users on alternative browsing devices such as TVs, watches, etc.
• Users of older devices that might not have the latest browsers.
• Users of lower spec devices that might have slow processors.

在某种程度上，这个整个模块是关于辅助功能 - 跨浏览器测试确保您的网站可以尽可能多的人使用。 什么是辅助功能？定义的辅助功能比本文更完整和全面。

也就是说，本文将介绍关于残疾人的跨浏览器和测试问题，以及他们如何使用Web。 我们已经讨论过其他领域，例如自适应设计和性能 a>在模块中的其他地方。

常见的辅助功能问题

在本节中，我们将详细介绍与网络可访问性相关的一些主要问题，以及与特定技术相关的最佳做法，以及一些快速测试，以了解您的网站是否朝着正确的方向进行。

HTML

语义HTML(其中元素用于它们的正确目的)可以直接访问 - 这样的内容是可见的观看者可读的(只要你不做任何愚蠢的使文本方式太小或使用CSS隐藏它) ，但也可以通过诸如屏幕阅读器(向用户逐字地读出网页的应用)等辅助技术使用，并且还具有其他优点。

Semantic structure

语义HTML中最重要的快速胜利是为您的内容使用标题和段落的结构; 这是因为屏幕阅读器用户倾向于使用文档的标题作为路标来更快地找到他们需要的内容。 如果你的内容没有标题，他们会得到一个巨大的文本墙，没有路标找到任何东西。 坏的和好的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>
<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.

<h1>My heading</h1>

<p>This is the first section of my document.</p>

<p>I'll add another paragraph here too.</p>

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

此外，你的内容应该在源顺序上有逻辑意义 - 你总是可以把它放在你希望使用CSS的地方，但你应该得到开始的源顺序。

作为一个测试，你可以关闭一个网站的CSS，看看它是如何可以没有它。 您可以通过从代码中删除CSS手动执行此操作，但最简单的方法是使用浏览器功能，例如:

• Firefox: Select View > Page Style > No Style from the main menu.
• Safari: Select Develop > Disable Styles from the main menu (to enable the Develop menu, choose Safari > Preferences > Advanced > Show Develop menu in menu bar).
• Chrome: Install the Web Developer Toolbar extension, then restart the browser. Click the gear icon that will appear, then select CSS > Disable All Styles.
• Edge: Select View > Style > No Style from the main menu.

Using native keyboard accessibility

某些HTML功能只能使用键盘来选择 - 这是默认行为，从网络的早期可用。 具有此功能的元素是允许用户与网页互动的常见元素，即链接， "title ="HTML按钮元素表示一个可点击的按钮。>> < button> ，并且形成 / zh-CN / docs / Web / HTML / Element / input"title ="HTML输入元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。 其type属性的值"> < input> 。

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

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

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

请注意，不同的浏览器可能有不同的键盘控制选项。 大多数现代浏览器都遵循上述的选项卡模式(您也可以通过Shift + Tab向后移动可聚焦元素)，但某些浏览器具有自己的特性:

• Firefox for the Mac doesn't do tabbing by default. To turn it on, you have to go to Preferences > Advanced > General, 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 Keyboard > Shortcuts, then select the All Controls radio button.
• Safari doesn't allow you to tab through links by default; to enable this, you need to open Safari's Preferences, go to Advanced, and check the Press Tab to highlight each item on a webpage checkbox.

此示例强调了为正确的作业使用正确的语义元素的重要性。 可以将任何元素设置为类似于具有CSS的链接或按钮，并且表现得像带有JavaScript的链接或按钮，但它们实际上不是链接或按钮， 失去了很多的可访问性这些元素给你免费。 所以，不要这样做，如果你可以避免它。

另一个提示 - 如我们的示例所示，您可以使用 >:focus 伪类。 这是一个好主意，加倍的焦点和悬停样式，所以你的用户得到的视觉线索，控件将做什么时激活，无论他们是使用鼠标或键盘:

a:hover, input:hover, button:hover, select:hover,
a:focus, input:focus, button:focus, select:focus {
  font-weight: bold;
}

Building in keyboard accessibility

有时，不可能避免失去键盘辅助功能。 你可能已经继承了一个语义不是很好的网站(也许你最终会遇到一个可怕的CMS，它产生用< div> s制作的按钮)，或者你使用一个复杂的控件 其中没有内置键盘辅助功能，例如HTML5 将视频内容嵌入到文档中。"> < video> 元素(令人惊讶的是，Opera是唯一允许您通过< video> >元素的默认浏览器控件)。 这里有几个选项:

1. Create custom controls using <button> elements (which we can tab to by default!) and JavaScript to wire up their functionality. See Creating a cross-browser video player for some good examples of this.
2. Create keyboard shortcuts via JavaScript, so functionality is activated when you press certain keys on the keyboard. See Desktop mouse and keyboard controls for some game-related examples that can be adapted for any purpose.
3. Use some interesting tactics to fake button behaviour. Take for example our fake-div-buttons.html example (see source code). Here we've given our fake <div> buttons the ability to be focused (including via tab) by giving each one the attribute tabindex="0" (see WebAIM's tabindex article for more really useful details). This allows us to tab to the buttons, but not to activate them via the Enter/Return key. To do that, we had to add the following bit of JavaScript trickery:

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

   Here we add a listener to the document object to detect when a button has been pressed on the keyboard. We check what button was pressed via the event object's keyCode property; if it is the keycode that matches Return/Enter, we run the function stored in the button's onclick handler using document.activeElement.onclick(). activeElement gives us the element that is currently focused on the page.

Text alternatives

文本替代对于可访问性是非常重要的 - 如果一个人有视觉或听力障碍，阻止他们能够看到或听到一些内容，那么这是一个问题。 最简单的文本替代方法是谦逊的 alt 属性，我们应该在包含相关内容的所有图片上添加。 这应该包含成功传达其在页面上的含义和内容的图像的描述，由屏幕读取器拾取并读出给用户。

缺少替代文字可以通过多种方式测试，例如使用辅助功能审核工具。

缺少替代文字可以通过多种方式测试，例如使用辅助功能审核工具。...

Element relationships and context

在HTML中有一些特性和最佳实践，旨在提供上下文以及其他不存在的元素之间的关系。 三个最常见的示例是链接，表单标签和数据表。

可访问链接文本的关键是，使用屏幕阅读器的人通常会使用一个共同的功能，他们拉起页面上的所有链接的列表。 在这种情况下，链接文本需要使文本超出内容。 例如，标记为"点击这里"，"点击这里"等的链接的列表对于可访问性是非常糟糕的。 链接文本在上下文和上下文中更有意义。

接下来，我们的列表中显示 用户界面。"> < label> 元素是允许我们使表单可访问的核心功能之一。 表单的麻烦是你需要标签来说明应该在每个表单输入中输入什么数据。 每个标签都需要包含在 "> < label> 将其明确链接到其合作伙伴表单输入(每个< label> 代码>属性值需要匹配表单元素 id 值)，即使源顺序不完全合乎逻辑(这是公平的)应该是有意义的。

最后，一个关于数据表的快速词。 基本数据表可以用非常简单的标记来编写(参见 bad-table.html table.html"class ="external"> live 和 class ="external"> source )，但这有问题 - 屏幕阅读器用户没有办法将行或列组合在一起作为数据分组 - 为此，您需要知道标题行是什么 ，并且如果它们向上行，列等。这只能对于这样的表可视地进行。

如果您改为查看我们的 external"> punk bands table example ，您可以在这里看到一些辅助工具，例如表头( / HTML / Element / th"title ="HTML元素将一个单元格定义为一组表格单元格的标题，这个组合的属性由范围和标题属性定义。"> < th> 和 scope 属性)， "HTML caption元素表示表的标题，虽然它始终是表的第一个后代，但它的样式，使用CSS，可以放置在相对于表的其他地方。"> < caption> 代码> 元素等。

CSS

CSS倾向于提供比HTML更少的基本可访问性功能，但是如果使用不正确，它仍然可以对可访问性造成同样多的损害。 我们已经提到了几个涉及CSS的无障碍提示:

• Use the correct semantic elements to mark up different content in HTML; if you want to create a different visual effect, use CSS — don't abuse an HTML element to get the look you want. For example, if you want bigger text, use font-size, not an <h1> element.
• Make sure your source order makes sense without CSS; you can always use CSS to style the page any way you want afterward.
• You should make sure interactive elements like buttons and links have appropriate focus/hover/active states set, to give the user visual clues as to their function. If you remove the defaults for stylistic reasons, make sure you include some replacement styles.

还有一些其他注意事项，你应该考虑。

Color and color contrast

当为您的网站选择配色方案时，应确保文本(前景)颜色与背景颜色形成良好对比。 你的设计可能看起来很酷，但如果有视觉障碍(如色盲)的人无法读取你的内容，那就不好了。 使用WebAIM的颜色对比检查器等工具检查您的方案是否足够对比。

另一个提示是不仅仅依赖于颜色单独用于路标/信息，因为这对于不能看到颜色的人来说是没有好处的。 而不是将所需的表单字段标记为红色，例如，用星号和红色标记。

Hiding content

在许多情况下，视觉设计将要求不是一次显示所有内容。 例如，在我们的标签信息 框示例(请参阅 ="external">源代码)，我们有三个面板的信息，但我们定位它们之间的顶部，并提供选项卡 可以点击显示每一个(它也可以键盘访问 - 您也可以使用Tab和Enter / Return选择它们)。

;">

屏幕阅读器用户不关心任何这些 - 他们对内容感到满意，只要源顺序有意义，他们可以得到所有。 绝对定位(如本示例中所使用的)通常被视为隐藏视觉效果的内容的最佳机制之一，因为它不会阻止屏幕阅读器到达它。

另一方面，您不应使用 "> visibility :hidden 或 https://developer.mozilla.org/zh-CN/docs/Web/CSS/display"title ="display CSS属性指定用于元素的呈现框的类型。在HTML中，默认显示属性值取自 在HTML规范或浏览器/用户默认样式表中描述的行为。XML中的默认值是内联。"> display :none 隐藏屏幕阅读器的内容。 除非当然，有一个很好的理由，你希望这个内容从屏幕阅读器中隐藏。

JavaScript

JavaScript在可访问性方面与CSS有相同的问题 - 如果使用不当或过度使用，可能会使灾难性的可访问性。 我们已经暗示了与JavaScript相关的一些辅助功能问题，主要是在语义HTML领域 - 您应该始终使用适当的语义HTML来实现功能，无论它在哪里可用，例如使用链接和按钮适当。 不要使用具有JavaScript代码的< div> 元素来伪造功能，如果可能的话 - 它是容易出错，比使用免费功能HTML给你更多的工作。

Simple functionality

通常，简单的功能应该仅仅使用HTML - JavaScript只应该用于增强功能，而不是完全建立。 JavaScript的良好用途包括:

• Providing client-side form validation, which alerts users to problems with their form entries quickly, without having to wait for the server to check the data. If it isn't available, the form will still work, but validation might be slower.
• Providing custom controls for HTML5 <video>s that are accessible to keyboard-only users (as we said earlier, the default browser controls aren't keyboard-accessible in most browsers).

更复杂的JavaScript实现可以提供可访问性的问题 - 你需要做你能做的。 例如，期望您制作使用 WebGL 100撰写的复杂3D游戏是不合理的 盲人可访问的百分比，但您可以实施键盘控制，以便 可由非鼠标用户使用，并且使得颜色方案足够对比以便由具有颜色缺陷的颜色方案可用。

Complex functionality

可访问性的主要问题之一是复杂的应用程序，其涉及复杂的表单控件(例如日期选择器)和经常和增量更新的动态内容。

非本地复杂的表单控件是有问题的，因为它们倾向于涉及大量嵌套的< div> ，并且浏览器默认不知道如何处理它们。 如果你自己发明它们，你需要确保它们是键盘可访问的; 如果您使用某种第三方框架，请仔细查看可用的选项，以了解他们在进入之前的可访问性。 Bootstrap a>看起来对于辅助功能来说相当不错，例如，虽然 /"class ="external">使Bootstrap更容易访问 Rhiana Heath探讨了它的一些问题(主要与颜色对比有关)，并查看一些解决方案。

定期更新的动态内容可能是一个问题，因为screenreader用户可能会错过它，特别是如果它意外更新。 如果您的单页应用具有主内容面板，并且使用 XMLHttpRequest >或提取，屏幕阅读器用户可能会错过这些更新。

WAI-ARIA

你需要使用这样复杂的功能，还是普通的旧语义HTML？ 如果您确实需要复杂性，则应考虑使用 WAI-ARIA (可访问富 互联网应用程序)，一种为诸如复杂表单控件和更新面板之类的项目提供语义(以新HTML属性的形式)的规范，大多数浏览器和屏幕阅读器都可以理解。

要处理复杂的窗体小部件，您需要使用ARIA属性，如 roles 来说明不同元素在窗口小部件中具有什么样的作用(例如，它们是一个制表符还是制表符面板？)， > aria-disabled 来说明控件是否被禁用等。

要处理复杂的窗体小部件，您需要使用ARIA属性，如 roles 来说明不同元素在窗口小部件中具有什么样的作用(例如，它们是一个制表符还是制表符面板？)， > aria-disabled 来说明控件是否被禁用等。...

• off: The default. Updates should not be announced.
• polite: Updates should be announced only if the user is idle.
• assertive: Updates should be announced to the user as soon as possible.
• rude: Updates should be announced straight away, even if this interrupts the user.

这里有一个例子:

<p><span id="LiveRegion1" aria-live="polite" aria-atomic="false"></span></p>

您可以在Freedom Scientific的 ARIA(可访问的富互联网应用)直播区域 示例 - 突出显示的段落应该每10秒更新一次内容，屏幕阅读器应该向用户显示此内容。 ARIA Live Regions - Atomic 提供了另一个有用的示例。

我们在这里没有详细讨论WAI-ARIA的空间，您可以在 WAI-ARIA基础知识中了解更多内容。

辅助工具

现在我们已经介绍了不同Web技术的辅助功能考虑，包括一些测试技术(例如键盘导航和颜色对比检查器)，让我们来看看其他可以在进行辅助功能测试时使用的工具。

审计工具

有许多可用的审核工具，您可以指向您的网页，它们将查看它们，并返回页面上存在的辅助功能问题列表。 示例包括:

• Tenon: A rather nice online app that goes through the code at a provided URL and returns results on accessibility errors including metrics, specific errors along with the WCAG criteria they affect, and suggested fixes.
• tota11y: An accessibility tool from the Khan Academy that takes the form of a JavaScript library that you attach to your page to provide a number of accessibility tools.
• Wave: Another online accessibility testing tool that accepts a web address and returns a useful annotated view of that page with accessibility problems highlighted.

让我们看一个例子，使用Tenon。

1. Go to the Tenon homepage.
2. Enter the URL of our bad-semantics.html example into the text input at the top of the page (or the URL of another webpage you'd like to analyze) and press Analyse Your Webpage.
3. Scroll down until you find the error/description section, as shown below.

593px; margin:0px auto; width:870px;">

您还可以浏览一些选项(请参阅页面顶部附近的显示选项链接)，以及使用Tenon以编程方式使用的API。

自动化工具

Deque的斧头工具比我们上面提到的审核工具更进一步。 像其他人一样，它检查页面并返回可访问性错误。 它最直接有用的形式可能是浏览器扩展:

• aXe for Chrome
• aXe for Firefox

这些向浏览器开发人员工具添加了一个无障碍选项卡。 例如，我们安装了Firefox版本，然后用它来审核我们的 bad-table.html 示例。 我们得到以下结果:

>

ax也可以使用 npm 安装，并且可以与任务运行器(如 Grunt 和 href ="http://gulpjs.com/"class ="external"> Gulp ，自动化框架如 Selenium 和 Cucumber ，单元测试框架如 Jasmin ，以及更多其他内容(同样，请参阅主轴页面 了解详情)。

编辑

这绝对值得用屏幕阅读器来测试，以习惯视障人士使用网络的严重程度。 有许多屏幕阅读器可用:

• Some are paid-for commercial products, like JAWS (Windows) and Window Eyes (Windows).
• Some are free products, like NVDA (Windows), ChromeVox (Chrome, Windows, and Mac OS X), and Orca (Linux).
• Some are built into the operating system, like VoiceOver (Mac OS X and iOS), ChromeVox (on Chromebooks), and TalkBack (Android).

通常，屏幕阅读器是在主机操作系统上运行的单独应用，并且不仅可以读取网页，而且可以读取其他应用中的文本。 这并不总是这样(ChromeVox是一个浏览器扩展)，但通常。 屏幕阅读器倾向于以稍微不同的方式操作并具有不同的控件，因此您必须查阅所选屏幕阅读器的文档以获取所有详细信息 - 说它们都以基本相同的方式工作。

让我们通过几个不同的屏幕阅读器进行一些测试，给你一个大致的想法，他们如何工作，如何与他们测试。

VoiceOver

VoiceOver(VO)随您的Mac / iPhone / iPad免费，所以如果你使用苹果产品，它是有用的测试桌面/移动。 我们将在Mac OS X的Mac OS X上测试它。

要打开它，请按Cmd + Fn + F5。 如果你以前没有使用过VO，你会得到一个欢迎屏幕，在那里你可以选择启动VO或不，并运行一个相当有用的教程，以了解如何使用它。 要再次关闭它，请再次按Cmd + Fn + F5。

当VO打开时，显示器将看起来大体相同，但是您将在屏幕的左下方看到一个黑色框，其中包含有关当前所选择的VO的信息。 当前选择也将突出显示，带有黑色边框 - 此突出显示称为 VO光标。

margin:0px auto; width:800px;">

要使用VO，你将大量使用"VO修改器" - 这是一个键或键组合，你需要按除了实际的VO键盘快捷键，让他们工作。 使用这样的修饰符对于screenreaders是常见的，以使它们能够保持其命令不与其他命令冲突。 在VO的情况下，修饰符可以是CapsLock或Ctrl + Option。

VO有很多键盘命令，我们不会在这里列出。 网页测试所需的基本功能如下表所示。 在键盘快捷键中，"VO"表示"VoiceOver修改器"。

Most common VoiceOver keyboard shortcuts

键盘快捷键	描述
VO +光标键	向上，向右，向下，向左移动VO光标。
VO +空格键	选择/激活由VO光标突出显示的项目。 这包括在转子中选择的项目(见下文)。
VO + Shift +向下光标	移动到一组项目(例如HTML表或表单等)。一旦进入组，您可以移动，并使用上述命令正常选择该组中的项目。
VO + Shift +向上光标	离开组。
VO + C	(当在表中时)读取当前列的标题。
VO + R	(在表中时)读取当前行的标题。
VO + C + C(两个Cs连续)	(当在表中时)读取整个当前列，包括标题。
VO + R + R(两个Rs连续)	(在表中)读取整个当前行，包括对应于每个单元格的标题。
VO +左光标，VO +右光标	(当在一些水平选项内时，如日期或时间选择器)在选项之间移动。
VO +向上光标，VO +向下光标	(当在某些水平选项内时，如日期或时间选择器)更改当前选项。
VO + U	使用Rotor，显示标题，链接，表单控件等的列表，以方便导航。
VO +左光标，VO +右光标	(在转子内时)在转子中可用的不同列表之间移动。
VO +向上光标，VO +向下光标	(在Rotor中时)在当前Rotor列表中的不同项目之间移动。
Esc	(转子内)退出转子。
Ctrl	(当VO正在讲话时)暂停/恢复讲话。
VO + Z	重新启动语音的最后一位。
VO + D	进入Mac的Dock，所以你可以选择应用程序在其中运行。

这似乎很多命令，但它并没有那么糟糕，当你习惯它，和VO定期给你提醒什么命令在某些地方使用。 现在有一个玩VO！ 您可以在屏幕阅读器测试部分中继续使用我们的一些示例。

NVDA

NVDA仅限Windows，您需要安装它。

1. Download it from nvaccess.org. You can choose whether to make a donation or download it for free; you'll also need to give them your e-mail address before you can download it.
2. Once downloaded, install it — you double click the installer, accept the license and follow the prompts.
3. To start NVDA, double click on the program file/shortcut, or use the keyboard shortcut Ctrl + Alt + N. You'll see the NVDA welcome dialog when you start it. Here you can choose from a couple of options, then press the OK button to get going.

NVDA现在将在您的计算机上处于活动状态。

要使用NVDA，您将大量使用"NVDA修改器" - 这是一个键，除了实际的NVDA键盘快捷键，您需要按下，以使他们工作。 使用这样的修饰符对于screenreaders是常见的，以使它们能够保持其命令不与其他命令冲突。 在NVDA的情况下，修饰符可以是Insert(默认)或CapsLock(可以通过选中NVDA欢迎对话框中的第一个复选框，然后按确定选择)。

NVDA有很多键盘命令，我们不会在这里列出。 网页测试所需的基本功能如下表所示。 在键盘快捷键中，"NVDA"表示"NVDA修改器"。

Most common NVDA keyboard shortcuts

描述	描述
NVDA + Q	启动NVDA后再次关闭。
NVDA +向上光标	读取当前行。
NVDA +向下光标	开始读取当前位置。
向上光标和向下光标，或Shift + Tab和Tab	移动到页面上的上一个/下一个项目并读取它。
左光标和右光标	移动到当前项目中的上一个/下一个字符并读取它。
Shift + H和H	移动到上一个/下一个标题并阅读。
Shift + K和K	移动到上一个/下一个链接并读取它。
Shift + D和D	Move to previous/next document landmark (e.g. <nav>) and read it.
Shift + 1-6和1-6	移动到上一个/下一个标题(1-6级)并读取它。
Shift + F和F	移动到上一个/下一个表单输入并对其进行聚焦。
Shift + T和T	移动到上一个/下一个数据表，并对其进行聚焦。
Shift + B和B	移动到上一个/下一个按钮并读取其标签。
Shift + L和L	移动到上一个/下一个列表，并读取其第一个列表项。
Shift + I和I	移动到上一个/下一个列表项并读取它。
Enter/Return	(当选择链接/按钮或其他可激活项目时)激活项目。
NVDA +空间	(当选择表单时)输入表单，以便可以选择单个项目，或者如果已经在表单中，则离开表单。
Shift标签和Tab键	(当在内部形式时)在表单输入之间移动。
向上光标和向下光标	(当在内部形式时)更改表单输入值(在选择框等情况下)。
Spacebar	(当在内部形式时)选择所选值。
Ctrl + Alt +光标键	（当选择表时）在表单元格之间移动。

Screenreader testing

现在你已经习惯了使用屏幕阅读器，我们希望你使用它来做一些快速的辅助功能测试，以了解屏幕阅读器如何处理好的和坏的网页功能:

• Look at good-semantics.html, and note how the headers are found by the screenreader and available to use for navigation. Now look at bad-semantics.html, and note how the screenreader gets none of this information. Imagine how annoying this would when trying to navigate a really long page of text.
• Look at good-links.html, and note how they make sense when viewed out of context. This is not the case with bad-links.html — they are all just "click here".
• Look at good-form.html, and note how the form inputs are descirbed using their labels because we've used <label> elements properly. In bad-form.html, they get an unhelpful label along the lines of "blank".
• Look at our punk-bands-complete.html example, and see how the screenreader is able to associate columns and rows of content and read them out all together because we've defined headers properly. In bad-table.html, none of the cells can be associated at all. Note that NVDA seems to behave slightly stragely when you've only got a single table on a page; you could try WebAIM's table test page instead.
• Have a look at the WAI-ARIA live regions example we saw earlier, and note how the screen reader will keep reading out the constantly updating section as it updates.

用户测试

如上所述，您不能仅依靠自动化工具来确定您网站上的辅助功能问题。 建议您在制定测试计划时，应尽可能包含一些辅助功能用户组(请参阅我们的用户测试部分) 在一些更多的上下文中)。 尝试让一些screenreader用户参与，一些仅键盘用户，一些非听觉用户，也可能是其他组，以满足您的要求。

辅助功能测试清单

以下列表提供了一个清单，您可以按照此清单来确保您已为项目执行了建议的辅助功能测试:

1. Make sure your HTML is as semantically correct as possible. Validating it is a good start, as is using an Auditing tool.
2. Check that your content makes sense when the CSS is turned off.
3. Make sure your functionality is keyboard accessible. Test using Tab, Return/Enter, etc.
4. Make sure your non-text content has text alternatives. an Auditing tool is good for catching such problems.
5. Make sure your site's color contrast is acceptable, using a suitable checking tool.
6. Make sure hidden content is visible by screenreaders.
7. Make sure that functionality is usable without JavaScript whever possible.
8. Use ARIA to improve accessibility where appropriate.
9. Run your site through an Auditing tool.
10. Test it with a screenreader.
11. Include an accessibility policy/statement somewhere findable on your site to say what you did.

寻找帮助

还有许多其他问题，你会遇到无障碍; 最重要的事情，知道真正是如何在网上找到答案。 有关一些好的指标，请参阅HTML和CSS文章的查找帮助部分。

概要

希望这篇文章给你一个很好的基础在主要的可访问性问题，你可能会遇到，以及如何测试和克服他们。

在下一篇文章中，我们将更详细地介绍特性检测。