我有一个带有许多文本框的 HTML 页面。我必须为可访问性目的标记它们。但是,我不希望标签可见。这可能吗?或者,还有其他设计方案吗?
6 回答
有多种方法可以将文本放在页面中,并将其隐藏给视觉用户,而屏幕阅读器用户可以访问(例如高负文本缩进)。
然而,“可访问性”并不是“使用网络没有问题的人”和“盲人”之间的界限。有很多人不属于这两个群体,作者太容易也太普遍忘记可访问性不仅仅是为看不见的人提供内容。
使用 display:none 对此不好,我支持关于为什么要隐藏所有标签的查询 - 您可能使用一些标签来通知用户 textarea 包含的内容,所以只需将其标记为相应的标签和样式。
如果您仍想隐藏标签,最好将其放置在屏幕外。最近在 456 Berea Street 博客上对此进行了总结。
标签的重点是描述输入的目的,有点像给它一个标题。如果您不使用标签,您的视力正常的用户将如何知道要在输入中输入什么?
任何给视力正常的用户提供视觉线索的东西也应该是辅助技术用户的标签。
如前所述,最好为所有输入元素设置一个可见标签——这将有助于有视力和无视力的用户。话虽如此,在某些情况下这是不可行的,我猜你的情况属于这种情况。对于这些情况,您有几个选择。
第一种是使用“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 的用户也会看到标签,这也很优雅。
无论您使用什么,我绝对建议您从Freedom Scientific下载JAWS的试用版并测试您的解决方案。
带水印的文本框呢?
例如http://www.asp.net/AJAX/AjaxControlToolkit/Samples/TextBoxWatermark/TextBoxWatermark.aspx
试试 CSS:
label {
display: none;
}
确保仅将此样式表应用于“屏幕”媒体:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />