無障礙生成內容

  • 請勿使用 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";
}

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