Handling common accessibility problems

接下来,我们将注意力集中在可访问性上,提供有关常见问题的信息,如何进行简单测试以及如何使用审核/自动化工具来查找可访问性问题.

Prerequisites: 熟悉核心的HTMLCSSJavaScript语言; 关于跨浏览器测试的高级原理的想法.
Objective: 为了能够诊断常见的辅助功能问题,并使用适当的工具和技术来解决它们.

What is accessibility?

当我们说在网络技术环境中的可访问性时,大多数人立即想到确保残疾人可以使用网站/应用程序,例如:

  • 视障人士使用屏幕阅读器或放大/缩放来访问文本
  • 有运动功能障碍的人使用键盘(或其他非鼠标功能)激活网站功能.
  • 有听力障碍的人依靠字幕/字幕或其他替代文本来获得音频/视频内容.

However, it is wrong to say that accessibility is just about disabilities. Really, the aim of accessibility is to make your websites/apps usable by as many people in as many contexts as possible, not just those users using high-powered desktop computers. Some examples might include:

  • 移动设备上的用户.
  • 使用其他浏览设备(例如电视,手表等)的用户
  • 使用较旧设备的用户可能没有最新的浏览器.
  • 规格较低的设备的用户可能具有较慢的处理器.

在某种程度上,整个模块都是关于可访问性的-跨浏览器测试可确保您的网站可以被尽可能多的人使用. 什么是辅助功能? 比本文更全面,透彻地定义了可访问性.

也就是说,本文将涵盖跨浏览器和围绕残疾人的测试问题,以及他们如何使用Web. 我们已经在模块的其他地方讨论了其他领域,例如响应式设计性能 .

注意 :就像Web开发中的许多事情一样,可访问性不是成功与否的100%. 对于所有内容而言,几乎不可能实现100%的可访问性,尤其是当站点变得越来越复杂时. 相反,更多的是通过防御性编码和坚持最佳实践,尽最大努力使尽可能多的人可以访问您的内容.

Common accessibility issues

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

注意 :无障碍访问在道德上是正确的做法,对企业有利(残疾人士的数量,移动设备上的用户等,代表了重要的市场领域),但是在世界许多地方,访问Web也是法律要求残疾人可访问的内容. 阅读无障碍指南和法律以获取更多信息.

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 it 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 it is more interesting than the last one.</p>

另外,您的内容应从源顺序上讲是合乎逻辑的-以后始终可以将其放置在要使用CSS的位置,但是您应该从源头开始就正确.

作为测试,您可以关闭网站的CSS,然后看看没有它的可理解性. 您可以通过从代码中删除CSS来手动完成此操作,但是最简单的方法是使用浏览器功能,例如:

  • Firefox:从主菜单中选择" 视图">"页面样式">"无样式 ".
  • Safari:从主菜单中选择" 开发">"禁用样式" (要启用" 开发"菜单,请在菜单栏中选择" Safari">"首选项">"高级">"显示开发"菜单 ).
  • Chrome:安装Web Developer Toolbar扩展,然后重新启动浏览器. 点击将出现的齿轮图标,然后选择CSS>禁用所有样式 .
  • 边缘:从主菜单中选择" 视图">"样式">"无样式 ".

Using native keyboard accessibility

某些HTML功能只能使用键盘进行选择-这是默认行为,自网络成立以来就可用. 具有此功能的元素是允许用户与网页进行交互的常见元素,即链接, <button>和诸如<input>类的表单元素.

您可以使用我们的native-keyboard-accessibility.html示例(请参见源代码 )进行尝试-在新标签页中打开此标签,然后尝试按Tab键; 按下几下后,您应该看到标签焦点开始在不同的可聚焦元素之间移动; 在每个浏览器中,被聚焦的元素都会被赋予突出显示的默认样式(不同浏览器之间会略有不同),这样您就可以知道所聚焦的元素.

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

请注意,不同的浏览器可能具有不同的键盘控制选项. 大多数现代浏览器都遵循上述的标签模式(您也可以执行Shift + Tab来向后移动可聚焦元素),但是某些浏览器具有自己的特质:

  • Mac版Firefox在默认情况下不进行制表. 要打开它,您必须转到" Preferences">" Advanced">" General" ,然后取消选中" Always using光标键在页面内导航". 接下来,您必须打开Mac的系统偏好设置应用,然后转到键盘>快捷方式 ,然后选择所有控件单选按钮.
  • Safari默认情况下不允许您通过链接进行制表; 要启用此功能,您需要打开Safari的"偏好设置" ,转到"高级",然后选中" 新闻"标签以突出显示网页上的每个复选框.

重要提示 :您应该在所写的任何新页面上进行这种测试-确保可以通过键盘访问该功能.

这个例子强调了为正确的工作使用正确的语义元素的重要性. 可以将任何元素的样式设置为CSS的链接或按钮,并表现为JavaScript的链接或按钮,但实际上它们实际上不是链接或按钮,您将失去很多可访问性元素免费提供给您. 因此,如果可以避免,请勿这样做.

另一个技巧-如我们的示例所示,您可以使用:focus伪类控制可聚焦元素在聚焦时的外观. 最好将焦点和悬停样式加倍,这样您的用户就会获得直观的线索,即控件在被激活时将执行某些操作,无论是使用鼠标还是键盘:

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

注意 :如果您决定使用CSS删除默认的焦点样式,请确保将其替换为更适合您的设计的其他样式-这是一种非常有用的可访问性工具,不应删除.

Building in keyboard accessibility

有时无法避免丢失键盘的可访问性. 您可能继承了一个语义不是很好的网站(也许您最终得到了一个可怕的CMS,该CMS生成了由<div>的按钮),或者您使用的是一个复杂的控件,该控件没有内置的键盘辅助功能. ,就像HTML5 <video>元素一样(令人惊奇的是,Opera是允许您在<video>元素的默认浏览器控件之间进行制表的唯一浏览器). 您在这里有一些选择:

  1. 使用<button>元素(默认情况下可以使用Tab键)和JavaScript创建自定义控件,以连接其功能. 有关此示例,请参阅创建跨浏览器的视频播放器 .
  2. 通过JavaScript创建键盘快捷键,因此当您按键盘上的某些键时,功能被激活. 请参阅台式机鼠标和键盘控件,以获取一些可用于任何目的的与游戏相关的示例.
  3. 使用一些有趣的策略来伪造按钮行为. 以我们的fake-div-buttons.html示例为例(请参阅源代码 ). 在这里,我们通过为每个假按钮赋予属性tabindex="0" (请参阅WebAIM的tabindex文章以获取更多真正有用的详细信息),使假的<div>按钮能够集中显示(包括通过制表符). 这使我们可以跳到按钮上,但不能通过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为我们提供了当前集中在页面上的元素.

注意 :仅当通过事件处理程序属性(例如onclick )设置原始事件处理程序时,此技术才有效. addEventListener将不起作用. 重新构建功能需要很多额外的麻烦.并且肯定还会有其他问题. 最好首先将正确的元素用于正确的工作.

Text alternatives

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

注意 :有关更多信息,请阅读文本替代 .

可以通过多种方式(例如使用辅助功能审核工具)来测试缺少的替代文本.

Alt text is slightly more complex for video and audio content. There is a way to define text tracks (e.g. subtitles) and display them when video is being played, in the form of the <track> element, and the WebVTT format (see Adding captions and subtitles to HTML5 video for a detailed tutorial). Browser compatibility for these features is fairly good, but if you want to provide text alternatives for audio or support older browsers, a simple text transcript presented somewhere on the page or on a separate page might be a good idea.

Element relationships and context

HTML中有某些功能和最佳实践,旨在提供元素之间的上下文和关系,而其他情况则不存在. 三个最常见的示例是链接,表单标签和数据表.

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

列表的下一个表单<label>元素是使我们能够访问表单的主要功能之一. 表单的麻烦在于,您需要标签来说明应在每个表单输入中输入哪些数据. 每个标签都必须包含在<label>以将其明确链接到其伙伴表单输入(每个<label> for属性值都必须与表单元素id值匹配),即使源顺序不是完全合乎逻辑(应该公平地说).

注意 :有关链接文本和表单标签的更多信息,请阅读" 有意义的文本标签" .

最后,简要介绍一下数据表. 基本的数据表可以用非常简单的标记编写(请参阅bad-table.html livesource ),但这存在问题-屏幕阅读器用户无法将行或列作为数据分组关联在一起,从而为此,您需要知道标题行是什么,以及标题行是否是行,列等的标题.只能对此类表进行可视化处理.

相反,如果您看一下我们的punk-bands-complete.html示例( livesource ),则可以在此处看到一些可访问性帮助,例如表头( <th>scope属性), <caption>元素等. .

注意 :有关可访问表的更多信息,请阅读可访问数据表 .

CSS

