Web可访问性 - 标签

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输入.

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

更新

我试图将它用作屏幕阅读器的描述符我不希望我的常规访问者看到它,因为searchwrap中的任何文本都会从页面样式中减去.

您可以使用HTML5 placeholder属性,这将在元素内显示一些文本,描述它的作用(在这种情况下搜索).它没有得到广泛的支持,但有一些JavaScript模仿它(我编写了一个jQuery插件来实现它).

最后一件事是,我喜欢label { cursor: pointer }在我的CSS中帮助用户知道它是可点击的(对于复选框和单选框非常有用).