CSS display:none vs visibility:hidden vs text-indent:9999 屏幕阅读器对每个的行为是怎样的

在本文中，我们将介绍CSS中的三个属性：display:none、visibility:hidden和text-indent:9999，并探讨屏幕阅读器在使用这些属性时的行为。这些属性都被用于隐藏或隐藏元素，但它们在阅读器中的表现方式有所不同。

阅读更多：CSS 教程

display:none

display:none是一种CSS属性，可以隐藏元素并使其在页面上不可见。这意味着元素在渲染后不会占用空间，不能被键盘或鼠标触发，并且屏幕阅读器也无法读取该元素的内容。

在以下示例中，我们有一个按钮元素，初始状态下display属性设置为none：

<button style="display:none;">Click me</button>

当屏幕阅读器访问该页面时，它会完全忽略此按钮，因为它被设置为不可见。

visibility:hidden也是一种CSS属性，可以隐藏元素但仍在页面上占据空间。这意味着元素不可见，但仍然可以通过键盘或鼠标进行交互，并且屏幕阅读器可以读取该元素的内容。

以下示例中，我们再次使用按钮元素，但这次将visibility属性设置为hidden：

<button style="visibility:hidden;">Click me</button>

在这种情况下，屏幕阅读器可以读取该按钮的内容，但用户在页面上看不到该按钮。虽然按钮仍占用空间，但用户无法通过点击它触发任何事件。

text-indent:9999同样可以隐藏元素，但与display:none和visibility:hidden不同，它是通过将元素的文本缩进到极大值来实现的。由于元素的文本被缩进，因此元素不可见，但仍然可以通过键盘或鼠标进行交互，并且屏幕阅读器可以读取该元素的内容。

在下面的示例中，我们使用CSS属性text-indent:9999隐藏一个段落元素：

<p style="text-indent:9999;">This text is indent to hide it.</p>

屏幕阅读器将能够读取该段落的内容，用户可以通过键盘或鼠标与该段落进行交互，但页面上的文本仍然无法看到。

总的来说，display:none完全隐藏了元素，包括对屏幕阅读器的可访问性。visibility:hidden只是隐藏了元素，但保留了对屏幕阅读器的可访问性。text-indent:9999也隐藏了元素，但仍然可访问。

在本文中，我们介绍了CSS中的三个属性：display:none、visibility:hidden和text-indent:9999，并讨论了屏幕阅读器在使用这些属性时的行为。

在编写网页时，我们应根据具体情况选择适当的属性来隐藏元素，并考虑其对可访问性的影响。这样可以确保我们的页面在不同的使用环境中都能提供良好的用户体验。