CSS往往提供的基本可访问性功能要比HTML少得多,但是如果使用不当,它仍然会对可访问性造成同样的损害. 我们已经提到了一些涉及CSS的可访问性提示:

  • 使用正确的语义元素标记HTML中的不同内容; 如果要创建不同的视觉效果,请使用CSS-不要滥用HTML元素来获得所需的外观. 例如,如果要更大的文本,请使用font-size ,而不要使用<h1>元素.
  • 确保您的源顺序在没有CSS的情况下有意义; 您可以随时使用CSS设置页面样式.
  • 您应该确保按钮和链接之类的交互元素具有适当的焦点/悬停/活动状态设置,以便为用户提供有关其功能的直观线索. 如果出于风格原因删除默认设置,请确保包括一些替换样式.

您还应考虑其他一些注意事项.

Color and color contrast

为您的网站选择配色方案时,应确保文本(前景)颜色与背景颜色形成鲜明对比. 您的设计可能看起来很酷,但是如果视力障碍(例如色盲)的人看不懂您的内容,那就不好了. 使用WebAIM的颜色对比度检查器之类的工具来检查您的方案是否足够对比度.

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

注意 :高对比度也可以使使用智能手机或平板电脑的具有光滑屏幕的人在明亮的环境(例如阳光)下可以更好地阅读页面.

Hiding content

在许多情况下,视觉设计要求并非一次显示所有内容. 例如,在我们的选项卡式信息框例子 (见源代码 ),我们有三个信息面板,但我们定位他们在彼此的顶部,提供可点击的显示每一个标签(也可以访问键盘-你也可以使用Tab键和Enter / Return键选择它们).

屏幕阅读器用户根本不关心这一切,只要对源顺序有意义,他们就对内容感到满意,并且他们可以全部使用. 绝对定位(在本示例中使用的定位)通常被视为隐藏内容以产生视觉效果的最佳机制之一,因为它不会阻止屏幕阅读器到达它.

另一方面,您不应使用visibility :hiddendisplay :none ,因为它们确实会隐藏display内容. 当然,除非有充分的理由,否则为什么您希望此内容对屏幕阅读器不可见.

Note: 仅适用于屏幕阅读器的不可见内容用户对此主题有很多有用的细节.

JavaScript

就可访问性而言,JavaScript具有与CSS相同的问题-如果使用不当或使用过度,可访问性可能会造成灾难性的后果. 我们已经暗示了与JavaScript有关的一些可访问性问题,主要是在语义HTML方面–您应该始终使用适当的语义HTML来在可用的地方实现功能,例如,适当地使用链接和按钮. 如果可能,请不要在JavaScript代码中使用<div>元素来伪造功能-容易出错,并且比使用HTML所提供的免费功能还要多的工作.

Simple functionality

通常,简单的功能只应在适当的HTML上起作用-JavaScript仅应用于增强功能,而不能完全内置于其中. JavaScript的良好用法包括:

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

注意 :WebAIM的可访问JavaScript提供了一些有关可访问JavaScript 注意事项的有用的详细信息.

更复杂的JavaScript实现可能会带来可访问性问题-您需要尽力而为. 例如,期望您使盲人可以使用WebGL 100%编写复杂的3D游戏是不合理的,但是您可以实现键盘控件,以便非鼠标用户可以使用它,并使配色方案具有足够的对比度供有颜色缺陷的人使用.

Complex functionality

可访问性存在问题的主要领域之一是复杂的应用程序,其中涉及复杂的表单控件(例如日期选择器)和动态内容,该内容经常且增量地更新.

非本机复杂的表单控件存在问题,因为它们往往涉及许多嵌套的<div> ,并且浏览器默认不知道如何处理它们. 如果您自己发明它们,则需要确保它们可以通过键盘访问; 如果您正在使用某种形式的第三方框架,仔细查看可用的选项,看看他们如何访问是在潜水前, 引导看起来是可访问性相当好,例如,虽然制作引导一个小更易于访问的Rhiana希思探讨它的一些问题(主要与色彩对比度有关),并着眼于一些解决方案.

定期更新的动态内容可能会成为问题,因为屏幕阅读器用户可能会错过它,尤其是在意外更新的情况下. 如果您有一个带有主要内容面板的单页应用程序,并且使用XMLHttpRequestFetch定期对其进行更新,那么屏幕阅读器用户可能会错过这些更新.

WAI-ARIA

