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

我在一家网络公司工作，最近我有一个小问题，找不到答案。一位设计师给了我一个PSD文件，其中的表单中没有标签，只有占位符。上一次，我使用了HTML5占位符属性，并为旧浏览器提供了javascript回退。然而，后来我读了很多书，意识到大多数人都在说，为了便于访问，你们必须在形式上有标签。因此，我想知道什么是同时拥有这两种功能的最佳方式：标签和占位符的可访问性，而不必将标签放入设计师给我的最小设计中。我应该把它们放在只为屏幕阅读器而隐藏的可视性中，以绝对定位还是类似的方式？这是一个图片示例，我必须做些什么，以便您清楚地理解上下文。它是用法语写的，但我相信你仍然能理解我的意思

---

您可以看到一个示例，您可以简单地使用display:none

基于steveax的评论和链接，有几种方法可以实现它。由于标签本身没有交互性，因此可以执行以下操作

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

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

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

在文本输入上的每个

---

如果可能的话，我会建议尝试调整设计，使其在视觉上也包含标签。of将引用使用占位符文本的效果。

如果我使用display none，它没有可访问性属性，因为即使大多数读者都看不到它，用户也看不到它，所以它只是无用的代码。用户将看到占位符或你所说的javascript代码。是的，但对于可访问性问题，对于盲人或有眼睛问题的人来说，标签帮助他们很多使用formsIf隐藏你的意思是。使用负文本缩进或剪辑进行视觉隐藏，然后可能；如果您的意思是可见性：隐藏或显示：无，那么出于相同的原因，请选择“否”。您正在从屏幕阅读器中删除标签：也许他们不会更新并保留标签中的原始文本，也许他们会，哦！现在已经没有标签了。至少这不是很可靠，也不是未来的证明，但现在它可能已经在部分或所有屏幕阅读器中失败了。这可能会有所帮助：在法语中，Accessue Web已经为不同的配置文件编写了4个文档。第一个是为网页设计师，发送您的同事或客户此链接；或者您可以在内部使用的检查表中使用它，许可证由CC-BY提供