なんとなく強調するために使われているっぽいstrong要素、em要素、b要素、mark要素の使い分けについて整理し、アクセシビリティ的にどうなのかというところを簡単にまとめてみました。なお、HTML5になってこれらの要素の定義が変更されたようですので、今回はHTML5の仕様に基づいてまとめます。
テキストに対する意味付けをする要素
HTML5タグリファレンスを参照して整理しますと以下の通りになります。
strong要素
重要性を表します。
em要素
強調を表します。重要性を伝える意味はありません。
b要素
他のテキストと視覚的に区別させたいときに使用します。重要性や強調は意味しません。太字で表示されることが多いですが、太字で表示されるとは限りません。
mark要素(HTML5の新要素)
特定の範囲をハイライトします。他の箇所である箇所を言及した場合にそのある箇所を目立たせる場合に使用されます。重要性や強調は意味しません
strong要素とem要素の違い
strong要素が意味するところの重要性とem要素が意味するところの強調の違いが分かりづらいですね。以下のHTML5.JPで公開されているhtml5doctorの翻訳でその違いが詳しく紹介されていますが、アクセントを置くのはそこが重要だからではないかという気もしまして、個人的にはその使い分けが完全にはよくわかっていません。重要だからアクセントを置くならばstrong要素を、重要ではないがアクセントを置くならem要素をとなるのでしょうか。ケースバイケースで判断するところもあるのだと思います。
参考
支援技術でのサポート
strong要素とem要素はテキストにそれぞれ重要性と強調の意味を持たせることができますので、支援技術が対応していれば、プログラムがその意味を理解し、ユーザーに伝えることができます。
残念ながら現時点でこの両要素に対応するものはほとんど存在しないようですが、重要性や強調を表現する場合は、将来の支援技術の対応に備えるために、また、テキストにセマンティクスを与えるためにもstrong要素やem要素を使用するべきです。
参考
- G115: セマンティックな要素を用いて、構造をマークアップする|WCAG 2.0 実装方法集
- H49: セマンティックなマークアップを用いて、強調又は特別なテキストをマークアップする|WCAG 2.0 実装方法集
- アクセシビリティ・サポーテッド(AS)情報:H049-1 セマンティックなマークアップを用いて、強調又は特別なテキストをマークアップする
WCAG2.0(JIS X8341-3:2010)上では?
W3CのウェブアクセシビリティガイドラインであるWCAG2.0では、「1.3.1 情報及び関係性」が今回のエントリに係る要件になります(JIS X8341-3:2010では、7.1.3.1)。
1.3.1 情報及び関係性
表現を通じて伝達されている情報、 構造、及び関係性は、プログラムが解釈可能である。プログラムが解釈可能にすることができないウェブコンテンツ技術を用いる場合は、それらがテキストで提供されている。 (レベルA)
参考:達成基準 1.3.1 を理解する | WCAG 2.0解説書
関連エントリ
ウェブアクセシビリティガイドラインについて
代替テキスト
- アクセシビリティに配慮した代替テキストの話
- ウェブコンテンツで「非テキストコンテンツと同等の目的を果たす代替テキスト」を提供しなくてもよいもの
- アクセシビリティに配慮した顔文字、ASCIIアートの代替テキストの提供