如何在设计时只使用占位符在线时正确使用标签

Question

我在一家网络代理公司工作，最近我遇到了一个小问题但找不到答案。设计师给了我一个PSD文件，表单中没有标签的表单，只有占位符。上次我有这个，我直接使用HTML5占位符属性（使用旧浏览器的javascript后备）。然而，我读了很多，并意识到大多数人都说你必须在形式上有可访问性的标签。因此，我想知道两者兼顾的最佳方法是什么：标签的可访问性和占位符，而没有标签进入设计师给我的“最小”设计。我是否应该将它们隐藏在仅为屏幕阅读器隐藏的可见性中，具有绝对定位或类似的东西？这是我必须做的图片示例（只是让你清楚地了解上下文）。这是法语，但我相信你仍然能理解我的意思！

您可以看到

的示例

Answer 1

基于steveax的评论和链接，有几种方法可以实现。由于标签本身没有交互性，您可以执行类似

的操作

label {
  height: 1px;
  text-indent: -1000px;
  overflow: hidden;
}

另一种选择是WebAIM提到的更全面的隐藏技术，即

.hidden {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

Here is an example每个文本输入。

如果有可能，我建议尝试将设计调整为视觉上包含标签。 number的sources会引用使用占位符文字negative的exclusively效果。

Answer 2

您只需使用display: none;

即可