html - 如何使用 aria 用非直观的文本标签来标记按钮

Question

我有一个如下所示的按钮:

<button type="button">
    Remove
</button>

根据上下文，可以看到的用户将能够知道该按钮指的是他们可以删除的特定产品。然而，对于有视力障碍的用户来说，“删除”文本不足以帮助他们了解要删除的内容。

我知道 aria-label 是，根据 MDN web docs ，应该按如下方式使用:

Use it in cases where a text label is not visible on the screen

我还知道 aria-labelledby 应该用于将其他标记与被标记的元素关联起来。但是，就我的按钮而言，按钮本身包含标签。恰好标签本身描述性不够。

此时，您可能会问为什么我不直接更改按钮文本!恰巧用户体验团队不想更改可见的按钮文本，因此我只能尝试找出按钮的可访问性，而不更改按钮的可见部分。

无论如何，对于在这种情况下该怎么做有明确的规范吗？我倾向于使用 aria-label，但我不确定它本身是否符合 ARIA。

提前致谢!

Answer 1

Anyhow, is there a defined spec on what to do in this type of situation? My inclination is to use aria-label, but I'm not positive that is ARIA-compliant per se.

是的，你可以。

将使用 aria-label 属性并将替换内部文本。

文本规范Alternative Computation定义 aria-label 将优先使用(在步骤 2C 中)，而内容仅在不存在时使用(步骤 2F)