label id 和 aria-labelledby 在使用上的区别是什么？

Question

label id 和 aria-labelledby 在使用上的区别是什么？

4

我知道aria-label和aria-labelledby之间的区别，但以下这些有什么不同，以及何时使用其中之一？代码来自react-testing-library。

// first
<label for="username-input">Username</label>
<input id="username-input" />

// second
<label id="username-label">Username</label>
<input aria-labelledby="username-label" />

首先，根据mdn文档，第一个提供了以下功能：

标签文本不仅与相应的文本输入在视觉上相关联；它还与其程序相关联。 ... 您可以单击关联的标签以聚焦/激活输入，以及输入本身。

但是第二个并不为浏览器用户提供该功能，因为它只是辅助功能的ARIA属性。

我还检查了Chrome开发工具-可访问性，并发现第一个和第二个的计算属性显示输入和标签彼此关联。

因此，据我所知，第一个为用户提供了编程访问，而第二个则没有，但是第一个和第二个都可以被屏幕阅读器正确访问。

第二个是否是第一个的子集？因此，由于第一个是第二个的超集，下面的代码模式是否无效？

<label id="username-label" for="username-input">Username</label>
<input id="username-input" aria-labelledby="username-label" />

谢谢。

- jwkoo

1个回答

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

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

- Subrato Pattanaik · Accepted Answer

从我的角度来看，aria-label和aria-labelledBy的主要区别是：aria-label用于屏幕上不可见的标签文本，而aria-labelledBy用于可见的标签文本。如果需要了解更多关于这两个aria属性的使用情况，可以在此处阅读更多信息。和aria-labelledby的使用差异：

// first
<label for="username-input">Username</label>
<input id="username-input" />

// second
<label id="username-label">Username</label>
<input aria-labelledby="username-label" />

第一种方法是将表单标签与输入框进行合法或传统的关联。第二种方法在单击相关标签时不提供焦点输入功能，仅用于Web可访问性。第一种方法不仅提供Web可访问性，而且还提供焦点输入功能。因此，我们可以说第一种方法比第二种方法更强大。

除了输入焦点功能外，我们还有两种方法可以将标签与输入框关联起来。

// Wrapper labels
<label>Username <input /></label>

// Wrapper labels where the label text is in another child element
<label>
  <span>Username</span>
  <input />
</label>

还有一种方法可以将“不可见或隐藏”标签与输入相关联，但不提供聚焦输入功能。

// aria-label attributes
// Take care because this is not a label that users can see on the page,
// so the purpose of your input must be obvious to visual users.
<input aria-label="Username" />

我在工作中有一些（我的）规则。

只要可能，我总是使用第一个示例。

当没有可见文本时，我使用aria-label。想象一下一个表单，其中输入元素没有与之关联的标签，并且占位符文本用于提供有关在输入中放置什么内容的信息。

我使用aria-labelledBy将非标签元素与交互元素（例如：输入框）相关联。

第二个规则是否是第一个规则的子集？因此，由于第一个规则是第二个规则的超集，以下代码是否无效？

<label id="username-label" for="username-input">Username</label>
<input id="username-input" aria-labelledby="username-label" />

我们必须知道将标签与输入相关联的主要优点。一个是你在问题中提到的网页无障碍性，另一个则是（根据mdn文档）：

您可以单击相关联的标签来聚焦/激活输入，以及输入本身。这增加的点击区域为任何试图激活输入的人提供了优势，包括那些使用触摸屏设备的人。

从这个模式中，您通过两次关联标签和一次聚焦输入功能来关联标签与输入。第一个提供了同时具备两个功能，因此没有必要再添加一次标签与输入的关联。