您是否曾经有过这样的疑问:屏幕等辅助技术是如何 读者是否知道要面向用户发布哪些信息?答案是,这些技术 依靠开发者使用语义 HTML 标记其网页。但什么是 语义,屏幕阅读器如何使用它们?
功能可见性和语义
在深入了解语义之前,了解另一个术语会很有帮助: 功能。可供性是指能够向用户提供或提供其用户的任何对象, 执行操作的机会一个典型的例子是茶壶:
![](https://web.developers.google.cn/static/articles/semantics-and-screen-readers/image/EXqR31Kq3mosH6jv6jiG.png?authuser=5&hl=sk)
这个茶壶不需要说明手册;它的物理设计 向用户说明应如何操作。它有一个标识名 如果您曾见过世界上有类似手柄的其他物体,就可以推断出 您就应该轻松上手使用
在构建图形用户界面时,我们使用 CSS 等工具为 提供各种功能例如,您可以为按钮添加阴影效果, 边框,使其看起来像现实世界中的实际按钮。
但如果用户看不到屏幕,这些视觉功能 不能传达给他们因此,您需要确保您的界面 其设计方式能够向辅助工具传达相同的功能, 技术。这种以非视觉的方式呈现界面元素的功能称为 其语义。
使用语义 HTML
要传达适当语义,最简单的方法就是使用语义丰富的 HTML 元素。
使用 CSS
设置 <div>
和 <button>
元素的样式,使它们传达相同的视觉功能;
但使用屏幕阅读器时,两种体验会有很大不同。
<div>
只是一个通用分组元素,
因此屏幕阅读器只能读出 <div>
的文本内容。
<button>
以“按钮”的形式读出。
向用户表明他们可以与之互动的内容
最简单的
并且通常是解决这个问题的最佳方案
完全避免使用自定义的交互式控件
例如,替换充当按钮的 <div>
实际的 <button>
。
语义属性和无障碍树
一般来说,每个 HTML 元素都具有以下一些语义 属性:
- 角色或类型
- 名称
- value(选填)
- 状态(可选)
元素的角色用于描述其类型,例如“按钮”“input”甚至
“group”例如 div
和 span
元素。
元素的名称是其经过计算的标签。屏幕阅读器通常会读出
元素的名称和角色,例如“注册按钮。”算法
这一功能会决定元素名称的因素有很多,例如
元素内的内容,无论它是否具有 title
等属性
或 placeholder
,无论该元素是否与实际
<label>
元素,并且该元素是否具有任何 ARIA 属性(如
aria-label
和 aria-labelledby
。
某些元素可以具有 value。例如,<input type="text">
可以
有一个值可以反映用户在文本字段中输入的任何内容。
有些元素可能还具有状态,此状态可传达其当前状态。
例如,<select>
元素可采用展开或
收起状态(取决于广告是打开还是关闭)。
无障碍树
对于 DOM 中的每个节点,浏览器将确定 这个节点在语义上很“有趣”,并将其添加到无障碍功能 树。 当屏幕阅读器等辅助技术提供备用界面时 则通常是通过遍历此无障碍功能树来实现。
您可以使用 Chrome 的开发者工具检查元素的语义 属性 并探索它在无障碍树中的位置。
后续步骤
了解了语义及其对屏幕阅读器导航的作用后, 您会情不自禁地看一下您用不同方式构建的网页。在下一部分中, 我们先退一步,考虑 使用有效的标题和地标传达信息。