使用占位符代替标签

Question

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

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

Answer 1

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

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

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

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

如果您真的不喜欢在<label>页面上显示的视觉外观，则可以使用 CSS 将文本置于屏幕外，或者如果您当前正在使用引导程序，则可以使用.sr-only该类。