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

Question

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

例如：

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

这样做正确吗？

Answer 1

而您可以创建自定义HTML tags and you can create custom attributes, typically prefaced with "data-", you cannot create custom ARIA attributes. There's a predefined list of ARIA attributes that are mapped to certain properties in the accessibility API。如果您创建一个新的，您将无法告诉辅助功能 API 该属性的含义以及它应该如何被辅助技术解释，例如屏幕 reader.

您现在可以做的最好的事情是 add visually hidden text 到您的元素，以便屏幕 reader 在焦点（无论是键盘焦点还是屏幕 reader 焦点）移动到元素.

例如，

<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>

有关 "sr-only" class 的信息，请参阅 What is sr-only in Bootstrap 3?。

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

Should I use a custom ARIA attribute if there is no suitable ARIA attribute exists?

javascript

html

w3c

wai-aria