WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

H49: セマンティックなマークアップを用いて、強調又は特別なテキストをマークアップする

適用(対象)

HTML 及び XHTML

これは、次の達成基準に関連する実装方法である:

ユーザーエージェント及び支援技術によるサポート

解説

この実装方法の目的は、強調または特別なテキストのマークアップをするとき、プログラムで解釈可能なようにする方法を示すことである。また、強調または特別なテキストのマークアップにセマンティックなマークアップを用いることで、その文書に構造を与えることができる。例えば、ユーザーエージェントは、構造が異なるものは異なる視覚表現にしたり、聴覚表現で異なる声やピッチにしたりすることで、利用者の構造の理解を促すことができる。

大部分のユーザーエージェントは、セマンティックなマークアップによって特定されたテキストを、ほかとは別の見た目にする。支援技術の中には、セマンティックなマークアップを適切に用いることで、コンテンツの特性を決定するためのメカニズムを提供するものもある。

事例

この事例のサンプル: セマンティックなテキストの描画例

事例 1:

この事例では、テキストの強調にem要素とstrong要素を利用する方法を示している。em要素とstrong要素は、構造的な強調を示すのに用意されているものであり、さまざまな形式で描画されうる(フォントスタイルの変更、読み上げ時の抑揚の変更など)。

コード例

 ……彼女が<em>本当に</em>言いたかったのは、&quot;オーケーどころか、 
 <strong>すばらしい</strong>&quot;ということでした!…… 

事例 2:

この事例では、長い引用文をマークアップするのにblockquote要素を利用している。blockquote要素ではパラグラフ分けが必要となる場合もある。また、参考資料を示すのにcite要素も利用している。

コード例:

<p>次の文章は、ヘレン・ケラーの<cite>The Story of my Life</cite>からの引用である。</p>
 <blockquote>
   <p>Even in the days before my teacher came, I used to feel along the square stiff boxwood
   hedges, and, guided by the sense of smell, would find the first violets and lilies.  
   There, too, after a fit of temper, I went to find comfort and to hide my hot face 
   in the cool leaves and grass.</p>
 </blockquote>

事例 3:

この事例では、短い引用文のマークアップにq要素を利用している。q要素を引用符で囲んであるのは、ユーザーエージェントの多くがいまだにこの要素をサポートせず、適切に表示しないからである(前述「ユーザーエージェント及び支援技術によるサポート」を参照)。CSSで引用符を自動生成しないように設定し、q要素をサポートしているユーザーエージェントに適用することで、自動生成された引用符とコンテンツ制作者が付けた引用符が二重に表示されてしまう問題を避けている。将来、q要素が広くサポートされるようになれば、引用符を付けたり、ブラウザの引用符生成を避けたりする必要はなくなるだろう。

コード例:

q:before { content: ""; } 
q:after { content: ""; }  

コード例

 <p>ヘレン・ケラーは、"<q>Self-pity is our worst enemy and if we yield to it, 
we can never do anything good in the world.</q>"と述べている。</p>

事例 4:

上付き文字と下付き文字を、sup要素とsub要素を使って生成している。

コード例:
【訳注:1つめの例は、日本語訳すると、上付き文字でなくなるため原文のままとしています。】


<p>Beth received 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
<p>水の化学式は、H<sub>2</sub>O です。</p>

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

  1. コンテンツにテキストの表現を変えることで伝達できる情報がある。

  2. emstrongciteblockquotequotesubのような)適切なセマンティックなマークアップを、テキストを変えることで情報を伝達するテキストのマークアップに利用している。

判定基準

注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。