可访问性隐藏：`.visually-hidden` 类的剪裁技术与对屏幕阅读器的保留

可访问性隐藏：.visually-hidden 类的剪裁技术与对屏幕阅读器的保留

大家好，今天我们深入探讨一个前端开发中至关重要但常常被忽视的领域：可访问性隐藏，特别是围绕 .visually-hidden 类的剪裁技术及其对屏幕阅读器的影响。理解并正确应用这些技术，对于构建包容性的 Web 应用至关重要。

什么是可访问性隐藏？

可访问性隐藏是指在视觉上隐藏某个元素，但仍然让屏幕阅读器能够访问它。这在多种情况下都非常有用，例如：

• 提供额外的上下文信息： 屏幕阅读器用户可能需要比视觉用户更多的上下文信息来理解页面内容。
• 提供替代文本： 对于纯视觉元素（例如装饰性图片），我们可以提供替代文本，让屏幕阅读器用户了解其目的。
• 隐藏重复内容： 为了改善视觉布局，某些内容可能会在页面上重复出现。为了避免屏幕阅读器用户听到重复的内容，我们可以隐藏重复的部分。
• 键盘导航增强： 为了改善键盘用户的体验，可能需要隐藏一些视觉元素，但仍然让它们可以被键盘访问。

为什么要正确实现可访问性隐藏？

错误地实现可访问性隐藏可能会对屏幕阅读器用户造成严重的负面影响，例如：

• 隐藏关键信息： 如果错误地隐藏了重要的内容，屏幕阅读器用户将无法访问这些信息。
• 创建“死胡同”： 如果屏幕阅读器用户遇到一个视觉上隐藏的元素，并且无法与之交互，他们可能会陷入“死胡同”，无法继续浏览页面。
• 造成混乱： 如果屏幕阅读器用户听到不必要的或重复的内容，可能会感到困惑。

.visually-hidden 类的常见实现方式及其优缺点

.visually-hidden 类通常用于实现可访问性隐藏。下面是一些常见的实现方式及其优缺点：

1. display: none; 和 visibility: hidden;

这是最直接的隐藏元素的方式。

• 代码示例：

  .visually-hidden {
    display: none;
  }
  
  /* 或者 */
  
  .visually-hidden {
    visibility: hidden;
  }

• 优点： 简单易懂。

• 缺点： 这两种方式都会将元素完全从文档流中移除，包括屏幕阅读器。因此，它们不应该用于可访问性隐藏。

2. position: absolute; 和 clip: rect(); (或 clip-path)

这种方法将元素定位到屏幕之外，并使用 clip 属性将其剪裁掉。

• 代码示例：

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%); /* 兼容性更好的方案 */
    border: 0;
  }

• 优点： 兼容性好，被广泛使用。

• 缺点： 需要设置多个属性，容易出错。clip: rect() 语法比较陈旧，clip-path 的兼容性需要考虑。

3. width: 0; height: 0; 和 overflow: hidden;

这种方法将元素的尺寸设置为零，并使用 overflow: hidden; 隐藏其内容。

• 代码示例：

  .visually-hidden {
    width: 0;
    height: 0;
    overflow: hidden;
  }

• 优点： 简单。

• 缺点： 有些屏幕阅读器可能无法正确识别。而且，如果元素内部有 margin 或 padding，可能会导致元素仍然可见。

4. opacity: 0;

这种方法将元素的透明度设置为零，使其在视觉上不可见。

• 代码示例：

  .visually-hidden {
    opacity: 0;
  }

• 优点： 简单。

• 缺点： 元素仍然占据空间，并且可以被鼠标悬停和点击。屏幕阅读器仍然可以访问，但在交互方面可能会出现问题。不建议使用，除非有特殊的需求。

5. transform: scale(0);

这种方法将元素的缩放比例设置为零，使其在视觉上不可见。

• 代码示例：

  .visually-hidden {
    transform: scale(0);
  }

• 优点： 简单。

• 缺点： 元素仍然占据空间，并且可以被鼠标悬停和点击。屏幕阅读器仍然可以访问，但在交互方面可能会出现问题。不建议使用，除非有特殊的需求。

总结表格：

方法	display: none; / visibility: hidden;	position: absolute; clip: rect(); / clip-path	width: 0; height: 0; overflow: hidden;	opacity: 0;	transform: scale(0);
屏幕阅读器访问	否	是	可能存在问题	是	是
元素占据空间	否	否	否	是	是
可交互性	否	否	否	是	是
兼容性	高	高	中	高	高
推荐使用场景	不适用	推荐	谨慎使用	不推荐	不推荐

最佳实践：.visually-hidden 的推荐实现

综合考虑兼容性、可靠性和易用性，我推荐使用以下 CSS 类来实现可访问性隐藏：

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.visually-hidden-focusable:focus,
.visually-hidden-focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  margin: 0 !important;
}

解释：

• position: absolute !important;: 将元素从文档流中移除，防止影响布局。!important 确保这个样式能够覆盖其他样式。
• width: 1px !important; height: 1px !important;: 将元素的大小设置为非常小的值。!important 确保这个样式能够覆盖其他样式。
• padding: 0 !important; margin: -1px !important;: 移除元素周围的内边距和外边距，进一步缩小元素。!important 确保这个样式能够覆盖其他样式。
• overflow: hidden !important;: 隐藏元素的内容。!important 确保这个样式能够覆盖其他样式。
• clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important;: 使用 clip 属性将元素剪裁掉。clip-path 提供更好的兼容性。!important 确保这个样式能够覆盖其他样式。
• border: 0 !important;: 移除边框。!important 确保这个样式能够覆盖其他样式。
• white-space: nowrap !important;: 强制文本不换行，防止文本内容影响布局。!important 确保这个样式能够覆盖其他样式。

