语义和屏幕阅读器

您是否曾经有过这样的疑问:屏幕等辅助技术是如何 读者是否知道要面向用户发布哪些信息?答案是,这些技术 依靠开发者使用语义 HTML 标记其网页。但什么是 语义,屏幕阅读器如何使用它们?

在深入了解语义之前,了解另一个术语会很有帮助: 功能。可供性是指能够向用户提供或提供其用户的任何对象, 执行操作的机会一个典型的例子是茶壶:

茶壶的柄是自然的。

这个茶壶不需要说明手册;它的物理设计 向用户说明应如何操作。它有一个标识名 如果您曾见过世界上有类似手柄的其他物体,就可以推断出 您就应该轻松上手使用

在构建图形用户界面时,我们使用 CSS 等工具为 提供各种功能例如,您可以为按钮添加阴影效果, 边框,使其看起来像现实世界中的实际按钮。

但如果用户看不到屏幕,这些视觉功能 不能传达给他们因此,您需要确保您的界面 其设计方式能够向辅助工具传达相同的功能, 技术。这种以非视觉的方式呈现界面元素的功能称为 其语义

使用语义 HTML

要传达适当语义,最简单的方法就是使用语义丰富的 HTML 元素。

使用 CSS 设置 <div><button> 元素的样式,使它们传达相同的视觉功能; 但使用屏幕阅读器时,两种体验会有很大不同。 <div> 只是一个通用分组元素, 因此屏幕阅读器只能读出 <div> 的文本内容。 <button> 以“按钮”的形式读出。 向用户表明他们可以与之互动的内容

最简单的 并且通常是解决这个问题的最佳方案 完全避免使用自定义的交互式控件 例如,替换充当按钮的 <div> 实际的 <button>

语义属性和无障碍树

一般来说,每个 HTML 元素都具有以下一些语义 属性:

  • 角色或类型
  • 名称
  • value(选填)
  • 状态(可选)

元素的角色用于描述其类型,例如“按钮”“input”甚至 “group”例如 divspan 元素。

元素的名称是其经过计算的标签。屏幕阅读器通常会读出 元素的名称和角色,例如“注册按钮。”算法 这一功能会决定元素名称的因素有很多,例如 元素内的内容,无论它是否具有 title 等属性 或 placeholder,无论该元素是否与实际 <label> 元素,并且该元素是否具有任何 ARIA 属性(如 aria-labelaria-labelledby

某些元素可以具有 value。例如,<input type="text"> 可以 有一个值可以反映用户在文本字段中输入的任何内容。

有些元素可能还具有状态,此状态可传达其当前状态。 例如,<select> 元素可采用展开或 收起状态(取决于广告是打开还是关闭)。

无障碍树

对于 DOM 中的每个节点,浏览器将确定 这个节点在语义上很“有趣”,并将其添加到无障碍功能 树。 当屏幕阅读器等辅助技术提供备用界面时 则通常是通过遍历此无障碍功能树来实现。

您可以使用 Chrome 的开发者工具检查元素的语义 属性 并探索它在无障碍树中的位置。

后续步骤

了解了语义及其对屏幕阅读器导航的作用后, 您会情不自禁地看一下您用不同方式构建的网页。在下一部分中, 我们先退一步,考虑 使用有效的标题和地标传达信息。