HTML 中“隐藏”和“aria-hidden”属性之间的区别

在HTML中，我们经常需要将元素隐藏起来，使其在页面上不可见。HTML中有两个常用的属性可以实现隐藏效果，分别是“隐藏”（display: none;）和“aria-hidden”（aria-hidden="true"）。然而，它们在功能和用途上有着不同的区别。

1. “隐藏”属性（display: none;）

“隐藏”属性是一种CSS属性，用于完全从页面中隐藏一个元素。当元素应用了此属性时，它将不会占据任何空间，并且不可见，无论在页面上还是在DOM中都无法访问到。

使用方法：

element {
   display: none;
}

优点：

• 彻底隐藏元素，不占据空间，保持页面布局的稳定性。
• 适用于需要在JavaScript中通过修改CSS来切换显示状态的场景。

缺点：

• 元素隐藏后无法通过键盘导航或屏幕阅读器等辅助工具获得焦点或访问。

2. “aria-hidden”属性（aria-hidden="true"）

“aria-hidden”属性是一种用于辅助技术（如屏幕阅读器）的HTML属性，用于指示某个元素在辅助技术设备中是否可见。这个属性的主要作用是为了提供对隐藏内容的可访问性支持。

使用方法：

<element aria-hidden="true">Hidden content</element>

优点：

• 提供对辅助技术设备的支持，使屏幕阅读器能够理解隐藏的内容。
• 隐藏内容仍然占据空间，可用于保持布局的一致性。

缺点：

• 并不是所有浏览器和辅助技术都支持aria-hidden属性。

总结

• display: none;是一种用于CSS中的隐藏属性，将元素完全从页面上移除，不占据空间，但无法通过辅助技术访问。
• aria-hidden="true"是一种用于HTML的辅助技术属性，用于隐藏元素并提供对辅助技术设备的支持，但仍然占用空间，保持页面布局的一致性。
• 根据实际需求，我们可以灵活地选择使用不同的隐藏方法。

请注意，以上内容仅适用于默认语义化HTML元素。对于已被修改过的或自定义的元素，可能需要额外的CSS和JavaScript来实现隐藏效果。