屏幕阅读器如何从 HTML 中读取元素

Posted 2023-05-07

【中文标题】屏幕阅读器如何从 HTML 中读取元素

【英文标题】：How screen readers read elements from HTML

【发布时间】：2016-09-27 11:24:56

【问题描述】：

我知道屏幕阅读器会读取某些元素/标签，不仅会读取它们包含的内容，还会读取它本身的元素/标签。例如：

<button class="class-of-the-button">Text inside</button>

将导致屏幕阅读器为：按钮文本内部。

或者类似的东西，我不太确定（如果你知道它的确切程度，请更正）。这么说，我想请你告诉我屏幕阅读器用自己的元素/标签的内容读取的其他元素/标签是什么，特别是这个（但不仅是。如果您有它们的列表或只是知道一些，请告诉我。非常感谢您的帮助）：

为<input type="radio">

为<input type="checkbox">

for <h1>至<h6>标签。

【参考方案1】：

有一个很好的在线资源可以捕捉每个屏幕阅读器如何说出不同的元素。它不完整，但它有很多。它也在增长：

Aural UI of the Elements of html

管理它的团队代表了 ARIA 和 HTML 规范背后的人，所以他们这样做不是为了好玩，他们这样做是为了规范的利益（并且它可能被合并为一个注释马路）。其中一位也是屏幕阅读器用户，因此她比你我更了解它。

您可以从 JAWS、VoiceOver、NVDA 和 Window Eyes 中找到示例。来自文档：

屏幕阅读器对 HTML 元素的典型支持模式：

在用户浏览内容时按角色识别元素。 元素的文本内容公告。 宣布元素的开始和结束。 随着元素内容的宣布而改变声音。 宣布元素的可访问名称和/或描述 状态和属性公告。 当具有特定状态或属性的元素获得虚拟焦点时，发出哔哔声或其他声音。 有关如何操作表单控件等交互式元素的说明。 通过键盘导航元素和“快速访问”特定元素的列表，列表项链接到页面上元素的每个实例。

注意：支持的模式组合因元素而异，并且对特定元素的支持因屏幕阅读器软件而异。

【讨论】：

感谢您分享这个真正伟大的资源，Aardrian。

【参考方案2】：

对于您询问的三种情况，屏幕阅读器至少需要两条信息：元素的角色及其可访问的名称。

对于表单字段，角色由 type 属性决定。所以 type="radio" 和 type="checkbox" 分别。对于标题，当您使用 h1-h6 元素时，角色是隐含的。

表单字段的可访问名称最常使用标签元素提供。对于表单字段，它将是这样的：

<input type="checkbox" id="red">
<label for="red">Red</label>

注意：for/id 属性配对很重要，因为它将标签与表单字段相关联。如果没有这种关联，浏览器将不知道标签属于表单域。

对于标题，可访问的名称来自元素的文本内容：

<h1>Favourite books</h1>

浏览器向屏幕阅读器公开角色和可访问名称等信息。在这些示例中，屏幕阅读器会显示“红色复选框”或“最喜欢的书籍标题级别 1”之类的内容。