CSS内容生成（Generated Content）的可访问性：`content`属性中的Alt文本支持 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

CSS 内容生成的可访问性：`content` 属性中的 Alt 文本支持

大家好，今天我们来深入探讨 CSS 内容生成，特别是 content 属性，以及它在可访问性方面的考虑，尤其是关于 content 属性中“Alt 文本”的支持。严格来说，content 属性本身并不直接支持像 <img> 标签那样的 alt 属性。但我们可以通过一些技巧和最佳实践，尽可能地提高使用 content 生成的内容的可访问性。

什么是 CSS 内容生成？

CSS 内容生成是指使用 CSS 的 ::before 和 ::after 伪元素，配合 content 属性，在 DOM 结构之外“生成”内容。这些内容可以包括文本、图像、甚至是更复杂的元素。

例如：

.my-element::before {
  content: "这是前置内容";
}

.my-element::after {
  content: url("image.png");
}

在上面的例子中，.my-element 元素的前面会添加文本 "这是前置内容"，后面会添加 image.png 图片。需要注意的是，通过 content 生成的内容不会出现在 DOM 中，因此屏幕阅读器等辅助技术默认情况下可能无法访问这些内容。

`content` 属性的用法

content 属性可以接受多种类型的值，包括：

字符串： content: "文本内容";
URL： content: url("image.png");
计数器： content: counter(my-counter);
属性值： content: attr(data-value);
none： content: none; (隐藏生成的内容)
normal： content: normal; (默认为空)

这些值可以组合使用，创建更复杂的内容。

可访问性挑战

使用 content 生成内容时，主要的可访问性挑战在于：

屏幕阅读器默认忽略： 由于生成的内容不在 DOM 中，屏幕阅读器可能不会读取这些内容。
语义缺失： 生成的内容没有固有的语义信息，难以被辅助技术理解。
键盘导航问题： 生成的内容无法通过键盘导航访问。

如何提高 `content` 生成内容的可访问性？

虽然 content 属性本身没有直接的 alt 属性，但我们可以使用以下方法来提高其可访问性：

1. 使用 ARIA 属性

ARIA (Accessible Rich Internet Applications) 属性可以为 HTML 元素添加语义信息，从而帮助辅助技术理解页面内容。我们可以将 ARIA 属性添加到与 ::before 或 ::after 伪元素相关的元素上，来描述生成的内容。

例如，如果 content 生成的图片是一个装饰性图像，可以使用 aria-hidden="true" 属性将其隐藏：

<div class="decorative-image" aria-hidden="true"></div>

<style>
.decorative-image::before {
  content: url("decorative.png");
  display: block; /* 重要：确保伪元素可见 */
}
</style>

如果 content 生成的内容包含重要的信息，可以使用 aria-label 或 aria-labelledby 属性提供替代文本：

<a href="#" class="icon-link" aria-label="下载文件">下载</a>

<style>
.icon-link::before {
  content: url("download-icon.png");
  display: inline-block; /* 重要：确保伪元素可见 */
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 5px;
}
</style>

在这个例子中，屏幕阅读器会读取 "下载文件"，即使 download-icon.png 是通过 content 生成的。

2. 使用 `title` 属性

title 属性可以为元素提供工具提示文本，当鼠标悬停在元素上时显示。虽然 title 属性主要用于鼠标用户，但一些屏幕阅读器也会读取 title 属性的内容。

<span class="info-icon" title="更多信息"></span>

<style>
.info-icon::before {
  content: url("info-icon.png");
  display: inline-block; /* 重要：确保伪元素可见 */
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
</style>

需要注意的是，title 属性不应该作为唯一的替代文本来源，因为它对键盘用户和触摸设备用户不可见。

3. 使用隐藏的文本

可以使用 CSS 将文本内容隐藏起来，但仍然让屏幕阅读器可以访问。这可以通过 clip 或 clip-path 属性实现，或者使用 position: absolute; 和 left: -9999px; 将文本移出屏幕。

<span class="visually-hidden">下载文件</span>
<a href="#" class="icon-link">
  <span class="visually-hidden">下载文件</span>
</a>

<style>
.icon-link::before {
  content: url("download-icon.png");
  display: inline-block; /* 重要：确保伪元素可见 */
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 5px;
}

.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;
  white-space: nowrap !important;
  border: 0 !important;
}
</style>

在这个例子中，visually-hidden 类会隐藏文本 "下载文件"，但屏幕阅读器仍然会读取它。这种方法通常与图标字体或 SVG 图标结合使用，提供可访问的替代文本。

4. 避免使用 `content` 生成重要的内容

最简单也是最有效的策略是，尽可能避免使用 content 生成包含重要信息的内容。如果内容是必不可少的，最好将其直接添加到 DOM 中，并使用适当的 HTML 标签和属性来保证其可访问性。

