无障碍生成的内容

Web 功能： 内容 为生成的内容添加替代文本
  • 请勿使用 content 传达有意义的文本（标签、状态、说明），请将其保留在 DOM 中 (WCAG F87)。替代文本参数是为了在装饰性元素意外传达了某种含义时减少负面影响，而不是一种许可。
  • 使用 content 的替代文本参数为屏幕阅读器提供替代文本。例如 content: url(cloud.svg) / "Save";
  • 使用 content: "text" / ""; 可防止屏幕阅读器朗读纯装饰性文本。
  • 请勿为图片使用空的替代文本参数，因为图片默认已具有展示性。例如，以下做法是错误的：content: url(cloud.svg) / "";。
  • 请勿使用替代文本参数来描述表情符号，除非描述与官方表情符号名称不同。例如，请勿使用 content: "🎉" / "celebration";，但可以使用 content: "🎉" / "Yay!";。

仅在文本与主要值不同且尚未出现在 DOM 中时，才使用替代文本参数。例如，以下做法是错误的：

HTML：

<button class="save">Save</button>

CSS：

button.save::before {
  content: url(cloud.svg) / "Save";
}

屏幕阅读器会将其读作“保存保存”。