html - 如何为 aria-labelledby 使用类选择器？

Question

我正在尝试创建一个可访问的输入字段，如下所示:

<input type="text" role="textbox" aria-labelledby="helper-msg-value">
<p id="helper-msg-value">You must enter a value</p>

有什么方法可以使用类作为 aria-labelledby 属性的选择器而不是 ID？所以像这样:

<input type="text" role="textbox" aria-labelledby=".helper-msg-value">
<p class="helper-msg-value">You must enter a value</p>

Answer 1

不可能使用带有 aria-labelledby 或 aria-describedby 的类。虽然可以使用 aria-labelledby 将多个标签附加到一个元素，但它唯一使用的值是 ID。我想是这种情况，因为他们希望这些标签为此目的是独一无二的。一种可能的解决方案是将“aria-label”附加到带有您希望它实际阅读的文本的输入。例如，有

<label for="textfield">Q.T.Y.</label> <input type="text" id="textfield" aria-label="Quantity">

将允许屏幕阅读器读出与显示标签不同的文本。请注意，许多(大多数？)屏幕阅读器不会阅读 <label>如果在输入上使用了 aria-label 元素。

编辑:一个类旨在用于页面上一个元素的多个实例。当您关注一个元素时，屏幕阅读器需要确切地知道哪个元素将代表 aria 属性。这就是使用 ID 的原因——ID 对一个页面必须是唯一的——也就是说，一个特定的 ID 只能属于一个元素。这允许浏览器(和辅助技术)快速准确地获取 aria 属性的正确元素。如果页面上有三个元素具有相同的类但内容不同，您希望读出什么？

编辑 #2:我想重新审视这个以警告不要使用与显示标签不同的 aria-label，因为听写技术可能存在问题(例如 Dragon Naturally Speaking 或其他) .使用语音控制网页的用户通常会依赖显示的标签与页面进行正确的交互。

举个例子:

<button aria-label="click to buy">Checkout</button>

在页面上看到“结帐”但使用听写软件的用户可能会口述“单击结帐按钮”，但听写软件不会知道“结帐”按钮，因为 aria 标签是“点击购买”。