Question

我有一个包含许多文本框的HTML页面。我必须将它们标记为可访问性目的。但是，我不希望标签可见。是否可能？或者，还有其他设计方案吗？

Answer 1

有多种方法可以将文本放入页面，并在屏幕阅读器用户可以访问时将其隐藏给可视用户（例如高负文本缩进）。

然而，“可访问性”不是“使用网络没有问题的人”和“盲人”之间的界限。很多人都不适合这两个群体，对于作者而言，忘记可访问性更多是为了让那些看不见的人能够获得内容，这太容易而且太普遍了。

Answer 2

使用display：none对此有害，我支持查询为什么要隐藏所有标签 - 可能会有一些标签用于通知用户textarea要包含的内容，所以只需标记相应的标签和风格。

如果您仍想隐藏标签，请将其放在屏幕外更好。最近有summary of this at the 456 Berea Street blog。

Answer 3

标签的要点是描述输入的目的，有点像给它一个标题。如果您不使用标签，您的视力用户将如何知道输入内容？

无论给视力正常的用户提供视觉线索，也应该成为辅助技术用户的标签。

Answer 4

水印文本框怎么样？

Answer 5

尝试CSS：

label {
    display: none;
}

确保仅将此样式表应用于“屏幕”媒体：

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Answer 6

如上所述，对所有输入元素都有一个可见标签总是更好 - 这将有助于有视力和无视力的用户。话虽如此，在某些情况下，这是不可行的，我猜你的情况属于这种情况。对于这些情况，您有几种选择。

第一个是使用“title”属性，它具有为有视力的用户显示工具提示的额外好处：

<input type="text" title="first name" />

其他几个人提到了第二个选项，它涉及使用CSS将标签放在屏幕上：

<label for="first_name" 
  style="position:absolute;left:-1000px;width:1px;overflow:hidden;" />
<input type="text" id="first_name" />

与使用“display：none”不同，屏幕阅读器仍然会读取标签。选择禁用CSS的用户也会看到标签，这也很优雅。

无论你使用什么，我绝对推荐来自downloading a trial copy的Freedom Scientific JAWS并测试你的解决方案。