.visually-hidden-focusable 类：

这个类用于确保元素在获得焦点时变得可见，以便键盘用户可以与之交互。

• :focus 和 :active 伪类： 当元素获得焦点或被激活时，应用以下样式。
• position: static !important;: 将元素恢复到正常的文档流中。!important 确保这个样式能够覆盖其他样式。
• width: auto !important; height: auto !important;: 将元素的尺寸恢复到自动。!important 确保这个样式能够覆盖其他样式。
• overflow: visible !important;: 显示元素的内容。!important 确保这个样式能够覆盖其他样式。
• clip: auto !important; clip-path: none !important;: 移除剪裁。!important 确保这个样式能够覆盖其他样式。
• margin: 0 !important;: 移除外边距。!important 确保这个样式能够覆盖其他样式。

使用示例：

<button class="my-button">
  <span class="visually-hidden">点击此处</span>
  <i aria-hidden="true" class="fa fa-download"></i>
</button>

<a href="#" class="visually-hidden-focusable">Skip to main content</a>

代码解释：

• 在第一个例子中，.visually-hidden 类用于隐藏按钮中的文本标签，但仍然让屏幕阅读器用户知道按钮的功能。aria-hidden="true" 属性用于防止屏幕阅读器读取图标。
• 在第二个例子中，.visually-hidden-focusable 类用于创建一个“跳过到主要内容”的链接，该链接在页面加载时是隐藏的，但在键盘用户按下 Tab 键时会变得可见。

为什么使用 !important?

在 .visually-hidden 类中使用 !important 的目的是为了确保这些样式能够覆盖其他可能应用于该元素的样式。 在实际开发中，元素可能会被赋予其他的样式，这些样式可能会干扰 .visually-hidden 类的效果，例如，可能会覆盖 width 和 height 属性，导致元素仍然可见。 使用 !important 可以提高 .visually-hidden 类的可靠性，确保它能够始终按照预期工作。

虽然过度使用 !important 不是一个好的实践，但在这种情况下，为了确保可访问性，使用 !important 是可以接受的。 关键在于理解为什么使用 !important，并确保只在必要时使用它。

ARIA 属性在可访问性隐藏中的作用

ARIA (Accessible Rich Internet Applications) 属性可以用来增强 HTML 的语义，并为屏幕阅读器提供更多的信息。在可访问性隐藏中，ARIA 属性可以用来：

• 提供替代文本： 使用 aria-label 或 aria-labelledby 属性为隐藏的元素提供替代文本。
• 指示元素的目的： 使用 aria-describedby 属性来描述隐藏元素的目的。
• 隐藏元素： 使用 aria-hidden="true" 属性来防止屏幕阅读器读取元素。

示例：

<img src="decorative-image.png" alt="" aria-hidden="true">

<button>
  <i class="fa fa-download"></i>
  <span class="visually-hidden" id="download-label">Download</span>
</button>

代码解释：

• 在第一个例子中，aria-hidden="true" 属性用于防止屏幕阅读器读取装饰性图片。
• 在第二个例子中，aria-labelledby 属性用于将按钮的文本标签与按钮本身关联起来，以便屏幕阅读器用户知道按钮的功能。

测试可访问性隐藏

测试可访问性隐藏至关重要，以确保它能够按照预期工作。可以使用以下方法进行测试：

• 使用屏幕阅读器： 使用屏幕阅读器（例如 NVDA、JAWS 或 VoiceOver）浏览页面，并确保隐藏的元素能够被正确读取。
• 使用可访问性工具： 使用可访问性工具（例如 WAVE 或 Axe）扫描页面，并检查是否存在可访问性问题。
• 进行用户测试： 让屏幕阅读器用户测试页面，并收集他们的反馈。

常见错误和陷阱

• 过度使用可访问性隐藏： 只在必要时使用可访问性隐藏。不要隐藏重要的内容。
• 隐藏交互元素： 避免隐藏交互元素（例如链接和按钮），除非它们在获得焦点时变得可见。
• 忘记测试： 务必测试可访问性隐藏，以确保它能够按照预期工作。
• 忽略 aria-hidden： 对于纯视觉元素，务必使用 aria-hidden="true" 属性。
• 使用错误的隐藏方法： 避免使用 display: none; 和 visibility: hidden; 来实现可访问性隐藏。

案例分析

假设我们需要创建一个带有图标的按钮，并且我们希望为屏幕阅读器用户提供额外的上下文信息。

错误的做法：

<button>
  <i class="fa fa-download"></i>
  Download
</button>

在这种情况下，屏幕阅读器用户只会听到“Download”，而不会知道按钮的作用。

正确的做法：

<button>
  <i class="fa fa-download" aria-hidden="true"></i>
  <span class="visually-hidden">Download</span>
  Download file
</button>

在这种情况下，屏幕阅读器用户会听到“Download file”，而视觉用户只会看到图标和文本“Download”。aria-hidden="true" 属性用于防止屏幕阅读器读取图标。

总结

正确实现可访问性隐藏是构建包容性 Web 应用的关键。理解不同的隐藏方法及其优缺点，并遵循最佳实践，可以确保屏幕阅读器用户能够访问所有必要的信息，并获得良好的用户体验。记住，测试是至关重要的，要使用屏幕阅读器和可访问性工具来验证你的实现。务必关注ARIA属性的正确运用，避免常见的错误和陷阱，才能真正地提升Web应用的可访问性。

更多IT精英技术系列讲座，到智猿学院