CSS display: none 与 visibility: hidden 对 AOM 的影响：无障碍树中的移除差异
大家好，今天我们来深入探讨 CSS 中 display: none 和 visibility: hidden 这两个属性对 Accessibility Object Model (AOM) 的影响，特别是它们在无障碍树中移除元素的方式差异。理解这些差异对于构建真正具有良好可访问性的 Web 应用至关重要。
什么是 AOM？
在深入研究 display: none 和 visibility: hidden 之前，我们需要先了解什么是 AOM。AOM (Accessibility Object Model) 是浏览器提供的一种 API，它暴露了页面的语义结构，使辅助技术（如屏幕阅读器）能够理解并与 Web 内容交互。
简单来说，AOM 是 DOM (Document Object Model) 的一个平行模型，但它专注于可访问性。AOM 树包含了 DOM 树中所有具有可访问性意义的元素，并为每个元素提供了可访问性属性和角色。辅助技术会读取 AOM 树来了解页面结构、元素之间的关系以及元素的语义含义。
display: none：彻底移除
display: none 属性从渲染树和无障碍树中彻底移除元素。这意味着，该元素及其所有子元素将不会被渲染到屏幕上，也不会出现在 AOM 树中。对于辅助技术来说，该元素就像不存在一样。
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>display: none Example</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<p>This is some visible text.</p>
<div class="hidden">
<p>This text is hidden with display: none.</p>
</div>
<p>This is more visible text.</p>
</body>
</html>在这个例子中，class="hidden" 的 <div> 及其包含的段落将不会被渲染，也不会出现在 AOM 树中。屏幕阅读器将跳过这些内容，直接从 "This is some visible text." 跳转到 "This is more visible text."。
AOM 树的简化表示（未应用 CSS）：
Document
|- Heading (level=1): Main Heading
|- Paragraph: This is some visible text.
|- Div
| |- Paragraph: This text is hidden with display: none.
|- Paragraph: This is more visible text.AOM 树的简化表示（应用 CSS）：
Document
|- Heading (level=1): Main Heading
|- Paragraph: This is some visible text.
|- Paragraph: This is more visible text.可以看到，应用 display: none 后，<div> 及其子元素完全从 AOM 树中消失了。
visibility: hidden：保留空间，隐藏内容
visibility: hidden 属性隐藏元素的内容，但保留元素在页面布局中的空间。这意味着，元素仍然会占据其原本的空间，但不会被渲染到屏幕上。更重要的是，该元素及其子元素 仍然存在于 AOM 树中，尽管它们可能被标记为 "hidden"。
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>visibility: hidden Example</title>
<style>
.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<p>This is some visible text.</p>
<div class="hidden">
<p>This text is hidden with visibility: hidden.</p>
</div>
<p>This is more visible text.</p>
</body>
</html>在这个例子中，class="hidden" 的 <div> 及其包含的段落虽然在视觉上不可见，但仍然占据着页面上的空间。屏幕阅读器可能会识别出该 <div> (如果它有可访问性角色或属性) 并将其报告为隐藏的。具体行为取决于辅助技术和浏览器。
AOM 树的简化表示（未应用 CSS）：
Document
|- Heading (level=1): Main Heading
|- Paragraph: This is some visible text.
|- Div
| |- Paragraph: This text is hidden with visibility: hidden.
|- Paragraph: This is more visible text.AOM 树的简化表示（应用 CSS）：
Document
|- Heading (level=1): Main Heading
|- Paragraph: This is some visible text.
|- Div (hidden=true)
| |- Paragraph (hidden=true): This text is hidden with visibility: hidden.
|- Paragraph: This is more visible text.可以看到，应用 visibility: hidden 后，<div> 及其子元素仍然存在于 AOM 树中，但它们被标记为 hidden=true。辅助技术可以访问这些元素，并根据需要采取相应的措施（例如，跳过或报告它们）。
关键差异总结
| 特性 | display: none |
visibility: hidden |
|---|---|---|
| 可见性 | 完全不可见 | 不可见，但占据空间 |
| 布局影响 | 从布局中移除 | 保留在布局中，占据空间 |
| AOM 树 | 从 AOM 树中移除 | 保留在 AOM 树中，可能标记为 "hidden" |
| 辅助技术 | 完全忽略 | 可能识别为隐藏的，具体行为取决于辅助技术和浏览器 |
| 对 focusable 元素的影响 | focusable 元素无法 focus | focusable 元素仍然可以 focus (但不可见)，行为不一致，应避免 |
| 内容可读性 | 内容无法被屏幕阅读器读取 | 内容理论上可以被屏幕阅读器读取，但通常会被忽略或标记 |
| JavaScript 操作 | 无法通过 JavaScript 获取元素的尺寸和位置信息 | 可以通过 JavaScript 获取元素的尺寸和位置信息 |
何时使用 display: none？
- 完全移除元素： 当你需要完全从页面中移除元素及其所有子元素，并且不希望它们出现在 AOM 树中时，使用
display: none。例如，隐藏不相关的辅助信息、在响应式设计中移除某些元素等。 - 性能优化： 由于
display: none彻底移除了元素，浏览器不需要渲染或维护这些元素，因此可以提高性能。
何时使用 visibility: hidden？
- 隐藏内容，但保留空间： 当你需要隐藏元素的内容，但保留其在页面布局中的空间时，使用
visibility: hidden。例如，在动画过渡期间隐藏元素，或者在需要保留页面布局不变的情况下临时隐藏某些内容。 - 避免重新布局： 由于
visibility: hidden不会改变页面布局，因此可以避免重新布局带来的性能开销。 - 控制元素显示状态： 在某些情况下，你可能希望通过 JavaScript 来动态地改变元素的
visibility属性，以实现某些特定的交互效果。
重要注意事项
- 不要滥用
visibility: hidden： 虽然visibility: hidden可以保留元素在 AOM 树中的存在，但过度使用它可能会导致辅助技术用户感到困惑，因为他们可能会遇到一些隐藏的元素，这些元素没有实际的意义或功能。 - ARIA 属性： 在某些情况下，你可能需要使用 ARIA 属性来进一步说明隐藏元素的目的和含义。例如，你可以使用
aria-hidden="true"来明确地告诉辅助技术忽略该元素。但是，通常情况下，display: none才是更好的选择，因为它更彻底地移除了元素。 - 动态内容： 当使用 JavaScript 动态地改变元素的显示状态时，请务必考虑可访问性。确保在显示或隐藏元素时，使用适当的 ARIA 属性来更新 AOM 树，并通知辅助技术用户。
- focusable 元素：
visibility: hidden会导致一个潜在的问题，即 focusable 元素（例如按钮、链接、输入框）仍然可以被 focus，即使它们在视觉上是隐藏的。这会导致用户体验非常糟糕，因为用户可能会在页面上 "盲目地" 移动焦点。因此，强烈建议避免使用visibility: hidden来隐藏 focusable 元素。如果需要隐藏 focusable 元素，请使用display: none，或者使用 JavaScript 来禁用 focusable 元素（例如，设置disabled="disabled"属性）。 - 屏幕阅读器兼容性： 不同的屏幕阅读器对
visibility: hidden的处理方式可能略有不同。有些屏幕阅读器可能会完全忽略隐藏的元素，而有些屏幕阅读器可能会将其报告为 "hidden"。因此，在实际开发中，你需要进行充分的测试，以确保你的 Web 应用在各种屏幕阅读器上都能正常工作。
最佳实践
- 优先使用
display: none： 在大多数情况下，display: none是隐藏元素的最佳选择，因为它彻底移除了元素，避免了辅助技术用户感到困惑。 - 谨慎使用
visibility: hidden： 只有在需要保留元素在页面布局中的空间，并且确定不会对可访问性造成负面影响时，才使用visibility: hidden。 - 使用 ARIA 属性： 在必要时，使用 ARIA 属性来进一步说明隐藏元素的目的和含义。
- 进行可访问性测试： 使用屏幕阅读器等辅助技术来测试你的 Web 应用，确保其具有良好的可访问性。
- 避免隐藏 focusable 元素： 不要使用
visibility: hidden来隐藏 focusable 元素。如果需要隐藏 focusable 元素，请使用display: none，或者使用 JavaScript 来禁用 focusable 元素。 - 结合 JavaScript 使用： 当使用 JavaScript 动态地改变元素的显示状态时，请务必考虑可访问性，并使用适当的 ARIA 属性来更新 AOM 树。
- 利用
clip-path和opacity实现隐藏效果: 在某些场景下，可以使用clip-path: inset(100%);或opacity: 0;来隐藏元素，它们与visibility: hidden类似，会保留元素在布局中的空间。但它们对 AOM 的影响也与visibility: hidden类似，都需要谨慎使用，特别是涉及到 focusable 元素时。
代码示例：动态切换显示状态
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Display Example</title>
<style>
.hidden {
display: none; /* 或者 visibility: hidden; */
}
</style>
</head>
<body>
<button id="toggleButton">Toggle Content</button>
<div id="content">
<p>This is some content that can be toggled.</p>
</div>
<script>
const toggleButton = document.getElementById('toggleButton');
const content = document.getElementById('content');
toggleButton.addEventListener('click', () => {
if (content.classList.contains('hidden')) {
content.classList.remove('hidden');
toggleButton.textContent = 'Hide Content';
} else {
content.classList.add('hidden');
toggleButton.textContent = 'Show Content';
}
});
</script>
</body>
</html>在这个例子中，点击 "Toggle Content" 按钮会动态地切换 <div> 的 display 属性（或者 visibility 属性，但需要注意 focusable 元素的问题）。请注意，在实际开发中，你可能需要使用 ARIA 属性来进一步说明切换行为，例如使用 aria-expanded 属性来指示内容是否展开。
表格总结：选择合适的隐藏方式
| 场景 | 推荐的隐藏方式 | 注意事项 |
|---|---|---|
| 需要完全移除元素，不保留空间，不影响 AOM | display: none |
无 |
| 需要隐藏元素，但保留空间 | visibility: hidden |
避免隐藏 focusable 元素，谨慎使用，确保不会对可访问性造成负面影响，考虑使用 ARIA 属性来进一步说明隐藏元素的目的和含义，进行充分的可访问性测试。 |
| 需要隐藏元素，但保留空间 (特定场景) | clip-path, opacity |
与 visibility: hidden 类似，避免隐藏 focusable 元素，谨慎使用，确保不会对可访问性造成负面影响，考虑使用 ARIA 属性，进行充分的可访问性测试。 |
| 动态切换显示状态 | display: none 或 visibility: hidden (谨慎) |
使用 JavaScript 来控制，考虑使用 ARIA 属性来更新 AOM 树，避免隐藏 focusable 元素，进行充分的可访问性测试。 |
| 隐藏用于装饰的元素 | display: none |
确保这些元素不包含任何重要的信息或功能。 |
谨慎选择，确保可访问性
总的来说，display: none 和 visibility: hidden 都是用于隐藏元素的 CSS 属性，但它们对 AOM 的影响截然不同。理解这些差异对于构建具有良好可访问性的 Web 应用至关重要。在实际开发中，你需要根据具体的场景和需求，谨慎选择合适的隐藏方式，并进行充分的可访问性测试，以确保你的 Web 应用能够为所有用户提供良好的体验。
深入理解是关键
深入理解 display: none 和 visibility: hidden 的差异，以及它们对 AOM 的影响，是构建具有良好可访问性的 Web 应用的基础。选择合适的隐藏方式，并结合 ARIA 属性和 JavaScript，可以有效地提高 Web 应用的可访问性，为所有用户提供更好的体验。
更多IT精英技术系列讲座，到智猿学院