使用占位符代替标签

Question

在可访问性方面，通常不建议使用占位符作为标签的替代品，因为一旦在字段中输入内容，占位符就会消失。但是，如果我的占位符在输入后充当视觉标签呢？

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

- Poov Fwv Novlwv Lis

Answer 1

我不建议使用占位符属性或其他容器来代替元素。

这不是一个"视觉标签"的问题，正如你所描述的那样。 元素在数据级别上与元素相关联。

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

"

placeholder 属性对于屏幕阅读器来说基本上是不可见的，因此可以与 <label> 一起使用，但不应将其用作 <label> 的替代品。

如果您真的不喜欢在页面上显示 <label> 的视觉外观，则可以 使用 CSS 将文本定位到屏幕外，或者如果您正在使用 bootstrap，则可以使用 .sr-only 类。

"

- Josh

---

可以在输入框中添加不可见的aria-label标签，以便屏幕阅读器进行阅读。例如，在WebStorm中，这将消除警告，否则会提示需要添加标签。 - Arthur Khazbs

@ArthurKhazbs - 取决于谁审查或批准您的工作，您可能可以通过此方法，但使用真正的“标签”无疑更好。使用aria-label意味着您还需要为有视力的用户提供可视标签。这会导致两个标签不同步，如果其中一个更新而另一个没有更新。此外，请记住ARIA的第一条规则：https://www.w3.org/TR/using-aria/#firstrule - Josh