ARIA "role"在HTML中究竟有什么用途？

Question

我看了ARIA“role”的文档，但是无法理解它的作用。它到底有什么作用呢？比如说，我在表格中使用它，像这样：

<td role='button'>text</td>

这是指这个单元格会像一个按钮一样起作用吗？有没有人能够以更简单易懂的方式解释一下这个问题？

- 2012178

---

"role"和"aria-*"属性用于辅助功能，以便屏幕阅读器可以按照我们的意愿正确地读取页面内容，这些属性与HTML的外观无关。 - Sujata Chanda

@Sujata Chanda：好的，所以在普通屏幕上它既不会显示也不会作为按钮使用？ - 2012178

是的，它在普通屏幕上既不会显示也不会作为按钮起作用。 - Sujata Chanda

Answer 1

您可以参考 MDN 上的说明：

按钮角色应该用于可点击的元素，当用户激活它们时会触发响应。仅使用 role="button" 即可使任何元素（例如 <p>, <span> 或 <div>）在屏幕阅读器中显示为按钮控件。此外，该角色可以与 aria-pressed 属性结合使用以创建切换按钮。

还请注意以下注意事项

如果可能的话，建议使用本地 HTML 按钮（<button>, <input type="button" /> 和 <input type="image" />），而不是按钮角色，因为本地 HTML 按钮更广泛地受到老旧的用户代理和辅助技术的支持。本地 HTML 按钮也默认支持键盘和焦点要求，无需进行额外的定制。

w3.org还对aria-role进行了详细解释。

- Rahul Tripathi

---

但是当我在<span>中尝试时，span标签内的文本看起来不像一个按钮，即使我给它添加了监听器，它也没有响应。 - 2012178

Answer 2

如上所述，ARIA是用于辅助功能的，而角色属性对普通浏览器没有影响。

实现ARIA角色最简单和最实用的方法之一是使用地标。一些ARIA角色是地标，允许用户在屏幕阅读器中跳转到页面的特定部分。一些盲人用户发现这很有帮助，因为它可以帮助他们快速导航。不同屏幕阅读器的支持和行为在这里描述。

- Jess