javascript - 如果不存在合适的 ARIA 属性，我是否应该使用自定义 ARIA 属性？

Question

我想确定当用户单击其后代时可以自动隐藏一个元素(使用 JavaScript 来实现)。

例如:

<div>
    <div aria-autohide>
        <a href="http://..." target="_blank">A Link</a>
    </div>
</div>

这是正确的方法吗？

Answer 1

虽然您可以创建自定义 HTML tags您可以创建 custom attributes ，通常以“data-”开头，您无法创建自定义 ARIA 属性。有一个预定义列表 ARIA attributes that are mapped to certain properties in the accessibility API 。如果您创建一个新属性，则无法告诉辅助功能 API 该属性的含义以及辅助技术(例如屏幕阅读器)应如何解释它。

目前你能做的最好的事情就是 add visually hidden text到您的元素，以便当焦点(无论是键盘焦点还是屏幕阅读器焦点)移动到该元素时屏幕阅读器可以读取它。

例如，

<div>
  <div>
    <a href="http://..." target="_blank">A Link <span class="sr-only">selecting this link will cause this element to be hidden</span></a>
  </div>
</div>

参见What is sr-only in Bootstrap 3?有关“仅 sr”类别的信息。