标签"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

如果你有<label>一个<input>带[for]属性链接到[id]输入的,请问[id]有真正意味着什么？

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

在[id]与[class]属性不增加语义.在可能的情况下仍然使用描述性ID和类非常重要,但这只是为了使开发更容易.

它读了吗？

不,据我所知,该[id]属性永远不会通过网站的正常操作直接读给用户.请参阅下面有关文档片段标识符的说明.

或者它只是链接他们？

它告诉标签,该标签<input>(或<select>或<textarea>......)标签是标签,并且还提供了一些用户界面功能,如被点击的标签,窃听,或以其他方式触发移动焦点到相关的输入.

当标记元素被聚焦时,浏览器将知道告诉屏幕阅读器读取与该元素相关联的标签.

[name]属性怎么样？

在<form>屏幕中,读者不会读取[name]属性,因为它不表示任何语义,但对于GET请求,该[name]属性将用作查询字符串中的键.可以向用户读取查询字符串,因此值得考虑使用人类可读[name]而不是自动生成的内容.

文档片段标识符怎么样？

如果您在使用计划[id],以<a>nchor下来的页面,那么价值[id]属性可能是当它成为URL的哈希读取.就像[name]属性一样,在[id]这些情况下使用人类可读的值得考虑.

_{*一个词的定义是有意义的,这使得讨论它自己的意义......困难和相当元}