miChecker：『:before擬似要素を用いてコンテンツが挿入されています。装飾目的でないコンテンツが挿入されていないか確認してください。』

技術コラムAMCC,miChecker

検出理由

::before疑似要素を用いてコンテンツが挿入されている場合「問題の可能性大」として指摘される項目です。

実際、これが問題であることは多く、検出された場合は注意して確認し、必要に応じて対処する必要があります。
例えば次のように指定されていたとします。

p.good:before { content: "大正解: " }
p.bad:before { content: "不正解: " }

これを次のようにして用いたとします。

コードの例

<p class="good">
 <q>::before疑似要素を使って追加されたコンテンツはスクリーンリーダーの読み上げ対象にならない場合があるので注意が必要である。</q>
</p>
<p class="bad">
 <q>::before疑似要素を使って追加されたコンテンツはスクリーンリーダーの読み上げ対象になるので、何の配慮もなく使用して構わない。</q>
</p>

これで、それぞれの文章の前に「大正解:」と「不正解:」が表示されますが、スクリーンリーダーはこれを読み上げ無い可能性があります。

根拠

この手法によるコンテンツの追加は大変便利ですが、スクリーンリーダーによっては対応していないと考えて下さい。つまり、期待しているような表示はされず、音声化されることもありません。

修正方針

残念ながら根本的な修正方法はありません。これを重要な項目には利用しないことしかできません。

例えば、隠しテキストで対処する方法が考えられますが、それであれば、疑似要素は使わずに普通に表示すれば良いことになります。よって、疑似要素は、視覚的に見て操作しているに向けて、補助的なものとして何か情報を提供するときに使用は限るようにしてください。あるいは、装飾的なものに限ってください。

補足

（なし）

関連する達成基準、達成方法

(他のテクニックは「miChecker対策テクニック集」に整理されています。)

2021年9月18日