我目前正在为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]
。
*一个词的定义是意义,这使得讨论本身的意义…困难且相当元
不,永远不会。
如果您将自己置于id
或class
对用户可见的情况下,那么您可能做错了什么,或者您试图获得不自然的代码透明度(例如,这可能适用于教室的情况)。
class
和id
属性只是用于编程目的。它们应该遵循您为自己设置的命名约定,并从程序员的角度尽可能有意义。