使用 JAWS 测试 Web 应用的技巧

 

屏幕阅读器简介

屏幕阅读器（Screen Reader）是尝试识别理解当前屏幕上显示信息的一种软件应用，屏幕阅读器通过 Accessibility 的接口识别当前屏幕上的信息，通过文本转语音系统或者盲文的形式呈现给最终用户。读屏软件的用户一般为盲人，视障人士或者文盲。 屏幕阅读器依赖于操作系统，大多数读屏软件都是特定与某个操作系统的。用户可以根据自己的需要选择适合自己的读屏软件。开源的有 Linux 系统下的读屏软件和适用于 Windows 系统下的 NVDA（NonVisual Desktop Access）。NVDA 目前支持二十多种语言，尤为突出的是支持直接从 USB 启动运行，可以不用安装，插上 USB 驱动就可运行，完全绿色。 苹果系统上是 VoiceOver。最通用的两个读屏软件是 JAWS（Job Access with Speech）和 Window-Eyes。 早期的操作系统比如 MS-Dos 都是命令行界面，界面上的信息（文字）都可以直接映射到读屏软件的缓冲区里，通过键盘交互控制缓冲区内的光标位置，这样界面上的内容可以完全得被屏幕阅读 器获取并输出给用户。 随着 GUI 界面的出现，情况变得原来越复杂。屏幕上有各种各样的图片，按钮，用户需要不断的输入信息，点击按钮进行交互。屏幕阅读器要想理解并且传递这些信息，就需 要有一个幕后模型。通过从操作系统读取的消息建立一个幕后模型，并且能够在屏幕前和幕后来回切换，从而达到既可以传递屏幕信息又可以交互的目的。 操作系统的不断发展和 Web2.0 应用的出现，对屏幕阅读器的要求也越来越高。屏幕阅读器通过查询操作系统和当前的应用来识别当前屏幕上显示的信息，并且当显示信息更新时能够识别。比如， 操作系统可以告诉屏幕阅读器当前的焦点在一个按钮上，这个按钮的内容时什么， 会触发什么样的操作。中间需要遵循的一个接口就是 Accessibility 接口。遵循这个接口，浏览器，操作系统，屏幕阅读器就可以通信了。 Web2.0 的应用有很多动态更新的内容，如何能使得屏幕阅读器识别这些动态内容，并且传递一些状态信息给用户，就需要 ARIA 的支持。 JAWS 从版本 10 对 ARIA 的支持就很好，目前的版本是 11，而 Window-Eyes 目前仍然不支持 ARIA。

---

回页首

JAWS 的工作原理与模式

所有屏幕阅读器的工作原理都是类似的，为了能够读出并且跟页面的内容进行交互，屏幕阅读器会把当前页面的快照存储起来放在自己的一个虚拟缓冲区内 , 并且 JAWS 会有自己的一个光标在这个虚拟缓冲区内移动，当然用户是看不到这个光标的，只能通过 JAWS 读出来的内容来判断这个光标的位置，因此 JAWS 称其为虚拟光标。就是通过这个虚拟缓冲区才允许用户来控制页面的内容。如果没有这个虚拟缓冲区，读屏软件只能够访问能被 focus 到的元素，比如 input 或者 a 之类的，对于 span 或者 p 这样的元素内容则无法识别；没有这个虚拟缓冲区，用户也无法跟页面元素或者内容里面的子元素进行交互，诸如 image，list 和 table 一类的元素。屏幕阅读器都有类似的虚拟缓冲区，只不过所称呼的名字可能不同。在 JAWS 里面，虚拟缓冲区指的就是 virtual Pc cursor mode，即 VPC。当用户打开 JAWS 浏览 HTML 文档时默认 VPC 模式是打开的，使用 INSERT+Z 就可以切换 VPC 模式。在默认模式下使用 INSERT+Z 可以听到 JAWS 提示“virtual cursor mode off”。使用 INSERT+ESC 可以刷新这个虚拟缓冲区。VPC 模式关闭有时也称为 form 模式