您是否需要使用这种复杂的功能,或者将使用普通的旧语义HTML代替? 如果确实需要复杂性,则应考虑使用WAI-ARIA (可访问的Rich Internet Applications),该规范为诸如复杂的表单控件和更新面板之类的项目提供了语义(以新的HTML属性形式),浏览器和屏幕阅读器.

要处理复杂的表单窗口小部件,您需要使用roles类的ARIA属性来声明窗口小部件中不同元素的角色(例如,它们是选项卡还是选项卡面板?),并且aria-disabled使用aria-disabled来表示控件是否为是否禁用等

要处理内容的定期更新区域,可以使用aria-live属性,该属性标识更新区域. 它的值指示屏幕阅读器应多紧急地将其读出:

  • off:默认. 更新不应该宣布.
  • polite :仅当用户空闲时,才应宣布更新.
  • assertive :应尽快向用户发布更新.
  • rude :即使会打断用户,也应立即宣布更新.

Here's an example:

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

您可以在Freedom Scientific的ARIA(可访问的富Internet应用程序)实时区域示例中看到一个示例,该示例突出显示的段落应每10秒更新一次其内容,而屏幕阅读器应将此内容读出给用户. ARIA实时区域-原子提供了另一个有用的示例.

我们这里没有足够的空间来详细介绍WAI-ARIA,您可以在WAI-ARIA基础知识上了解更多 .

Accessibility tools

现在,我们已经介绍了不同Web技术的可访问性注意事项,包括一些测试技术(例如键盘导航和颜色对比度检查器),让我们看看在进行可访问性测试时可以使用的其他工具.

Auditing tools

您可以使用许多审核工具来将网页添加到其中. 他们将查看它们并返回页面上存在的可访问性问题列表. 示例包括:

  • Wave :一个相当不错的在线可访问性测试工具,它接受网址并返回该页面的有用的带注释的视图,其中突出显示了可访问性问题.
  • Tenon :另一个不错的在线工具,它通过提供的URL遍历代码,并返回有关可访问性错误的结果,包括度量,特定错误以及它们影响的WCAG标准以及建议的修复程序. 需要免费试用注册才能查看结果.
  • tota11y :可汗学院的可访问性工具,采用JavaScript库的形式,您将其附加到页面上以提供许多可访问性工具.

让我们来看一个使用Wave的示例.

  1. 转到Wave主页 .
  2. 在页面顶部的文本输入中输入我们bad-semantics.html示例的网址(或您要分析的其他网页的网址),然后按分析您的网页 .
  3. 在结果页面上查看对可访问性问题的描述(您可以单击图标以查看发生了什么问题,在哪里比较有用).

注意 :这些工具不足以单独解决所有可访问性问题. 您需要将这些,知识和经验,用户测试等结合起来才能获得全貌.

Automation tools

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

这些将可访问性选项卡添加到浏览器开发人员工具. 例如,我们安装了Firefox版本,然后使用它来审核bad-table.html示例. 我们得到以下结果:

ax也可以使用npm安装,并且可以与任务运行器(如GruntGulp) ,自动化框架(如SeleniumCucumber) ,单元测试框架(如Jasmin )以及其他功能集成在一起(同样,请参见斧头主页以获取详细信息).

Screenreaders

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

  • 有些是付费的商业产品,例如JAWS (Windows)和Window Eyes (Windows).
  • 有些是免费产品,例如NVDA (Windows), ChromeVox (Chrome,Windows和Mac OS X)和Orca (Linux).
  • 其中一些内置于操作系统中,例如VoiceOver (Mac OS X和iOS), ChromeVox (在Chromebook上)和TalkBack (Android).

通常,屏幕阅读器是在主机操作系统上运行的独立应用程序,不仅可以读取网页,还可以读取其他应用程序中的文本. 并非总是如此(ChromeVox是浏览器扩展),但通常如此. 屏幕阅读器的操作方式略有不同,并且具有不同的控件,因此您必须查阅所选屏幕阅读器的文档以获取所有详细信息-也就是说,它们的工作方式基本上相同.

让我们通过几个不同的屏幕阅读器进行一些测试,以大致了解它们如何工作以及如何对其进行测试.

注意 :WebAIM的"屏幕阅读器兼容性设计"提供了一些有关屏幕阅读器使用情况以及最适合屏幕阅读器的有用信息. 另请参阅屏幕阅读器用户调查#6结果以获取一些有趣的屏幕阅读器使用情况统计信息.

VoiceOver

VoiceOver(VO)随Mac / iPhone / iPad一起免费提供,因此如果您使用Apple产品,则对于在台式机/移动设备上进行测试非常有用. 我们将在MacBook Pro的Mac OS X上对其进行测试.