例如，与其使用 content 生成一个链接的文本标签，不如直接使用 <a> 标签：

不推荐：

<span class="link-wrapper"></span>

<style>
.link-wrapper::before {
  content: "点击这里";
}
</style>

推荐：

<a href="#">点击这里</a>

5. 使用 `attr()` 函数获取属性值

content 属性可以使用 attr() 函数来获取元素的属性值。这可以用于显示元素的 alt 属性或 title 属性。

<img src="image.png" alt="图像描述" data-description="更详细的描述">

<style>
img::after {
  content: " (图片描述: " attr(alt) ")"; /* 或者 content: " (图片描述: " attr(data-description) ")"; */
}
</style>

在这个例子中，<img> 元素后面会显示 "(图片描述: 图像描述)"。需要注意的是，这种方法主要用于调试或显示额外的信息，而不是作为 alt 属性的替代品。

6. 使用 JavaScript 增强可访问性

可以使用 JavaScript 来动态地向 content 生成的内容添加 ARIA 属性或替代文本。例如，可以在页面加载完成后，遍历所有使用了 content 生成图片的元素，并添加相应的 aria-label 属性。

document.addEventListener("DOMContentLoaded", function() {
  const elements = document.querySelectorAll(".icon-link");

  elements.forEach(element => {
    const icon = window.getComputedStyle(element, '::before').getPropertyValue('content');
    if (icon.includes("url(download-icon.png)")) {
      element.setAttribute("aria-label", "下载文件");
    }
  });
});

这个 JavaScript 代码会在页面加载完成后，查找所有带有 .icon-link 类的元素，如果它们的 ::before 伪元素的内容包含 download-icon.png，则会添加 aria-label="下载文件" 属性。

7. 使用 CSS Houdini (未来方向)

CSS Houdini 是一组底层 API，允许开发者扩展 CSS 的功能。未来，可以使用 CSS Houdini 创建自定义的属性和值类型，从而实现更高级的可访问性控制。例如，可以创建一个自定义的 alt 属性，用于描述 content 生成的图片，并让屏幕阅读器可以访问这个属性。然而，目前 CSS Houdini 的兼容性还不是很好，需要谨慎使用。

示例：不同场景下的可访问性方案

下面是一些具体场景下，如何提高 content 生成内容可访问性的示例：

场景 1：装饰性图标

元素	CSS	可访问性方案
`<span>`	`css .icon::before { content: url("decorative-icon.png"); display: inline-block; width: 20px; height: 20px; }` \| 添加 `aria-hidden="true"` 属性到 `<span>` 元素： `<span class="icon" aria-hidden="true"></span>` 这会告诉屏幕阅读器忽略该元素及其内容。

场景 2：带有文本标签的图标按钮

| 元素 | CSS

场景 3：使用计数器生成序号

元素	CSS	可访问性方案
`<ol><li>`	`css ol { counter-reset: my-counter; } li::before { counter-increment: my-counter; content: counter(my-counter) ". "; }` \| 可以使用 `aria-posinset` 和 `aria-setsize` 属性来指示列表中每个元素的序号和总数： `<ol aria-label="步骤"> <li aria-posinset="1" aria-setsize="3">第一步</li> <li aria-posinset="2" aria-setsize="3">第二步</li> <li aria-posinset="3" aria-setsize="3">第三步</li> </ol>` 这使得屏幕阅读器可以更准确地读取列表的信息。

测试和验证

在实施了这些可访问性方案后，需要进行测试和验证，以确保它们能够正常工作。可以使用以下工具和方法：

屏幕阅读器： 使用 NVDA、JAWS 或 VoiceOver 等屏幕阅读器测试页面，确保生成的内容可以被正确读取。
可访问性检查工具： 使用 WAVE、 axe 或 Lighthouse 等可访问性检查工具扫描页面，查找潜在的问题。
手动测试： 使用键盘导航测试页面，确保可以访问所有交互元素。
用户测试： 让残疾用户参与测试，收集他们的反馈意见。

总结与建议

content 属性是一个强大的 CSS 工具，可以用于生成各种类型的内容。然而，在使用 content 生成内容时，必须考虑到可访问性问题，并采取适当的措施来提高其可访问性。虽然 content 本身没有直接的 alt 属性，但我们可以通过使用 ARIA 属性、 title 属性、隐藏的文本、JavaScript 等方法来提供替代文本和语义信息，从而使生成的内容对所有用户都可访问。最佳实践是尽可能避免使用 content 生成重要的内容，而是将其直接添加到 DOM 中，并使用适当的 HTML 标签和属性。

请记住，可访问性是一个持续的过程，需要不断地测试、评估和改进。通过遵循这些指导原则，可以确保你的网站或应用程序对所有用户都是可用的。

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

CSS 内容生成的可访问性：content 属性中的 Alt 文本支持

什么是 CSS 内容生成？

content 属性的用法