Question

我有一个常见的下拉组件，将在给定的页面中多次使用：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="I cannot add a static ID here since this will be repeated multiple times in a page" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="How to reference the above button here?">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

我不想为我的按钮添加ID，因为它会在页面中重复多次。有没有其他方法可以在此处添加aria-labelledby属性而无需动态生成ID？

Answer 1

aria-labelledby，from MDN：

包含对象（如输入元素，窗口小部件和组
）中标签的元素ID

如果您想使用labelledby，则需要拥有ID。但是，您可以为不同的按钮使用不同的 ID，并让这些项目使用相关ID作为其labelledby属性的一部分。

如果您正在使用内容管理系统，您应该能够编写一个循环，该循环将生成带有数字的ID，以使每个按钮与不同的ID相关联，并将该ID重新用作{{{ 1}}。

labelledby的价值不需要有意义;它是一个钩子，告诉辅助技术“事物A被这个ID的东西标记”。

如何将aria-labelledby =“*”属性添加到将在页面中重复多次的常用组件？

1 个答案: