字体大小可以设置为0px以隐藏标签,并且仍然可以被屏幕阅读器读取

Question

我需要实现一个带有占位符文本且没有可见标签的表单,但仍然可以让无视力的用户访问它.在标签上设置text-indent -9999px会隐藏它们,但会为表单添加额外的空间.有没有理由不将字体大小设置为0px？它仍然可以被屏幕阅读器读取吗？

Answer 1

我的建议:

.magic-text {
    color:transparent;
    font-size:0;
}

这将正确隐藏您的文字; font-size本身应该足够了,但有些浏览器的行为不同,所以我们在那些浏览器中使它变得透明(不可见).对于那些没有被字体大小说服的浏览器,选择可能会显示你的文字但是付出的代价非常低; 也可以通过本地禁用选择来避免.如果它不是一个选项,您仍然可以使用z-index和相对(甚至绝对)定位来隐藏文本:

.magic-text {
    position:relative;
    z-index:-99;  /* or just -1, whatever */
}

这样就可以了.

Answer 2

从我在相关文章中读到的内容来看，当您将字体大小设置为 时，屏幕阅读器应该没有问题0px。Rob 在他的文章中使用了网站上的以下代码作为实例。

#go { background: url(images/go.jpg); height: 25px; width: 41px; font-size: 0px; border:0; }