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。我想是这样的，因为他们希望这些标签在这方面是独一无二的。一种可能的解决方案是附加一个咏叹调标签＆＃39;使用您希望它实际读取的文本输入。例如，有

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

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

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

Answer 2

为什么不使用普通标签并正常粘贴。这适用于所有浏览器和屏幕阅读器......

<div class="field">
   <label for="qty" class="required"><abbr title="Quantity">Qty</abbr></label>
   <input type="text" name="qty" aria-required="true" id="qty" class="required">
</div>

因此，我们有一个正确的标签和输入匹配，以便不会失败自动检查器。它将在上下文中读取标签告诉用户该字段是什么，以便他们知道要输入什么（在您的情况下，您不会告诉用户他们输入了什么）。我们使用aria-required，只需用户“ping”即可。标准是不需要为此添加额外的文本和标签。

可以设置所需的*或不基于所需的clas

的样式

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

2 个答案: