使用占位符代替标签

【问题标题】：Using placeholder instead of label使用占位符代替标签
【发布时间】：2018-03-08 18:38:56
【问题描述】：

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

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

【问题讨论】：

【解决方案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，或者如果您当前正在使用引导程序，则可以使用 .sr-only 类。

【讨论】：