要打开它,请按Cmd + F5. 如果您以前没有使用过VO,则会看到一个欢迎屏幕,您可以在其中选择是否启动VO,并通过一个相当有用的教程来学习如何使用它. 要再次将其关闭,请再次按Cmd + F5.

注意 :您应该至少阅读一次该教程-这是学习VO的一种非常有用的方法.

启用VO后,显示效果几乎相同,但是您会在屏幕左下方看到一个黑框,其中包含有关当前选择的VO的信息. 当前选择还将以黑色边框突出显示-此突出显示称为VO光标 .

要使用VO,您将大量使用" VO修饰符"-这是除了实际的VO键盘快捷键之外,还需要按的键或组合键才能使它们起作用. 屏幕阅读器通常使用这样的修饰符,以使它们能够保持其命令与其他命令不冲突. 对于VO,修饰符可以是CapsLock或Ctrl + Option.

VO有许多键盘命令,我们不会在这里列出所有命令. 下表是您进行网页测试所需的基本内容. 在键盘快捷键中," VO"表示" VoiceOver修饰符".

最常见的VoiceOver键盘快捷键
键盘快捷键 Description
VO +光标键 上下左右移动VO光标.
VO +空格键 选择/激活VO光标突出显示的项目. 这包括在"转子"中选择的项目(请参见下文).
VO + Shift +向下光标 移入一组项目(例如HTML表格或表单等).进入组后,您可以像往常一样使用上述命令移动并选择该组中的项目.
VO + Shift +向上光标 移出组.
VO + C (在表内时)读取当前列的标题.
VO + R (在表内时)读取当前行的标题.
VO + C + C(连续两个C) (在表内时)读取整个当前列,包括标题.
VO + R + R(连续两个Rs) (在表中时)读取整个当前行,包括与每个单元格对应的标题.
VO +左光标,VO +右光标 (在某些水平选项(例如日期或时间选择器)内部时)在选项之间移动.
VO +向上光标,VO +向下光标 (在某些水平选项(例如日期或时间选择器)中时)更改当前选项.
VO + U 使用"转子"可以显示标题,链接,表单控件等的列表,以便于导航.
VO +左光标,VO +右光标 (when inside Rotor) Move between different lists available in the Rotor.
VO +向上光标,VO +向下光标 (在"转子"中时)在当前"转子"列表中的不同项目之间移动.
Esc (在转子内部时)退出转子.
Ctrl (当VO讲话时)暂停/继续讲话.
VO + Z 重新开始最后一句话.
VO + D 进入Mac的Dock,以便您可以选择要在其中运行的应用程序.

这似乎是很多命令,但是当您习惯它时还算不错,VO经常提醒您在某些地方使用什么命令. 现在玩VO. 然后,您可以在Screenreader测试部分继续研究我们的一些示例.

NVDA

NVDA仅适用于Windows,您需要安装它.

  1. nvaccess.org下载它. 您可以选择捐赠还是免费下载; 您还需要向他们提供您的电子邮件地址,然后才能下载它.
  2. 下载完成后,安装它-双击安装程序,接受许可并按照提示进行操作.
  3. 要启动NVDA,请双击程序文件/快捷方式,或使用键盘快捷键Ctrl + Alt +N.启动NVDA的欢迎对话框. 在这里,您可以从几个选项中进行选择,然后按OK(确定)按钮开始操作.

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

要使用NVDA,您将大量使用" NVDA修饰符"-除了实际的NVDA键盘快捷键之外,还需要按此键才能使它们起作用. 屏幕阅读器通常使用这样的修饰符,以使它们能够保持其命令与其他命令不冲突. 对于NVDA,修改器可以是Insert(默认值)或CapsLock(可以通过在按下OK之前选中NVDA欢迎对话框中的第一个复选框来选择).

注意 :NVDA在突出显示其位置和正在执行的操作方面比VoiceOver更为微妙. 当您滚动浏览标题,列表等时,通常会以微妙的轮廓突出显示选中的项目,但并非所有情况都如此. 如果完全迷路,可以按Ctrl + F5刷新当前页面,然后从顶部重新开始.

NVDA有许多键盘命令,我们不会在此处列出所有命令. 下表是您进行网页测试所需的基本内容. 在键盘快捷键中," NVDA"表示" NVDA修饰符".

