HTML 及び XHTML
これは、次の達成基準に関連する実装方法である:
セマンティックな要素の中には、支援技術によって十分にサポートされていないものもある。サポートが限られる要素として、code
、del
、dfn
、ins
、kbd
、s
、sub
、sup
、tt
、q
がよく知られている。これらの要素について、コンテンツ制作者には次を考慮することが推奨される。すなわち、利用者が内容を理解するために、またセマンティクスの理解が求められる部分ではその情報をテキストで提供するために、マークアップのセマンティックな意味に利用者がアクセスできる方法で、これらの要素を利用することである。
スクリーンリーダーの大部分が、em
、strong
、b
、i
について、自動的に通知をしない。
JAWSは、blockquote
及びcite
をサポートしている。Window-Eyesは、blockquote
、q
及びcite
をサポートしている。
Firefox 1.0以降、Opera 7.54以降、Mozilla 1.7.3以降(以上、Windows版)は、q
要素の前後に自動的に引用符を生成するが、Windows用Internet Explorer 6は生成しない。
この実装方法の目的は、強調または特別なテキストのマークアップをするとき、プログラムで解釈可能なようにする方法を示すことである。また、強調または特別なテキストのマークアップにセマンティックなマークアップを用いることで、その文書に構造を与えることができる。例えば、ユーザーエージェントは、構造が異なるものは異なる視覚表現にしたり、聴覚表現で異なる声やピッチにしたりすることで、利用者の構造の理解を促すことができる。
大部分のユーザーエージェントは、セマンティックなマークアップによって特定されたテキストを、ほかとは別の見た目にする。支援技術の中には、セマンティックなマークアップを適切に用いることで、コンテンツの特性を決定するためのメカニズムを提供するものもある。
この事例のサンプル: セマンティックなテキストの描画例
この事例では、テキストの強調にem
要素とstrong
要素を利用する方法を示している。em
要素とstrong
要素は、構造的な強調を示すのに用意されているものであり、さまざまな形式で描画されうる(フォントスタイルの変更、読み上げ時の抑揚の変更など)。
コード例
……彼女が<em>本当に</em>言いたかったのは、"オーケーどころか、
<strong>すばらしい</strong>"ということでした!……
この事例では、長い引用文をマークアップするのに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>
この事例では、短い引用文のマークアップに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>
上付き文字と下付き文字を、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>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
コンテンツにテキストの表現を変えることで伝達できる情報がある。
(em
、strong
、cite
、blockquote
、quote
、sub
のような)適切なセマンティックなマークアップを、テキストを変えることで情報を伝達するテキストのマークアップに利用している。
2.を満たしている。
注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記:
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。