無障礙生成內容

網頁功能： 內容 生成內容的替代文字
  • 請勿使用 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";
}

螢幕閱讀器會讀出「儲存儲存」。