JAWS 目前有三种模式 virtual PC cursor mode 打开 , 关闭和自动模式。。 JAWS 从版本 10 开始支持自动切换 VPC 的模式，在自动模式下，JAWS 会根据所设置的 role（ARIA 的属性）的值来自动决定 VPC 的模式是打开还是关闭： role=application 要求 JAWS 处于交互的模式下，即关闭 VPC 模式。此时即使使用 INSERT+Z 去切换 VPC 的模式，我们听到的也只是“Virtual PC cursor mode off”，因为在这种情况下 JAWS 认为其他的模式（比如 VPC 打开的模式）是不适合的。 role=document 要求 JAWS 处于 VPC 打开的模式。 当然可能这种自动的切换模式有可能会有问题，偶尔 JAWS 的行为出现异常，我们需要手动的来切换一下 VPC 的模式。在打开关闭的过程中，虚拟缓冲区也得以更新。

---

回页首

JAWS 常用的快捷键

使用 JAWS 有一个必须谨记的要点，不要使用鼠标，鼠标会导致 JAWS 的虚拟缓冲区遭到破坏，从而使得 JAWS 读出来的信息不知所云。我们切身的想一下对于真正使用屏幕阅读器的用户来讲，使用鼠标也是不现实的。因此键盘操作就变得尤为重要，这也是我们在使用 JAWS 进行测试前必须保证我们的 Web 应用的所有操作都是支持键盘操作的。否则 JAWS 的测试则没有什么意义。 使用 JAWS 测试 Web 应用时有一些常用的快捷键，掌握好这些快捷键会使我们测试 Web 应用方便很多。

JAWS 的快捷键很多都是使用小键盘访问，很多跟读相关的功能都是通过这些键的组合来完成的。通常小键盘是用来输入数字的，当用来操作 JAWS 时，必须关闭这个输入数字的功能。JAWS 11 在打开的时候会自动关闭小键盘的数字功能。

基本操作：

打开 JAWS 开始读屏，INSERT + Down Arrow Key 是读所有内容的命令，期间还可以使用向左向右的键在所有内容中向后或向前浏览，或者使用 Page UP 或 Page Down 来加快或减慢读的速度。CTRL 键打断 JAWS 的朗读。 CTRL+INSERT+DOWN Arrow 开始浏览阅读，即读每一段内容的第一部分，默认读每一段的第一行。当然也可以自己配置读哪些内容。通过 CTRL + SHIFT+INSERT+DOWN 键打开浏览阅读的配置框，可以选择读第一行，第一个句子或者其他更具体的配置。 INSERT+DOWN 是读所有的内容，当 JAWS 正在浏览阅读时也可使用该键切换成读所有文档，或者反过来都是可以自由切换的。

JAWS 对 Web 应用的支持：

使用 JAWS 访问页面时，可以方便的访问页面的各部分的结构，表格（table）, 列表（list）, 标题（heading）, 替换文字（Alt）都能够识别，所有这些内容都来自于 HTML 的信息，HTML4.0 考虑了 a11y 的实现， 再加上 ARIA 的支持， JAWS 对 Web2.0 应用的支持也是非常强大的。下面列举一些跟我们平时用来测试相关的常用的快捷键，其他的可以参考 JAWS 的使用手册。

