html - label id 和 aria-labelledby 之间的区别用法

Question

我知道 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 documentation

The label text is not only visually associated with its correspondingtext input; it is programmatically associated with it too....You can click the associated label to focus/activate the input, aswell as the input itself.

但是第二个不为浏览器用户提供该功能，因为它只是一个用于可访问性的 ARIA 属性。

我还检查了 chrome devtools - accessibility，我发现 first 和 second 的计算属性都显示输入和标签相互关联。

据我了解，第一个为用户提供编程访问权限，而第二个则没有，屏幕阅读器可以正确访问第一个和第二个。

第二个是第一个的子集吗？那么下面的代码是否是无效模式，因为第一个是第二个的超集？

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

谢谢。

Answer 1

我这边对 aria-label 和 aria-labelledBy 之间主要区别的一些描述。 😋

Use aria-label if label text is not visible on the screen and use aria-labelledBy if label text is visible.

我们可以阅读更多关于 aria 属性的用例 here如果我们愿意的话。

标签id和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" />

我有一些我在工作场所使用的(我的)规则。

• I use the first example always whenever it's possible.
• I use aria-label when I have don't have visible text. Imagine a form with an input element that doesn't have a label associated with it and placeholder text for giving information on what to put in the input.
• I use aria-labelledBy to associated non-label elements with the interactive elements (eg: Input)

第二个是第一个的子集吗？那么下面的代码无效模式是因为第一个是第二个的超集吗？

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

我们必须知道将标签与输入相关联的主要优势是什么。一个是您在问题中提到的 web accessibility 另一个是(根据 mdn docs )

You can click the associated label to focus/activate the input, as well as the input itself. This increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device.

从这个模式中，您将标签与输入相关联两次，一次用于焦点输入功能。第一个确实同时提供了这两种功能，因此在标签和输入之间再添加一个关联性没有意义。