【CSS Modules】speak-asアットルール記述子の使い方

speak-asプロパティは、CSSの@counter-styleルールにおいて、カスタムカウンターの音声読み上げ方法に関する設定値を保持するプロパティです。このプロパティは、ウェブサイトやアプリケーションの内容を読み上げるスクリーンリーダーなどの音声読み上げソフトウェアが、リストのマーカーや独自に定義されたカウンターの値をどのように読み上げるべきかを指定するために使用されます。これにより、視覚に障がいを持つユーザーを含むすべての利用者が、情報をより正確に理解できるよう、ウェブコンテンツのアクセシビリティを向上させることができます。

speak-asプロパティには、複数のキーワード値を設定できます。例えば、「auto」はブラウザのデフォルト設定に従い、通常は数字として読み上げられます。「bullets」は、箇条書きの記号を「bullet」という単語として読み上げるように指示します。「numbers」は、カウンターの値を通常の数字として読み上げ、「words」は数字を「one」「two」のような個別の単語として読み上げます。また、「spell-out」を設定すると、カウンターの各文字や数字を一つずつ読み上げるように指定できます。「none」を設定した場合は、そのカウンターの値を音声読み上げソフトウェアが完全に無視し、読み上げないように制御します。

このプロパティを適切に活用することで、開発者はカスタムカウンターの表示だけでなく、その音声による表現まで細かく制御できるようになります。これは、標準のリストスタイルでは対応できない独自のカウンターを定義する際に、その音声表現も考慮することで、より包括的で使いやすいユーザー体験を提供するために非常に重要です。

Copy
1@counter-style custom-numeric {
2  system: cyclic;
3  symbols: "一" "二" "三";
4  speak-as: numbers;
5}

引数なし

引数はありません

戻り値なし

戻り値はありません