• INSERT + F7 在一个对话框中列出所有的链接。当 IMAGE 元素属于一个 link 时，JAWS 会提示这是一个图表链接。 对于图片元素，JAWS 不会从图片本身去读任何信息，而是会读图片的 alt 属性，当 alt 属性不存在时会读 title 属性。当然这都是可以配置的，默认 JAWS 只读存在 alt 或 title 的图片元素，如果存在 longdesc 属性，JAWS 会提示用户，通过 Enter 可以在新窗口打开包含这个详细描述的页面。不存在 alt 或 title 属性的则被当做装饰性的图片被 JAWS 忽略掉。
• INSERT + F6 在一个对话框中列出所有的标题（heading ），这里指的是所有使用 h 标签的元素，这也告诉我们在编写 Web 应用的代码时，一定要用标准的有语义的 HTML 标签，比如这个标题就使用 h，不要用其他的元素再加上 CSS 使得其看起来是一个标题，实际 JAWS 却识别不出来这个标题。
• INSERT + F5 在一个对话框中列出所有的 Form 元素； 对于 form 元素，JAWS 还提供很多方便访问的命令，比如列出所有可以编辑的文本框，列出所有的 button 等。当 JAWS 遇到 form 元素时会自动切换到 form 模式，提示用户与应用交互。
• CTRL+INSERT+L 在一个对话框中列出所有的 list ，移动到下一个 list 里面的一项使用 L 键； 移动到 list 里面的前一个使用 SHIFT+L
• CTRL+INSERT+T 在一个对话框中列出所有的 table。 关于 JAWS 读表格的内容，开始很多开发人员不知道 JAWS 可以读 table 里面每个表格里面的内容，所有可能会每个 cell 都设置成可以通过 Tab 获取焦点的元素，实际上 JAWS 是有命令来读各个表格内容的，开发人员不需要增加额外的工作。
  • CTRL+ALT+RIGHT ARROW 移动到后面一个 cell 并且读这个 cell 的内容
  • CTRL+ALT+LEFT ARROW 移动到前面一个 cell 并且读该 cell 的内容
  • CTRL+ALT+UP ARROW 移动到上面一个 cell 并且读这个 cell 的内容
  • CTRL+ALT+DOWN ARROW 移动到下面一个 cell 并且读该 cell 的内容
  • CTRL+ALT+HOME 移动到第一个 cell 并且读这个 cell 的内容
  • CTRL+ALT+END 移动到最后一个 cell 并且读这个 cell 的内容

---

回页首

JAWS 对 ARIA 的支持

ARIA（Accessible Rich Internet Applications）是无障碍的富 Internet 应用的简称，ARIA 的目标是帮助残障人士更加无障碍得访问 众多的 Web2.0 的富客户端应用。ARIA 定义了一系列的角色（role），状态（State）和属性（properties）此信息由浏览器（如 Firefox）进行解释，通过平台可访问性 API 向辅助技术提供，对于 Windows，此 API 即 MSAA (Microsoft Active Accessibility)。辅助技术将随后向用户表述信息，从而使得当前的页面元素更富语义的传递给屏幕阅读器，从而给残障人士听到。 ARIA 对窗口小部件（Widget）的键盘操作也给出了一个标准，使得用户操作窗口小部件（widget）就如同本地应用一样，同时对于动态更新的内容 ARIA 也定义了对应的属性帮助用户识别当前 Web 应用上发生的变化。而所有 ARIA 做出的这些定义和标准都要依靠支持这个标准的屏幕阅读器体现出来，使得最终用户能从中受益，享受到真正无障碍得 web2.0 应用。 JAWS 对 ARIA 提供了很好的支持，下面举例说明：

JAWS 对 Role 的支持

Role 在 ARIA 里面可以用来定义一个 Widget 的类型，比如菜单（menu），按钮（button），树（tree）等等，也可以用来表示 Web 页面的结构信息，比如标题（heading），正文（main），表（grid）等。 当 JAWS 遇到 role 这个属性时就能告诉用户这个元素的角色是什么。如下面这段代码所示 ( 代码片段 )：

清单 1.role 属性

<ul role="tree" tabindex="0" aria-labelledby="treelabel" aria-expanded="true"> 
   <li role="treeitem" aria-expanded="true"> Animals 
			 <ul role="group"> 
				 <li role="treeitem">Bird</li> 
				 <li role="treeitem" aria-expanded="false">Cats 
					 <ul role="group"> 
						 <li role="treeitem">Siamse</li> 
						 <li role="treeitem">Tabby</li> 
					 </ul> 
				 </li> 
			 </ul> 
		  </li> 
</ul> 
	 

 

如上所述树的情况，整个树容器被给予树的角色，树中的每个项目被给予树项目的角色。如果树节点是可展开的，则将会获得“expanded”状 态。如果节点在创建时折叠，expanded 值将为 false，而在展开的情况下该值将为 true。除了在创建时分配角色和状态外，状态必须在控件发生更改时进行更新。对于树项目的情况，如果节点展开，则必须将状态设置为 true，而在折叠时必须将值更新为 false。JAWS 会首先告诉用户这是一个树（Tree），当前的节点是展开的，当用户沿树的结构操作时，JAWS 则会告诉用户当前的焦点在在树的子节点上，从而让盲人用户通过听能够更贴近实际看到的样子。

清单 2.树结构

<div role="banner">  ....</div> 
lt;div role="heading">  ....</div> 
<div role="navigation">  ....</div> 
<div role="main">  ....</div> 
	 

 

如上代码所示，JAWS 会告诉用户当前的 Web 页面的结构，是标题，导航还是正文，从而方面盲人用户在页面中快速找到自己想了解和关注的内容。

JAWS 对 ARIA 的状态和属性的支持

1)aria-required 属性标识这个元素是必须输入值才能提交的，当 JAWS 看到这个属性时就会提示用户这个信息。通常情况下对于必须输入的值开发人员都会用一个星号来提示，但星号的意义通常会放在最后才告诉用户，星号表示必须输 入的值。对于正常人来讲，一眼就可以看到这个提示，但是对于盲人用户来说，只能按照屏幕阅读器的顺序来听，就很容易忽视掉这个信息。通过这个 required 属性，JAWS 会在第一时间提示给用户这个信息。 如下面这段代码所示：

清单 3.required 属性

<input name="Name" id="reqfield" type="text" aria-required="true" /> 
	 

 

2)aria-describedby 属性用来标识对某个元素更多的描述信息， JAWS 碰到这个属性的时候会提示用户：“Press insert+F1 for help”， 通过 insert+F1 键，一个包含 aria-describedby 指向的文本内容的窗口会弹出来。 如下面这段代码所示：当 JAWS 读到这个 input 输入框时，会提示用户还有额外的描述信息，是否需要打开去读。描述信息是隐藏的，当用户选择去听时，这个描述信息在显示在提示框中读给用户。

清单4.input

<input name="firstName" id="first" type="text" aria-describedby="op1" /> 
<div role="tooltip" aria-hidden="true"> 
You first name is an option </div> 
	 

 

3）aria-checked aria-pressed 和 aria-selected. 属性用来标识检查框，按钮，窗口小部件（Widget）是否被选中等信息，从而使得 JAWS 能够识别当前元素的状态，并且及时的告诉用户。

JAWS 对动态更新内容的支持

动态区域是页面上一块儿可以常常更新的内容，比如新闻标题，经济信息或者天气更新等内容。 当该区域的内容被更新时通过合适的设置 ARIA 的属性 JAWS 可以提示用户并且朗读该区域的内容。 ARIA 的 live-region 包含如下属性 aria-atomic（是否为原子操作），aria-busy ( 当前的状态，更新是否正在进行 )，aria-live（更新的级别，是立即通知还是等待通知），aria-relevant（标识内容的相关性，是内容增加还是减少时通知等），用来标 识动态更新的内容，这个属性可以用在任意的元素上。当这个元素内的内容发生变化时，即使这个元素不是当前焦点所在的元素，也要把发生的变化以及如何处理这 些更新的内容通知给屏幕阅读器。 JAWS 捕获这个更新的信息，并且做出相应的处理。如下面代码所示：span 标识的区域即为一个动态更新的区域 , 当对应的值发生变化时，JAWS 就会及时的通知用户。

清单 5.动态更新内容

<p aria-channel="notify" aria-relevant="all" aria-live="assertive" > 
Changing Value: <span>2</span> 
</p> 
	 

 

JAWS 11 对 ARIA 提供了更多的支持，例如支持 ARIA 动态内容的文本过滤，使用 ARIA 动态区域的文本过滤，JAWS 可以根据给定的一个 文本字符来决定当有更新时是否读出来。使用 WINDOWS key + CTRL + DASH 键就可以打开这个文本过滤的对话框，用户可以输入任意 可能在该动态区域出现的字符，并且可以选择 JAWS 在该字符出现的时候才读动态区域的内容或者选择出现该字符时忽略不读该区域 的内容， 如图 1 所示，这样就给 JAWS 用户对动态区域的文本内容有了更多的控制。

图 1. 动态文本过滤

JAWS 对 DnD 的支持：