最常见的NVDA键盘快捷键
键盘快捷键 Description
NVDA + Q 启动NVDA后,请再次将其关闭.
NVDA +向上光标 阅读当前行.
NVDA +向下光标 从当前位置开始阅读.
上光标和下光标,或Shift + Tab和Tab 移至页面上的上一个/下一个项目并阅读.
左光标和右光标 移至当前项目中的上一个/下一个字符并阅读.
Shift + H和H 移至上一个/下一个标题并阅读.
Shift + K和K 移至上一个/下一个链接并阅读.
Shift + D和D 移至上一个/下一个文档界标(例如<nav> )并阅读.
Shift + 1–6和1–6 移至上一个/下一个标题(1-6级)并阅读.
Shift + F和F 移至上一个/下一个表单输入并专注于此.
Shift + T和T 移至上一个/下一个数据表并专注于该表.
Shift + B和B 移至上一个/下一个按钮并阅读其标签.
Shift + L和L 移至上一个/下一个列表并阅读其第一个列表项.
Shift +我和我 移至上一个/下一个列表项并阅读.
Enter/Return (当选择链接/按钮或其他可激活项目时)激活项目.
NVDA +空间 (选择表单时)输入表单以便可以选择单个项目,如果已​​经存在,请保留表单.
Shift和Tab (在表单内部时)在表单输入之间移动.
上光标和下光标 (在表单内部时)更改表单输入值(例如选择框).
Spacebar (在表格内时)选择所选值.
Ctrl + Alt +光标键 (选择表格时)在表格单元格之间移动.

Screenreader testing

现在您已经习惯了使用屏幕阅读器,我们希望您使用它来进行一些快速的可访问性测试,以了解屏幕阅读器如何处理好和坏的网页功能:

  • 查看good-semantics.html ,并注意屏幕阅读器如何找到标题并将其用于导航. 现在查看bad-semantics.html ,并注意屏幕阅读器如何不获取这些信息. 想象一下,当试图浏览很长的文本页面时,这会是多么烦人.
  • 查看good-links.html ,并注意从上下文中查看它们时的意义. bad-links.html并非如此-它们都只是"单击此处".
  • 查看good-form.html ,并注意如何使用其标签描述表单输入,因为我们已经正确使用了<label>元素. 在bad-form.html中 ,他们得到的"空白"标签无用.
  • 查看我们的punk-bands-complete.html示例,并查看屏幕阅读器如何将内容的列和行关联起来,并一起读取它们,因为我们已经正确定义了标头. 在bad-table.html中 ,所有单元格都无法关联. 请注意,当页面上只有一个表时,NVDA似乎表现得有些杂乱无章. 您可以改用WebAIM的表格测试页 .
  • 看一下我们之前看到的WAI-ARIA实时区域示例 ,并注意屏幕阅读器在更新时将如何不断读取不断更新的部分.

User testing

如上所述,您不能仅依靠自动化工具来确定网站上的可访问性问题. 建议您在制定测试计划时,尽可能包括一些可访问性用户组(有关更多内容,请参阅本课程前面的" 用户测试"部分). 尝试让一些屏幕阅读器用户,一些仅键盘用户,一些非听觉用户以及其他一些组也可以适应您的需求.

Accessibility testing checklist

以下列表提供了一个清单,供您遵循,以确保已对项目执行建议的辅助功能测试:

  1. 确保您的HTML在语义上尽可能正确. 与使用审核工具一样, 验证它是一个好的开始.
  2. 关闭CSS时,请检查您的内容是否有意义.
  3. 确保您的功能可通过键盘访问 . 使用Tab,Return / Enter等进行测试
  4. 确保您的非文本内容具有替代文本 . 审核工具非常适合捕获此类问题.
  5. 使用合适的检查工具,确保您站点的颜色对比度是可接受的.
  6. 确保屏幕阅读器可以看到隐藏的内容 .
  7. 确保尽可能在没有JavaScript的情况下使用该功能.
  8. 在适当的地方使用ARIA改善可访问性.
  9. 通过审核工具运行您的网站.
  10. 使用屏幕阅读器进行测试.
  11. 在您的网站上可以找到的位置添加可访问性策略/声明,以说明您的所作所为.

Finding help

可访问性还会遇到许多其他问题. 真正要知道的最重要的事情是如何在线查找答案. 请查阅HTML和CSS文章的" 查找帮助"部分,以获取一些好的指导.

Summary

希望本文为您可能遇到的主要可访问性问题以及如何测试和克服它们提供了良好的基础.

在下一篇文章中,我们将更详细地介绍特征检测.

In this module