WCAG 2.0 達成方法集

Skip to Content (Press Enter)

HTMLとXHTMLの達成方法

このウェブページは、「WCAG 2.0達成方法集 : WCAG 2.0の達成方法と失敗例」におけるHTMLとXHTMLの達成方法を掲載している。ウェブコンテンツ技術特有の達成方法は、「一般(General)」の達成方法に取って代わるものではない。コンテンツ制作者は適合に向けて作業する際には、「一般(General)」の達成方法とウェブコンテンツ技術特有の達成方法の双方を考慮に入れる必要がある。

ウェブコンテンツ技術特有の達成方法は、あらゆる状況で WCAG 2.0 の達成基準と適合要件を満たすコンテンツを作るために使うことができる技術を指しているわけではない。 コンテンツ制作者はその技術の限界に注意を払い、障害のある人にアクセシブルな方法でコンテンツを提供す必要がある。

達成方法についての情報は、WCAG 2.0 達成方法集のイントロダクションを参照のこと。他のウェブコンテンツ技術の達成方法一覧については、目次を参照のこと。




H2: 隣り合った画像とテキストリンクを同じリンクの中に入れる

適用(対象)

リンク機能を提供する HTML4、HTML5 及び XTHML ドキュメント

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

解説

この達成方法の目的は、テキストとアイコンの両方でリンクを提供する際、キーボード利用者や支援技術の利用者にとって混乱や困難を招くような ウェブページを作らないようにすることである。様々な利用者がテキストとアイコンを使いやすいと見出していることから、両方を提供することでリンクのアクセシビリティを向上させることができる。

よくあるリンクとして、テキストとアイコンの両方が互いに隣接しながらも、別々の要素としてレンダリングされているものがある。視覚的にはそれらは単一のリンクのように見えるが、それらを同様のリンクが隣接しているものとして受け取る利用者も多い。キーボード利用者の場合、冗長なリンクを通過していくのは面倒である。支援技術の利用者にとって、連続する同様のリンクに遭遇すると混乱する可能性がある。アイコンの代替テキストがリンクテキストの複製である場合、スクリーンリーダーは読み上げを2度繰り返すことになる。

制作者がリンク画像の代替テキストを省略した場合、代替テキストが視覚的なリンクと同じ目的を果たさないため、達成基準 1.1.1を満たせなくなる。

この達成方法は、テキストと画像を 1 つの a 要素にまとめ、イメージに空の代替テキストを指定してテキストの重複を排除することによって、混乱や困難がないリンクを提供するものである。このようにすることで、リンクにおける両方の表現が提供されつつも、キーボード利用者にとってリンクは1つだけとなり、ウェブページのリンク先リストを利用者に提供する補助技術も重複リンクを含まなくなる。

ページをレイアウトしやすくするために、テキストとアイコンのリンクを隣接したテーブルセルに分けることがある。WCAG 2.0 ではレイアウトテーブルの使用を禁止していないが、HTML の table 要素に定義されたセマンティックな意味を保持させ、コンテンツから表現を分離するコーティング手法に準拠するためにも、CSS ベースのレイアウトが推奨されている。CSS が使用されている場合には、この達成方法を適用して、テキストとアイコンのリンクを一つにまとめることができる。

事例

事例 1

アイコンとテキストが同じ a 要素の中にある。(HTML4 又は HTML5)

コード例:

 <a href="products.html">
   <img src="icon.gif" alt="">
   製品のページ
 </a>      

事例 2

リンクにアイコンとテキストがあり、サイトのヘルプでそのアイコンの説明をしている。img 要素には、サイトのヘルプで使われているアイコンの名前(「HOMEページのアイコン」)が代替テキストとして記述されていて、サイトのヘルプの中では「HOMEページのアイコン」をクリックすることが説明されている。(HTML4 又は HTML5)

コード例:

<a href="home.html">
  <img src="house.gif" alt="HOMEページのアイコン">
  HOMEページへ戻る
</a>     

参考リソース

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

検証

チェックポイント

この達成方法を適用しているすべての a 要素に対して:

  1. a 要素に含まれるすべての img 要素の alt 属性値が空に設定されていることを確認する。

  2. a 要素に空の alt 属性値またはリンクテキストを補足し画像を説明する値を持つ img 要素が含まれていることを確認する

判定基準

  • 上記の全てを満たしている。

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


H4: リンク、フォームのコントロール、およびオブジェクトには、論理的なタブ移動順序を作成する

適用(対象)

HTML 及び XHTML

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

解説

この達成方法の目的は、初期設定のタブ順番が十分でない時に、論理的なタブ順番を提供することである。 多くの場合、「G59: コンテンツ内の順番及び関係に従った順序で、インタラクティブな要素を配置する」を用いることで十分であり、この達成方法は必要ではない。表示とは異なるタブ順番を設定すると、ユーザビリティ上の不具合を生じさせる可能性が高くなる。

場合によって、コンテンツ制作者はコード内のインタラクティブな要素の順番に従うことなく、コンテンツの関係をたどるタブ順番を指定しようとするかもしれない。この場合、インタラクティブな要素のtabindex属性を使用することで選択肢の順番を指定できる。tabindex属性には、0 から 32767 の間の値を付与する。

インタラクティブな要素がタブキーを使ってナビゲートされる時、要素はtabindex属性の値の増える順にフォーカスが与えられる。0 よりも大きなtabindex値を持つ要素は、tabindexがない又は 0 のtabindexの要素の前にフォーカスを受けることになる。0 よりも大きな tabindexを持つ全ての要素がフォーカスを受け取った後、残りのインタラクティブな要素はウェブページに現れる順番でフォーカスが与えられる。

事例

事例 1

系図の検索フォームで結婚記録を検索する。検索フォームには花嫁及び花婿用のいくつかの入力フィールドがある。フォームは、データテーブルを用いてマークアップされ、1列目に花婿、2列目に花嫁のフィールドがある。コンテンツの順番は行ごとであるが、コンテンツ制作者はフォームを列ごとにナビゲートする方がより論理的であると感じている。この方法では、全ての花婿の条件は花嫁の条件へ移る前に記入できる。入力フィールドの tabindex 属性は、列ごとにナビゲートするタブ順番を指定するのに使用される。

コード例:

<form action="#" method="post">
 <table summary="1列目に花婿の検索条件、2列目に花嫁の検索条件がある">
  <caption>結婚記録の検索</caption>
  <tr>
   <th>検索基準</th>
   <th>花婿</th>
   <th>花嫁</th>
  </tr>
  <tr>
   <th>名</th>
   <td><input type="text" size="30" value="" name="groomfirst" 
        title="花婿の名" tabindex="1"></td>
   <td><input type="text" size="30" value="" name="bridefirst" 
        title="花嫁の名" tabindex="4"></td>
  </tr>
  <tr>
   <th>姓</th>
   <td><input type="text" size="30" value="" name="groomlast" 
        title="花婿の姓" tabindex="2"></td>
   <td><input type="text" size="30" value="" name="bridelast" 
        title="花嫁の姓" tabindex="5"></td>
  </tr>
  <tr>
   <th>出生地</th>
   <td><input type="text" size="30" value="" name="groombirth" 
        title="花婿の出生地" tabindex="3"></td>
   <td><input type="text" size="30" value="" name="bridebirth" 
        title="花嫁の出生地" tabindex="6"></td>
  </tr>
 </table>
</form>

事例 2

ウェブページは上部の右端に検索フィールドを提供している。コンテンツの順番が最初ではないが、タブ順番が最初になるようにフィールドには tabindex="1" が与えられている。

事例 3

tabindex 値は、連続した番号である必要はなく、特定の値で始まる必要もない。値は一意的である必要もない。同じ tabindex 値を持つ要素は、その文字の出現順にナビゲートされる。

タブ順番がコンテンツ順番に従っているコンテンツのセクションにおいて、個々の要素に異なるtabindex値を指定するよりも, 全ての要素に同じ値を与えることでエラーを起こりにくくすることが可能である。それらの要素を再配列する、又は新しい要素を加える、及び論理的なタブ順番を設定することは容易である。

コード例:

 <a href="xxx" tabindex = "1">リストの1番目のリンク</a>
 <a href="xxx" tabindex = "1">リストの2番目のリンク</a>
 <a href="xxx" tabindex = "1">初めにリストが作られて大分たってから追加されたリンク</a>
 <a href="xxx" tabindex = "1">リストの3番目のリンク</a>
 ...
 <a href="xxx" tabindex = "1">リストの20番目のリンク</a> 

参考リソース

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

検証

チェックポイント

  1. tabindex が使われている。

  2. tabindex が使われているならば、tabindex 属性により指定されたタブ順番がコンテンツの関係に従っている。

判定基準

  • 2.を満たしている。

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


H24: イメージマップの area 要素に代替テキストを提供する

適用(対象)

area要素を含むHTML及びXHTMLドキュメント

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

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

H24 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、イメージマップ上の選択可能領域と同じ役割を果たす代替テキストを提供することである。イメージマップは、area要素によって定義された選択可能領域によって分割されている1枚の画像である。各領域は、他のウェブページや、現在のウェブページ内の他の場所へのリンクである。各area要素のalt属性は、その画像の選択可能領域と同じ目的を果たすものである。

事例

事例 1

この事例では、イメージマップ上の各領域の目的を示したテキストを提供するのに、area要素のalt属性を利用している。

コード例:

<img src="welcome.gif" usemap="#map1" 
    alt="図書館の各エリア。詳細を見るには、各エリアを選択してください。" /> 
<map id="map1" name="map1">
  <area shape="rect" coords="0,0,30,30"
    href="reference.html" alt="資料室" />
  <area shape="rect" coords="34,34,100,100"
    href="media.html" alt="視聴覚室" />
</map>

参考リソース

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

検証

チェックポイント

イメージマップ上の各area要素について:

  1. そのarea要素にalt属性を指定している。

  2. alt属性で指定した代替テキストが、area要素で定義したイメージマップ上の領域と同じ目的を果たしている。

判定基準

  • 上記全てを満たしている。

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


H25: title 要素を用いて、ページタイトルを提供する

適用(対象)

HTML 及び XHTML

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

解説

この達成方法の目的は、フレームセットの個々のフレームに含まれるものを含む全てのHTML及びXHTMLドキュメントにおいて、head要素のセクション内でtitle要素を用いてドキュメントの目的を簡単な文言で定義することである。これにより、ページの本文でオリエンテーション情報を探すことなく、利用者はサイト内の自分のいる場所を素早く見つけることができる。

ドキュメント内で一度しか現れない(必須の)title要素は、ほとんど全てのHTML及びXHTMLの要素で利用されるかもしれないtitle属性と異なることに注意する。

事例

事例 1

この事例はドキュメントのタイトルを定義している。

コード例:


		<html xmlns="http://www.w3.org/1999/xhtml">
		   <head>
		      <title>ワールドワイドウェブコンソーシアム</title>
		   </head>
		   <body>
		      ...
		   </body>
		</html>

参考リソース

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

検証

チェックポイント

  1. HTML又はXHTMLドキュメントのソースコードに、head 要素内に空でないtitle要素がある。

  2. title 要素がドキュメントを説明している。

判定基準

  • 1.及び2.を満たしている。

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


H28: abbr要素を用いて、略語の定義を提供する

適用(対象)

HTML 及び XHTML

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

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

H28 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、abbr 要素を用いることで、略語に対して元の語又は定義を提供することである

abbr 要素は、頭字語や頭文字語を含むあらゆる略語に用いてよい。HTML4 及び XHTML では、頭文字語や頭字語は acronym 要素を用いてマークアップすることもできる。abbr要素は、頭字語や頭文字語を含むあらゆる略語に用いてよい。HTML5 以降では、より一般的な abbr 要素の利用が提案され、acronym 要素は廃止されている。

事例

事例 1: abbr 要素を用いて略語の元の語を示す

コード例:

<p>普通、砂糖は 5 <abbr title="pound">lb.<abbr> の袋入りで売られている。</p>
<p><abbr title="World Wide Web">WWW</abbr> へようこそ!</p> 

事例 2: abbr 要素を用いて略語の定義を示す

コード例:

<p>タシニ <abbr title="及びその他">et al.</abbr> <abbr title="対">v.</abbr>
ニューヨーク・タイムズ紙 <abbr title="及びその他">et al.</abbr> は、全米著述業組合
による象徴的な訴訟事件であり……</p> 

事例 3: abbr 要素を用いて頭字語の元の語を示す

コード例:

<p><abbr title="Keep It Simple Stupid">KISS</abbr>の使用が…の間で広まってきた。</p> 

事例 4: abbr 要素を用いて頭文字語の元の語を示す

コード例:

<p><abbr title="World Wide Web">WWW</abbr></p> 

参考リソース

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

検証

チェックポイント

  1. 略語それぞれに、abbr 要素で元の語や定義を指定している。

判定基準

  • 1.を満たしている。

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


H30: a 要素のリンクの目的を説明するリンクテキストを提供する

適用(対象)

リンク(<a href> 要素)を含むHTML及びXHTMLドキュメント

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

解説

この達成方法の目的は、リンク先を説明するテキストをa要素のコンテンツとして提供することにより、リンクの目的を説明することである。 その説明により、利用者はこのリンクとウェブページ内にある他のリンクとの違いが区別でき、利用者がリンクをたどるかどうかを決定するのを助ける。 一般的に、遷移先のURIでは、そのリンクの目的を説明したことにはならない。

画像がリンクの唯一のコンテンツであるとき、画像の代替テキストがそのリンクに固有の機能を説明している。

リンクのコンテンツがテキスト及び一つ又はそれ以上の画像を含むとき、テキストがリンクの目的を十分に説明しているならば、画像の代替テキストは空にする。(H67: 支援技術が無視すべき画像の img 要素で、alt 属性値を空にして、title 属性を付与しない (HTML) を参照。) 画像がリンクの目的以外にも情報を伝えるときには、画像に適切な代替テキストも付与しなければならない。

事例

事例 1

a HTMLにおいて、a要素のテキストコンテンツを用いてリンクの目的を説明する。

コード例:

<a href="routes.html">
  ボールダーズクライミングジムでの現状のルート
</a>

事例 2

画像のリンクの目的を説明するために、img 要素に alt 属性を使用する。

コード例:

<a href="routes.html">
   <img src="topo.gif" alt="ボールダーズクライミングジムでの現状のルート" />
</a>

事例 3

アンカー (a) 要素が img 要素に加えてリンクの目的を説明するテキストを含むときは、空のalt属性を使用する。 リンクテキストはページ上で画像の隣りに表示されることに注意する。

コード例:

<a href="routes.html">
  <img src="topo.gif" alt="" />
  ボールダーズクライミングジムでの現状のルート
</a>

事例 4

サイトでは、製品の詳細ページの「フィードバック」リンクをクリックすることで、利用者がログインしたときに製品に関するフィードバックを提供することができる。他の利用者又は製品メーカーは、フィードバックに応答することができる。フィードバックのリンクは、利用者のフィードバックへの応答が利用可能な場合に、「フィードバック」テキストの前にアイコンを表示する。ヘルプ情報は、このアイコンを二重引用符を含む吹き出しとして説明し、アイコン自体を例として示している。 ヘルプテキストにおけるアイコンのテキストによる代替は、「応答受信アイコン」である。複数のモダリティを使用してこのアイコンを識別できるように、製品の詳細ページ(応答が利用可能な場合)で同じテキストによる代替が使用される。

コード例:

<a href="prod_123_feedback.htm">Feedback 
<img src="response.gif" width="15" height="15" alt="レスポンス受信アイコン" /></a>

事例 5

リンクはテキスト及びアイコンを含み、アイコンはリンク先についての追加情報を提供している。

コード例:

<a href="WMFP.pdf">
ウッドエンドミュージックフェスティバルのプログラム
<img src="pdficon.gif" alt="PDFファイル"/>
</a>

事例 6

MyCorp 社の年次レポートは企業のウェブサイト上から PDF ファイルとして入手でき、年次企業予算は Excel ファイルとして入手できる。

注記: 多くの利用者は、ファイルを開く際に新しいアプリケーションが開く場合は、あらかじめファイルの種類を知りたいので、このような追加情報を含めるのはしばしば便利であると考えられる。 ただし、この達成基準を満たすには必須ではない。

コード例:

<p>
<a href=”2009mycorp_report.pdf”>MyCorp 2009 年次レポート (pdf)</a><br />
<a href=”2009mycorp_budget.xls”>MyCorp 2009 年次予算 (Excel)</a>
</p>

事例 7

HTML5 においてブロックレベル要素をリンクで囲む。

コード例:

<article>
<a href="news.html">
<h3>議会で続く予算討議</h3>
<p class="subhead"><img class="alertimg" src="alerticon.png" alt="ニュース速報" height="30" width="30">議会の議員は、来年の予算をめぐる3つの挑戦的な問題について、激しい議論を続けた。</p>
<p>もっと読む</p>
</a>
</article>

ブロックレベル要素をリンクで囲む実例を示す。

参考リソース

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

検証

チェックポイント

この達成方法を使用したコンテンツのそれぞれのリンクに対して:

  1. テキスト又は非テキストコンテンツの代替テキストが a 要素に含まれている。

  2. img 要素だけが a 要素のコンテンツである場合、img要素の代替テキストがリンクの目的を説明している。

  3. a 要素が一つ又はそれ以上の img 要素を含み、img 要素の代替テキストが 空の場合、リンクのテキストがリンクの目的を説明している。

  4. a 要素がテキストのみを含んでいる場合、テキストがリンクの目的を説明している。

判定基準

  • 上記のすべてを満たしている。

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


H32: 実行ボタンを提供する

適用(対象)

フォームのコントロールを含むコンテンツ

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

解説

この達成方法の目的は、利用者が状況の変化を明示的に要求できるメカニズムを提供することである。送信ボタンの本来の使用法は、フォームに入力されたデータを実行するHTTPリクエストを生成することである。それは、状況の変化を起こすために使われる適切なコントロールである。

事例

事例 1

これは送信ボタンを持つフォームの基本的な事例である。

コード例:

<form action="http://www.example.com/cgi/subscribe/" method="post"><br /> 
<p>メールリングリストに登録したい場合は、あなたの
メールアドレスを入力してください。</p><br /> 
<label for="address">eメールアドレスを入力してください。:</label>
<input type="text" id="address" name="address" /> 
<input type="submit" value="登録" /><br /> 
</form>  

事例 2

次の事例では、利用者が要求したページを転送する( action 属性により指定された)サーバーサイド・スクリプトを使用している。

コード例:

<form action="http://www.example.com/cgi/redirect/" method="get"><br /> 
<p>Navigate the site.</p><br /> 
<select name="dest"><br /> 
<option value="/index.html">Home</option/><br /> 
<option value="/blog/index.html">My blog</option/><br /> 
<option value="/tutorials/index.html">Tutorials</option/><br /> 
<option value="/search.html">Search</option/><br /> 
</select><br /> 
<input type="submit" value="Go" /><br /> 
</form>  

参考リソース

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

検証

チェックポイント

  1. コンテンツ内の全てのフォームを見る。

  2. それぞれのフォームに、送信ボタン(input type="submit"、input type="image" 又は button type="submit")がある。

判定基準

  • 2.を満たしている。

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


H33: title 属性を用いて、リンクテキストの文言を補足する

適用(対象)

HTML 及び XHTML

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

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

H33 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、リンクを説明する追加情報を提供するための、a 要素の title 属性の利用方法を示すことである。title 属性は、リンクの目的を明らかにしたり、詳しく説明したりするのに役立つ追加情報の指定に用いる。もし title 属性を通して提供する補足情報が、警告文のように利用者がリンクをたどる前に知っておくべき内容であれば、title 属性ではなくリンクテキストとして提供すべきである。

title 属性へのアクセス方法について、ユーザエージェントごとにサポートが大きく異なるため、コンテンツ制作者はこの達成方法を用いるときは注意を払うべきである。この理由から、コンテンツ制作者は達成方法C7: リンクテキストの一部を非表示にするために、CSS を使用する (CSS) 又はH30: a 要素のリンクの目的を説明するリンクテキストを提供する (HTML) を利用することが望ましい。

事例

事例 1: リンクの目的を明らかにする

コード例:

<a href="http://example.com/WORLD/africa/kenya.elephants.ap/index.html" 
title="象の避難の失敗について続きを読む">
巨大な荷物のせいで、避難はさんざんな結果に
</a> 

参考リソース

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

検証

チェックポイント

a 要素のソースコードについて、次のことを調べる。

  1. title 属性のある a 要素では、リンクテキストの文言とともに title 属性がそのリンクの目的を示している。

判定基準

  • 1.を満たしている。

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


H34: インラインでテキストの方向を混在させるために、Unicode の RLM 文字又は LRM 文字を使用する

適用(対象)

HTML 及び XHTML

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

解説

この達成方法の目的は、HTMLの双方向性アルゴリズムが望ましくない結果を生じるとき時に、それを無効にするためにUnicode制御文字のright-to-left markとleft-to-right markを用いることである。たとえば、スペース又は句読点のようなニュートラルな文字が異なる方向性のテキストの間に置かれている 時に必要となることがある。この達成方法で用いられているコンセプトは、W3C文書の「What you need to know about the bidi algorithm and inline markup(双方向アルゴリズムとインラインマークアップを知るために必要なこと)」に書かれている。

