Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。

Alt text for generated content

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

アクセシビリティ生成コンテンツ

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.content.alt_text
77
79
128
17.4
77
17.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.icon::before {
  content: url('star.svg') / 'Favorites';
}
.decorative::before {
  content: url('divider.svg') / '';
}

ライブデモ

meaning. existsalternativetext

CSS meaning. existsalternativetext demo.

プレビュー全画面表示

decorationuse(empty. alternative)

CSS decorationuse(empty. alternative) demo.

プレビュー全画面表示

icon＋alternativetext

CSS icon＋alternativetext demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

  • ブラウザのサポート状況にばらつきがあるため、重要な情報はHTMLの属性（aria-label等）でも提供することを推奨します。

アクセシビリティ

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

参考リンク