html - 字体大小是否可以设置为 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 */
}

这样就可以了。