语义和辅助技术简介
您已经了解了如何通过解决仅使用键盘的问题,让无法使用鼠标或指控设备(无论是因为身体缺陷、技术问题还是个人偏好)的用户能够访问网站。虽然从一开始就进行规划,但这需要一定的谨慎和考虑,工作量并不大。完成这些基本工作后,就要走上漫长的道路,打造一个完全可访问且更加精致的网站。
在本节课中,我们将以此为基础,让您考虑其他无障碍因素,例如如何构建网站来支持像 Victor Tsaran 这样的用户看不到屏幕。
首先,我们会介绍一些有关“辅助技术”的背景信息。辅助技术是指屏幕阅读器等可帮助残障用户无法访问信息的工具的通称。
接下来,我们将了解一些常规的用户体验概念,并以这些概念为基础更深入地了解辅助技术用户的体验。
最后,我们将了解如何有效使用 HTML 为这些用户打造良好的体验,以及它与我们之前介绍焦点的方式有很大重叠。
辅助技术
“辅助技术”是一个概括性术语,泛指可帮助任何残障人士完成任务的设备、软件和工具。从广义上讲,可以是低科技产品(如步行拐杖或用于阅读的放大镜),也可以是高科技产品(如机械臂或智能手机上的图像识别软件)。
![辅助技术示例,包括手杖放大镜和机器人假肢。](https://web.developers.google.cn/static/articles/semantics-builtin/image/assistive-technology-exam-beeec6611c495.png?authuser=5&hl=bg)
辅助技术可以包括浏览器缩放这样宽泛的内容,也可以涵盖特别设计的游戏控制器。它可以是盲文显示屏等独立的实体设备,也可以完全实现在语音控制等软件中。它可以内置于某些屏幕阅读器等操作系统中,也可以作为插件(例如 Chrome 扩展程序)。
![更多辅助技术示例,包括浏览器缩放、盲文显示屏和语音控制。](https://web.developers.google.cn/static/articles/semantics-builtin/image/more-assistive-technology-dbc07e3c289be.png?authuser=5&hl=bg)
一般来说,辅助技术与技术之间的界限是模糊的;毕竟,所有技术都旨在协助人们完成某项任务。技术通常可归入或移出“辅助”类别。
例如,盲人发音计算器是最早的商业语音合成产品之一。现在,语音合成服务已无处不在,从行车路线指引到虚拟助理,无所不有。相反,最初通用的技术往往会找到辅助用途。例如,弱视人群可能会利用智能手机的相机变焦功能更好地看清现实世界中较小的事物。
在 Web 开发的上下文中,我们必须考虑各种各样的技术。用户可能会使用屏幕阅读器、盲文显示屏、屏幕放大镜、语音控制、开关设备或某种其他形式的辅助技术与您的网站互动。此类技术会调整网页的默认界面,以创建供其使用的更具体的界面。
其中的许多辅助技术都依赖以程序化方式表示的语义来打造无障碍用户体验,而这也正是本节课的主要内容。但是,在解释以编程方式表示的语义之前,我们需要简单介绍一下“功能可见性”。
功能能力
在使用人造工具或设备时,我们通常会通过其外形和设计来了解它的功能和运作方式。可供性 (affordance) 是指能够或为其用户提供执行某项操作的机会的任何对象。功能可见性设计得越好,其用途就越明显或更直观。
一个典型的例子是烧水壶或茶壶。即使您以前从未见过茶壶,也很容易意识到,您应该用手柄而不是茶壶把它拿起来。
![一个带手柄和壶嘴的茶壶。](https://web.developers.google.cn/static/articles/semantics-builtin/image/a-teapot-handle-spout-cb54fefc75464.png?authuser=5&hl=bg)
这是因为该功能类似于您在水壶、饮料罐、咖啡杯等许多其他物体上看到的功能。您或许可以通过嘴巴拿起罐子,但您在类似功能上的经验告诉我们,手柄是更好的选择。
在图形界面中,功能可见性表示我们可以执行的操作,但由于没有可交互的物理对象,它们可能含糊不清。因此,GUI 功能可见性专门设计为清晰明确:按钮、复选框和滚动条旨在通过尽可能少的训练来传达其用法。
例如,您可以像下面这样解释一些常见表单元素(功能可见性)的使用:
- 单选按钮 -“我可以选择其中一个选项。”
- 复选框 -“我可以选择‘是’或‘否’使用此选项。”
- 文本字段 -“我可以在此区域中输入一些内容。”
- 下拉菜单 -“我可以打开此元素以显示我的选项。”
您只能因为可以看到这些元素而得出关于这些元素的结论。当然,看不到元素提供的视觉线索的人无法理解它的含义或直观地理解该功能的价值。因此,我们必须确保信息表达方式足够灵活,以便辅助技术可以访问这些信息,而辅助技术可以构建满足用户需求的替代界面。
这种以非视觉方式呈现的功能使用行为称为“语义”。
屏幕阅读器
一种热门的辅助技术是屏幕阅读器,该程序可让视障人士以生成的语音大声朗读屏幕上的文字,从而使用计算机。用户可以通过使用键盘将光标移至相关区域来控制系统读出的内容。
我们请 Victor Tsaran 向我们介绍了作为盲人,他如何使用 OS X 上名为“VoiceOver”的内置屏幕阅读器访问网页。观看这个视频,了解如何使用 VoiceOver。
现在,轮到您尝试使用屏幕阅读器了。以下网页启用了 ChromeVox Lite,这是一种使用 JavaScript 编写的屏幕阅读器,功能最少,但可以正常使用。系统特意对屏幕进行模糊处理,以模拟弱视体验,迫使用户使用屏幕阅读器完成任务。当然,您需要使用 Chrome 浏览器来完成这项练习。
您可以使用屏幕底部的控制台来控制屏幕阅读器。此屏幕阅读器的功能非常少,但您可以使用 Previous
和 Next
按钮探索内容,也可以使用 Click
按钮点击内容。
您可以尝试在启用 ChromeVox Lite 的情况下访问此页面,体验屏幕阅读器的使用。想想看,屏幕阅读器(或其他辅助技术)实际上会根据程序化表示的语义为用户打造完全的替代用户体验。屏幕阅读器提供听觉界面,而不是视觉界面。
请注意屏幕阅读器如何告诉您有关每个界面元素的一些信息。精心设计的读者应该能够告诉您有关其遇到的元素的以下全部或至少大部分信息。
- 元素的角色或类型(如果已指定)。
- 元素的名称(如果有)。
- 元素的 value(如果有),也可能没有。
- 元素的state,例如已启用还是已停用(如果适用)。
屏幕阅读器之所以能够构建此备用界面,是因为原生元素包含内置的无障碍元数据。就像渲染引擎使用原生代码构建视觉界面一样,屏幕阅读器会使用 DOM 节点中的元数据构建无障碍版本,如下所示。
![屏幕阅读器使用 DOM 来创建可访问的节点。](https://web.developers.google.cn/static/articles/semantics-builtin/image/a-screen-reader-uses-dom-d41868210913.png?authuser=5&hl=bg)