Unicode 制御文字のright-to-left mark及びleft-to-right markは、以下に示すように、 そのまま、又は文字符号か数字符号の参照によって挿入することが可能である。

  • left-to-right mark(LRM): &lrm; 又は &#x200e; (U+200E)

  • right-to-left mark(RLM): &rlm; 又は &#x200f; (U+200F)

双方向性のアルゴリズムが原因で、ソースコード編集者は期待通りに文字符号や数字符号の参照を表示できないことがある。

事例

事例 1

この事例では、英語の文章の間にあるアラビア語のフレーズを示している。感嘆符はアラビア語のフレーズの一部であり、その左側にあるべきである。それはアラビア文字とラテン文字の間であり、段落全体の方向がLTR(左から右)であるため、双方向性のアルゴリズムはアラビア語のフレーズの右側に感嘆符を置いている。

The title is "مفتاح معايير الويب!" in Arabic.

視覚的に並び替えられたASCIIバージョン(右から左へのテキストは大文字、左から右は小文字):

the title is "HCTIWS SDRADNATS BEW!" in arabic.

表示されたテキスト(以下を参照)を見るとき、感嘆符の直後にUnicodeのright-to-left markを 挿入することによって、感嘆符を正しい位置に置くことになる。right-to-left markを挿入するために、エスケープ文字又は(不可視の)制御文字を使用することができる。

The title is "مفتاح معايير الويب!‏" in Arabic.

視覚的に並び替えられたASCIIバージョン:

the title is "!HCTIWS SDRADNATS BEW" in arabic.

参考リソース

検証

チェックポイント

  1. テキストの方向が変わっている箇所のソースを調べる。

  2. テキストの方向が変わっている際には、スペース又は句読点のようなニュートラルな文字が初期設定ではない方向で表示されたテキストに隣接している。

  3. 上記2.に該当し、かつHTMLの双方向性のアルゴリズムがニュートラルな文字の誤った配列を生み出している場合、ニュートラルな文字の直後にUnicode制御文字の right-to-left又はleft-to-right markがあり、ニュートラルな文字を前の文字列の一部として配置させている。

判定基準

  • 3.を満たしている。

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


H35: applet 要素に代替テキストを提供する

適用(対象)

applet要素が非推奨ではない場合に、Javaアプレットを読み込んでいるHTML及びXHTMLドキュメント

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

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

H35 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、アプレットのラベルを提供するalt属性を用いること及びapplet要素のボディに代替テキストを提供することによって、アプレットに対する代替テキストを提供することである。この達成方法では、ユーザエージェントごとに、alt属性及びapplet要素のボディのサポート状況が異なるため、両方のメカニズムを必要としている。

事例

事例 1: 三目並べゲームのアプレット

コード例:

<applet code="tictactoe.class" width="250" height="250" alt="三目並べゲーム">
   三目並べゲーム
</applet> 

検証

チェックポイント

  1. applet要素のソースコードを見る。

  2. アプレットに対する代替テキストがapplet要素のalt属性にある

  3. アプレットに対する代替テキストがapplet要素のボディの中にある。

判定基準

  • 2.及び3.を満たしている。

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


H36: 送信 / 実行ボタンとして用いる画像の alt 属性を使用する

適用(対象)

画像の送信/実行ボタンを使用するコンテンツに適用する。

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

解説

この達成方法の目的は、type属性が「image」であるinput要素において、input要素のalt属性を機能的なラベルを提供するのに使用することである。このラベルは、画像の説明をするのではなく、ボタンの機能を説明する。もしそのページに、それぞれ異なる結果につながる複数の送信/実行ボタンがあるならば、ラベルは特に重要である。

input要素は、多くの種類のフォームのコントロールを作成するのに使用される。HTML及びXHTMLのDTDでは、これら全てでalt属性を用いることができるが、本来は画像の送信/実行ボタンだけに使用すべきである。ユーザエージェントでは、他の種類のフォームのコントロールでのalt属性の使用をサポートしていないため、これらのコントロールをラベル付けするために他のメカニズムを用いている。

事例

事例 1

alt 属性がある input 要素

コード例:

<form action="http://example.com/prog/text-read" method="post">

  <input type="image" name="submit" src="button.gif" alt="送信/実行" />
</form> 

参考リソース

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

検証

チェックポイント

  1. type 属性の値が「image」であるすべての input 要素に、alt属性がある。

  2. その alt 属性がボタンの機能を説明している。

判定基準

  • 1.及び2.を満たしている。

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


H37: img 要素の alt 属性を使用する

適用(対象)

HTMLドキュメントで用いられている画像

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

解説

img要素を使用するときは、簡潔な代替テキストをalt属性に指定する。注記:この属性の値は「ALTテキスト」ともいう。

画像がコンテンツを理解するために重要な文字を含むとき、代替テキストにはそれらの文字を含めなくてはならない。これにより、代替テキストはページ上で画像と同じ役割を果たすことができる。 代替テキストは、画像自体の視覚的な特徴を説明する必要はないが、画像と同じ意味を伝えなければらないことに注意する。

事例

事例 1

ウェブサイト上にある画像は、無料のニュースレターへのリンクである。画像は次のような文字を含んでいる:「無料のニュースレター:無料のレシピ、ニュースなどを入手しよう! 詳しくはこちら」 画像の代替テキストは、画像にある文字と一致している。

コード例:

<img src="newsletter.gif" alt="無料のニュースレター:
無料のレシピ、ニュースなどを入手しよう! 詳しくはこちら" />

事例 2

ウェブサイト上にある画像は、ビルの間取り図を表現している。その画像は、各部屋の部分がインタラクティブに操作できるイメージマップである。代替テキストは「ビルの間取り図。各部屋の目的又は内容に関する詳しい情報は、部屋を選択してください」である。 「部屋を選択してください」という指示により、画像がインタラクティブであることを示している。

参考リソース

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

HTML 4.01 IMG element

HTML 4.01 alt attribute

検証

チェックポイント

  1. コンテンツに含まれる img 要素それぞれを調べる。

  2. 意味を伝える img 要素それぞれが、alt 属性を含んでいる。

  3. 画像にコンテンツを理解するために重要な文字が含まれている場合、その文字が代替テキストに記述されている。

判定基準

2.及び3.を満たしている。

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


H39: データテーブルの表題とデータテーブルを関連付けるために、caption 要素を使用する

適用(対象)

HTML及びXHTMLのデータテーブル

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

解説

この達成方法の目的は、見た目でテーブルの表題を付ける場合に、プログラムで解釈できるようにデータテーブルと表題を関連付けることである。表題はテーブルの識別子であり、タイトル又は見出しのような働きをする。

caption 要素は表題のテキストのための適切なマークアップであり、(初期状態では)表示上も、テーブルの識別子がそのテーブルに関連付けられていることを保証するものである。さらに、caption 要素を用いることによって、音声読み上げソフトウェアがテーブルの表題に利用者を直接誘導することも可能になる。

caption 要素は、テーブルに summary 属性を指定しているかどうかに関わらず利用できる。caption 要素はテーブルを特定するもの、summary 属性はテーブルの概要を提供したり、見方を説明したりするものである。両方とも指定する場合、summary 属性に caption 要素と同じ情報を含めるべきではない。

注記: WCAG 2.0 はレイアウトテーブルの利用を禁止していないが、CSS ベースのレイアウトを推奨している。HTML 及び XHTML の table 要素に与えられたセマンティックな意義を守り、コンテンツから表現を分離するというコーディングの実践に沿うためである。テーブルをレイアウトのために利用する場合、caption 要素は使用しない。レイアウトテーブルの目的は、コンテンツの配置を制御することのみであって、テーブルそのものは利用者から見て「透明」であるべきである。caption 要素を用いることによってテーブルの存在を示してしまうと、この透明性を壊すことになる。F46: 達成基準 1.3.1 の失敗例 - レイアウトテーブルで、th 要素、caption 要素、又は空ではない summary 属性を使用しているを参照のこと。

事例

事例 1: スケジュールカレンダーの表題

コード例:

<table>
<caption>3月6日の週のスケジュール</caption>
...</table>

参考リソース

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

検証

チェックポイント

各データテーブルごとに:

  1. テーブルに caption 要素が含まれていることを確認する。

  2. caption 要素の内容がテーブルを識別しているかどうかを確認する。

判定基準

  • 1. 及び 2. を満たしている。

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


H40: 記述リストを使用する

適用(対象)

HTML 及び XHTML

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

解説

この達成方法の目的は、名前または用語の説明を記述リストの形式で提供することである。リストは dl 要素を用いてマークアップし、その中では用語それぞれを個別の dt 要素に含め、直後の dd 要素に説明を含める。意味のある順序が確保されていれば、複数の用語を単一の説明に、単一の用語を複数の説明に関連付けることもできる。title 属性を用いて、記述リストに関する補足情報を提供することもできる。記述リストを使用することで、表現が変化しても、用語とその説明が 1 つの単位としてグループ化され、意味的な関連が保証される。

説明がアルファベット順に並べられている場合は、記述リストを使用するのが最も容易である。記述リストの一般的な使用法は用語集である。

注記: HTML5 では、「記述リスト」という名前が導入された。以前のバージョンでは、これらのリストは「定義リスト」と呼ばれていた。

事例

事例 1

海事用語の記述リストを、航海に関するウェブサイトで利用している。

コード例:

<dl title="海事用語">
  <dt>ノット</dt>
  <dd>
    <p><em>ノット</em>は、1時間当たり1海里の速度単位である
    (1時間当たり1.15マイルまたは1.852キロメートル)。</p>
  </dd>
  <dt>左舷</dt>
  <dd>
    <p><em>左舷</em>は、人間が船首(船の最前部)から見たときの、
    船体の左側を表す海事用語である(ボートや船に使用される)。</p>
  </dd>
  <dt>右舷</dt>
  <dd>
    <p><em>右舷</em>は、人間が船首(船の最前部)から見たときの、
    船体の右側を表す海事用語である(ボートや船に使用される)。</p>
  </dd>
</dl> 

参考リソース

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

検証

チェックポイント

用語とそれに関する説明の組み合わせについて:

  1. そのリストが、dl要素に含まれている。

  2. リストの各用語が dt 要素内に含まれていることを確認する。

  3. 同じ説明を共有する複数の用語があるときに互いの dt 要素が連続することを確認する。

  4. 各用語に対する説明が 1 つ以上の dd 要素に含まれていることを確認する。

  5. 用語を含む 1 つ以上の dt 要素の直後に、1 つ以上の dd 要素があることを確認する。

判定基準

  • 上記の全てを満たしている。

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


H42: 見出しを特定するために、h1 要素~ h6 要素を使用する

適用(対象)

HTML 及び XHTML

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

解説

この手法の目的は、HTML 及び XHTML の見出しマークアップを用いて、コンテンツの見出しにセマンティックなコードを提供することである。見出しマークアップは、支援技術がテキストの見出し状態を利用者に提示することを可能にする。スクリーンリーダーは、コードを認識し、そのレベル、ビープ音、又は他の聴覚インジケーターを備えた見出しとしてテキストをアナウンスすることができる。スクリーンリーダーはまた、見出しマークアップをナビゲートすることもできる。これは、スクリーンリーダー利用者が関心のあるコンテンツをより迅速に見つけるための効果的な方法である。オーサリングされた視覚表示を変更する支援技術はまた、見出しマークアップで識別できる見出しのための適切な代替視覚表示を提供することもできる。

事例

事例 1: 階層的な見出し構造

以下の事例では、h3h2 のサブセクションで、h2h1 のサブセクションとなっていて、見出しが階層的なレイアウトに用いられている。

コード例:

<h1>Plant Foods that Humans Eat</h1>
<p>There are an abundant number of plants that humans eat...</p>
<h2>Fruit</h2>
<p> A fruit is a structure of a plant that contains its
  seeds...</p>
<h3>Apple</h3>
<p>The apple is the pomaceous fruit of the apple tree...</p>
<h3>Orange</h3>
<p>The orange is a hybrid of ancient cultivated origin...</p>
<h3>Banana</h3>
<p>Banana is the common name for herbaceous plants ...</p>
<h2>Vegetables</h2>
<p>A vegetable is an edible plant or part of a plant other than a
  sweet fruit ...</p>
<h3>Broccoli</h3>
<p>Broccoli is a plant of the mustard/cabbage family ... </p>
<h3>Brussels sprouts</h3>
<p>The Brussels sprout of the Brassicaceae family, is a Cultivar
  group of wild cabbage ...</p>
<h3>Green beans</h3>
<p>Green beans have been bred for the fleshiness, flavor, or
  sweetness of their pods...</p> 

事例 2: 3段組レイアウトの見出し設定

この事例では、3 段組の真ん中にページのメインコンテンツがある。メインコンテンツは、ページ内で最初のコンテンツではないが、そのタイトルはページタイトルと同じで、h1 要素でマークアップされている。3 段組のうち 1 番目と 3 番目のコンテンツは重要度が低いため、タイトルが h2 要素でマークアップされている。

注記: 以下のコード例は、ウェブページの特定のセクションに対して用いるべき見出しレベルを規定するものではないことに留意することが重要である。レイアウトする際には、各カラムの最初に見出しを同じ見出しレベル(例えば、h1)で提示したり、またはコード例にあるようにメインコンテンツに関してその重要度を反映した見出しレベルで提示したりすることが可能である。

コード例:

<head>
 <title>今日の株式市場</title>
 </head>

 <body>

 <!-- left nav -->
 <div class="left-nav">
 <h2>サイトナビゲーション</h2>
 <!-- content here -->
 </div>

 <!-- main contents -->
 <div class="main">
 <h1>今日の株式市場</h1>
 <!-- article text here -->
 </div>

 <!-- right panel -->
 <div class="left-nav">
 <h2>関連リンク</h2>
 <!-- content here -->
 </div>
 </body>

参考リソース

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

検証

チェックポイント

  1. コンテンツが見出しであるときに、見出しマークアップを利用している。

  2. コンテンツが見出しでないときは、見出しマークアップを利用していない。

判定基準

  • 1.及び2.を満たしている。

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


H43: データテーブルのデータセルを見出しセルと関連付けるために、id 属性及び headers 属性を使用する

適用(対象)

HTML 及び XHTML

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

解説

この達成方法の目的は、(データテーブル内の)各データセルを適切な見出しセルと関連付けることである。まず、各データセル(td要素)にheaders属性を付加する。次に、データセルの見出しとなるセルにはid属性を指定する。データセルのheaders属性で指定するのは、関連付けられる見出しセルのid属性値であり、2つ以上のidを含める場合はスペース区切りで列挙する。

この達成方法は、データセルを2つ以上の行見出し及び(又は)列見出しに関連付ける場合に利用する。こうすることで、th要素のみ、またはth要素にscope属性を付けただけでは、データセルと見出しセルの関係が複雑すぎて定義できない場合でも、スクリーンリーダーは各データセルと関連付けられている見出しセルを読み上げることができる。また、表現形式が変わったとしても、これらの複雑な関係を知覚しやすくなる。

この達成方法を、レイアウトテーブルに利用することは推奨しない。なぜなら、レイアウトのためにテーブルを利用する際には、意味がないにも関らず何らかの関係性を示してしまうことになるからである。

事例

事例 1: 行見出しが複数あるテーブル

コード例:

<table>
   <tr>
     <th rowspan="2" id="h">予習</th>
     <th colspan="3" id="e">試験</th>
     <th colspan="3" id="p">課題</th>
   </tr>
   <tr>
     <th id="e1" headers="e">1</th>
     <th id="e2" headers="e">2</th>
     <th id="ef" headers="e">最終</th>
     <th id="p1" headers="p">1</th>
     <th id="p2" headers="p">2</th>
     <th id="pf" headers="p">最終</th>
   </tr>
   <tr>
    <td headers="h">15%</td>
    <td headers="e e1">15%</td>
    <td headers="e e2">15%</td>
    <td headers="e ef">20%</td>
    <td headers="p p1">10%</td>
    <td headers="p p2">10%</td>
    <td headers="p pf">15%</td>
   </tr>
  </table> 

参考リソース

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

検証

チェックポイント

  1. レイアウトテーブルかどうかを確認、テーブルのセルの内容が同じ行や列に含まれる他セルの内容と関係があるかどうか判断する。「いいえ」の場合、そのテーブルはレイアウトテーブルである。「はい」の場合、そのテーブルはデータテーブルである。

  2. データテーブルである場合、2つ以上の行見出し及び(又は)列見出しと関連付けられているあらゆるデータセルのheaders属性に、関連付けられている全ての見出しセルのidを指定している。

  3. データテーブルでは、id属性またはheaders属性を指定しているあらゆるセルについて:

    1. データセルのheaders属性で指定した各idが、見出しセルのid属性値と一致している。

    2. データセルのheaders属性で、そのデータセルと関連付けられた全ての見出しのid属性値を指定している。

    3. 全てのidが一意的であり、重複して使用していない(つまり、ページの中で2つ以上の要素が同じidを持つことはできない)。

判定基準

  • レイアウトテーブルの場合、どのセルにもheaders属性又はid属性がない。

  • データテーブルで、id属性を指定した全てのセルについて、3.a、3.b、3.cを満たしている。

  • データテーブルで、2つ以上の行見出し及び(又は)列見出しと関連付けられた全てのデータセルについて、2.を満たしている。

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


H44: テキストのラベルとフォーム・コントロールを関連付けるために、label 要素を使用する

適用(対象)

ラベルを用いているHTML及びXHTMLのフォーム・コントロール

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

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

H44 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、フォーム・コントロールとラベルを明示的に関連付けるために、label 要素を利用することである。ラベルは、label 要素の for 属性によって特定のフォーム・コントロールと結びつけることができる。この場合、for 属性値はフォーム・コントロールの id 属性値と同じでなければならない。

id 属性が name 属性と同じ値で、両方とも指定しなければならない場合でも、その id はそのウェブページ内で一意的なものとして、重複して使用してはならない。

この達成方法は、label 要素が見えているかどうか、つまり CSS で非表示にしているかどうかに関わらず、達成基準 1.1.1、1.3.1、4.1.2 を満たすことができる。しかし、達成基準 3.3.2 では、label 要素を入力フィールドの理解に役立てたい全ての利用者のために、見える状態にしておかなければならない、としている。

ラベルまたはコントロールをクリックするとコントロールがアクティブなるため、コントロールのクリック可能な領域を大きくすることは、この達成方法の更なるメリットである。これは運動制御が不十分な利用者に役立つ。

input 要素の type="checkbox"type="radio" では、label 要素をその後に配置することに注意する。

注記 1: 明示的なラベルを利用する要素は次の通りである:

  • input type="text"

  • input type="checkbox"

  • input type="radio"

  • input type="file"

  • input type="password"

  • textarea

  • select

