html - 使用占位符代替标签

Question

在可访问性方面，通常不使用占位符代替标签，因为在字段中输入内容后，占位符会消失。但是，如果我的占位符之后充当视觉标签怎么办？

在这种情况下只使用占位符代替实际标签是否仍然可以？如果是这样，我还需要用 aria-label 标记它吗？

Answer 1

我不建议使用 placeholder属性或其他容器代替 <label>元素。

正如您所描述的，这不是“视觉标签”的问题。 <label>元素与 <input> 相关联以编程方式在数据级元素。

<label for="middle-initial">Middle Initial</label>
<input id="middle-initial">

placeholder属性对屏幕阅读器本质上是不可见的，因此可以与 <label> 结合使用, 但是它不应该用来代替 <label> .

如果您真的不喜欢 <label> 的视觉外观在您的页面上，您可以position the text off screen using CSS ，或者如果您当前正在使用 Bootstrap ，则可以使用 .sr-only类。