html - 如果我没有 元素和 <input type ="email"> 元素，我该怎么办？

Question

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

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

必须编写一些文本才能放入 label元素包含它只是为了使我的 HTML 易于访问？或者有其他方法可以单独制作 <input type="email">元素可访问？

Answer 1

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

使用标签有几个原因:-

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

对于您的用例，它很简单

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

或者

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

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

您可以使用 WAI-ARIA(例如 aria-label)向输入添加标签。我会 caution you against this though as support is not 100%.

相反，您可以 visually hide the label using 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"/>

占位符文本

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

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

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