注記 2: 次の場合には、label 要素は利用しない。これらの要素に対するラベルは、value 属性(送信ボタン及びリセットボタン)、alt 属性(画像ボタン)、又は要素それ自体の内容(汎用ボタン)を介して提供されるからである。

  • 送信及びリセットボタン(input type="submit" 又は input type="reset"

  • 画像ボタン(input type="image"

  • 隠しフィールド(input type="hidden"

  • スクリプトボタン(button 要素又は input type="button"

事例

事例 1: テキスト入力フィールド

この事例では、テキスト入力フィールドに「お名前」という明示的なラベルが付けてある。label 要素の for 属性値は、input 要素の id 属性値と一致している。

コード例:

<label for="firstname">お名前:</label> 
<input type="text" name="firstname" id="firstname" /> 

事例 2: チェックボックス

コード例:

<input type="checkbox" id="markuplang" name="computerskills" checked="checked">
<label for="markuplang">HTML</label> 

事例 3: ラジオボタンのグループ

関連するラジオボタンの小さなグループについて、簡単な説明が付けてあり、さらに個々の要素にラベルが付けてある。

ラジオボタンの数が多く、それらの関連付けや操作説明を必要とする場合は、H71: フォーム・コントロールのグループに関する説明を提供するために、fieldset 要素及び legend 要素を使用するの方法を考慮すべきである。

コード例:

<h1>ドーナツ</h1>

<p>お好きなドーナツを選び、「ドーナツを購入」ボタンを押してください。</p>

<form action="http://example.com/donut" method="post">
<p>
  <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">チョコレート</label><br/>
  <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">クリーム入り</label><br/>
  <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">ハニーがけ</label><br/>
  <input type="submit" value="ドーナツを購入"/>
</p>
</form> 

参考リソース

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

検証

チェックポイント

ウェブページ内の type="text"type="file"type="password" を指定した input 要素、textarea 要素、select 要素全てについて:

  1. input 要素、textarea 要素及び select 要素の前に、そのコントロールの目的が特定できる label 要素がある。

  2. label 要素の for 属性値が、input 要素、textarea 要素及び select 要素の id と一致している。

  3. label 要素のラベルが視覚的に認識できる状態である。

ウェブページ内の type="checkbox" 及び type="radio" を指定した input 要素全てについて:

  1. input 要素の後に、そのコントロールの目的が特定できる label 要素があるか確認する。

  2. label 要素の for 属性が、input 要素の id 属性と一致している。

  3. label 要素のラベルが視覚的に認識できる状態である。

判定基準

  • 1.及び2.を満たしている。達成基準 3.3.2 に関しては、3.も満たしている。

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


H45: longdesc 属性を用いる

適用(対象)

短い代替テキストでは説明しきれない画像を含むHTML及びXHTML

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

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

H45 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、短い代替テキストでは画像の機能や情報が十分に伝達できない場合に、longdesc 属性でのファイル指定によって情報を提供することである。longdesc 属性には URI を指定する。これは非テキストコンテンツの詳しい説明を含む目的地を意味する。

制作者は、テキストを別のリソースまたはページ上の画像にテキストを含めることで、画像の説明を提供できる。別のリソースを用いて説明することの利点は、同じ画像を複数のインスタンスで簡単に再利用できることにあり、元となるドキュメントにページ上の視覚的なノイズを加えず、説明の最終点を利用者に明確にすることにある。画像と同じページに説明を提供する利点は、すべての利用者が説明にアクセスできることにある。ページ上のメソッドの制限は、複数の説明を単一の別ページに提供することと同様に、現在の longdesc 属性の実装サポートでは、長い説明文の最終点を識別できないということである。制作者はどこで説明文が終わるかを識別する定型文を提供することによって解決ができる。

事例

事例 1: longdesc 属性を用いて別のリソースに含まれた長い説明文を参照する。

コード例:

<p><img src="chart.gif" alt="複雑な図" longdesc="chartdesc.html"/></p> 

事例 2: longdesc 属性を用いて同じページに含まれた長い説明文を参照する。

コード例:

<img longdesc="thispage.html#desc" alt="購読者数の折れ線グラフ" src="http://www.company/images/graph.png">
<div id="desc">
<h3>長い説明文: 購読者数の折れ線グラフ</h3>
<!-- すべてのグラフ説明文 -->
<p>長い説明文の終点.</p>
<div>

参考リソース

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

検証

チェックポイント

  1. longdesc 属性を指定した img 要素がある。

  2. longdesc 属性の値が、存在するリソースの有効な URI である。

  3. URI で指定されたコンテンツには、関連付けられたオリジナルの非テキストコンテンツの詳しい説明が含まれている。

判定基準

  • 1.から3.を全て満たしている。

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


H46: embed 要素と一緒に noembed 要素を用いる

適用(対象)

embed 要素でプラグインを読み込むドキュメント

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

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

H46 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、embed 要素の代替コンテンツとして noembed を提供することである。noembed 要素は embed 要素がサポートされていない場合のみレンダリングされる。ページのどこにでも配置できるが、embed 要素の子要素として組み込むことを推奨する。これにより代替テキストが embed 要素に付与されてることで補助技術が明らかになる。

事例

事例 1: noembed 要素が embed 要素の内側にある

コード例:

<embed src="../movies/history_of_rome.mov"
  height="60" width="144" autostart="false">
  <noembed>
    <a href="../transcripts/transcript_history_rome.htm">"ローマの歴史"のコピー</a>
  </noembed>
</embed>

事例 2: noembed 要素が embed 要素のそばにある

コード例:

<embed src="moviename.swf" width="100" height="80"
  pluginspage="http://example.com/shockwave/download/" />
<noembed>
  <img alt="Still from Movie" src="moviename.gif" 
    width="100" height="80" />
</noembed>;

参考リソース

この達成方法に関する参考リソースはない。

(今のところ、なし。)

検証

チェックポイント

  1. embed 要素に子 noembed 要素があるかどうかを確認する

  2. embed 要素の直下に noembed 要素があるかどうかを確認する

判定基準

  • 1. 又は2. を満たしている。

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


H48: リストに、ol 要素、ul 要素、dl 要素を用いる

適用(対象)

HTML 及び XHTML

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

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

H48 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、リスト要素を役割に合わせて適切に利用し、関連する項目のリストを生成することである。ol 要素は順序のあるリストに、ul 要素は順序のないリストに利用する。定義リスト(dl 要素)は、用語とその定義をまとめるのに利用する。このようなマークアップを用いることで、リストを読みやすくできるとはいえ、すべてのリストをリスト要素でマークアップする必要はない。たとえば、文章に含まれるカンマ区切りのリストを、リスト要素でマークアップする必要はない。

リストの関係を示すためではなく、見た目をリストのようにしたいためにマークアップを用いることで、利用者が情報を利用しにくくなる恐れがある。リストのような見た目にする例としては、リスト項目の最初にアスタリスクを付け、br 要素を用いて各リスト項目を分けるといったことが挙げられる。

支援技術の中には、利用者をリストからリストへ、またはリスト項目からリスト項目へと誘導する機能を備えているものがある。スタイルシートを利用すれば、リストという役割の整合性を保ったまま、表現を変更することができる。

リスト構造(ul / ol)はハイパーリンクをグループ化するのにも役立つ。これが完了すると、スクリーンリーダーがリストの最初の項目からリストの最後までナビゲートする、または次のリストにジャンプするのに役立つ。 この選択により、リンクグループをバイパス化することができる。

事例

事例 1: 連続するステップを示すリスト

この事例では、プロセスの連続するステップを示すために順序リスト(ol 要素)を利用している。

コード例:

<ol>
  <li>卵と牛乳をボールの中で混ぜる。</li>
  <li>塩とコショウを加える。</li>
</ol>

事例 2: 材料のリスト

この事例では、お店で購入する品目を順不同リスト(ul 要素)で示している。

コード例:

<ul>
  <li>牛乳</li>
  <li>卵</li>
  <li>バター</li>
</ul>

事例 3: 言葉とその定義

この事例では、用語とそれを明確にする定義をまとめるのに定義リスト(dl 要素)を利用している。

コード例:

><dl>
  <dt>点滅</dt>
  <dd>1 秒当たり 0.5 回から 3 回、ついたり消えたりすること
  </dd>
</dl>

事例 4: 定義リストを用いた連絡先情報

この事例では、定義リストを用いて、対になる関連するアイテムをマークアップしている。対になっているアイテムは、それ自体が論理的に関連したリストである。定義リスト要素の CSS スタイルはブラウザによるサポートが十分ではないため、スタイル目的のためだけに span 要素がマークアップに含められているが、これは必須ではない。

<dl>
<dt><span>名前:</span></dt><dd><span>John Doe</span></dd>
<dt><span>電話番号:</span></dt><dd><span>01-2345678</span></dd>
<dt><span>FAX:</span></dt><dd><span>02-3456789</span></dd>
<dt><span>Eメール:</span></dt><dd><span>johndoe@someemail.com</span></dd>
</dl>

以下の CSS スタイルは、対になっているアイテムそれぞれをテーブルのようなレイアウトにして一行に並べるために用いることが可能である。

dt, dd{float: left;margin: 0;padding: 0;}
dt{clear:both;font-weight: bold}
dt span{display: inline-block; width: 70px;}
dd span{display: inline-block; margin-right: 5px;} 

この事例のサンプルとして、定義リストを用いた連絡先情報のサンプルがある。

事例 5: リストを用いてリンクをグループ化する

この事例では、リンクが ul 要素と li 要素を用いてグループ化されている。

コード例:

<a name="categories" id="categories"></a><h2>製品カテゴリ</h2>
<ul class="navigation">
    <li><a href="kitchen.html">キッチン</a></li>
    <li><a href="bedbath.html">ベッド&amp;amp; Bath</a></li>
    <li><a href="dining.html">ダイニング</a></li>
    <li><a href="lighting.html">照明</a></li>
    <li><a href="storage.html">収納</a><li>
</ul> 

リスト要素のスタイルを指定するのに CSS を使用することが可能で、この達成方法はさまざまなビジュアルデザインで用いることができる。

この CSS では、リストのビュレットとインデントする左側の余白を削除して、各リスト要素を水平に並べている。

コード例:

ul.navigation {
  list-style: none; 
  padding: 0;
}
ul.navigation li {
  display: inline;
}

このスタイルは、リストのビュレットと左側の余白を削除し、リスト項目を横並びのブロックにして表示する。

コード例:

ul.navigation {
 list-style: none; 
 padding: 0;
}
ul.navigation li {
 display: block; 
 float: left;
} 

参考リソース

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

検証

チェックポイント

  1. リストの視覚表現(ビュレットがあるかどうかに関わらず)を含んだコンテンツが、順不同リストとしてマークアップされている。

  2. 番号の付いたリストの視覚表現を含んだコンテンツが、順序リストとしてマークアップされている。

  3. 用語とその定義をリストという形式で表現する場合、そのコンテンツが定義リストとしてマークアップされている。

判定基準

  • 上記全てを満たしている。

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


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

適用(対象)

HTML 及び XHTML

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

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

H49 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

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

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

事例

事例 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>私は先生が来る前日でさえ、四角い硬い生け垣を這うような気分になって、
  そして、嗅覚に導かれて、最初のスミレとユリを見つけました。
  そこで気分が良くなったあと、私は落ち着く場所を探しに行き、
  涼しい葉と草に熱くなった顔を隠しました。</p>
 </blockquote> 

事例 3

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

コード例:

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

コード例:

<p>ヘレン・ケラーは、"<q>自己憐憫は私たちの最大の的であり、もし屈してしまうなら、 
私たちはこの世で何も良い事を行えない。</q>"と述べている。</p> 

事例 4

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

コード例:

<p>ベスは第9<sup>回目</sup>の科学大会で1<sup>位</sup>になりました。<p>
<p>水の化学式は、H<sub>2</sub>O です。</p> 

参考リソース

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

検証

チェックポイント

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

  2. 適切なセマンティックマークアップ(emstrongciteblockquotequotesubなど)が、テキストの変化を通じて情報を伝達するテキストをマークアップに用いられていることを確認する。

判定基準

  • 2.を満たしている。

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


H51: 表の情報を提示するために、テーブルのマークアップを使用する

適用(対象)

HTML 及び XHTML

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

解説

この達成方法の目的は、利用者がテーブルを見ることができない場合、又は表現形式が変更された場合でも、含まれる情報の関係を保てる方法で、表の情報を提示することである。情報を表として提示すべきと考えられるのは、テキスト、数値、画像、あるいは他のデータの論理関係が(垂直・水平に)二次元で存在するときである。論理関係は列と行で示され、列と行は論理関係が認識できる状態でなければならない。

table 要素は、子要素trthtd といっしょに用いることで、論理関係を認識可能にする。一方、列を整形するのにタブを入れたり、pre要素を利用するのは、純粋に見た目だけを考えた方法である。利用者がテーブルを見ることができない場合、又は表現形式が変更された場合は、視覚的に暗に示された論理関係は失われてしまう。

単純な表は一般的に列に対して 1 つのレベルの見出し、及び/又は行に対して 1 つのレベルの見出しがある。

通常、単純な表では、1 行目の 1 列目は空白または列全体の内容を 1 列目に記述する。1 行目の 1 列目は空白がなく(つまり、"列見出し"を含む)、列全体の内容を記述しており、読者は列と列の間の異なる意味を区別できる。

1 列目の行は、通常では空白ではなく、行全体の内容を記述した"行見出し"を含んでることが多い。読者は行と行の間の異なる意味を区別できる。その他に、1 列目は単純なデータが含まれる。

事例

事例 1: 列見出しと行見出しが付いた簡単なデータテーブルとしてマークアップしたスケジュール表

この事例では、簡単なデータテーブルに table 要素を利用している。1 行目は曜日、1 列目は時間である。これらのセルは th 要素でマークアップしてあり、列見出しが曜日、行見出しが時間という役割になっている。

スクリーンリーダーは、利用者がテーブルを読み進めるとき、対応する見出し情報の変化を読み上げる。それゆえ、スクリーンリーダーの利用者が同じ行を左右に動くときは、(もしあれば)予定に対応する曜日(列見出し)の読み上げを、同じ列を上下に移動するときは、対応する時間の読み上げを聞くであろう。

コード例:

<table>
  <tr>
    <td> </td>
    <th>月</th>
    <th>火</th>
    <th>水</th>
    <th>木</th>
    <th>金</th>
  </tr>
  <tr>
    <th>8:00から9:00</th>
    <td>サムと会う</td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <th>9:00から10:00</th>
    <td> </td>
    <td> </td>
    <td>ウィリアムズ先生</td>
    <td>サムとまた会う</td>
    <td>サン・アントニオから出発</td>
  </tr>
</table> 

参考リソース

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

検証

チェックポイント

  1. 表形式の情報がある。

  2. 表形式の情報それぞれについて:

    1. テーブルを、少なくとも tabletrthtd 要素を使ってマークアップしている。

判定基準

  • 上記全てを満たしている。

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


H53: object 要素のボディを使用する

適用(対象)

メディアを読み込むobject要素(HTML及びXHTML)

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

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

H53 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、object 要素によってレンダリングされるコンテンツに対して、テキストによる代替を提供することである。object 要素のボディは、そのオブジェクトに関する完全なテキストによる代替を提供するのに用いられるか、または追加的な非テキストコンテンツをテキストによる代替とともに含むことがある。

object 要素のフォールバックコンテンツは、ユーザエージェントによってメディアに要素が読み込まれなかった場合、つまり、ユーザエージェントがメディアテクノロジーまたは利用者の指定によるレンダリングできない場合のみ使用可能である。その状況ではフォールバックコンテンツが利用者に提示される。もしメディアがフォールバックコンテンツなしにレンダリングされた場合、メディアは直接アクセスできることが不可欠である。制作者は、適合基準にメディア技術の直接アクセス可能性に頼っておらず、利用者がフォールバックにアクセスできることを予期できるのであれば、達成基準を満たすためにのみこの達成方法に頼ることができる。

事例

事例 1: 長めの説明を含んだオブジェクト

コード例:

<object classid="http://www.example.com/analogclock.py">
  <p>ここにオブジェクトとその操作方法に関するテキストを記述する。</p>
</object>

事例 2: 代替テキストのある非テキストコンテンツを含んだオブジェクト

コード例:

<object classid="http://www.example.com/animatedlogo.py">
  <img src="staticlogo.gif" alt="会社名" />
</object>

事例 3: 機能の簡単な説明を含んだ画像オブジェクト

コード例:

<object data="companylogo.gif" type="image/gif">
  <p>会社名</p>
</object>

事例 4

この例は、情報の代替表現が提供するために object 要素がネストされている事実を利用している。

コード例:

<object classid="java:Press.class" width="500" height="500">
  <object data="Pressure.mpeg" type="video/mpeg">
    <object data="Pressure.gif" type="image/gif">
      温度は上昇し、バルーンの中の分子は…
    </object>
  </object>
</object>  

参考リソース

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

検証

チェックポイント

  1. object要素のボディに、そのオブジェクトの代替テキストがある

判定基準

  • 1.満たしている

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


H54: 単語の定義対象を特定するために、dfn 要素を使用する

適用(対象)

HTML 及び XHTML

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

解説

この達成方法の目的は、その語句の定義を伴って語句が用いられている箇所のマーク付けにdfn要素を用いることである。dfn要素は、囲んだ用語の定義対象であることを示すのに用いる。言い換えれば、その語句がその場所で定義されている場合に、その用語の存在をマーク付けするのである。ただし、用語を囲むのであって、定義を囲むわけではないことに注意すること。この達成方法は、定義方法に関するG112: インラインの定義を使用するとともに用いられる。

事例

事例 1

次のコードは、dfn要素の使用例である。

コード例:

<p>ウェブ・コンテンツ・アクセシビリティ・ガイドラインは、非テキストコンテンツに
対する代替テキストを要求している。&lt;dfn&gt;非テキストコンテンツ&lt;/dfn&gt;とは、
プログラムで解釈可能な一連の文字列ではないコンテンツや、人間の言葉として
表現されない一連のものであり、ASCIIアート(文字を使った図柄)、顔文字、
リート語(文字の代用)、テキストの代わりとなる画像が含まれる。</p>

参考リソース

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

検証

チェックポイント

  1. テキストの中で、インラインで定義されている単語、つまり単語の近くの文章に定義が出現するものを全て特定する。

  2. インラインで定義されているそれぞれの単語が、dfn要素に含まれている。

判定基準

  • 2.を満たしている。

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


H56: 入れ子になったテキストの表記方向に伴う問題を解決するために、インライン要素の dir 属性を使用する

適用(対象)

HTML 及び XHTML

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

解説

この達成方法の目的は、入れ子になった表記方向が含まれるテキストについて、インライン要素のdir属性で方向の変化を指定することである。入れ子になったテキストの表記方向とは、たとえば英語のパラグラフで、文章が次々と続いている中にヘブライ語の引用文が含まれるといった、表記方向の異なるテキストが混在したテキストの表記方向のことである。表記方向の異なるテキストが混在し、スペースや句読点が含まれていると、Unicodeの双方向アルゴリズムだけでは望ましくない結果になってしまうので、テキストをspan要素や他のインライン要素で囲み、dir属性を指定する必要がある。この達成方法の考え方は、What you need to know about the bidi algorithm and inline markupで説明されている。

事例

事例 1

この事例では、ヘブライ語と英語のように、混在したテキストの表記方向を持つ文章で、右から左へと表記すべき入れ子になったテキストの表記方向を明らかにする。引用全体はヘブライ語であり、右から左に表記されるが、「W3C」というテキストとカンマは、次のようにヘブライ語のテキストの左側に(すなわち、後ろに)現れるべきである:

The title is "פעילות הבינאום, W3C" in Hebrew.

視覚的な順序に基づくASCII(右から左へ表記するテキストは大文字で、左から右へ表記するテキストは小文字で書く)では、次の通りである:

the title is "w3c ,YTIVITCA NOITAZILANOITANRETNI" in hebrew.

正しく表示するためには、Unicodeの双方向アルゴリズムだけでは不十分なため、次に示すように「W3C」というテキストが引用の中で右側に置かれたままである:

The title is "פעילות הבינאום, W3C" in Hebrew.

視覚的な順序に基づくASCIIでは、次の通りである:

the title is "YTIVITCA NOITAZILANOITANRETNI, w3c" in hebrew.

次のようにマークアップすることによって、期待する結果が得られる。

コード例:

<p>The title says "<span lang="he" 
dir="rtl"><span dir="rtl">פעילות הבינאום, W3C</span></span>" in Hebrew.</p>

【訳注:このコード例にはxml:lang属性がありません。XHTML 1.0では、lang属性とxml:lang属性を一緒に指定するのが普通です。WCAGワーキンググループに確認中。】

参考リソース

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

検証

チェックポイント

  1. 文書内のテキストの表記方向を調べる。

  2. テキストの表記方向が右から左であれば、先祖要素にdir属性が指定され、値に「rtl」が指定されている。

  3. テキストの表記方向が左から右であれば、先祖要素にdir属性が指定されていない、又は先祖要素にdir属性が指定され、値に「ltr」が指定されている。

判定基準

  • 2.と3.を満たしている。

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


H57: html 要素の lang 属性を使用する

適用(対象)

HTML 及び XHTML

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

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

H57 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、html要素にlang属性及び(又は)xml:lang属性を指定することで、文書の初期設定言語を特定することである。

次のようなさまざまな理由から、文書の言語を特定することが重要である:

  • 点字翻訳ソフトウェアでは、制御符号をアクセント付き文字の代わりにすることや、2級点字の縮約形を誤って生成するのを避けるために制御符号を挿入することができる。

  • 複数の言語をサポートする音声合成装置では、そのページの言語に合った発音と構文を採用し、適用することで、テキストを正しい発音、適切なアクセントで読み上げることができる。

  • 言語をマークアップしておくことは、将来の技術発展に寄与する。たとえば、言語を自分で翻訳できない利用者でも、なじみのない言語を翻訳するマシンを利用できるようになるだろう。

  • 言語をマークアップしておくことは、ユーザエージェントが辞書で定義を提供するのにも役立つ。

HTML 4.01では、html要素にlang属性を指定する。一方、XHTMLをtext/htmlとして配信する場合には、XHTML仕様の要求に合致しつつ、HTMLとの後方互換性を確保するために、html要素にlang属性とxml:lang属性を指定する。XHTMLをapplication/xhtml+xmlとして配信する場合には、html要素のxml:lang属性のみを指定する。lang属性とxml:lang属性の双方には、同じ値のみが指定できる。

注記 1: HTMLはlang属性の利用のみを指示しているが、XHTML 1.0は(経過措置として)両方の属性を認めており、XHTML 1.1はxml:lang属性のみを認めている。

注記 2: lang属性とxml:lang属性で指定できる値については、下記の参考リソースで示されている。言語タグでは、その言語を示すために主言語コードを用い、(ハイフン区切りで示す)任意の副言語コードは言語の異体を示すのに用いる。たとえば、英語は主言語コードでは「en」で示すが、イギリス英語とアメリカ英語は「en-GB」と「en-US」という形で区別できる。この達成方法では、主言語コードの利用が重要である。副言語コードの利用は任意であるが、ある状況では役に立つかもしれない。

事例

事例 1

この事例では、HTML文書の内容がフランス語であることを明確にしている。

コード例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr"> 
<head>
  <title>document écrit en français</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>  
<body>     
	...document écrit en français...   
</body>
</html>

事例 2

この事例では、text/htmlというコンテンツタイプのXHTML 1.0文書の内容がフランス語であることを明確にしている。XHTML仕様の要求に合致しつつ、HTMLとの後方互換性を確保するために、lang属性とxml:lang属性の両方を指定している。

コード例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
  <title>document écrit en français</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body> 
...document écrit en français...      
</body>
</html>

事例 3

この事例では、application/xhtml+xmlというコンテンツタイプのXHTML 1.1文書の内容がフランス語であることを明確にしている。xml:lang属性のみを指定している。

コード例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>document écrit en français</title>
	<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
</head>
<body> 
	...document écrit en français... 
</body>
</html>

参考リソース

検証

チェックポイント

  1. 文書にhtml要素がある。

  2. html要素にlang属性及び(又は)xml:lang属性が指定してある。

  3. lang属性及び(又は)xml:lang属性の値がBCP 47: Tags for the Identification of Languages又は後継仕様に準拠しており、そのウェブページの主言語を反映している。

判定基準

  • 上記全てを満たしている。

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


H58: 自然言語の変更を指定するために、lang 属性を使用する

適用(対象)

HTML 及び XHTML

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

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

H58 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、使用しているHTMLまたはXHTMLのバージョンに応じて、langまたはxml:lang属性を用いることで、ページ上で用いられている自然言語の変化を明示することである。

HTML 4.01では、各要素のlang属性を用いる。text/htmlとして提供されるXHTMLでは、各要素のlang属性とxml:lang属性を用いることでXHTMLの仕様を満たし、またHTMLに対する後方互換性を保持する。application/xhtml+xml として提供されるXHTMLの場合は、各要素のxml:lang属性を用いる。

注記: HTMLではlang属性のみを使用できる。XHTML 1.0.では移行措置として両方の属性を使用できる。XHTML 1.1ではxml:lang属性のみを使用できる。

lang及びxml:lang属性に指定できる値については、以下に示す参考リソースに示されている。言語タグは、言語を表すプライマリー・コードと、その言語が使用される地域や記述に用いる文字コードなどを表すサブ・コードから成っている。サブ・コードの指定は任意で、指定する場合にはプライマリー・コードに続けてハイフンを記述し、その後に記述する。たとえば、プライマリー・コード「en」は英語を示し、「en-gb」と「en-us」はそれぞれイギリス英語とアメリカ英語を示す。この達成方法において、プライマリー・コードの使用は重要である。サブ・コードの使用は任意だが、状況によっては有用なものになり得る。

事例

事例 1

この例では、xml:lang属性を用いてドイツ語の引用部分を示している。このコードは、lang属性の使用が許されていないXHTML 1.1に含むことができるように書かれている。

コード例:

<blockquote xml:lang="de">
  <p>
    Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
    aber der Esel merkte, daß kein guter Wind wehte, lief fort
    und machte sich auf den Weg nach Bremen: dort, meinte er,
    könnte er ja Stadtmusikant werden.
  </p>
</blockquote> 

参考リソース

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

検証

チェックポイント

ドキュメントにおける各要素について:

  1. 言語コードの継承(HTML4.01)で示されているように、その要素のコンテンツの自然言語が、その要素に継承されている言語と同一である。

ドキュメントにおける各lang属性について:

  1. lang属性の値がBCP 47: Tags for the Identification of Languagesに適合している。

ドキュメントにおける各xml:lang属性について:

  1. xml:lang属性の値がBCP 47: Tags for the Identification of Languagesに適合している。

判定基準

  • 上記の全てを満たしている。

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


H59: link 要素及びナビゲーションツールを使用する

適用(対象)

HTML 及び XHTML

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

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

H59 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、link要素を用いて、あるHTMLページがウェブページ一式の中でどのような位置にあるのかを示すメタデータを提供する方法、及び利用者がウェブページ一式の中で特定のコンテンツを発見することを支援する方法について解説することである。rel属性の値が、どのような関係性が定義されているのかを示し、href属性がその関係を持つドキュメントへのリンクを提供する。複数のlink要素を用いることで、複数の関係を示すこともできる。rel属性の値としては、以下のようなものが有用である:

  • Start:複数のドキュメントの中の最初のドキュメントへのリンク

  • Next:一連のドキュメントにおける次のドキュメントへのリンク

  • Prev:一連のドキュメントにおける前のドキュメントへのリンク

  • Contents:目次の役割を果たすドキュメントへのリンク

  • Index:現在のドキュメントに対して索引を提供するドキュメントへのリンク

事例

事例 1

オンライン書籍の第2章のウェブページがあり、head要素セクションに次のリンクが含まれている。

コード例:

<link rel="Contents" href="Contents.html" title="目次"  />
<link rel="Index" href="Index.html" title="索引" />
<link rel="Prev" href="Chapter01.html" title="01. なぜ進んでやるのか?" />
<link rel="Next" href="Chapter03.html" title="03. 誰が進んでやるのか?" /> 

参考リソース

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

検証

チェックポイント

一連のまたは集合的なウェブページにおける、あるウェブページについて:

  1. ナビゲーションに関する全てのlink要素が、その文書のhead要素セクションに含まれている

  2. その文書のhead要素セクション内のナビゲーションに関する各link要素に、少なくとも以下が指定されている:

    1. リンクタイプを特定するためのrel属性

    2. 該当するリソースの場所を示すための妥当なhref属性

判定基準

  • 上記全てを満たしている。

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


H60: 用語集にリンクするために、link 要素を使用する

適用(対象)

HTML 及び XHTML

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

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

H60 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、用語集の場所を示すメカニズムを提供することである。コンテンツの中にある用語が、別の用語集ページで定義されている場合、用語集を用いるドキュメントのhead要素の範囲内にlink要素を指定することで、その用語集が参照できる。link要素のrel属性に「glossary」という値を指定し、href属性には用語集ページのURIを指定する。これで、利用者が素早く簡単に用語集にアクセスするのをユーザエージェントが支援できるようになる。

事例

事例 1: WCAG 2.0の用語集

コード例:

<link rel="glossary" href="http://www.w3.org/TR/WCAG20/#glossary">

参考リソース

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

(今のところ、なし。)

検証

チェックポイント

用語集の役割を果たしている、単語と定義のあらゆる組み合わせについて:

  1. 用語集で定義した語句や略語が含まれたウェブページのhead要素セクションに、link要素が含まれている。

  2. link要素にrel="glossary"という属性が指定してある。

  3. link要素のhref属性が、用語集ページをきちんと参照している。

判定基準

  • 上記全てを満たしている。

注記:WCAGで用いている略語の定義は、「単語、語句、又は名称の短縮形で、その略語が言語の一部になっていないもの。」である。

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


H62: ruby 要素を使用する

適用(対象)

XHTML 1.1 及び HTML5

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

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

H62 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、読みかたの情報、及び意味が読みかたによって決まる場合の連続するテキストの意味に関する情報を提供するために、ルビを振ることである。

多くの言語では、連続するテキストが読み方によって意味が異なる場合がある。これは、ヘブライ語、アラビア語、ほかの諸言語と同様に東アジア言語によくある。また、英語など西ヨーロッパ言語でも起こる。

「Ruby Annotation」は XHTML 1.1 のモジュールのひとつとして定義されている。コンテンツ制作者は「Ruby Annotation」によって、読み方や、場合によっては定義を提供すべく、「ベーステキスト」に注釈を加えることができる。日本語など東アジア言語のテキストでは、ルビが当たり前に利用される。

ルビのマークアップには単純と複雑の 2 種類がある。単純なルビのマークアップは完全な言葉やフレーズのようなテキストの実行が適応される。これは"ベース"テキスト(rb 要素)として知られている。ルビの注釈はどのように読むか示す用語(rt 要素、または Ruby テキスト)を小さなフォントで表示している。("ルビ"という用語は、印刷でこの目的のために使用される小さい活字が由来)。ルビのテキストは通常、ベーステキストの上または直前に、つまり、横書きのテキストでは直上、縦書きのテキストでは右にレンダリングされる。日本語では、テキストの意味を提供するために、読み方のルビに対して(視覚的に)ベーステキストの反対側に、ルビを用いることもある。また、単純なルビのマークアップでは、ルビのマークアップをサポートしていないユーザエージェント(つまり、XHTML 1.1 又は HTML5 をサポートしていないユーザエージェント)のために、"フォールバック"オプションを提供している。

複合ルビマークアップでは、ベーステキストを小さな単位に分け、ルビ注釈を別々に関連づけることができる。複合ルビマークアップではフォールバックオプションはサポートされない。

読みかたを伝える発音区別符号が Unicode フォントに含まれているヘブライ語などの言語では、ルビが用いられるのは稀である。また、英語やヨーロッパ言語でも珍しい。

注記:ルビ又は他の方法によって読み方を示す主な理由は、読みかたさえ提供されていれば、コンテンツの書かれた言語を読み、理解することが可能な、障害のある利用者がコンテンツにアクセスできるようにするためである。ただし、そのコンテンツが書かれている言語に馴染みがない利用者のために、読みかたを提供する必要はない。

事例

事例 1: 頭文字語の読みかたを提供するルビのマークアップ

この事例では、Web Content Accessibility Guidelines という複数の単語の1文字目をとって作った頭文字語(頭字語)の読み方を提供するために、ルビを用いている。WCAG という文字がルビベース(rb 要素)であり、読み方をルビテキスト(rt 要素)として示す。ルビのカッコを指定する rp 要素は、ルビをサポートしていないユーザエージェントに対して、rt 要素で囲まれたテキストが読み方を提供していることを示すために用いられる。ベーステキストの直後にカッコ付きで読み方を描画する(ルビをサポートしているユーザエージェントでは、カッコは表示されない)。

コード例:

<p>われわれがこのガイドラインについて話し合うときは、
  <ruby>
    <rb>WCAG</rb>
    <rp>(</rp>
    <rt>Wuh-KAG</rt>
    <rp>)</rp>
  </ruby>
と呼ぶ。</p> 

事例 2: 日本語のルビ注釈

次は、日本語の事例である。日本語では漢字の読み(ふりがな)を提供するのにルビが用いられる。ルビのカッコを指定する rp 要素は、読みかたを提供する rt 要素のテキスト、つまりルビをサポートしていないユーザエージェントが利用し、ベーステキストの直後にカッコ付きで読み方を描画する(ルビをサポートしているユーザエージェントでは、カッコは表示されない)

コード例:

<p>
  <ruby>
    <rb>慶應大学</rb>
    <rp>(</rp>
    <rt>けいおうだいがく</rt>
    <rp>)</rp>
  </ruby>
</p> 

参考リソース

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

検証

チェックポイント

読みかたを提供するルビ注釈をつけた、連続するテキストについて:

  1. rb 要素で定義した連続するテキストに、rt 要素で読みかたが指定してある。

  2. 単純ルビマークアップを用いている場合、rp 要素を指定して、ルビをサポートしていないユーザエージェントに対して、rt 要素に囲まれたテキストが読み方を提供していることを示している。

判定基準

  • 1.及び 2.を満たしている。

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


H63: データテーブルの見出しセルとデータセルを関連付けるために、scope 属性を使用する

適用(対象)

HTML 及び XHTML

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

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

H63 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、scope 属性を利用して見出しセルとデータセルを関連付けることである。 scope 属性を利用するのは、見出しとして利用するあらゆるセルが及ぶ範囲を明確にするためである。範囲とは、そのセルが行、列、行グループ、列グループのどの見出しであるかを特定するものである。rowcolrowgroupcolgroup という値によって範囲を特定することになる。

事例 1 のように、見出しが 1 行目や 1 列目にない単純なテーブルに対してこの達成方法が利用できる。今日のスクリーンリーダーのサポートを考えると、単純なテーブルについて次の 2 つの状況が当てはまる場合に、この達成方法の利用が示唆される:

  • td 要素でマークアップしてあるデータセルが、行見出し又は列見出しとしても機能する場合

  • th 要素ではなく td 要素でマークアップしてある見出しセルがある場合、コンテンツ制作者は、CSS でコントロールする方法があるがそれを採用せず、th 要素の表示特性を避けるために td 要素でマークアップすることがある。

注記 1: 1 行目や 1 列目に見出しがある単純なテーブルについては、scope 属性を指定せずに th 要素を利用するだけで十分である。

注記 2: 複雑なテーブルについては、H43: データテーブルのデータセルを見出しセルと関連付けるために、id 属性及び headers 属性を使用するの通り、id 属性と headers 属性を利用する。

注記 3: 1つの複雑な表よりも、単純な複数の表を用いて作業するほうが簡単だと思う利用者もいるだろう。制作者は、複雑な表を1つ以上の単純な表に変換できるかどうかを検討したい場合がある。

事例

事例 1: 単純なスケジュール表

次のコード例では、1 列目にテーブルの行番号を示す連番が含まれている。行の中でも重要な値は 2 列目に含まれるため、各セルにscope="row" と指定してある。1 行目のセルは td 要素でマークアップし、これらにも scope="col" と指定してある。

コード例:

<table border="1">
  <caption>連絡先</caption>
  <tr>
    <td></td>
    <td scope="col">名前</td>
    <td scope="col">電話番号</td>
    <td scope="col">ファックス番号</td>
    <td scope="col">市名</td>
  </tr><tr>
    <td>1.</td>
    <td scope="row">ジョエル・ガーナー</td>
    <td>412-212-5421</td>
    <td>412-212-5400</td>
    <td>ピッツバーグ</td>
  </tr><tr>
    <td>2.</td>
    <td scope="row">クライブ・ロイド</td>
    <td>410-306-1420</td>
    <td>410-306-5400</td>
    <td>ボルティモア</td>
  </tr><tr>
    <td>3.</td>
    <td scope="row">ゴードン・グリニッジ</td>
    <td>281-564-6720</td>
    <td>281-511-6600</td>
    <td>ヒューストン</td>
  </tr>
</table>

参考リソース

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

検証

チェックポイント

各データテーブルについて:

  1. th 要素全てに、scope 属性が指定されている。

  2. 他の要素の見出しとしての役割を果たす全ての td 要素に、scope 属性が指定されている。

  3. 全ての scope 属性に、値として rowcolrowgroupcolgroup が指定されている。

判定基準

  • 上記全てを満たしている。

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


H64: frame 要素及び iframe 要素の title 属性を使用する

適用(対象)

frame 要素又は iframe 要素を用いている HTML 及び XHTML ドキュメント

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

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

H64 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、フレームの内容を説明するための、frame 要素又は iframe 要素での title 属性の使用方法を示すことである。title 属性はフレームのラベルを提供するものなので、利用者はどのフレームの中に入ってその詳細を見て回るかどうかを判断できる。title 属性は、フレームセットの中の個々のページ(frame 要素)やインラインフレーム(iframe 要素)のラベルを付けるものではない。

title属性はフレームにラベルを付けるものであって、文書にラベルを付けるtitle要素とは異なることに注意しよう。title属性は利用者が複数のフレームの間を移動しやすくし、またtitle要素は利用者の現在位置を明確にするものであり、双方を提供すべきである。

title 属性を name 属性に置き換えることはできない。title 属性は利用者のためにフレームにラベルを付けるものであるのに対して、name 属性はスクリプトによる操作やウィンドウのターゲットを決めるためにフレームにラベルを付けるものだからである。つまり、name 属性は利用者に提供されるものではなく、title 属性だけがその役割を果たしている。

HTML5 では、frame 要素が廃止されている。iframe 要素は未だに HTML5 仕様の一部である。

事例

事例 1

この事例は、ナビゲーションバーと主要コンテンツを別の文書として読み込んでいるフレームそれぞれを説明するために、frame 要素に title 属性を指定する方法を示している。

コード例:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>単純なフレームセット文書</title>
  </head>
  <frameset cols="10%, 90%">
    <frame src="nav.html" title="メインメニュー" />
    <frame src="doc.html" title="文書" />
    <noframes>
      <body>
        <a href="lib.html" title="図書館へのリンク">選択して、
        電子図書館に進んでください。</a>
      </body>
    </noframes>
  </frameset>
</html> 

事例 2

この事例は、インラインフレームの内容を説明するために、iframe 要素に title 属性を指定する方法を示している。さらに、iframe 要素を解釈できない古いブラウザのために、読み込むページへの代替リンクを iframe 要素の内容に含めてある。

コード例:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>インラインフレームを利用した文書</title>
  </head>
...
<iframe src="banner-ad.html" id="testiframe" 
  name="testiframe" title="広告">
    <a href="banner-ad.html">広告</a>
</iframe>
...
</html> 

参考リソース

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

検証

チェックポイント

  1. HTML 又は XHTML のソースコードにある frame 要素と iframe 要素のそれぞれに、title 属性が指定されている。

  2. title 属性の値として、そのフレームを特定できるテキストがある。

判定基準

  • 1.及び2.を満たしている。

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


H65: label 要素を使用することができないとき、フォーム・コントロールを特定するために、title 属性を使用する

適用(対象)

value属性、alt属性、または要素内容で特定できないHTML及びXHTMLのフォーム・コントロール

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

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

H65 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、ラベルを付けるのが視覚デザイン上そぐわない場合(たとえば、ラベルとなりうるテキストが画面上にない場合)や、ラベルを表示することで混乱を引き起こしてしまう場合に、title 属性を利用してフォーム・コントロールにラベルを付けることである。それによって、ユーザエージェントや支援技術が、title 属性を読み上げることができる。

事例

事例 1: 検索対象を絞り込むプルダウンメニュー

検索フォームで検索対象を絞り込むプルダウンメニューを用いている。そのプルダウンメニューは、検索語を入力するテキストフィールドのすぐそばにある。テキストフィールドとプルダウンメニューの関係は、見た目のデザインを目で見ることができる利用者には明白であり、ラベルを置くスペースはない。そこで、select 要素を特定するのに title 属性を利用している。title属性はスクリーンリーダーによって読み上げられたり、画面拡大ソフトを使っている利用者にはツールチップとして表示されたりする。

コード例:

<label for="searchTerm">検索語:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="検索対象" id="scope">
…
</select>

事例 2: 電話番号の入力フィールド

ウェブページの中に、アメリカでの電話番号を入力するコントロールがあり、市外局番、市内局番、下 4 桁の 3 つのフィールドで構成されている。

コード例:

<fieldset><legend>電話番号</legend>
<input id="areaCode" name="areaCode" title="市外局番" 
type="text" size="3" value="" >
<input id="exchange" name="exchange" title="電話番号の上3桁" 
type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="電話番号の下4桁" 
type="text" size="4" value="" >
</fieldset>

事例 3: 検索機能

ウェブページに、利用者が検索語を入力できるテキストフィールドと、検索を実行するための「検索」というラベルが付いたボタンがある。フォーム・コントロールを特定するの title 属性を利用し、ボタンはテキストフィールドの直後に置いてあるので、テキストフィールドに検索語を入力すべきことは利用者にとって明白である。

コード例:

<input type="text" title="ここに検索語を入力"/> 
<input type="submit" value="検索"/>

事例 4: フォーム・コントロールのデータテーブル

フォームコントロールのデータテーブルは、各コントロールをそのセルの列ヘッダーと行ヘッダーに関連付ける必要がある。 タイトル(またはオフスクリーン LABEL)がないと、フォームをタブで移動しながら補助技術を使用して対応する行/列ヘッダー値を一時停止して調べることは視覚的でない利用者には困難である。

例えば、調査のフォームには 質問、同意、未決定、同意しないの 4 つの列見出しが最初の行にある。これらの行は質問と、3 つの列の回答選択に対応する各セルのラジオボタンが含まれている。すべてのラジオボタンのtitle属性は、回答選択(列見出し)と質問のテキスト(行見出し)をハイフンまたはコロンをセパレータとして連結したものである。

参考リソース

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

検証

チェックポイント

  1. label 要素によって関連付けられていないフォーム・コントロールを特定する。

  2. そのコントロールに title 属性が指定されている。

  3. title 属性によってそのコントロールの目的を特定している。

判定基準

  • 上記全てを満たしている

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


H67: 支援技術が無視すべき画像の img 要素で、alt 属性値を空にして、title 属性を付与しない

適用(対象)

画像を読み込む HTML 及び XHTML ドキュメント

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

解説

この達成方法の目的は、支援技術が無視できるように画像をマークアップする方法を示すことである。

title 属性が使用されておらず、代替テキストが空に指定されているなら(例 alt="")、それは画像を無視して差し支えないことを支援技術に示している。

注記: alt 属性の代替テキストを 「空」にするのと、alt 属性が指定されていないことは同義ではない。

事例

事例 1

次の画像は、ウェブページに装飾のための画像を挿入するのに使用される。

コード例:

<img src="squiggle.gif" width="20" height="20" alt="" />

参考リソース

この達成方法に関する参考リソースはない。

(今のところ、なし。)

検証

チェックポイント

無視されるべき各画像に対して、

  1. title 属性がない又は空である。

  2. alt 属性が存在し、空であることを確認する。

判定基準

  • 1.及び2.を満たしている。

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


H69: コンテンツの各セクションの開始位置に見出し要素を提供する

適用(対象)

HTML 及び XHTML

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

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

H69 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、コンテンツの構造を伝達するために、セクションごとに見出しを指定することである。見出しのマークアップは、次のように利用されることがある。

  • メインコンテンツの開始位置を示す

  • メインコンテンツ領域にあるセクションの見出しをマークアップする

  • 上部又はメインのナビゲーション、左側又はサブのナビゲーション、そしてフッターのナビゲーションなど、さまざまなナビゲーションを含んだセクションを区別する

  • 見出しとして用いられる文字画像をマークアップする

  • セクションによって利用者がページをナビゲートできるように、または、繰り返される情報のブロックをスキップできるようにする

見出しは論理的な階層を伝えるためにデザインされている。見出しの階層の中のレベルを飛ばすと、文書構造がきちんと検討されなかったのではないか、又は一部の見出しが意味ではなく視覚的な表現を得るために選択されたのではないか、といった印象を与えてしまうかもしれない。著者には見出しを階層的に入れ子にすることが推奨される。見出しが階層的である場合、もっとも重要な情報には最も高い論理レベルが与えられ、下位のセクションにはその後の論理レベルが与えられる(すなわち、h2 は h1 の下位セクションである)。このような種類の見出しを与えることは、コンテンツの全体的な構成を、利用者がより簡単に理解することに役立つ。

見出しは、コンテンツの中の重要なセクションの開始位置を示すものであるため、支援技術のユーザーが適切な見出しまで直接ジャンプしてから、コンテンツを読み始めることができる。これにより、他の方法でそのコンテンツに到達するのに時間を要していた利用者のインタラクションが大幅に速くなる。見出しによって、スクリーンリーダ―を利用する全盲の人や、情報のグループを作る支援技術を利用する認知的な障害のある人、あるいは、コミュニケーション障害や読書のときにスクリーンリーダ―に支援される文盲の人のような、障害者がより簡単に見つけられる情報の塊を作ることができる。

注記: 全ての達成方法は、特別なユーザエージェント(支援技術や特別なプラグインを含む)を必要とする人たちが入手でき、そうした種類のユーザエージェント(例えば、スクリーンリーダ―、あるいは適切にマークアップされたコンテンツのナビゲーションにキーボードが使えるようにするプラグインなど)を利用できることを仮定している。

事例

事例 1

この事例では、各セクションの見出しを h2 要素でマークアップすることによって、検索ページ内の複数のセクションを構成している。

コード例:

<h1>技術関連の定期刊行物の検索</h1>
 <h2>検索</h2>
 <form action="search.php">
  <p><label for="searchInput">検索トピックスを入力:</label>
  <input type="text" size="30" id="searchInput">
  <input type="submit" value="検索"></p>
 </form>
 <h2>検索可能な定期刊行物</h2>
 <div class="jlinks">
  <a href="pcoder.com">プロフェッショナルコーダー</a> |
  <a href="algo.com">アルゴリズム</a> |
  <a href="jse.com">ソフトウェア工学ジャーナル</a>
 </div>
 <h2>検索結果</h2>
 ……このセクションに検索結果を表示……

事例 2: コンテンツ全体の構成を示している見出し

この事例では、ナビゲーションとメインコンテンツを知覚できるように、見出しマークアップを利用している。

コード例:

<!-- ロゴ、バナー画像、検索フォームなど  -->
  <h2>ナビゲーション</h2>
    <ul>
      <li><a href="about.htm">会社概要</a></li>
      <li><a href="contact.htm">お問い合わせ</a></li>
       ...
    </ul>
  <h2>見出しに関する全て</h2>
   <!-- メインコンテンツを構成するテキスト、画像、その他のもの…… -->

事例 3: メインコンテンツ部分にあるコンテンツの構成を示している見出し

留意すべきは、HTML 4.01 及び XHTML 1.x においては、見出し要素はセクションの開始位置をマークアップするためだけに用いる。つまり、見出し要素はそのコンテンツとして見出し要素を含むことはない。【訳注:WCAGワーキンググループに確認中です。】

コード例:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>調理手法</title>  
  </head>   
  <body>     
    <h1>調理手法</h1>     
    <p>       
      ……ここにテキストが入ります……     
    </p>           
    <h2>油を使った調理</h2> 
    <p> 
        ……このセクションのテキスト……     
    </p>           
    <h2>バターを使った調理</h2>       
    <p>
        ……このセクションのテキスト……     
    </p>   
  </body> 
</html>

参考リソース

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

検証

チェックポイント

  1. コンテンツが複数のセクションに分けられていることを確認する。

  2. そのページの各セクションが見出しで始まることを確認する。

判定基準

  • 2.4.1 には、#2 を満たすことを確認する。

  • 2.4.10 には、#1 と #2 を満たすことを確認する。

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


H70: 繰り返されているコンテンツのブロックをグループ化するために、frame 要素を使用する

適用(対象)

フレームを用いているHTML及びXHTMLドキュメント

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

解説

この達成方法の目的は、繰り返しているブロックをグループ化するために、どのようにフレームセットを用いることができるかを示すことである。ユーザエージェント及び支援技術のほとんどが、フレームからフレームへとナビゲートする手段を提供しているため、要素をまとめるのにフレームを使うことによって、繰り返されているコンテンツのブロックを簡単に通過できるメカニズムを提供することができる。ウェブサイトでフレームセットを用いている場合、コンテンツのブロックそれぞれを別々のフレームにまとめられる。そして、繰り返しているコンテンツのブロックを、各ウェブページのフレームセットの中で、同一のフレームに表示させる。さらに、各 flame 要素には、そのフレームの内容を説明する title 属性を指定しなければならない。フレームに適切なタイトルが付いていれば、利用者はフレームのナビゲーション機能を使用してコンテンツのブロック間を簡単に移動することができるようになる。

この達成方法は、ページ内のコンテンツを構成するのに既にフレームセットを用いている場合に適している。フレームセットを用いていないウェブページには、他の達成方法を用いることが望ましい。多くの支援技術利用者は、フレームの扱いに手間がかかるからである。さらに対応が望まれる達成方法(参考)として、ノーフレーム(noframes要素)を用いる達成方法が、達成基準 1.1.1 にある。

HTML5 では、frame 要素は廃止されている。

事例

事例 1

次のコード例では、コンテンツを構成するのに 2 つのフレームを用いている。1つ目のフレームのソースは navigation.html というウェブページであり、ナビゲーションのための HTML が含まれている。このフレームには、ナビゲーションバーであることを特定する title 属性が指定してある。2 つ目のフレームはサイトの主要コンテンツであり、main.html がソースである。title 属性に「主要ニュースコンテンツ」とありその機能を特定している。

コード例:

<frameset cols="20%, *">
  <frame src="navigation.html" name="navbar" title="ナビゲーションバー" />
  <frame src="main.html" name="maincontent" title="主要ニュースコンテンツ" />
  <noframes>
    <p><a href="noframe.html">フレームなしのバージョン</a>をご覧ください。</p>
  </noframes>
</frameset> 

参考リソース

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

検証

チェックポイント

そのウェブページで、フレームを用いてコンテンツを構成している場合:

  1. 繰り返されているコンテンツのブロックそれぞれを、別々のフレームにまとめていることを確認する。

  2. 繰り返されているコンテンツのフレームそれぞれが、各ページのフレームセット内で同じ場所に出現することを確認する。

判定基準

  • 1. 及び 2. を満たしている。

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


H71: フォーム・コントロールのグループに関する説明を提供するために、fieldset 要素及び legend 要素を使用する

適用(対象)

HTML 及び XHTML

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

解説

この達成方法の目的は、関連するフォーム・コントロールをセマンティックにグループ化する方法を提供することである。これによって、利用者はフォーム・コントロールの関係が理解でき、より早く効率的にフォームを利用できるようになる。

フォーム・コントロールは、fieldset 要素で囲むことによってグループ化できる。つまり、fieldset 要素内にある全てのフォームコントロールが関連付けられることになる。fieldset 要素内での最初の要素はlegend 要素でなければならず、legend 要素はそのグループのラベルや説明を提供するものである。なお、利用者を混乱させてしまう恐れがあるため、コンテンツ制作者は必要以上に fieldsets 要素を入れ子にすることを避けるべきである。

フォーム・コントロールのグループ化が最も重要なのは、関連するラジオボタンやチェックボックスをまとめるときである。ラジオボタンやチェックボックスは、name 属性で同じ値が指定されている場合に、一組のコントロールとして関連付けられる。これらは、選択肢の中から自由に選択できるセレクトメニューと同じように動作することになるが、セレクトメニューは単一のコントロールであるのに対し、ラジオボタンとチェックボックスは複数のコントロールである点が異なる。それぞれのラジオボタンやチェックボックスの個々のラベルは、そのグループの説明となる文脈を十分に伝えられないことがある。この場合、セマンティックにグループ化しておくことが特に重要であり、それによって単一のコントロールのように簡単に操作できるようになり、またグループの説明を補足することができる。ユーザエージェントは、その説明を提供し、複数のコントロールが同じグループの一部であることを利用者に伝えるために、各コントロールのラベルよりも先に legend 要素の内容を提示することが多い。

ラジオボタンやチェックボックスほどには明確に関連していないコントロールをグループ化することが有用になることがある。たとえば、利用者の住所を入力するフィールドがいくつかに分かれている場合、「住所」という legend 要素を付けてグループ化しておくとよい。

ただし、(単一の名前付きフィールドの値を持つ場合でも)関連するラジオボタン又はチェックボックスのグループに明らかな指示及び明確な選択肢が含まれている(すなわち、特定の各コントロールに関連付けられた個々のラベルが十分な記述を提供する)場合、fieldset 及び legend 要素は必須ではない。この場合は、H44: テキストのラベルとフォーム・コントロールを関連付けるために、label 要素を使用するで十分である。

ブラウザの初期状態では、fieldset 要素によってグループ化したコントロール全体を枠で囲むという表示であるため、コンテンツ制作者は fieldset 要素の利用を避けたい場合がある。しかし、このような視覚的なグループ化も有益であり、その状態のままにしておくこと(あるいは、何らかの形で視覚的にグループ化すること)をしっかり検討すべきである。見た目のスタイルについては、CSS で fieldset 要素に対する「border」プロパティを上書きしたり、fieldset 要素に対する「position」プロパティを上書きしたりすることによって変更できる。

事例

事例 1: 選択式のテスト

この事例では、1つの質問に対して5つの解答の中からどれかを選べるテスト項目を示している。解答はそれぞれラジオボタン(input type="radio")で提示されており、fieldset要素に含めてある。テストの質問内容はlegend要素でタグ付けしてある。

コード例:

<fieldset>
  <legend>戯曲<cite>ハムレット</cite>を書いたのは</legend>
  <input type="radio" id="shakesp" name="hamlet" checked="checked" value="a">
  <label for="shakesp">ウィリアム シェークスピア</label><br />
  <input type="radio" id="kipling" name="hamlet" value="b">
  <label for="kipling">ラドヤード キップリング</label><br />
  <input type="radio" id="gbshaw" name="hamlet" value="c">
  <label for="gbshaw">ジョージ バーナード ショー</label><br />
  <input type="radio" id="hem" name="hamlet" value="d">
  <label for="hem">アーネスト ヘミングウェイ</label><br />
  <input type="radio" id="dickens" name="hamlet" value="e">
  <label for="dickens">チャールズ ディケンズ</label>
</fieldset>

事例 2: チェックボックスのグループ

あるウェブサイトでの利用者・プロフィールのページで、利用者が複数のチェックボックスを選んで自分の興味を示せるようになっている。各チェックボックス(input type="checkbox")には、label がある。すべてのチェックボックスは、fieldset 要素に含められており、legend 要素にはチェックボックスのグループ全体の説明がある。

コード例:

<fieldset>
  <legend>次のことに興味があります(全て選択することも可)</legend>
  <input type="checkbox" id="photo" name="interests" value="ph">
  <label for="photo">写真</label><br />
  <input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
  <label for="watercol">水彩画</label><br />
  <input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
  <label for="acrylic">アクリル画</label>
  …
</fieldset>

事例 3: 同じ名前を付けたフィールドとして送信されるラジオボタン

この事例では、1人の哲学者を選ぶように利用者に求めている。各ラジオボタンが関連している(同じフィールドとして送信される)ことを示すために「name」属性で同じ値を指定し、見た目としてもグループ化すべき点に注意しよう。また、「name」属性は同じ値であっても、「id」属性はそれぞれ一意的な値でなければならない点にも注意しよう。

コード例:

<form action="http://example.com/vote" method="post">
  <fieldset>
    <legend>あなたが好きな哲学者</legend>
    <input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/>
    <label for="philosopher_socrates">ソクラテス</label>
    <input type="radio" name="philosopher" id="philosopher_plato" value="plato"/>
    <label for="philosopher_plato">プラトン</label>
    <input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/>
    <label for="philosopher_aristotle">アリストテレス</label>
  </fieldset>
  </form>

注記: 関連するチェックボックスのグループも同じように動作するが、利用者が1つ以上のフィールドを選べる点がラジオボタンとは異なる。

事例 4: 論理的に関連付けたコントロール

この事例では、居住地と郵送先のフィールドを別々に fieldset 要素でグループ化し、legend 要素で異なる内容を指定している。

コード例:

<form action="http://example.com/adduser" method="post">
   <fieldset>
     <legend>居住地</legend>
     <label for="raddress">住所: </label>
     <input type="text" id="raddress" name="raddress" />
     <label for="rzip">郵便番号: </label>
     <input type="text" id="rzip" name="rzip" />
     ……居住地の入力内容が続く……
   </fieldset>
   <fieldset>
     <legend>郵送先</legend>
     <label for="paddress">住所: </label>
     <input type="text" id="paddress" name="paddress" />
     <label for="pzip">郵便番号: </label>
     <input type="text" id="pzip" name="pzip" />
     ……郵送先の入力内容が続く……
   </fieldset>
</form> 

参考リソース

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

検証

チェックポイント

関連するコントロールのグループにおいて、各コントロールの個々のラベルが十分な記述を提供しておらず、追加でグループレベルの記述が必要な場合

  1. 論理的に関連している input 要素又は select 要素のグループが、1 つの fieldset 要素内に含められている。

  2. fieldset 要素には、そのグループの説明を含めた legend 要素が指定されている。

判定基準

  • 上記全てを満たしている。

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


H73: データテーブルの概要を提供するために、table 要素の summary 属性を使用する

適用(対象)

HTML 4.01 及び XHTML 1.x

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

解説

この達成方法の目的は、テーブルにどのようにデータがまとめられているかという短い概略や、テーブルをどのように読み進めるかという短い説明を提供することである。table 要素に summary 属性を指定しておくことで、スクリーンリーダーの利用者がこのような情報を入手できるが、視覚的には表示されない。

summary 属性は、テーブルの構造が複雑な場合(たとえば、行ヘッダーや列ヘッダーが複数組み合わせてある場合や、行グループや列グループが複数ある場合)に有用である。また、summary 属性は、構造は単純でもたくさんの行や列を含んでいるデータテーブルでも役に立つ。

summary属性は、そのテーブルにcaption要素があるかどうかに関わらず指定できる。両方を用いる場合には、summary属性の内容が単にcaption要素の繰り返しであってはならない。

注記: HTML5では、summary 属性は廃止された。支援技術はこの属性を引き続きサポートしているかもしれないし、していないかもしれない。コンテンツ制作者は代替手段を検討し、慎重に使うべきである。

注記: WCAG 2.0 はレイアウトレテーブルの使用を禁止していないが、CSS ベースのレイアウトを推奨している。HTML の table 要素に与えられたセマンティックな意義を守り、コンテンツから表現を分離するというコーディング実務に従うためである。レイアウトテーブルを用いる場合には、summary 属性は使用しないか、値を空にする。レイアウトテーブルの目的は、コンテンツの配置を制御することのみであって、テーブルそのものは利用者から見て「透明(不可視)」であるべきである。summary 属性がテーブルの存在を示してしまうと、この透明性を「壊して」しまう。なお、レイアウトテーブルに空の summary 属性(summary="")を指定することは許容範囲である。F46: 達成基準 1.3.1 の失敗例 - レイアウトテーブルで、th 要素、caption 要素、又は空ではない summary 属性を使用しているを参照のこと。

事例

事例 1: summary 属性はあるが、caption 要素はないデータテーブル

この事例は、バスの時刻表を表している。summary 属性には、運行系統と目的地、時刻表の利用方法が記述されている。

コード例:

<table summary="7系統、市街地行きの時刻表です。朝4時に運行開始、
深夜に終了します。経由地は先頭の行に示してあります。
出発地や目的地に最も近い経由地を見つけ、その列を下のほうに読み進めて、
バスの出発時刻を見つけてください。">
  <tr>
    <th scope="col">一番街</th>
    <th scope="col">六番街</th>
    <th scope="col">十五番街</th>
    <th scope="col">十五番街モリソン通り</th>
  </tr>
  <tr>
    <td>4:00</td>
    <td>4:05</td>
    <td>4:11</td>
    <td>4:19</td>
  </tr>
  …
</table> 

事例 2: summary 属性と caption 要素の両方があるデータテーブル

この事例では、summary 属性と caption 要素の両方を用いている。caption 要素ではバスの運行系統を特定している。summary 属性には、全盲の利用者が時刻表の利用方法を理解するのに役立つ内容を記述している。スクリーンリーダーは、まず caption 要素を、続いて summary 属性を読み上げる。

コード例:

<table summary="経由地は1行目に示してあります。
出発地や目的地に最も近い経由地を見つけ、その列を下のほうに読み進めて、
バスの出発時刻を見つけてください。
朝4時に運行開始、深夜に終了します。">
  <caption>7系統、市街地行き(平日)</caption>
…
</table> 

参考リソース

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

検証

チェックポイント

各データテーブルにおいて:

  1. summary 属性がある場合、その summary 属性がテーブルの構造を記述しているか、または、テーブルの使い方を説明していることを確認する。

  2. データテーブルに summary 属性と caption 要素の両方が存在している場合、summary 属性の内容が単に caption 要素の繰り返しになっていないことを確認する。

判定基準

  • #1 と #2 を満たしている。。

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


H74: 開始タグ及び終了タグを仕様に準じて使用していることを確認する

適用(対象)

HTML 及び XHTML

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

解説

この達成方法の目的は、支援技術がコンテンツを解析するときに生じる(ことで知られている)キーエラーを回避することである。このエラーは、コンテンツが、仕様に準じて用いられていない開始タグや終了タグを含むときに起こる。HTML あるいは XHTML のメカニズムをウェブコンテンツ技術やウェブコンテンツ技術のバージョンを特定するために用いたり、このようなタイプのエラーがないようにウェブページを制作したりすることで回避できる。バリデーターにはコンテンツ開発者が利用可能なものがいくつかあり、バリデーターのレポートではこのようなタイプのエラーが指摘される。この達成方法は、間違って形成された開始タグと終了タグに関連するエラーのみを対象としている。文書型宣言は、この検証では必ずしも必要ではないが、文書型宣言をしておくことでバリデーターを活用しやすくなる。

事例

事例 1: HTML

HTML ページが文書型宣言を含んでいる(!DOCTYPE として示されることが多い)。コンテンツ開発者はオフラインあるいはオンラインでバリデーターを利用できる(下記の参考リソース参照)。バリデーターでは、すべての id 属性の値が一意的で、かつ開始タグと終了タグが仕様に準じて用いられていることをチェックできる。

注記: どの要素が終了タグを必要とするかの仕様が、HTML5 の導入とともに変更された。

事例 2: XHTML

XHTML その他の XML ベースの文書同様に、XHTML 文書は、文書型定義 (DTD) や他のタイプの XML スキーマを参照する。コンテンツ開発者はオンラインあるいはオフラインでバリデーターを利用でき(エディターに組み込まれているバリデーションツールを含む)、開始タグや終了タグが仕様に準じて用いられていることをチェックする。

事例 3: 検証のフレームワークを用いる

ウェブサイトが静的なページではなく、HTML あるいは XHTML のページが動的に生成されるときは、コンテンツ開発者は XHTMLUnitXML Test Suite あるいは類似のフレームワークを用いて生成される XHTML コードのチェックを行うことができる。

参考リソース

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

G134: ウェブページをバリデートするの参考リソースを参照のこと。

(今のところ、なし。)

検証

チェックポイント

  1. 終了タグが必要なすべての要素に対して、終了タグがあることをチェックする。

  2. 終了タグが禁止されているすべての要素に対して、終了タグがないことをチェックする。

  3. 入れ子になっているすべての要素の開始タグと終了タグが正しく入れ子になっていることをチェックする。

判定基準

1. から 3. 全てを満たしている。

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


H75: ウェブページが well-formed であることを確認する

適用(対象)

すべてのXMLベースのマークアップ言語

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

解説

この達成方法の目的は、支援技術がコンテンツを解析するときに生じるエラーを避けることである。well-formedについては、文書をXMLパーサーを用いてチェックし、バリデーションレポートがwell-formedに関するエラーを含んでいるかどうかで確認できる。すべてのXMLパーサーには、well-formedをチェックし、well-formedに関するエラーが見つかったときは、通常の処理を停止することが要求される(XMLパーサーは、バリデーションをサポートしていなくてもよい)。

事例

事例 1

XMLファイルは、文書タイプ宣言、a xsi:schemaLocation属性あるいは他のタイプのスキーマへのリファレンスを含む。コンテンツ開発者は、オンラインあるいはオフラインのバリデーター、XMLエディタもしくはXMLサポートのあるIDE(下記参考リソースを参照)を用いて、well-formedであることをチェックできる。

事例 2

XMLファイルが文書タイプ宣言、a xsi:schemaLocation属性又はスキーマがあるのにスキーマ参照のインストラクションのない処理を含まないとき、関連するスキーマがコマンドラインの指示、ユーザダイアログあるいは(構成)コンフィグレーションファイルで指定されている。そして、XMLファイルがスキーマに対してチェックされている。

事例 3

XMLファイルが文書タイプ宣言、a xsi:schemaLocation属性あるいはスキーマがあるのにスキーマ参照のインストラクションのない処理を 含まないとき、名前空間がスキーマ文書又はRDDL(Resource Directory Description Language )を読み出すのに参照されておらず、そしてXMLファイルがスキーマに対してチェックされている。

事例 4

ウェブサイトが静的な文書ではなく、XMLを動的に生成するとき、コンテンツ開発者はXMLUnitXML Test Suiteあるいは類似のフレームワークを用いて、生成されるXMLコードをチェックできる。

参考リソース

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

G134: ウェブページをバリデートするの参考リソースを参照のこと。

(今のところ、なし。)

検証

チェックポイント

  1. 各ファイルをXMLパーサーにロードする。

  2. well-formedに関するエラーがないことをチェックする。

判定基準

2.を満たしている。

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


H76: クライアントサイドで瞬間的にリダイレクトするたために、meta 要素の refresh を使用する

適用(対象)

HTML 及び XHTML

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

解説

この達成方法の目的は、クライアントサイドで利用可能なリダイレクトを、利用者を混乱させることなく用いることである。リダイレクトはサーバサイドで実装するほうが望ましいが(SVR1: クライアントサイドではなく、サーバサイドで自動リダイレクトを実装する (SERVER) [サーバ]を参照)、コンテンツ制作者がサーバサイド技術を管理しているとは限らない。

HTML及びXHTMLでは、meta要素にhttp-equiv属性には「Refresh」という値、content属性の値には「0」(ゼロ秒を意味する)を、ブラウザが要求すべきURIを後に伴って指定することができる。重要なのは、新たなページを読み込む前にコンテンツが表示されるのを避けるために、タイムアウトをゼロに設定することである。リダイレクトのコードを指定したページには、リダイレクトに関する情報のみを含めるべきである。

事例

事例 1

コード例:

<html xmlns="http://www.w3.org/1999/xhtml">    
  <head>      
    <title>チューダー</title>      
    <meta http-equiv="refresh" content="0;URL='http://thetudors.example.com/'" />    
  </head>    
  <body> 
    <p>このページは、<a href="http://thetudors.example.com/">theTudors.example.com</a>
      に移動しました。</p> 
  </body>  
</html> 

参考リソース

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

検証

チェックポイント

  1. ドキュメント内のmeta要素を全て見つける。

  2. meta要素について、値が「refresh」(大文字と小文字の区別なし)のhttp-equiv属性、及びcontent属性で0より大きい数字、その後に続いて;'URL=anyURL'(anyURLは、現在のページから切替わるURIを表す)という値が含まれている。

判定基準

2.を満たしていない。

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


H77: リンクテキストとそれが含まれているリスト項目とを組み合わせて、リンクの目的を特定する

適用(対象)

リンクが含まれる全てのウェブコンテンツ技術

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

解説

この達成方法の目的は、リンクとそれを含んでいるリスト項目の文脈から、リンクの目的を特定することである。リンクを含んでいるリスト項目が、先祖要素であるブロックレベル要素の中で最もそのリンクに近い場合、リンクテキストだけでは不明瞭なリンクに文脈を与えることになる。その説明によって、利用者がそのリンクと、そのウェブページ内にある他のリンクとを区別できるようになり、そのリンク先へ移動するかどうかを判断しやすくなる。一般的に、リンクテキストとして単に目的地のURIを示すだけでは、リンク先の説明として不十分であることに注意すべきである。

注記: このような説明が利用者にとって最も役立つのは、リンクを理解するのに必要な追加情報が、そのリンクよりも前に書かれている場合である。追加情報がリンクの後に書かれていると、ページを(先頭から最後へと)順番に読むスクリーンリーダーの利用者には混乱や支障が生じることがある。

事例

事例 1

コード例:

<ul>
  <li>
    昨年のビデオレポートをご覧下さい。
    <a href="festival.htm">全米民族音楽祭</a>
  </li>
  <li>
    <a href="listen.htm">楽器の説明を聞く</a>
  </li>
  <li>
    ギター職人、ジョージ・ゴールドマンの話はこちら。
    <a href="mkguitars.htm">ギター作りについて</a>
  </li>
</ul>

事例 2: ビデオゲームのダウンロードリスト

コード例:

<ul>
  <li>
    <a href="tomb_raider.htm">トゥームレイダー:レジェンド</a>
    <a href="tomb_raider_images.htm">画像を見る</a>
    <a href="tomb_raider.mpeg">(デモのダウンロード)</a>
  </li>
  <li>
    <a href="fear_extraction.htm">F.E.A.R. Extraction Point</a>
    <a href="fear_extraction_images.htm">画像を見る</a>
    <a href="fear_extraction.mpeg">(デモのダウンロード)</a>
  </li>
  <li>
    <a href="call_of_duty.htm">コール オブ デューティ2</a>
    <a href="call_of_duty_images.htm">画像を見る</a>
    <a href="call_of_duty.mpeg">(デモのダウンロード)</a>
  </li>
  <li>
    <a href="Warhammer 40K.htm">ウォーハンマー40,000</a>
    <a href="warhammer_40k_images.htm">画像を見る</a>
    <a href="Warhammer_40k.mpeg">(デモのダウンロード)</a>
  </li>
</ul>

参考リソース

この達成方法に関する参考リソースはない。

検証

チェックポイント

コンテンツの中で、この達成方法を利用するリンクそれぞれに対して:

  1. そのリンクがリスト項目の一部である。

  2. そのリンクテキストとリスト項目を組み合わせると、リンクの目的が説明されている。

判定基準

  • 上記全てを満たしている。

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


H78: リンクテキストとそれが含まれているパラグラフとを組み合わせて、リンクの目的を特定する

適用(対象)

リンクが含まれる全てのウェブコンテンツ技術

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

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

H78 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、リンクとそれを含んでいるパラグラフの文脈から、リンクの目的を特定することである。リンクを含んでいるパラグラフが、先祖要素であるブロックレベル要素の中で最もそのリンクに近い場合、リンクテキストだけでは不明瞭なリンクに文脈を与えることになる。その説明によって、利用者がそのリンクと、そのウェブページ内にある他のリンクとを区別できるようになり、そのリンク先へ移動するかどうかを判断しやすくなる。一般的に、リンクテキストとして単に目的地のURIを示すだけでは、リンク先の説明として不十分であることに注意すべきである。

注記: このような説明が利用者にとって最も役立つのは、リンクを理解するのに必要な追加情報が、そのリンクよりも前に書かれている場合である。追加情報がリンクの後に書かれていると、ページを(先頭から最後へと)順番に読むスクリーンリーダーの利用者には混乱や支障が生じることがある。

事例

事例 1

民族音楽祭のウェブページの告知文。

コード例:

<h3>最終15組</h3>
<p>間もなくあなたの近くの町に行きます……。
全米民族音楽祭にラインナップしている最終15組です。
<a href="final15.html">[続きを読む]</a>
</p>

<h3>民族音楽のアーティストが賞を受ける</h3>
<p>来たる全米民族音楽祭の出演者が、
全米芸術基金の国家遺産フェローシップを受賞します。
 <a href="nheritage.html">[続きを読む]</a>
</p>
… 

参考リソース

この達成方法に関する参考リソースはない。

検証

チェックポイント

コンテンツの中で、この達成方法を用いているリンクそれぞれに対して:

  1. そのリンクがパラグラフの一部である。

  2. そのリンクテキストとパラグラフを組み合わせると、リンクの目的が説明されている。

判定基準

  • 上記全てを満たしている。

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


H79: リンクテキストとそれが含まれているデータセル及び関連づけられた見出しセルとを組み合わせて、リンクの目的を特定する

適用(対象)

リンクが含まれる全てのウェブコンテンツ技術

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

解説

この達成方法の目的は、リンクとそれを含んでいるデータテーブルの文脈から、リンクの目的を特定することである。文脈とは、そのリンクを含んでいるテーブルセルと、そのセルに関連付けられたテーブルの見出しセルとの関係を指している。データテーブルの文脈によって、リンクを含んでいるセルが、先祖要素であるブロックレベル要素の中で最もそのリンクに近い場合、リンクテキストだけでは不明瞭なリンクに目的が与えられる。それによって、利用者がそのリンクと、そのウェブページ内にある他のリンクとを区別できるようになり、そのリンク先へ移動するかどうかを判断しやすくなる。リンクテキストとして単に目的地の URI を示すだけでは、障害のある利用者、特に認知障害のある利用者にとってはリンク先の説明として不十分であることに注意すべきである。

事例

事例 1: レンタカー会社の料金比較表

コード例:

<table>
<tr>
  <th></th>
  <th id="a1">Alamo社</th>
  <th id="a2">Budget社</th>
  <th id="a3">National社</th>
  <th id="a4">Avis社</th>
  <th id="a5">Hertz社</th>
</tr>
<tr>
  <th id="b1">低燃費車</th>
  <td headers="a1 b1"><a href="econ_ala.htm">1日 67ドル</a></td>
  <td headers="a2 b1"><a href="econ_bud.htm">1日 68ドル</a></td>
  <td headers="a3 b1"><a href="econ_nat.htm">1日 72ドル</a></td>
  <td headers="a4 b1"><a href="econ_av.htm">1日 74ドル</a></td>
  <td headers="a5 b1"><a href="econ_hz.htm">1日 74ドル</a></td>
</tr>
<tr>
  <th id="b2">小型車</th>
  <td headers="a1 b2"><a href="comp_ala.htm">1日 68ドル</a></td>
  <td headers="a2 b2"><a href="comp_bud.htm">1日 69ドル</a></td>
  <td headers="a3 b2"><a href="comp_nat.htm">1日 74ドル</a></td>
  <td headers="a4 b2"><a href="comp_av.htm">1日 76ドル</a></td>
  <td headers="a5 b2"><a href="comp_hz.htm">1日 76ドル</a></td>
</tr>
<tr>
  <th id="b3">中型車</th>
  <td headers="a1 b3"><a href="mid_ala.htm">1日 79ドル</a></td>
  <td headers="a2 b3"><a href="mid_bud.htm">1日 80ドル</a></td>
  <td headers="a3 b3"><a href="mid_nat.htm">1日 83ドル</a></td>
  <td headers="a4 b3"><a href="mid_av.htm">1日 85ドル</a></td>
  <td headers="a5 b3"><a href="mid_hz.htm">1日 85ドル</a></td>
</tr>
<tr>
  <th id="b4">大型車</th>
  <td headers="a1 b4"><a href="full_ala.htm">1日 82ドル</a></td>
  <td headers="a2 b4"><a href="full_bud.htm">1日 83ドル</a></td>
  <td headers="a3 b4"><a href="full_nat.htm">1日 89ドル</a></td>
  <td headers="a4 b4"><a href="full_av.htm">1日 91ドル</a></td>
  <td headers="a5 b4"><a href="full_hz.htm">1日 91ドル</a></td>
</tr>
</table>

参考リソース

この達成方法に関する参考リソースはない。

検証

チェックポイント

コンテンツの中で、この達成方法を用いているリンクそれぞれに対して:

  1. そのリンクがテーブルセルの中にある。

  2. そのリンクテキストと関連付けられたテーブル見出しセルを組み合わせると、リンクの目的が説明されていることを確認する。

判定基準

  • 上記全てを満たしている。

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


H80: リンクテキストとその直前にある見出し要素とを組み合わせて、リンクの目的を特定する

適用(対象)

HTML 及び XHTML

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

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

H80 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、リンクとその直前にある見出しの文脈から、リンクの目的を特定することである。直前にある見出しは、リンクテキストだけでは不明瞭なリンクに文脈を提供する。それによって、利用者がそのリンクと、そのウェブページ内にある他のリンクとを区別できるようになり、そのリンク先へ移動するかどうかを判断しやすくなる。

注記: 可能なかぎり、文脈による補足を必要とせずにリンクの目的が特定できるリンクテキストを提供すべきである。

事例

事例 1: 複数のホテルに関する情報のブロック

各ホテルの情報は、ホテル名、概要、地図、写真、案内、お客様レビュー、そして予約フォームへのリンクで構成されている。

コード例:

<h2><a href="royal_palm_hotel.html">ロイヤル・パーム・ホテル</a></h2>
  <ul class="horizontal">
    <li><a href="royal_palm_hotel_map.html">地図</a></li>
    <li><a href="royal_palm_hotel_photos.html">写真</a></li>
    <li><a href="hroyal_palm_hotel_directions.html">案内</a></li>
    <li><a href="royal_palm_hotel_reviews.html">お客様レビュー</a></li>
    <li><a href="royal_palm_hotel_book.html">予約フォーム</a></li>
  </ul>

<h2><a href="hotel_three_rivers.html">ホテル・スリー・リバー</a></h2>
  <ul class="horizontal">
    <li><a href="hotel_three_rivers_map.html">地図</a></li>
    <li><a href="hotel_three_rivers_photos.html">写真</a></li>
    <li><a href="hotel_three_rivers_directions.html">案内</a></li>
    <li><a href="hotel_three_rivers_reviews.html">お客様レビュー</a></li>
    <li><a href="hotel_three_rivers_book.html">予約フォーム</a></li>
  </ul> 

事例 2: ある文書を3つのファイル形式で提供する場合

コード例:

<h2>2006-2007年版 年次報告書</h2>
<p> 
  <a href="annrep0607.html">(HTML)</a>&nbsp;
  <a href="annrep0607.pdf">(PDF)</a>&nbsp;
  <a href="annrep0607.rtf">(RTF)</a>
</p> 

事例 3: 新聞社のウェブサイト

コード例:

<h2><a href="Stockmarket_05052007.htm>株式市場が急騰、強含みに</a></h2>
<p>今週は金への投資が2%上昇し、株式市場にとっては華々しい週になった。
<a href="Stockmarket_05052007.htm>全文を読む</a></p> 

参考リソース

この達成方法に関する参考リソースはない。

検証

チェックポイント

コンテンツの中で、この達成方法を用いているリンクそれぞれに対して:

  1. そのリンクの直前にある見出し要素を見つける。

  2. そのリンクテキストと直前にある見出しを組み合わせると、リンクの目的が説明されている。

判定基準

  • 2.を満たしている。

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


H81: 入れ子になったリスト項目にあるリンクテキストとその親のリスト項目とを組み合わせて、リンクの目的を特定する

適用(対象)

HTML 及び XHTML

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

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

H81 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、入れ子になったリストに含まれるリスト項目によって与えられる文脈から、リストの中のリンクの目的を特定することである。このリスト項目によって、リンクテキストだけでは不明瞭なリンクに文脈が与えられることになる。その説明によって、利用者がそのリンクと、そのウェブページ内にある他のリンクとを区別できるようになり、そのリンク先へ移動するかどうかを判断しやすくなる。

現在の支援技術には、親のリスト項目によって与えられる文脈的な情報を照会するコマンドがないため、この達成方法を用いても、利用者はリスト項目ひとつひとつに移動する必要がある。そのため、この達成方法は、非常に長く又は深く入れ子になったリストには適していないことがある。

注記: 可能なかぎり、文脈による補足を必要とせずにリンクの目的が特定できるリンクテキストを提供すべきである。

事例

事例 1: ある文書を3つのファイル形式で提供する場合

コード例:

<ul>
<li>2005-2006年版 年次報告書
  <ul> 
  <li><a href="annrep0506.html">(HTML)</a></li>
  <li><a href="annrep0506.pdf">(PDF)</a></li>
  <li><a href="annrep0506.rtf">(RTF)</a></li>
  </ul>
</li>
<li>2006-2007年版 年次報告書
  <ul> 
  <li><a href="annrep0607.html">(HTML)</a></li>
  <li><a href="annrep0607.pdf">(PDF)</a></li>
  <li><a href="annrep0607.rtf">(RTF)</a></li>
  </ul>
</li>
</ul> 

事例 2: 複数のホテルに関する情報のブロック

各ホテルの情報は、ホテル名、概要、地図、写真、案内、お客様レビュー、そして予約フォームへのリンクで構成されている。

コード例:

<ul>
<li><a href="royal_palm_hotel.html">ロイヤル・パーム・ホテル</a>
  <ul class="horizontal">
    <li><a href="royal_palm_hotel_map.html">地図</a></li>
    <li><a href="royal_palm_hotel_photos.html">写真</a></li>
    <li><a href="hroyal_palm_hotel_directions.html">案内</a></li>
    <li><a href="royal_palm_hotel_reviews.html">お客様レビュー</a></li>
    <li><a href="royal_palm_hotel_book.html">予約フォーム</a></li>
  </ul>
</li>
<li><a href="hotel_three_rivers.html">ホテル・スリー・リバー</a>
  <ul class="horizontal">
    <li><a href="hotel_three_rivers_map.html">地図</a></li>
    <li><a href="hotel_three_rivers_photos.html">写真</a></li>
    <li><a href="hotel_three_rivers_directions.html">案内</a></li>
    <li><a href="hotel_three_rivers_reviews.html">お客様レビュー</a></li>
    <li><a href="hotel_three_rivers_book.html">予約フォーム</a></li>
  </ul>
</li>
</ul> 

参考リソース

この達成方法に関する参考リソースはない。

検証

チェックポイント

コンテンツの中で、この達成方法を用いているリンクそれぞれに対して:

  1. そのリンクが含まれるul要素又はol要素を見つける。

  2. そのリスト要素(ul要素又はol要素)が、li要素の子孫要素である。

  3. そのリンクテキストと親のリスト項目を組み合わせると、リンクの目的が説明されている。

判定基準

  • 上記全てを満たしている。

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


H83: 利用者の要求に応じて新しいウィンドウを開き、そのことをリンクテキストで明示するために、target 属性を使用する

適用(対象)

HTML5、HTML 4.01 Transitional 及び XHTML 1.0 Transitional

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

解説

この達成方法の目的は、利用者が要求していない新しいウィンドウの出現によって、利用者が混乱するのを避けることである。利用者によっては、突然開いた新しいウィンドウによって混乱してしまったり、新しいウィンドウを完全に見逃がしてしまう場合がある。HTML5、HTML 4.01 Transitional 及び XHTML 1.0 Transitional では、新しいウィンドウを開くのに、自動ポップアップの代わりに target 属性を用いることができる(target 属性は、HTML 4.01 Strict と XHTML 1.0 Strict では廃止されている)。注意すべきは、target 属性を用いなければ、利用者が新しいウィンドウを開くべきかどうかを自分で決定できることである。target 属性の利用によって、新しいウィンドウを開くというマシンリーダブルな指示が明確に提供される。ユーザエージェントは、あらかじめ利用者に知らせることができ、新しいウィンドウを開かない設定にすることもできる。支援技術を利用していない利用者のために、リンクテキストからも新しいウィンドウを開くことがわかるようにしておく。

事例

事例 1

次の事例では、新しいウィンドウが開くことが示されたリンクで、target 属性が用いられている。

コード例:

<a href="help.html" target="_blank">ヘルプをご覧ください (新しいウィンドウが開きます)</a> 

参考リソース

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

検証

チェックポイント

  1. 新しいウィンドウが開くかどうか確認するために、ドキュメント内の各リンクを起動させる。

  2. 新しいウィンドウを開くリンクに target属性が指定されている。

  3. リンクテキストには、新しいウィンドウが開くことを示す情報が含まれている。

判定基準

  • 2.及び 3.を満たしている。

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


H84: アクションを実行するために、select 要素とボタンを併用する

適用(対象)

HTML 及び XHTML

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

解説

この達成方法の目的は、select要素の値を選択することで意図せずアクションが実行されるのではなく、アクションの実行を利用者が制御できるようにすることである。利用者は、アクションが実行されるとは思わずに、select要素にどんな値があるのかを調べたり、間違って意図しない値を選んだりするかもしれない。利用者が自分の選択に納得したとき、アクションを実行するボタンを選択できるようにする。

select要素の選択肢の操作によって(フォームの)コントロールの値が変化する場合、キーボードでselect要素の値を選んでいる利用者に対して特に重要である。

事例

事例 1: カレンダー

あるウェブページでは、利用者が任意の年の任意の月を選ぶと、その月のカレンダーが表示される。利用者が月と年を指定した後に「表示」ボタンを押すことでカレンダーが表示される。この例では、クライアントサイド・スクリプティングでアクションを実装している。

コード例:

<label for="month">月:</label>
<select name="month" id="month">
  <option value="1">1月</option>

  <option value="2"> 2月</option>
  ...
  <option value="12">12月</option>
</select> 
<label for="year">年:</label>

<input type="text" name="year" id="year">
<input type="button" value="Show" onclick = "..."> 

事例 2: アクションを選ぶ

select 要素は実行可能なアクションのリストを含んでいる。利用者が「実行」というボタンを押すまで、アクションは実行されない。

コード例:

<form action="http://somesite.com/action" method="post">
  <label for="action">選択肢:</label>
  <select name="action" id="action">
    <option value="help">ヘルプ</option>

    <option value="reset">リセット</option>
    <option value="submit">送信</option>
  </select> 
  <button type="submit" name="submit" value="submit">実行 </button>

</form> 

参考リソース

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

検証

チェックポイント

それぞれの select 要素/ボタンの要素の組み合わせに対して:

  1. select 要素の選択肢にフォーカスがあたったとき(キーボード・フォーカスを含む)、どのアクションも実行されない。

  2. ボタンを選択すると、現在の select 要素の値に関連付けられたアクションが実行される。

判定基準

  • 上記全てを満たしている。

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


H85: select 要素内の option 要素をグループ化するために、optgroup 要素を使用する

適用(対象)

利用者の入力項目をまとめている HTML 及び XHTML

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

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

H85 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、セレクトメニューの中の選択肢をグループ化することである。セレクトメニューは、複数選択式リストやコンボボックスといった、フォーム・コントロールの許容値の一組である。セレクトメニューには、関連する選択肢のグループが含まれることがある。単に「ダミー」の選択肢を使ってこれらのグループを区切るのではなく、セマンティンクに特定すべきである。これによって、ユーザエージェントは、グループごとに選択肢を閉じておき、利用者が選択肢を素早く拾い読みできるようにしたり、利用者にとって興味のある選択肢がどのグループに属しているのかを示すことができる。また、長い項目を視覚的に分割して、利用者が簡単に自分が選びたい選択肢を発見することにも役立つ。

HTML では、select 要素は複数選択式リストとコンボボックスの両方の生成に利用される。選択肢それぞれは、option 要素で示される。選択肢をグループ化するには、optgroup 要素の子要素に、関連する option 要素を含める。グループに「label」属性でラベル付けすることで、利用者がそのグループに含まれているものは何か予想できるだろう。

optgroup 要素は select 要素の直接の子要素、option 要素は optgroup 要素の直接の子要素として含めるべきとされる。select 要素では、optgroup 要素に 1 つだけ option 要素を含めることもできるが、実はこのような利用法がデザインを意図したものでないか、コンテンツ制作者は検討すべきである。optgroup 要素を入れ子にはできないので、select 要素内では 1 段階のグループ化しかできない。

グループ分け情報がリストの理解に不可欠な場合でも、コンテンツ制作者は、optgroup 要素が提供するグループ分け情報をスクリーンリーダーが読み上げなくても理解可能なように option 要素のラベルを定義するとよい。

事例

事例 1

次のコンボボックスは、好きな食べ物のデータをまとめたものである。利用者が好みのものを素早く選択できるように、食べ物の種類によってグループ化してある。

コード例:

<form action="http://example.com/prog/someprog" method="post">
    <label for="food">あなたの好きな食べ物は?</label>
    <select id="food" name="food">
      <optgroup label="Fruits">
        <option value="1">りんご</option>
        <option value="3">バナナ</option>
        <option value="4">桃</option>
        <option value="5">...</option>
      </optgroup>
      <optgroup label="野菜">
        <option value="2">にんじん</option>
        <option value="6">きゅうり</option>
       <option value="7">...</option>
     </optgroup>
     <optgroup label="焼き菓子">
       <option value="8">アップルパイ</option>
       <option value="9">チョコレートケーキ</option>
       <option value="10">...</option>
     </optgroup>
   </select>
</form> 

事例 2

次の事例は、複数選択式リストで optrgroup 要素をどのように用いるかを示している。

コード例:

<form action="http://example.com/prog/someprog" method="post">
    <label for="related_techniques"><strong>関連する達成方法:</strong></label>
    <select name="related_techniques" id="related_techniques" multiple="multiple" size="10">
  <optgroup label="General Techniques">
    <option value="G1">G1: Adding a link at the top of each page ... </option>
    <option value="G4">G4: Allowing the content to be paused and restarted ... </option>
    <option value="G5">G5: Allowing users to complete an activity without any time... </option>
    <option value="G8">G8: Creating an extended audio description for the ... </option>
    <option value="G9">G9: Creating captions for live synchronized media... </option>
    <option value="G10">G10: Creating components using a technology that ... </option>
  </optgroup>
  <optgroup label="HTML Techniques">
    <option value="H2">H2: Combining adjacent image and text links for the same ... </option>
    <option value="H4">H4: Creating a logical tab order through links, form ... </option>
    <option value="H24">H24: Providing text alternatives for the area ...
    </option>
  </optgroup>
  <optgroup label="CSS Techniques>
    <option value="C6">C6: Positioning content based on structural markup... </option>
    <option value="C7">C7: Using CSS to hide a portion of the link text... </option>
  </optgroup>
  <optgroup label="SMIL Techniques">
    <option value="SM1">SM1: Adding extended audio description in SMIL 1.0... </option>
    <option value="SM2">SM2: Adding extended audio description in SMIL 2.0... </option>
    <option value="SM6">SM6: Providing audio description in SMIL 1.0... </option>
  </optgroup>
  <optgroup label="ARIA Techniques">
    <option value="ARIA1">ARIA1: Using WAI-ARIA describedby... </option>
    <option value="ARIA2">ARIA2: Identifying required fields with the "required"... </option>
    <option value="ARIA3">ARIA3: Identifying valid range information with "valuemin" ... </option>
    <option value="ARIA4">ARIA4: Using WAI-ARIA to programmatically identify form  ... </option>
  </optgroup>
  <optgroup label="Common Failures">
    <option value="F1">F1: Failure of SC 1.3.2 due to changing the meaning of content by... </option>
    <option value="F2">F2: Failure of SC 1.3.1 due to using changes in text presentation... </option>
    <option value="F3">F3: Failure of SC 1.1.1 due to using CSS to include images  ... </option>
    <option value="F4">F4: Failure of SC 2.2.2 due to using text-decoration:blink ...</option>
  </optgroup>
</select>
</form> 

参考リソース

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

検証

チェックポイント

  1. セレクトメニューに含まれる選択肢について、関連する選択肢としてグループ化すべきものがある。

  2. 関連する選択肢のグループが、optgroup 要素でグループ化してある。

判定基準

  • 2.を満たしている。

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


H86: ASCII アート、顔文字、及びリート語に代替テキストを提供する

適用(対象)

HTML 及び XHTML

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

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

H86 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

インターネットでグラフィックが広く用いられるようになる前は、ASCII 文字を並べて絵やグラフを描くことがよくあった。今では ASCII アートはウェブではあまり使われないが、もし使うのであれば、スクリーンリーダーでインターネットにアクセスする全盲の人には全く意味が分からないことを覚えておかなかればならない。ASCII アートを使う場合、その絵が何なのかというテキストによる説明も付けておくべきである。また、その ASCII アートをスキップするリンクを置いておくほうがよい。(ただし、これは必須ではない)。

顔文字は非常に広く利用されている。顔文字は、ASCII 文字を組合せて、顔の表情や他の方法にして感情を伝える。ただし、スクリーンリーダーの利用者は意味が分からないかもしれないので、できれば顔文字の代わりに、単純に「笑顔」といった言葉を使ったほうがよい。もし顔文字を使うのであれば、代替テキストを指定すべきである。場合によっては、ブログやフォーラムを構築するソフトウェアで、たとえばプラグインを利用して、顔文字に使用している ASCII 文字を代替テキストの付いた HTML 画像に自動変換することができる。

リート語は、数字や特殊文字を含むさまざまな文字の組み合わせで標準的な文字を置き換える表記法である。リート語はすでに、インターネット文化や俗語の一部となっており、テキストフィルターやスパムフィルターをあざむくのにしばしば利用される。リート語はスクリーンリーダーを利用する全盲の人が理解できないことがあるため、達成基準 1.1.1 に準拠するにはテキストによる代替の提供が求められる。

注記: この達成方法のサポートは限られているため、コンテンツ制作者は代替テキストを提供することが推奨される。

事例

事例 1

以下では、イコール記号に数字の 8、ハイフン、数字の0をつなげて「恐怖」を表現する顔文字に対する、3通りの代替テキストの指定方法を示している。

コード例:

=8-0(恐怖)

<abbr title="恐怖">=8-0</abbr>

<img src="fright.gif" alt="恐怖"/>

事例 2

この事例では、ASCII アートの前にその絵の説明を付け、ASCII アートをスキップするリンクがある。ASCII アートの事例をスキップして事例 3へ

コード例:

さし絵:蝶のASCIIアート
 <a href="#skipbutterfly">ASCIIアートをスキップ</a>
                                 
                                                                LLLLLLLLLLL
                                                            __LLLLLLLLLLLLLL
                                                           LLLLLLLLLLLLLLLLL
                                                         _LLLLLLLLLLLLLLLLLL
                                                        LLLLLLLLLLLLLLLLLLLL
                                                      _LLLLLLLLLLLLLLLLLLLLL
                                                      LLLLLLLLLLLLLLLLLLLLLL
                                              L     _LLLLLLLLLLLLLLLLLLLLLLL
                                             LL     LLLLLL~~~LLLLLLLLLLLLLL
                                            _L    _LLLLL      LLLLLLLLLLLLL
                                            L~    LLL~        LLLLLLLLLLLLL
                                           LL   _LLL        _LL   LLLLLLLL
                                          LL    LL~         ~~     ~LLLLLL
                                          L   _LLL_LLLL___         _LLLLLL
                                         LL  LLLLLLLLLLLLLL      LLLLLLLL
                                         L  LLLLLLLLLLLLLLL        LLLLLL
                                        LL LLLLLLLLLLLLLLLL        LLLLL~
                  LLLLLLLL_______       L _LLLLLLLLLLLLLLLL     LLLLLLLL
                         ~~~~~~~LLLLLLLLLLLLLLLLLLLLLLLLL~       LLLLLL
                       ______________LLL  LLLLLLLLLLLLLL ______LLLLLLLLL_
                   LLLLLLLLLLLLLLLLLLLL  LLLLLLLL~~LLLLLLL~~~~~~   ~LLLLLL
             ___LLLLLLLLLL __LLLLLLLLLLLLL LLLLLLLLLLLLL____       _LLLLLL_
          LLLLLLLLLLL~~   LLLLLLLLLLLLLLL   LLLLLLLLLLLLLLLLLL     ~~~LLLLL
      __LLLLLLLLLLL     _LLLLLLLLLLLLLLLLL_  LLLLLLLLLLLLLLLLLL_       LLLLL
     LLLLLLLLLLL~       LLLLLLLLLLLLLLLLLLL   ~L ~~LLLLLLLLLLLLL      LLLLLL
   _LLLLLLLLLLLL       LLLLLLLLLLLLLLLLLLLLL_  LL      LLLLLLLLL   LLLLLLLLL
  LLLLLLLLLLLLL        LLLLLLLLLLLLL~LLLLLL~L   LL       ~~~~~       ~LLLLLL
 LLLLLLLLLLLLLLL__L    LLLLLLLLLLLL_LLLLLLL LL_  LL_            _     LLLLLL
LLLLLLLLLLLLLLLLL~     ~LLLLLLLL~~LLLLLLLL   ~L  ~LLLL          ~L   LLLLLL~
LLLLLLLLLLLLLLLL               _LLLLLLLLLL    LL  LLLLLLL___     LLLLLLLLLL
LLLLLLLLLLLLLLLL              LL~LLLLLLLL~     LL  LLLLLLLLLLLL   LLLLLLL~
LLLLLLLLLLLLLLLL_  __L       _L  LLLLLLLL      LLL_ LLLLLLLLLLLLLLLLLLLLL
 LLLLLLLLLLLLLLLLLLLL        L~  LLLLLLLL      LLLLLLL~LLLLLLLLLLLLLLLL~
  LLLLLLLLLLLLLLLLLLLL___L_ LL   LLLLLLL       LLLL     LLLLLLLLLLLLLL
   ~~LLLLLLLLLLLLLLLLLLLLLLLL     LLLLL~      LLLLL        ~~~~~~~~~
           LLLLLLLLLLLLLLLLLL_ _   LLL       _LLLLL
               ~~~~~~LLLLLLLLLL~             LLLLLL
                         LLLLL              _LLLLLL
                         LLLLL    L     L   LLLLLLL
                          LLLLL__LL    _L__LLLLLLLL
                          LLLLLLLLLL  LLLLLLLLLLLL
                           LLLLLLLLLLLLLLLLLLLLLL
                            ~LLLLLLLLLLLLLLLLL~~
                               LLLLLLLLLLLLL
                                 ~~~~~~~~~
<a name="skipbutterfly></a> 

事例 3

以下は、リート語で「Austin Rocks」と書いた例である。

コード例:

<abbr title="Austin Rocks">Au5t1N r0xx0rz</abbr> 

検証

チェックポイント

  1. そのページを一般的なブラウザで開く。

  2. ASCII アート、顔文字、及び(又は)リート語がコンテンツに含まれている。

  3. 全ての ASCII アート、顔文字、及び(又は)リート語のすぐ前か後に、代替テキストがある。

判定基準

  • 3. を満たしている。

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


H88: 仕様に準じて HTML を使用する

適用(対象)

HTML 及び XHTML

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

解説

この達成方法の目的は、HTML 及び XHTML をそれぞれの仕様に準じて用いることである。技術仕様では、そのウェブコンテンツ技術の意味及び機能の適切な取扱方法を定めている。仕様に記述されている通りに HTML 及び XHTML の機能を用いることによって、支援技術を含むユーザエージェントが、コンテンツ制作者の意図通りで互いに相互運用性のある機能を提示することが可能となる。

この文書を記述した時点では、HTML 及び XHTML の妥当なバージョンは、HTML 4.01 及び XHTML 1.0 である。HTML 4.01 は、HTMLの最も成熟したバージョンであり、特定のアクセシビリティ機能を提供し、ユーザエージェントによって広くサポートされている。XHTML 1.0 は、HTML 4.01 と同じ機能を提供しているが、XML 構造を用いており、HTML の構造よりも厳密な構文となっている。HTML 及び XHTML の最新バージョンは、まだ未成熟であり、ユーザエージェントにもまだ広くサポートされていないのが現状である。

HTML 及び XHTML を仕様に準じて用いるにあたり、幾つかの留意すべき点がある。

  1. 仕様で定められている機能だけを用いる: HTMLでは、ウェブページで用いることのできる要素、属性及び属性値の一式を定義している。それらには固有のセマンティックな意味を持ち、ユーザエージェントが特定の方法で処理するよう意図されている。しかし、時には、仕様にはない方法がコンテンツ制作の際に一般的に用いられることがある。それが一つのユーザエージェントだけによってサポートされることが、そのきっかけとなることが多い。仕様にはない方法を用いた場合、多くのユーザエージェントはそれを当分の間サポートしなかったり、いつまでもサポートしなかったりする。さらに、標準仕様にない用い方をすると、ユーザエージェントによってそのサポート方法が異なることもある。そして、主流のブラウザと比べ少ないリソースで開発されている支援技術は、有用なサポートを追加する場合でも時間を要するため、アクセシビリティに影響を及ぼすことになる。よって、予期しないアクセシビリティの問題を回避するためにも、コンテンツ制作者は HTML 及び XHTML で定義されていない用法を避けるべきである。

  2. 仕様によって規定されている方法で機能を用いる: HTMLの仕様では、どのように特定の要素、属性及び属性値をセマンティックに処理し解釈すべきかについて、具体的なガイダンスを提供している。しかし、時には、コンテンツ制作者が仕様ではサポートされていない方法でそれらを用いることがある。例えば、本来のセマンティックなメッセージが伝わることを意図せずに、セマンティックな要素を用いて視覚的な効果を得ることが挙げられる。これは、正確なセマンティック情報を用いて首尾一貫したページを描画しているユーザエージェント及び支援技術に対して混乱を招くことにつながる。あくまで HTML の仕様によって規定されている機能として、HTML の各機能を用いることが重要である。

  3. コンテンツが解析可能であることを確認する: HTML 及び XHTML では、ユーザエージェントによって正しく処理されるためには、コンテンツをどのようにコーディングすべきかも定めている。開始タグ及び終了タグ、属性及び値、要素の入れ子などの構造に関するルールは、意図された文書の表現となるようにユーザエージェントがコンテンツを処理できるようにするためにある。HTML 及び XHTML の仕様における構造のルールに従うことが、仕様に準じてそれらのウェブコンテンツ技術を用いる上で重要なことの一つである。

参考リソース

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

G134: ウェブページをバリデートするの参考リソースを参照のこと。

検証

チェックポイント

HTML 又は XHTML の各ページに対して:

  1. ページが、関連する仕様において定義されている要素、属性及び属性値のみを用いていることを確認する。

  2. 要素、属性及び値が、関連する仕様によって規定されている方法で用いられていることを確認する。

  3. ページが、関連する仕様のルールに従って、正しく解析可能であることを確認する。

注記: 上記 1. 及び 3. は、バリデーションツールを用いて容易に確認することができる。上記 2. は、通常は人間による判断が求められるが、ヒューリスティックな評価ツールを補助的に用いて確認することが可能である。

判定基準

  • 上記の全てを満たしている。

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


H89: コンテキストに応じたヘルプを提供するために、title 属性を使用する

適用(対象)

HTML 及び XHTML

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

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

H89 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、title 属性にヘルプ情報を提供することで、フォームにデータを入力する利用者にコンテキストに応じたヘルプを提供することである。ヘルプは書式情報もしくは入力例を含んでもよい。

注記: 現在のユーザエージェントおよび支援技術は title 属性に含まれた情報を利用者に常には提供しない。title 属性が広範囲にサポートされるまではこの達成方法を単独で利用することは避けるべきである。

事例

事例 1

地図検索アプリケーションはラベル"住所:"で構成されるフォームと、入力ボックスと、"地図検索"という値の実行ボタンを提供する。インプットボックスは利用者が入力するアドレス書式の例を title 属性に持つ。

コード例:


<label for="searchAddress">住所: </label>
<input id="searchAddress" type="text" size="30" value="" name="searchAddress" 
 title="ドレスの例: 101 Collins St, Melbourne, Australia" />
             

事例 2

利用者が請求書をオンラインで支払うことを可能にするフォームでは、利用者は自分の口座番号を入力する必要がある。ラベル「口座番号」がついたインプットボックスは、口座番号の特定に関する情報を提供する title 属性を持つ。

コード例:


<label for="accNum1">口座番号: </label>
<input id="accNum1" type="text" size="10" value="" title="口座番号は、請求書の右上隅に表示されます。" />
             

検証

チェックポイント

  1. テキスト入力を要求しているフォーム・コントロールを識別する。

  2. 各フォーム・コントロールに明示的に関連付けられたラベルがあることを確認する。

  3. 各フォーム・コントロールがコンテキストに応じたヘルプを title 属性で提供していることを確認する。

判定基準

  • 上記 2. 及び 3.を満たしている。

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


H90: 必須項目のフォーム・コントロールを特定するために、label 要素又は legend 要素を使用する

適用(対象)

外部ラベルを用いている HTML 及び XHTML のコントロール

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

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

H90 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

この達成方法の目的は、ウェブアプリケーションまたはフォームで特定のフォーム・コントロールが必須項目であることを明確に示すことである。コントロールが必須項目であることを示す記号またはテキストは、label 要素、又は fieldset 要素でグループ化されたコントロールに対する legend 要素を用いて、プログラムが解釈できるようにそのコントロールと関連付ける必要がある。記号が用いられている場合には、事前に利用者にその意味を説明する必要がある。

事例

事例 1: テキストを用いて必須項目であることを示す

以下のコード例にあるテキストフィールドには、明示的なラベル「名前(必須)」がある。label 要素の for 属性値が、input 要素の id 属性値と合致していて、label 要素でマークアップされたテキストによってそのコントロールが必須項目であることを示している。

コード例:

<label for="firstname">名前(必須):</label> 
<input type="text" name="firstname" id="firstname" /> 

注記: 英語では、必須項目の "required" を略して "req." とするコンテンツ制作者もいるが、この略語は分かりにくいという報告がある。

事例 2: アスタリスクを用いて必須項目であることを示す

以下のコード例にあるテキストフィールドには、必須項目であることを示すアスタリスクを含んだ明示的なラベルがある。アスタリスクの意味をフォームの先頭で定義することが重要である。このコード例では、アスタリスクは abbr 要素内にあって、アスタリスク文字にスタイルを指定できるようになっている。この CSS は、アスタリスク文字は視覚に障害のある利用者にとっては見えづらいため、デフォルトのアスタリスク文字よりもサイズを大きくしている。

コード例:

CSS:
.req {font-size: 150%} 

HTML:

<p> 必須項目には、アスタリスク (<abbr class="req" title="必須">*</abbr>)が付いています。</p>
<form action="http://www.test.com" method="post">
<label for="firstname">名前 <abbr class="req" title="必須">*</abbr>:</label> 
<input type="text" name="firstname" id="firstname" /> 

事例 3: 画像を用いて必須項目であることを示す

以下のコード例にあるテキストフィールドには、コントロールが必須項目であることを示す画像を含む明示的なラベルがある。画像の意味をフォームの先頭で定義することが重要である。

コード例:

<p><img src="req_img.gif" alt="(必須)" /> は、そのフォーム・コントロールが必須項目であることを示しています。</p>
<form action="http://www.test.com" method="post">
<label for="firstname">名前 <img src="req_img.gif" alt="(必須)" />:</label> 
<input type="text" name="firstname" id="firstname" />
... 

事例 4: ラジオボタンまたはチェックボックスのグループが必須項目であることを示す

ラジオボタン及びチェックボックスは、個々のラジオボタンやチェックボックスではなく、そのグループ全体で一つの必須項目となるため、他のインタラクティブなコントロールとは異なった扱われかたをする。事例 1~3 で用いられている方法をラジオボタンやチェックボックスに適用する際には、必須項目であることを label 要素ではなく legend 要素内で示すべきである。

コード例:

<fieldset>
<legend>私が関心のあるもの(必須):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">写真</label></br>
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">水彩画</label></br>
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">アクリル画</label>
…
</fieldset> 

参考リソース

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

検証

チェックポイント

  1. 必須項目であるフォーム・コントロールに対して、必須項目であることがフォーム・コントロールの label 要素又は legend 要素で示されている。

  2. 必須項目であることを示すテキスト以外のものに対して、それを使用しているフォーム・コントロールよりも前にその意味が説明されている。

判定基準

  • 上記の全てを満たしている。

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


H91: HTML のフォーム・コントロール及びリンクを使用する

適用(対象)

HTMLのフォーム・コントロール及びリンク

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

解説

この達成方法の目的は、インタラクティブなユーザインタフェースを構成する要素のキーボード操作及び支援技術との相互運用性を提供するために、標準的なHTMLのフォーム・コントロール及びリンク要素を用いることである。

ユーザエージェントは、HTMLのフォーム・コントロール及びリンクのキーボード操作を提供している。さらに、ユーザエージェントは、フォーム・コントロール及びリンクを、アクセシビリティAPIに結び付けている。支援技術は、アクセシビリティAPIを利用して、役割(Role)、識別名(Name)、状態(State)、値(Value)といった適切なアクセシビリティ情報を抽出し、それらを利用者に提供している。役割はHTMLの要素によって提供され、名前はその要素に関連付けられているテキストによって提供される。値及び状態が適切な要素は、複合的なメカニズムを通じて、それらの値及び状態も支援技術に提示している。

必須の属性を通じてテキストがすでにコントロールと関連付けられている場合もある。たとえば、送信ボタンは、button要素内のテキスト又は画像の「alt」属性を識別名として用いている。フォーム・コントロールの場合は、label要素又は「title」属性が用いられる。次の表は、HTMLのフォーム・コントロール及びリンクの役割、識別名、値、状態がどのように決定されるかを示したものである。

HTML要素役割(Role)識別名(Name)値(Value)状態(State)
<a> リンク<a> 要素の title 属性、画像リンクの場合は alt 属性。テキストと画像の alt 属性を両方が提供されている場合は、両者を結合する。href属性 
<button>プッシュボタン<button> 要素内のテキスト又は title 属性
<fieldset> グループ化フィールドセット要素にある <legend> 要素内のテキスト
<input type = "button", "submit", or "reset"> プッシュボタンvalue 属性
<input type = "image"> プッシュボタンalt 属性又は title 属性
<input type = "text"> 編集可能なテキストそのコントロールに関連付けられた <label> 要素又は title属性value 属性
<input type = "password"> 編集可能なテキストそのコントロールに関連付けられた <label> 要素又は title 属性値は意図的に隠されている
<input type="checkbox"> チェックボックスそのコントロールに関連付けられた <label> 要素又は title 属性 checked 属性
<input type="radio"> ラジオボタンそのコントロールに関連付けられた <label> 要素又は title 属性 checked 属性
<select> リストそのコントロールに関連付けられた <label> 要素又は title 属性<option> 要素の selected 属性で「selected」と指定
<textarea> 編集可能なテキストそのコントロールに関連付けられた <label> 要素又は title 属性<textarea> 要素内のテキスト

事例

事例 1: リンク

ユーザエージェントは、リンクに移動したり、リンクを選択するメカニズムを提供する。次の各事例では、「リンク」という役割(Role)が <a href> で与えられている。<a name> は「リンク」という役割を与えない点に注意しよう。値(Value)に該当するのは、href属性のURIである。

事例 1a

事例 1a では、識別名はリンクの中にあるテキストである。この場合は「サイト例」が該当する。

コード例:

<a href="www.example.com">サイト例</a> 
事例 1b

リンクの中にある画像に関する事例 1b では、画像の alt 属性が識別名(Name)を提供している。例えば、Microsoft Inspect Objects などのように API を閲覧するツールには、alt 属性を可視化できないものもあるが、支援技術では抽出できる。

コード例:

<a href="www.example.com"><img src="example_logo.gif" alt="例"></a> 
事例 1c

事例 1c では、画像の代替テキストとリンクテキストをが組み合わせるときにいくつかの支援技術では空白文字を自動的に挿入しない。テキストが空白文字抜きで組み合わないようにするときは、画像と隣接した単語の間に空白を入れるのが最も安全であり、それらの単語が合流しない。

コード例:

<a href="www.example.com">テキスト<img src="example_logo.gif" alt="例"></a> 

事例 2: ボタン

HTMLでは、ボタンを生成するのにさまざまな方法があるが、それらは全て「プッシュボタン」という役割(Role)に位置付けられる。

事例 2a

事例 2a では、button 要素内の「保存」というテキストが識別名(Name)となる。値(Value)はない。

コード例:

<button>保存</button> 
事例 2b

事例 2b では、value 属性を用いて「保存」「送信」「リセット」という識別名(Name)を指定している。

コード例:

<input type="button" value="保存" /> 
<input type="submit" value="送信" />  
<input type="reset" value="リセット" /> 
事例 2c

事例 2c では、alt 属性を用いて「保存」という識別名(Name)を指定している。

コード例:

<input type="image" src="save.gif" alt="保存" /> 
事例 2d

事例 2d では、alt 属性ではなく、title 属性を用いて「保存」という識別名(Name)を指定している。

コード例:

<input type="image" src="save.gif" title="保存" /> 
事例 2e

事例 2e では、input 要素の alt 属性を用いて「保存」という識別名(Name)を指定している。title 属性は指定していない。【訳注:コード例と矛盾しているので、WCAGワーキンググループに確認中。】

コード例:

<input type="image" src="save.gif" alt="保存" title="保存" /> 

事例 3: 入力フィールド

事例 3a

事例 3a では、入力フィールドが「編集可能テキスト」という役割(Role)を持っている。label要素のfor属性が、input要素のid 属性を参照することで、label 要素を input 要素と関連付けている。input 要素の識別名(Name)は、label 要素で指定した「果物の種類」となる。値(Value)は、value 属性の「バナナ」となる。

コード例:

<label for="text_1">果物の種類</label>
<input id="text_1" type="text" value="バナナ"> 
事例 3b

事例 3b では、入力フィールドが事例 3a と同じ役割(Role)を持つが、値(Value)がなく、識別名(Name)を title 属性で指定している点が異なる。

コード例:

<input id="text_1" type="text" title="果物の種類">

事例 4: チェックボックス

事例 4は、input 要素の type 属性から「チェックボックス」という役割(Role)を持っている。label 要素の for属性が input 要素の id属性を参照することで、label 要素を input 要素と関連付けている。input 要素の識別名(Name)は、label 要素で指定した「チーズ」となる。状態(State)は checked 属性で「チェックあり」又は「チェックなし」に設定できる。そのコントロールに対する利用者のインタラクションによって、状態(State)が変更される。

コード例:

<label for="cb_1">チーズ</label> 
<input id="cb_1" type="checkbox" checked="checked"> 

事例 5: ラジオボタン

事例 5 は、input 要素の type 属性から「ラジオボタン」という役割(Role)を持っている。input 要素の識別名(Name)は、label 要素から与えられる。状態(State)は、checked 属性によって「チェックあり」又は「チェックなし」に設定できる。状態(State)は、利用者が変更できる。

コード例:

<input type="radio" name="color" id="r1" checked="checked"/><label for="r1">赤</label>
<input type="radio" name="color" id="r2" /><label for="r2">青</label>
<input type="radio" name="color" id="r3" /><label for="r3">緑</label> 

事例 6: セレクトメニュー

事例 6a

事例 6a は、select 要素によって「リストボックス」という役割(Role)を持っている。識別名(Name)は「数量」で、label 要素から与えられている。select要素に識別名を付け忘れるのは、よくあるエラーの一つである。値(Value)は、selected 属性(XHTMLでは値を "selected" と指定)のあるoption要素であり、初期値は「2個」ということになる。

コード例:

<label for="s1">数量</label>
<select id="s1" size="1">
 <option>1個</option>
 <option selected="selected">2個</option>
 <option>3個</option>
</select> 
事例 6b

事例 6b では、事例 6a の select 要素と同じ識別名(Name)、役割(Role)、値(Value)であるが、識別名を title 属性で指定している点が異なる。この方法は、ラベルを視覚的に表示しないほうがよい場合に用いることができる。

コード例:

<select id="s1" title="数量" size="1">
 <option>1個</option>
 <option selected="selected">2個</option>
 <option>3個</option>
</select> 

事例 7: テキストエリア

事例 7a

事例 7aは、textarea要素の「編集可能なテキスト」という役割(Role)を持っている。識別名(Name)は、label要素で指定した「あなたの発言をここに入力」である。値(Value)は、textarea要素内にある「87年前」である。

コード例:

<label for="ta_1">あなたの発言をここに入力</label>
<textarea id="ta_1" >87年前</textarea> 
事例 7b

事例 7bは、同じ役割(Role)を持ち、識別名(Name)はtitle属性を用いて指定していて、値(Value)は空である。

コード例:

<textarea id="ta_1" title="あなたの発言をここに入力" >87年前</textarea> 

事例 8: フォーム・コントロールのグループ化

ラジオボタンのフィールドセット

事例 8のラジオボタンのフィールドセットには「グループ化」という役割(Role)がある。識別名(Name)はlegend要素によって与えられている。

コード例:

<fieldset>
  <legend>色を選択:</legend> 
     <input id="red" type="radio" name="color" value="red" /><label for="red">赤</label><br /> 
     <input id="blue" type="radio" name="color" value="blue" /><label for="blue">青</label><br /> 
     <input id="green" type="radio" name="color" value="green" /><label for="green">緑</label> 
</fieldset> 

参考リソース

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

検証

チェックポイント

  1. HTML のソースコードを調べる。

  2. リンク及びフォーム要素に対して、上記の表で示されているように、識別名(Name)、値(Value)、状態(State)が指定されている。

判定基準

  • 上記 2. を満たしている。

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


H93: ウェブページの id 属性値が一意的(ユニーク)であるようにする

適用(対象)

HTMLのウェブページすべて

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

解説

この達成方法の目的は、異なる要素に同一の id 属性値があることによって、支援技術がコンテンツを解析しようとする際に問題が生じるエラーを回避することである。このエラーは、ウェブページに重複した id 属性値がないことを確認することによって回避できる。人的に確認することができるほか、HTML のバージョンを特定するメカニズムを用いて HTML 文書をバリデートすることによって確認することが可能である。コンテンツ制作者が利用できるバリデータがいくつかあり、この種のエラーはバリデーションの結果レポートで言及される。このようなバリデーションに文書型宣言は絶対に必要というわけではないが、文書型宣言を明記することによってバリデータをより容易に使用できるようになる。

事例

事例 1: HTML バリデータ

HTML のウェブページに文書型宣言(!DOCTYPE 宣言ともよばれる)がある。コンテンツ制作者は、オフラインまたはオンラインのバリデータ(下記の参考リソースを参照)を用いて、あるウェブページで同一の id 属性値が一度だけしか用いられていないことを確認することができる。例えば、W3C のバリデータは、ある id 属性値が二回使われているのを発見すると、「ID "X" はすでに定義済みである」というふうにレポートする。

参考リソース

検証

チェックポイント

  1. そのウェブページで、すべての id 属性値が一意的(ユニーク)である。

判定基準

  • 1. を満たしている。

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


H94: 要素には重複した属性がないようにする

適用(対象)

全ての HTML ページ

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

解説

この達成方法の目的は、同一の要素に重複した属性があることによって、支援技術がコンテンツを解析しようとする際に問題が生じるエラーを回避することである。このエラーは、人的に確認することができるほか、HTML のバージョンを特定するメカニズムを用いて HTML 文書をバリデートすることによって確認することが可能である。コンテンツ制作者が利用できるバリデータがいくつかあり、この種のエラーはバリデーションの結果レポートで言及される。このようなバリデーションに文書型宣言は絶対に必要というわけではないが、文書型宣言を明記することによってバリデータをより容易に使用できるようになる。

事例

事例 1: HTML バリデータ

HTMLのウェブページに文書型宣言(!DOCTYPE 宣言ともよばれる)がある。コンテンツ制作者は、オフラインまたはオンラインのバリデータ(下記の参考リソースを参照)を用いて、あるウェブページで同一の id 属性値が一度だけしか用いられていないことを確認することができる。例えば、W3C のバリデータは、ある要素で同じ属性が二回使われているのを発見すると、「"X" 属性が重複している」というふうにレポートする。

参考リソース

検証

チェックポイント

  1. 同一の要素で二回以上使われている属性がない。

判定基準

  • 1. を満たしている。

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


H95: キャプションを提供するために、track要素を使用する

適用(対象)

HTML5

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

解説

この達成方法の目的は、タイミングを指定したテキストのキャプショントラックをvideo要素に指定するためにHTML5 track 要素を用いることである。タイミングのとれたテキストのキャプショントラックはダイアログ、音響効果、音楽的なきっかけ、他関連する、音声が利用できない、もしくは明瞭に聞き取れないときにも適用される音声情報の表記または翻訳を含む。

track 要素の src 属性は URL であり、これはテキストトラックデータのアドレスである。

track 要素の kind 属性はタイミングを指定したテキストの情報の種類を指示している。キャプションテキストトラックはダイアログおよび他ビデオを理解するために重要な音声のテキストバージョンを提供している。字幕は発話コンテンツのみを含んでいる。もしほかの音声情報がビデオを理解するために重要なのであれば、字幕トラックは達成基準を満たすために十分ではない。

注記: 一部の領域では、オーディオトラックの表示可能なテキスト表示に「字幕」という用語が使われている。 制作者は、kind=captions ではなく、kind=subtitles として、オーディオトラックの言語でタイミングを指定したテキストのトラックをマークアップすることができ、関連するオーディオ情報を追加することある。 そのようなタイミングを指定したテキストトラックは達成基準 1.2.2 の要件を満たすつもりであったのに、キャプションを見つけようとする利用者を混乱させる可能性があるので、この状況で字幕を使用することは好事例ではない。

事例

事例 1: 一つの言語におけるキャプション

英語のキャプショントラックを持つ、英語ビデオのための video 要素。キャプションは WebVTT フォーマットで提供されている。

コード例:


			 <video poster="myvideo.png" controls>
				 <source src="myvideo.mp4" srclang="en" type="video/mp4">
				 <track src="myvideo_en.vtt" kind="captions" srclang="en" label="English">
			  </video>
            

事例 2: 複数の言語におけるキャプション

英語のキャプショントラックを持つ、英語ビデオのための video 要素。キャプションは WebVTT フォーマットで提供されている。

コード例:


			  <video poster="myvideo.png" controls>
				<source src="myvideo.mp4" srclang="en" type="video/mp4">
				<source src="myvideo.webm" srclang="fr" type="video/webm">
				<track src="myvideo_en.vtt" kind="captions" srclang="en" label="English">
				<track src="myvideo_fr.ttml" kind="captions" srclang="fr" label="French">
			  </video>            

参考リソース

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

検証

チェックポイント

ビデオを再生するための各 video 要素において:

  1. ビデオが言語に応じた kind キャプションの track 要素を含むことを確認する。

判定基準

  • 上記 1. を満たしている。

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


H96: 音声解説を提供するために、track 要素を使用する

適用(対象)

HTML5

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

解説

この達成方法の目的は、タイミングを指定したテキストの音声解説トラックを video 構成要素に指定するために HTML5 track 要素を用いることである。タイミングの指定されたテキストの音声解説トラックは、視覚的な構成要素が隠れていたり、使えなかったり、使うのに不適であったりしたときの音声合成のための、メディア資源のビデオ構成要素のテキスト記述を含む。ユーザエージェントは視覚的でない方法で、例えばそれらを音声合成することによって、利用者にきっかけを使えるようにする。

track 要素の src 属性は URL であり、これはテキストトラックデータのアドレスである。

音声解説のきっかけは、メディア資源の聴覚的な構成要素で利用可能なギャップに収まる必要がある。トラックキューの時間間隔内に記述テキストを合成するのに十分な時間がない場合、ユーザエージェントはスピーチを切り捨てることがある。 これにより、追加可能な補足情報の量が制限される。

ユーザエージェントは、解説が完全に同期するまでビデオを一時停止し、そしてビデオを再開することで拡張音声解説もサポートしうる。

事例

事例 1: 複数言語における音声解説

英語ビデオのための video 要素。音声解説は WebVTT フォーマットで提供されている。

コード例:


			 <video poster="myvideo.png" controls>
				<source src="myvideo.mp4" srclang="en" type="video/mp4">
				<track src="myvideo_en.vtt" kind="descriptions" srclang="en" label="English">
			  </video>
            

事例 2: 複数言語における音声解説

ビデオに英語とフランス語両方のソース要素を含み、WevVTT (vtt) ファイルフォーマットを使った英語とフランス語の音声解説を持つ video 要素。

コード例:


			 <video poster="myvideo.png" controls>
				<source src="myvideo.mp4" srclang="en" type="video/mp4">
				<source src="myvideo.webm" srclang="fr" type="video/webm">
				<track src="myvideo_en.vtt" kind="descriptions" srclang="en" label="English">
				<track src="myvideo_fr.vtt" kind="descriptions" srclang="fr" label="French">
			  </video>            

事例 3: 一つの言語におけるキャプション

音声解説トラックを持つ「グーグル自動走行車」の video

コード例:


			<video controls tabindex="1">
				<source src="cdgQpa1pUUE.webm" type="video/webm">
				<source src="cdgQpa1pUUE.mp4" type="video/mp4">
				<track id="audesc" src="cdgQpa1pUUE.vtt" kind="descriptions" label="English descriptions" srclang="en-us"></track>
			</video>            

参考リソース

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

検証

チェックポイント

ビデオを再生するための各 video 要素において:

  1. ビデオが言語に応じた kind のキャプションの track 要素を含むことを確認する。

判定基準

  • 上記 1. を満たしている。

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


H97: 関連したリンクをグループ化するために、nav 要素を使用する

適用(対象)

関係のあるリンクを含むHTML5文書

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

解説

この達成方法の目的は、HTML5 nav 要素を使ってナビゲーションリンクをグループ化することである。nav 要素は、HTML5 のいくつかの区分される要素の 1 つである。このマークアップを使うと、スクリーンリーダーのような支援技術の利用者が過去に場所を確認してスキップしたリンクを分類するのが容易になる。セマンティックな構造を使うと、カスタムスタイルシートでそれらの関係性を維持しながらリンクのグループの表現を変更できる。nav 要素がページ上で複数回使用されている場合は、aria-label 又は aria-labelledby 属性を使用してナビゲーショングループを区別する。

リンクのグループ全てを nav 要素でマークアップする必要は無い。例として、リンクはリストのような他の構造にグループ化されることもあり、またはページの分離されたセクションを表現しない場合 ARIA マークアップを使うこともある。

事例

事例 1: 1 つの nav 要素に囲まれたナビゲーションリンク

この例は、アクセシビリティカリキュラムにおけるナビゲーションリンクを分類するために nav 要素を使う。

コード例:


				 <nav>
				    <a href="../webaccessibility.html">ウェブアクセシビリティ</a>
				    <a href="../docaccessibility.html">ドキュメントアクセシビリティ</a>
					<a href="../mobileaccessibility.html">モバイルアクセシビリティ</a>
				 </nav>
            

事例 2: 多くのnav要素

この例は、文書中に1つ以上のnav要素があるときに、ナビゲーション分類を識別するためにaria-label属性とnav要素を使う。

コード例:


			<nav aria-label="Site menu">
			  <ul>
				  <li>...ここにサイトナビゲーションのリンク一覧 ...</li>
			  </ul>
			</nav>
			...
			<article>
			  <nav aria-label="Related links">
				...ここに関連するリンク一覧 ...
			  </nav>
			</article>          

事例 3: 一般的な多くの nav 要素

以下の例は、同じページに 2 つ以上のナビゲーションメニューが存在し、ラベルとして参照されうるページ上に既存のテキストが無いという状況での良い事例である。

コード例:


			<nav aria-label="primary">
				<a href="home.html">ホーム</a>
				<a href="about-us.html">私たちについて</a>
				<a href="products.html">商品</a>
			</nav>

			<nav aria-label="secondary">
				<a href="adverts.html">広告主</a>
				<a href="related.html">関連するリンク</a>
				<a href="subsidiaries.html">補足</a>
			</nav>            

参考リソース

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

検証

チェックポイント

  1. 視覚的に寄せ集められておりページのセクションを表現するリンクが nav 要素で囲まれていることを確認する。

判定基準

  • 上記 1. を満たしている。

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