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

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

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

---

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

<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，它只是用“required”ping用户。标准版不需要为此添加额外的文本和标签

---

可以根据所需类别设置所需*或其他样式

不可能使用带有aria labelledby或aria describedby的类。虽然可以使用aria labelledby将多个标签附加到一个元素，但它使用的唯一值是id。我想这是因为他们希望这些标签在这方面是独一无二的。一种可能的解决方案是，在输入端附加一个“aria标签”，其中包含您希望它实际读取的文本。例如，拥有

Q.T.Y.

---

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

元素

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

编辑#2：我想再次讨论这个问题，以警告不要使用与显示的标签不同的aria标签，因为听写技术可能存在问题（如Dragon Naturally Speaking或其他）。用语音控制网页的用户通常会依靠显示的标签与网页进行正确的交互

举个例子：

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

结帐

---

在页面上看到“checkout”但使用口述软件的用户可能会口述“click checkout button”，但口述软件不会知道“checkout”按钮，因为aria标签是“click to buy”。

因为如果我们有这样的内容：

Qty

我们不希望屏幕阅读器读“Q-t-Y”，我们希望它读出来“数量”。您可以使用带有标题的abbr标记，例如但不确定是否需要测试屏幕阅读器支持。

Qty

或者如果您有足够的表单空间，只需将其更改为ti-Quantity。“屏幕阅读器将不会读取元素”你的意思是屏幕阅读器不会在这个场景中读取标签文本吗？菲奥娜-只使用NVDA和Firefox，我的评论中包含的代码，如果用户只关注输入，只输入“数量”。将被读取。“数量”仅在文档流中读取，但在输入收到焦点时不会被读取。很抱歉出现任何混淆。我认为这样做的方式是使用JavaScript自动更新

aria labelledby

引用的元素的文本/属性。

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