強調又は特別なテキストをマークアップするために、セマンティックなマークアップを使用する

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

HTML 及び XHTML

これは、達成基準 1.3.1: 情報及び関係性 (十分、G115: 構造をマークアップするために、セマンティックな要素を使用するとともに) に関する達成方法である。

解説

この達成方法の目的は、プログラムによる解釈が可能にするために、セマンティックマークアップを使用して強調又は特別なテキストをマークアップする方法を示すことである。強調又は特別なテキストをマークアップするためにセマンティックなマークアップを用いることで、その文書に構造を与えることもできる。そうすることで、例えば、ユーザエージェントは、異なるタイプの構造に対して異なる視覚的提示を用いたり、聴覚的提示で異なる声又はピッチを用いたりすることによって、構造を利用者に知覚可能にすることができる。

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

訳注:

WAIC では H49 に関するアクセシビリティ サポーテッド(AS)情報を提供している。2020 年 3 月版の アクセシビリティ サポーテッド(AS)情報: H49 も参照されたい。

事例

セマンティックなテキストのレンダリング例を参照。

事例 1

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

訳注:

訳注: MDN の strong 要素で示されているように、古い HTML では strong 要素を単により強い強調としていたが、現在の HTML では strong を重要性を表すものと定義している。

 ...What she <em>really</em> meant to say was, &quot;This is not ok, 
 it is <strong>excellent</strong>&quot;!... 
訳注:

WAIC では H49 に関するアクセシビリティ サポーテッド(AS)情報を提供している。2014 年 6 月版のアクセシビリティ・サポーテッド(AS)情報: H49-1 では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。

事例 2

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

<p>The following is an excerpt from the <cite>The Story of my Life</cite> by Helen Keller</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>
訳注:

WAIC では H49 に関するアクセシビリティ サポーテッド(AS)情報を提供している。2014 年 6 月版のアクセシビリティ・サポーテッド(AS)情報: H49-2 では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。

事例 3

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

訳注:

訳注: MDN の q 要素で示されているように、今日のモダンなブラウザでは、q 要素の周りに自動的に引用符を追加する。

q:before { content: ""; } 
q:after { content: ""; }  
 <p>Helen Keller said, "<q>Self-pity is our worst enemy and if we yield to it, 
we can never do anything good in the world.</q>"</p>
訳注:

WAIC では H49 に関するアクセシビリティ サポーテッド(AS)情報を提供している。2014 年 6 月版のアクセシビリティ・サポーテッド(AS)情報: H49-3 では、「達成可能」と評価されている。WAIC はこの達成方法が検証した環境で広く動作すると判断している。

事例 4

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

 <p>Beth received 1<sup>st</sup> place in the 9<sup>th</sup> grade science competition.</p>
<p>The chemical notation for water is H<sub>2</sub>O.</p>
訳注:

WAIC では H49 に関するアクセシビリティ サポーテッド(AS)情報を提供している。2014 年 6 月版のアクセシビリティ・サポーテッド(AS)情報: H49-4 では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。

参考リソース

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

検証

手順

  1. テキストの提示のバリエーションを通して伝えられる情報に関するコンテンツを調べる。
  2. 適切なセマンティックマークアップ (emstrongciteblockquotequotesub など) が、テキストの変化を通じて情報を伝達するテキストをマークアップに用いられていることを確認する。

期待される結果

  • 2. の結果が真である。