Question

    <div class="searchWrap">
        <label for="SearchBox">Search Scirra</label>
        <input type="text" name="SearchBox" id="SearchBox" tabindex="1" />
        <div class="s searchIco"></div>
    </div>

我的标签样式是display：none，这可以吗？
此外，标签仍然使用，它们是否重要？这是我第一次看到HTML标签，但我正在研究新网站的可访问性。

修改

快速问题，这个当然的主要原因是为了帮助不幸的人，但是这些东西对SEO也有帮助吗，因为网络爬虫也基本上是盲目的？

Answer 1

仍然使用label元素，我希望它保持这种状态（残障人士特别感谢他们）。

输入元素和label之间清晰的语义联系允许屏幕阅读器清楚地指示用户应该向哪些输入输入哪些信息。

关于它的display: none，我不确定是否仍会阅读。如果没有，您可以尝试text-indent: -9999px。

Fangs是一个很好的屏幕阅读器模拟器来测试它。它需要FireFox。

关于辅助功能主题，您可以将该输入转换为HTML5 search input。

支持它的浏览器会在语义上确切地知道它是什么，因为它无法从class / id / label /等推断它。

更新

我正在尝试使用它作为屏幕阅读器的描述符我不希望我的常规访问者看到它，因为searchwrap中的任何文本都会减少页面样式。

您可以使用HTML5 placeholder属性，这将在元素中显示一些文本，描述它的作用（在这种情况下搜索）。它没有被广泛支持，但是有一些JavaScript可以模仿它（我写了jQuery plugin来做它。）

最后一件事是，我喜欢在我的CSS中添加label { cursor: pointer }以帮助用户知道它是可点击的（对于复选框和单选框非常有用）。

Answer 2

必须谨慎使用

display: none; - 当以这种方式从DOM中删除元素时，在您专门设置要再次显示的元素之前，辅助软件无法访问该信息。对于某些辅助软件，visibility: hidden;表现出相同的行为，即隐藏的内容不会被软件读出。

如果您希望隐藏对屏幕阅读器有用的内容，text-indent:-999px;或position:absolute;left:-999px;已知相当安全，尽管我听说有{{1}的边缘情况技术可能会导致问题。最近，clip CSS property has been suggested as a solution。

另外，我想要注意，position:absolute;中<input>的{{1}}包含隐式标记已经known to cause issues in some screen reader software。显式标记（使用<label>和for属性）更强大，如果您决定重新排列HTML，则不会中断。如果您担心向后兼容性，IE 6及以下版本不会执行“单击标签以聚焦输入”行为，除非您使用显式标记。

编辑：我忘了提及使用id元素上的title属性标记表单输入以替换<input>元素是有效的，这将避免需要完全隐藏标签。更多信息：Title Attributes as Form Control Labels。

Answer 3

如果您要隐藏Average访问者的内容，但希望那些具有更高可访问性的内容需要能够看到它，您可以在标准CSS上使标签显示为none，然后使用{{1}根据需要使特定的CSS可见。

CSS: Media

Web可访问性 - 标签

3 个答案:

更新