我对@987654323@ 和aria-labelledBy 之间的主要区别的一点描述。 ?
如果标签文本在屏幕上不可见，则使用aria-label；如果标签文本可见，则使用aria-labelledBy。
如果需要，我们可以阅读更多关于 aria 属性 here 的用例。
label 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>
还有另一种方法可以将invisible or hidden 标签与输入相关联，但不提供焦点输入功能。
// 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" />
我们必须知道将标签与输入相关联的主要优势是什么。一个是您在问题中提到的web accessibility，另一个是（根据mdn docs）
您可以单击关联的标签来聚焦/激活输入，以及输入本身。这种增加的点击区域为任何试图激活输入的人提供了优势，包括那些使用触摸屏设备的人。
在此模式中，您将标签与输入相关联两次和一次用于焦点输入功能。第一个确实同时提供了这两个功能，因此在标签和输入之间再添加一个关联性是没有意义的。