こんにちは、株式会社ナレッジワークの@nakajmgです。
今回はChrome 127 betaの機能紹介を見て「こんなのあったの？」となった、擬似要素に代替テキストをつける機能について紹介します。
/で区切って代替テキストが指定できる
::beforeや::afterのcontentプロパティは、/区切りで代替テキストが指定できます。
.icon-star::before {
content: "⭐️" / "Favorite";
}
ここで指定した代替テキストはDevToolsのAccessibility TreeでStaticTextとして認識されることが確認できます。
この機能自体はChromeの77から実装されていたようです。
Chrome 127からattr()でattributeの値が参照できるようになる
contentで直接代替テキストを指定する以外の方法として、attr()関数によってHTML上のattributeの値を参照できるようになります。
例えば次のように指定することで、CSSに記述する静的な値ではなく、classを使う側で動的に指定できます。
<span class="icon-star" data-alt="Favorite"></span>
<style>
.icon-star::before {
content: "⭐️" / attr(data-alt);
}
</style>
動的に指定できるメリット
アイコンがどういう意味を持つかはコンテキストによって変わるものなので、使う側で動的に指定できることでより適切な代替テキストを指定できます（指定しないことも）。
たとえば、同じ星のアイコンを使う場合でも、次のように異なる意味であることを伝えられます。
<span class="icon-star" data-alt="Rating"></span>
実装状況
CSS property: content: Alternative text after
/| Can I use... Support tables for HTML5, CSS3, etc
（執筆時点で）Firefoxは128から、iOS Safariは17.5の段階で静的・動的（attr()）のどちらも擬似要素が表示されるのが確認できました。
ただしAccessibility Tree上での扱いはブラウザごとに差異があるようで、iOS SafariのWeb Inspectorでは無視される要素として認識されていました。
実装と挙動が揃えば、擬似要素のアクセシビリティや扱い方に選択肢が出てきそうです。
参考
株式会社ナレッジワークの開発者（エンジニア、デザイナー、PdM）向けの記事やEncraftという開発者向けイベントの開催レポートなどを公開しています。 イベント：http://knowledgework.connpass.com コーポレートX：@kworkcom
Discussion