アクセシビリティにおける強調要素（strong・em）の使い分け
こんにちは。ネットソリューション事業部の高田です。
ウェブアクセシビリティにおいて、強調を表現する際は強調要素を使用したマークアップが必要になります。
今回は強調要素のstrong要素とem要素の使い分けについて調査したいと思います。
strong要素
strong要素はテキストの「強い重要性」を伝える際に使用する要素です。情報の優先度が高く、緊急性があることを表現します。見た目は太字で表示されます。
例えば「エラーメッセージを確認してください」のような、エラーや警告メッセージなどの情報がstrong要素に適します。また、strong要素で囲む範囲によって文章の意味が変わる場合はstrong要素を使用するのは不適切です。その場合はem要素使うことになります。
em要素
em要素はテキストの「強調」を伝える際に使用する要素です。文脈の中で注目させたい部分を表現します。見た目はイタリックで表示されます。
例えば「明日の天気は雨です。」のような文章に対して、雨が降ることを強調したい場合はem要素で「雨」を囲む使い方が適します。
また、em要素は使用箇所を変えることで文脈のアクセントを変更できます。上記の例文で明日の話であることを強調したい場合は「明日」にem要素を使用することになります。
その他、暗黙的または明示的な対比を表す際にもよく使用されます。例えば「週末は晴れたのに、今日は雨だ。」という文章は暗黙的な対比で、「晴れ」と「雨」にem要素を使用することで対比を強調して表します。
strong要素とem要素の違い
まず大きな違いとして、見た目が異なります。視覚的にどちらを使用するか決めたくなるかもしれませんが、セマンティックなマークアップをする上では文章の意味にあった要素を選択する必要があります。
CSSで見た目を調整することも可能のため文字色を変更したり、イタリック表示を別の表現に変更することもできます。特にイタリック表示は強調表現と分かりにくい印象があるためCSSで調整をしたほうがより良いと思います。
本質的な違いとしては、strong要素の方がより強い重要性を伝えることができ、em要素は文章の一部を強調して文自体の意味を変えることができる違いがあります。
strong要素とem要素の使い分け
調査の結果、strong要素は警告メッセージなどに使用すること、em要素は文の目的に合わせて強調したい部分に使用したり、対比表現のために使用することが適切であると分かりました。
強調要素を使う際は上記の使い分けを理解した上で、文章の意味や目的に合わせてどちらを使用するか検討する必要があります。
要素を適切に使用することで支援技術にも強調していることを伝えられるようになるので、文脈に応じたセマンティックなマークアップを心掛けていきたいです。
参考リンク
関連サービス
@Frencel_ns お問い合わせ
ご覧いただきありがとうございます。
当メディアへのご質問や各事業部へのお仕事のご相談がありましたら、お気軽にお問い合わせください。
WCAG解説書とにらめっこの日々を過ごしています。