如果我没有与输入元素搭配的标签元素该怎么办？

Question

我读过，始终包含一个<label>元素和一个<input type="email">元素是一种可访问性最佳实践，但是如果我没有要label包含在我的<input>元素中的元素怎么办？

我的意思是，目前，我正在设计一个网站，实际上没有任何文本可以放入<label>元素中（所以我根本没有创建一个），但我真的不知道该怎么做，因为我的 HTML 正在生成当我通过网络可访问性检查器运行它时出现可访问性错误。

是否必须编写一些文本并将其放入label元素中才能包含它，以便使我的 HTML 易于访问？或者还有其他方法可以使单个<input type="email">元素可访问吗？

Answer 1

标签用于识别输入。它不一定是一个聪明的名字，它可以字面意思是“电子邮件”或“电子邮件地址”。

使用标签有几个原因：-

屏幕阅读器用户需要某种方式来识别输入，如果没有标签，他们只会听到“输入”，这没有你想象的那么有用！
患有焦虑症的人受益于可见的标签，这样他们就可以确定自己填写了正确的字段。否则，他们可能会陷入填写字段的循环中，担心自己弄错了，删除文本以查看占位符文本（假设您有该文本），然后再次填写。
准确度较差的人会获得更大的点击目标。如果标签与输入正确关联，则您可以单击该标签来聚焦输入。

对于您的用例来说，它很简单

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

或者

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

我总是看到没有标签或只有占位符的表单，他们是如何做到的？

您可以使用 WAI-ARIA（aria-label例如）向输入添加标签。不过我要提醒你不要这样做，因为支持率并不是 100%。

相反，您可以使用 CSS 直观地隐藏标签，因为这可以在所有浏览器（直到 IE6）中工作（甚至在纯文本浏览器上）。

然而，由于上述原因 2 和 3，也不建议这样做。我将其包含在内是为了完整性（以及在搜索框中使用，可以接受没有可见标签）。

为了清楚起见，请使用可见标签，从可访问性和清晰度的角度来看，其好处是值得的。

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

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

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

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

如何隐藏标签的示例仅应在特殊情况下使用（我能想到的两个是网站搜索输入，可能还有只需要电子邮件地址的电子邮件注册表单，即使这样也取决于其他因素和标签）会更好）。