1

我在一家网络机构工作，最近有一个小问题，找不到答案。一位设计师给了我一个带有表格的 PSD 文件，表格中没有标签，只有占位符。上次我有这个时，我直接使用 HTML5 占位符属性（旧浏览器的 javascript 后备）。然而，后来我读了很多，并意识到大多数人都说你必须在表单中有标签才能访问。因此，我想知道同时拥有两者的最佳方式是什么：标签和占位符的可访问性，而无需将标签放入设计师给我的“最小”设计中。我应该将它们隐藏在具有绝对定位或类似位置的屏幕阅读器的可见性中吗？这是我必须做的图片示例（只是为了让您清楚地了解上下文）。

你可以看到一个例子在此处输入图像描述

4

2 回答 2

3

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

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

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

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

这是每个文本输入的示例。

如果可能的话，我建议尝试调整设计以在视觉上包含标签。许多消息来源将引用专门使用占位符文本的负面影响。

于 2013-07-20T15:27:53.917 回答
-3

你可以简单地使用display: none;

于 2013-07-18T22:33:23.743 回答