如何使用类选择器为aria-labelledby属性设置标签？

Question

如何使用类选择器为aria-labelledby属性设置标签？

3

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

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

有没有办法使用类作为选择器来代替ID作为aria-labelledby 属性? 就像这样:

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

- Ralph David Abernathy

我认为实现的方式是使用JavaScript自动更新由aria-labelledby引用的元素的文本/属性。 - Ronnie Royston

2个回答

3

为什么不使用普通标签并正常附加它。这样可以在所有浏览器和屏幕阅读器中使用...

<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来向用户发出“必填”提示。这是标准行为，无需添加额外的文本和标签。可以根据所需类别样式化所需的星号或其他内容。

- Tim

因为如果我们有这样的内容: <label>Qty</label> 我们不希望屏幕阅读器读取"Q - T - Y"，我们希望它读取"数量"。 - Ralph David Abernathy

1

你可以使用带有标题的缩写标签，例如http://stackoverflow.com/questions/29465033/pronounce-doit-as-do-it-for-screen-readers-and-the-visually-impaired，但不确定是否需要测试屏幕阅读器支持。<label title="数量"><abbr>Qty</abbr></label>或者如果表单空间足够，只需将其更改为“数量”。 - Tim

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Skerrvy · Accepted Answer

使用 aria-labelledby 或 aria-describedby 时无法使用 class。虽然使用 aria-labelledby 可以将多个标签附加到元素上，但它仅适用于 ID 值。这是因为期望这些标签在此目的下是唯一的。一种可能的解决方案是将“aria-label”附加到带有您想要实际阅读的文本的输入上。例如，具有 Q.T.Y. 将允许屏幕阅读器读出与显示标签不同的文本。只需注意，如果在输入上使用了 aria-label，则许多（大部分？）屏幕阅读器将不会读取元素。

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

编辑＃2：我想重新强调一下，不要因为可能与语音识别技术（如 Dragon Naturally Speaking 或其他技术）存在的问题而使用不同于显示标签的 aria-label。使用其声音控制网页的用户通常会依赖于显示的标签来正确地与页面进行交互。

以下是示例：

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

如果页面上显示"checkout"，但使用语音输入软件的用户可能会口头命令"click Checkout button"，但是语音输入软件不知道"Checkout"按钮，因为aria标签是"click to buy"。