Alt text for generated content

概要

::before や ::after で挿入したアイコンや装飾に対して、スクリーンリーダー向けの代替テキストを設定できます。これにより、装飾的な生成コンテンツにはアクセシブルな名前を付けたり、逆に空文字で非表示にしたりできます。アクセシブルなUIを構築する上で重要な機能です。

対応ブラウザ

基本構文

.icon::before {
  content: url('star.svg') / 'お気に入り';
}
.decorative::before {
  content: url('divider.svg') / '';
}

実務での使いどころ

• アイコンフォントやSVGへの代替テキスト付与

  CSSで挿入したアイコンにスクリーンリーダー用のラベルを設定し、視覚障害のあるユーザーにも情報を伝えられます。

注意点

アクセシビリティ

• 装飾的な生成コンテンツには content: url(...) / '' のように空文字を指定し、スクリーンリーダーが不要な情報を読み上げないようにしてください。

参考リンク

• MDN Web Docs — Alt text for generated content