構造をマークアップするために、セマンティックな要素を使用する

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

これらの達成方法 (参考) の使用法及び、それらが WCAG 2.1 達成基準 (規定) とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.1 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用 (対象)

HTML 4.01 及び XHTML 1.x を含むマークアップ言語

これは達成基準 1.3.1: 情報及び関係性 (十分、より具体的な手法を使用した H49: 強調又は特別なテキストをマークアップするために、セマンティックなマークアップを使用するとともに)に関する達成方法である。

解説

この達成方法の目的は、適切なセマンティックな要素を用いてウェブコンテンツの構造をマークアップすることである。つまり、要素を、視覚的な見えかたではなく、その意味に基づいて用いることである。

適切なセマンティックな要素を用いることで、ユーザエージェントが構造を確実に利用できるようにする。この中には、コンテンツの意味を理解する上でさまざまな構成単位が持っている役割 (role) を明示することも含まれる。段落、見出し、強調されたテキスト、テーブルなどのコンテンツの一部の性質は、このようにして示すことができる。場合によっては、見出しと小見出しの間、テーブルとセルの間といったコンテンツの単位間の関係も示されるべきである。そうすることで、ユーザエージェントは、例えば、異なる種類の構造に対して異なる視覚的提示にする、又は聴覚的提示において異なる声もしくは声の高さを用いることによって、利用者に構造を知覚可能にすることができる。

例えば、HTML においては、em、abbr、cite といった語句レベルの要素は、それぞれ、強調させるために並びに略語及び引用であることを示すためにテキストをマークすることで、文の中でセマンティックな情報を付加する。 数学における構造と提示の重要な区別を保つために設計されたマークアップ言語である MathML には、数学的な概念を表すために用いられる複雑な記号のための特別な「提示」のマークアップも、数学的な概念自体のための「コンテンツ」 (セマンティック) マークアップも含まれている。

事例

事例 1

段落には別のページへのハイパーリンクがある。ハイパーリンクは a 要素を用いてマークアップされている。

              <p>Do you want to try our new tool yourself? A free 
                demonstration version is available in our 
                <a href="download.html">download section</a></p>
            

事例 2

結婚の歴史についてのページには、ジェーン オースティンの小説「Pride and Prejudice」からの引用が事例として用いられている。本への参照は、cite 要素を用いてマークアップされ、引用部分自体は blockquote 要素を用いてマークアップされている。

              <p>Marriage was considered a logical step for a bachelor, 
                as can be seen in the first chapter of the novel 
                <cite>Pride and Prejudice</cite>:</p>
                <blockquote>
                <p>It is a truth universally acknowledged, that a single man in
                possession of a good fortune, must be in want of a wife.</p>
                <p>However little known the feelings or views of such a man may
                be on his first entering a neighbourhood, this truth is so well
                fixed in the minds of the surrounding families, that he is considered
                the rightful property of some one or other of their daughters.</p>
                </blockquote>
            
訳注:

WAIC では G115-2 に関するアクセシビリティ・サポーテッド(AS)情報を提供している。

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

事例 3

車の取扱説明書にエンジンのかけ方の説明がある。説明書きには、ギアがニュートラルになっていることを確かめるようにとの警告がある。筆者は、その警告は非常に重要で強調されるべきであると考えていたため、警告は strong 要素を用いてマークアップされている。

              <h1>How to start the engine</h1>
                <p>Before starting the engine, <strong>make sure the gear 
                is in neutral</strong>. Next, turn the key in the ignition. 
                The engine should start.</p>
            
訳注:

WAIC では G115-3 に関するアクセシビリティ・サポーテッド(AS)情報を提供している。

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

事例 4

この事例では、テキストを強調するために em 及び strong 要素をどのように用いたらよいかを示している。

訳注:

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

              <p>What she <em>really</em> meant to say was, 
                "This is not ok, it is <strong>excellent</strong>!"</p>
            
訳注:

WAIC では G115-4 に関するアクセシビリティ・サポーテッド(AS)情報を提供している。

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

事例 5: 強調及び背景色を用いて重要な情報を視覚的かつセマンティックに特定する。

              <style type="text/css">
                .vocab {
                background-color:cyan;
                font-style:normal;
                }
                </style>
                ...
                <p>New vocabulary words are emphasized and highlighted 
                with a cyan background</p>
                <p>The <em class="vocab">scathing</em> review of the play 
                seemed a bit too harsh... </p>
            
訳注:

WAIC では G115-5 に関するアクセシビリティ・サポーテッド(AS)情報を提供している。

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

参考リソース

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

訳注:

HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。上記は、HTML 5.2: 4.5. Text-level semantics を代わりに参照できる。

検証

手順

  1. セマンティックな機能を有するコンテンツの部分があるかどうかを確認する。
  2. セマンティックな機能がある部分について、対応するセマンティックなマークアップがウェブコンテンツ技術に存在する場合、コンテンツがそのセマンティックなマークアップを用いてマークアップされていることを確認する。

期待される結果

  • 2 の結果が真である。