要約
強調を適切に用いると、ユーザーはキーワードと純粋にスタイル的な装飾を音声の強調によって区別できるようになります。
テクニック
- 強調されたテキストがユーザーにとって重要な情報(例:声の強勢、キーワード)を伝える場合は、
em
やstrong
などのセマンティックマークアップを使用します。[[WCAG-1.3.1]] - 強調や太字を純粋にスタイル上使用する場合は CSS を使用します。[[WCAG-1.3.1]]
HTML 5では、em
、strong
、i
、b
要素のより正確な使用方法が定義されていることに注意してください (以下の説明表を参照)。 WCAG 2.0に準拠するためにこれらのルールに従う必要はありませんが、ベストプラクティスとして考慮してください。このセクションの例は、これらのガイドラインに従っています。
例
em
の使用<p>
… There was nothing so <em>very</em> remarkable
in that; nor did Alice think it so <em>very</em>
much out of the way to hear the Rabbit say to
itself, <q>Oh dear! Oh dear! I shall be
late!</q> …
</p>
<p>
… 'Really this is what is meant by the Fourth
Dimension, though some people who talk about the
Fourth Dimension do not know they mean it. It is
only another way of looking at Time. <em>There
is no difference between Time and any of the
three dimensions of Space except that our
consciousness moves along it</em>. …
</p>
strong
の使用<p>
<strong>Warning</strong>, all features should
be considered unstable …
</p>
<p>
<strong>Do not feed the bears!</strong>
</p>
i
要素の使用<p>
When hybrids are able to breed <i>inter se</i>,
they transmit …
</p>
<p>
Among the sea-shells, the most abundant was the
<i>Patella deaurat</i> …
</p>
解説
太字と斜体には、強調する点、トーンや場所の変更、特別な名前など、テキストに関連するさまざまな情報が含まれます。ただし、正しいセマンティックタグを用いてこの書式設定を適用しないと、同じ情報を視覚障害のあるユーザーに伝えることはできません。
次の表は、太字と斜体にさまざまな HTML5 および CSS メソッドを適用する方法を示しています。
要素/プロパティ | 目的 |
---|---|
em |
em 要素は、テキストが音声的に強調されることを示します。 |
strong |
strong 要素は重要さを示し、命令文を述べるときや、「警告」や「警戒」などのシグナルワードを使用するときなどに用います。 |
i |
i 要素はイタリック体の使用が口調や声の変化を示す場合に使用されます。HTML5 仕様で例として挙げられているのは、夢の内容が長く続く場合ですが、メインの物語から思考や思い出へと話が逸れる場合など、同様の状況にも使用できます。i 要素は、強調の背後に意味的な重要性がある場合(例:イタリック体の単語が、専門用語、外国語などを示す場合など)にも使用されます。 |
b |
b 要素は、太字で意味を伝える場合に常に使用されます。これは、(キーワードなどの)セマンティックタグの付与にi が使用されるのと同様です。 |
font-style: italic font-weight: bold
|
太字と斜体が装飾の目的で使用される場合(見出しや導入語など)には太字と斜体のCSSプロパティを使用してください。CSSフォーマットにはセマンティクス(意味)を含まないので、強調は支援技術を通じて認識されません。 |
関連リンク
- MDN — <em>: 強調要素
- MDN — <strong>: 強い重要性要素
- MDN — <i>: 慣用テキスト要素
- MDN — <b>: 注目付け要素
- HTML —
em
要素 - HTML —
strong
要素 - HTML —
i
要素 - HTML —
b
要素