html - 标签 "for"和输入 "id"

Question

我目前正在为 CMS 开发一个表单模块，以便我们的用户可以创建他们自己的表单以显示在他们的网站上，我正在努力确保所有这些都可以通过标签等访问。

我的问题是，如果你有一个 <label>对于 <input>用[for]链接到 [id] 的属性输入的 [id]必须真正意味着什么？读了吗？还是只是将它们链接起来？

例如。

<label for="input1">Name</label>
<input id="input1" />

或

<label for="name">Name</label>
<input id="name" />

这些在屏幕阅读器上的结果会相同还是不同？

Answer 1

If you have a <label> for an <input> with a [for] attribute to link to the [id] of the input, does the [id] have to actually mean something?

浏览器语义*是指浏览器如何识别 DOM 节点以及浏览器将向使用辅助导航的用户读取的内容。

[id]和 [class]属性不会增加语义。在可能的情况下仍然使用描述性 ID 和类很重要，但仅限于使开发更容易的范围内。

Is it read?

没有。据我所知，[id]永远不会通过网站的正常操作直接向用户读取属性。请参阅下面关于文档片段标识符的注释。

Or is it just to link them?

它告诉标签哪个<input> (或 <select> 或 <textarea> …)标签是标签，还提供一些 UI 功能，例如当标签被点击、点击或以其他方式触发时将焦点移动到相关输入。

当标记的元素获得焦点时，浏览器会告诉屏幕阅读器阅读与该元素关联的标签。

---

那[name]呢？属性？

在 <form> 中屏幕阅读器不会阅读 [name]属性，因为它不表示任何语义，但是对于 GET请求 [name]属性将用作查询字符串中的键。查询字符串可能会被用户读取，因此值得考虑使用人类可读的 [name]而不是自动生成的东西。

---

文档片段标识符呢？

如果您打算使用 [id]至 <a>向下锚定页面，然后是 [id] 的值当它成为 URL 的散列时，可以读取属性。就像 [name]属性可能值得考虑使用人类可读的 [id]对于这些情况。

---

_{*一个定义为意义的词，这使得讨论它自己的意义……困难且相当元}