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

Question

我知道屏幕阅读器不仅会读取一些元素/标签，还会阅读它自己的元素/标签。例如：

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

屏幕阅读器的结果如下：按钮文字。

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

1. <input type="radio">

2. <input type="checkbox">

3. <h1>至<h6>代码。

Answer 1

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

Aural UI of the Elements of HTML

管理它的团队代表ARIA和HTML规范背后的人，所以他们不是为了踢，他们是为了规范的利益而做（并且它可能被合并作为一个记录在路上）。一个也是一个屏幕阅读器用户，所以她比你或我更了解它。

您可以在JAWS，VoiceOver，NVDA和Window Eyes中找到每个示例。来自文件：

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

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

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

Answer 2

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

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

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

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

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

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

<h1>Favourite books</h1>

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