JAWS 11 支持 ARIA 的 Dnd 的属性 aria-grabbed 和 aria-dropeffect. 当用户在 Web 页面或者应用的元素上应用这两个属性时， JAWS 就能很容易的识别被选择的对象，能够被移动到的其他位置，并且在合适的时机和位置释放对象。 使用 WINDOW key + CTRL + EQUALS 可以打开 ARIA 拖拽的对话框。对话框里面会列出所有可以放置的位置元素， 当然这是由用户标识出来的。当选择了其中一个位置时，JAWS 就会将焦点移到那个元素上。如果没有可以放置的位置元素， JAWS 会通过消息提示出来，而不打开这个对话框。

---

回页首

JAWS 使用中的注意事项

JAWS 是成熟的屏幕阅读器软件，目前也是是在美国使用最广泛的屏幕阅读器，包含数百个用于导航和获取信息的命令。对于盲人用户来说使用起来可能比较得心应手，但 对于正常人用来测试来讲则可能会感觉不适应，这里列出了几点注意事项：

1）使用 JAWS 时切忌用鼠标，鼠标会破坏 JAWS 的虚拟缓冲区，导致 JAWS 的行为异常。所以在测试 Accessibility 时一般把使用 JAWS 进行测试放在最后一项，起码要在键盘的支持都已经完善了之后。

2）适时的切换 JAWS 的模式，当 JAWS 遇到某些本应该读的信息却不读时，可以考虑用 INSERT + Z 切换一下 JAWS 的模式。ARIA 的某些属性可以使 JAWS 自动切换模式，比如 application，document 等。如果没有自动切换的话可以在此处加一些提示，提醒用户切换模式才能获得更好的效果。

3）JAWS 默认会读 list 和 table，不用特殊加属性。开始开发人员可能会有误解，因为 list 目录中的各项和 table 里面的各个单元本身是无法用键盘访问的，但是 JAWS 识别 li 和 table 元素，提供了对应的快捷键可以读到里面的各项内容，不需要提供额外的属性。

---

回页首

总结

本文介绍了 JAWS 作为屏幕阅读器的工作原理和一些基本的快捷键，以及 JAWS 对 ARIA 的支持等实用信息。

---

回页首

声明

本文章仅代表作者本人观点，与 IBM 公司无关。

<!-- CMA ID: 556763 --> <!-- Site ID: 10 --> <!-- XSLT stylesheet used to transform this file: dw-article-6.0-beta.xsl -->

 

参考资料

• “开发和测试 访问无障碍的 Web 应用 ”（developerWorks 中国，2010 年 3 月）介绍了如何创建为残障人士无障碍访问的 Web 应用。
  
  
• 在 维基百科上关于屏幕阅 读器的介绍
  
  
• 查看 W3C WAI-ARIA 可访问的富客户端应用指南的详细介绍。
  
  
• 查看 JAWS 官方网站的学习资料。
  
  
• “为 WebSphere Portal 版本 4.1 中的 XML Access 开发 XML 请求文件 ”（developerWorks，2002 年 10 月）：WebSphere Portal 版本 4.1 所包括的 XML Access 配置客户机接口允许将全部或部分配置设置导出为 XML 文件，并且允许通过导入 XML 文件重新创建配置。该接口还可以被用作执行某些管理任务（比如作为门户服务器中的 Portal Administration 区域和 Work with Pages 区域的一部分这样的管理任务）的一种变通方案。
  
  
• “使 用 Tivoli Access Manager 为 WebSphere Portal 4.1 启用认证和授权 ” （developerWorks，2002 年 11 月）：IBM WebSphere Portal 支持用外部认证和授权引擎（比如 Tivoli Access Manager）为门户引擎作出安全性方面的决定。本文讨论了安全性概念，一步步配置了 Tivoli Access Manager 和 Portal，并通过提供示范案例演示了运行时操作.
  
  
• developerWorks Web development 专区 ：通过专门关于 Web 技术的文章和教程，扩展您在网站开发方面的技能。
  
  
• developerWorks Ajax 资源中心 ：这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。
  
  
• developerWorks Web 2.0 资源中心 ，这是有关 Web 2.0 相关信息的一站式中心，包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过 Web 2.0 新手入门 栏目，迅速了解 Web 2.0 的相关概念。

http://www.ibm.com/developerworks/cn/web/1010_sunqy_jaws/index.html?ca=drs-