标签"for"和输入"id"



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

我的问题是,如果<input><label>具有[for]属性,链接到输入的[id],那么[id]实际上必须是的意思吗?它读了吗?还是只是为了把它们联系起来?

例如。

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

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

这些在屏幕阅读器上会有相同或不同的结果吗?

如果<input><label>具有[for]属性,链接到输入的[id],那么[id]实际上一定有意义吗?

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

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

它读了吗?

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

还是只是为了把它们联系起来?

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

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


[name]属性如何?

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


文档片段标识符呢?

如果您计划在页面下方使用[id]<a>,那么当[id]属性的值成为URL的哈希时,可能会读取该值。就像使用[name]属性一样,对于这些情况,可能值得考虑使用人类可读的[id]


*一个词的定义是意义,这使得讨论本身的意义…困难且相当元

不,永远不会。

如果您将自己置于idclass对用户可见的情况下,那么您可能做错了什么,或者您试图获得不自然的代码透明度(例如,这可能适用于教室的情况)。

classid属性只是用于编程目的。它们应该遵循您为自己设置的命名约定,并从程序员的角度尽可能有意义。

最新更新