html - 如果我没有一个元素可以搭配元素？

Question

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

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

是否必须编写一些文本以将其放入label元素中以包含它只是为了使我的 HTML 可访问？还是有其他方法可以使单个<input type="email">元素可访问？

标签： htmlwebaccessibility

Answer 1

标签用于识别输入。它不必是一个聪明的名字，它可以直接说“电子邮件”或“电子邮件地址”。

有标签有几个原因：-

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

对于您的用例，它很简单

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

或者

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

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

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

相反，您可以使用 CSS 在视觉上隐藏标签，因为这将在所有浏览器中返回 IE6（甚至在纯文本浏览器上）。

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

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

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<label for="emailAddress" class="visually-hidden">Email</label>
    <input id="emailAddress" placeholder="email address"/>

占位符文本

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

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

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