CSS生成コンテンツに対する代替テキストの指定
エグゼクティブ・フェロー 木達7月23日(米国時間)にリリースが予定されているGoogle Chrome 127では、CSS生成コンテンツに対する代替テキストの指定が拡張されます。Chrome 127 beta | Blog | Chrome for DevelopersのMulti-argument alt text in CSS generated contentの項目にありますように、
.has-before-content::before {
content: url("cat.jpg") / "A cute " attr(data-animal);
}
といった感じで、指定する代替テキストにattr()
関数を含めることができるようになります(Multi-argument alt text in CSS Generated Content - Chrome Platform Status参照)。これはCSS Generated Content Module Level 3の1.2. Alternative Text for Accessibilityに基づくものですが、Chrome 127ではcounter()
関数は代替テキストに含めることができないようです。
ちなみにCSS関数を含まないものであれば、Google Chromeは2019年9月リリースのバージョン77からCSS生成コンテンツに対する代替テキストの指定をサポートしていました(Alternative Text in CSS Generated Content - Chrome Platform Status参照)。また、今年に入ってからの比較的新しい話として、Safariがバージョン17.4でサポートしています(WebKit Features in Safari 17.4 | WebKit)。
もっともChromeやSafariが代替テキストをサポートしているからといって、有意な画像を積極的にCSS生成コンテンツとして表示させるべきではないでしょう。より広範なブラウザおよび支援技術がサポートするまでは慎重になるべきですし、そもそも何らかの理由でCSSが読み込まれない時点で、代替テキストはおろか画像そのものが表示されなくなるわけですから、基本的に避けるべき実装と私は考えます。
何らかの事情で有意な画像をimg
要素などで実装できない、有意な画像を表示させるためのDOM操作が難しいといった状況において、最後の手段として頼るべき実装ではないでしょうか。英文ですが、以下の記事も参考に採否を検討されると良いのではと思います。