html 如果没有label元素与input元素一起使用,该怎么办?

g0czyy6m  于 2023-03-06  发布在  其他
关注(0)|答案(1)|浏览(151)

我读到过这样的文章:总是在<input type="email">元素沿着包含<label>元素是一种可访问性最佳实践,但是如果没有label元素要包含在<input>元素中,该怎么办?
我的意思是,目前,我正在设计一个网站,它实际上没有任何文本可以放入<label>元素(所以我根本没有创建一个),但我真的不知道该怎么做,因为我的HTML在通过Web可访问性检查器运行时生成了一个可访问性错误。
是否必须创建一些文本并将其放入label元素中,以使HTML可访问?或者是否有其他方法使单个<input type="email">元素可访问?

ecfdbz9o

ecfdbz9o1#

标签是用来识别输入的,它不一定是一个聪明的名字,它可以字面上只是说"电子邮件"或"电子邮件地址"。
有几个原因有一个标签:-
1.屏幕阅读器用户需要某种识别输入的方法,如果没有标签,他们只会听到"输入",这并不像你想象的那样有用!
1.焦虑症患者最好有一个可见的标签,这样他们就能确信自己填对了,否则他们就会陷入这样一个循环:先填一个字段,担心填错了,然后删除文本,看到你的占位符文本(假设你有),再重新填一遍。
1.准确性差的人会得到更大的点击目标。如果一个标签与一个输入正确关联,那么你可以点击那个标签来聚焦输入。
对于您的使用情形,它非常简单

<label for="emailAddress">Email</label>
<input id="emailAddress" />

或者

<label>
Email
<input/>
</label>

我总是看到没有标签或只有占位符的表单,它们是如何做到的?

您可以使用WAI-ARIA(例如aria-label)向输入添加标签。
相反,你可以visually hide the label using CSS,因为这将在所有浏览器回到IE6(甚至在纯文本浏览器)。
然而,由于上面的原因2和3,这也是不建议的。我已经包括了它的完整性(并用于搜索框中,没有可见标签是可以接受的)。

    • 为清晰起见,请使用可见标签,从可访问性和清晰度Angular 来看,这样做是值得的。**

一个二个一个一个

占位符文本

占位符文本应用于示例输入或预期输入的解释。

    • 不要使用占位符代替标签**。此方法存在各种可访问性问题。

如何隐藏标签的例子应该只在特殊情况下使用(我能想到的两个是网站搜索输入和可能的电子邮件注册表,只需要一个电子邮件地址,即使这样,它取决于其他因素和标签会更好)。

相关问题