【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集

WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

SCR24: 利用者の要求に応じて新しいウィンドウを開くために、プログレッシブエンハンスメントを使用する

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

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

適用 (対象)

HTML 4.01 及び XHTML 1.0

訳注: HTML4 及び XHTML 1.0 は Superseded Recommendation としてマークされ、廃止された仕様である。

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

解説

この達成方法の目的は、利用者が要求していない新しいウィンドウの出現によって引き起こされうる混乱を回避することである。突然新しいウィンドウが開くと、利用者は混乱したり、そのことに気づかなかったりする。文書型が target 属性を認めていない場合 (HTML 4.01 Strict や XHTML 1.0 Strict には存在しない)、又はコンテンツ制作者が target 属性の使用を好まない場合には、ECMAScript を用いて新しいウィンドウを開くことができる。以下にある事例は、スクリプトを用いて新しいウィンドウを開く方法を示している。その事例では、リンク (a 要素) にイベントハンドラを追加して、利用者にリンク先のコンテンツが新しいウィンドウで開くことを事前に知らせている。

事例

事例 1

マークアップ:

スクリプトはドキュメントの head 要素内に組み込まれており、リンクにはスクリプトのフックとなる id 属性がある。

コード例:


<script type="text/javascript" src="popup.js"></script>
…
<a href="help.html" id="newwin">Show Help</a>

スクリプト:

コード例:


// ブラウザによるイベント登録のサポートは不十分だが
// 従来のイベントモデルを用いる
window.onload = addHandlers;

function addHandlers()
{
  var objAnchor = document.getElementById('newwin');

  if (objAnchor)
  {
    objAnchor.firstChild.data = objAnchor.firstChild.data + ' (opens in a new window)';
    objAnchor.onclick = function(event){return launchWindow(this, event);}
    // UAAG ではユーザエージェントにデバイス非依存な方法でイベントを処理することを
    // 要求しているが、そうしないブラウザが多いのでキーボードイベントを追加する
    objAnchor.onkeypress = function(event){return launchWindow(this, event);}
  }
}

function launchWindow(objAnchor, objEvent)
{
  var iKeyCode, bSuccess=false;

  // キーボードからのイベントである場合、利用者がリンクをリクエストしたときだけ
  // 新しいウィンドウを開くようにする (リターン又はスペース)
  if (objEvent &amp;&amp; objEvent.type == 'keypress')
  {
    if (objEvent.keyCode)
      iKeyCode = objEvent.keyCode;
    else if (objEvent.which)
      iKeyCode = objEvent.which;

    // キャリッジリターン又はスペースではない場合、ユーザエージェントが
    // アクションの処理を継続するようにtrueを返す
    if (iKeyCode != 13 &amp;&amp; iKeyCode != 32)
      return true;
  }

  bSuccess = window.open(objAnchor.href);

  // ウィンドウが開かなかった場合、ブラウザには同じウィンドウで開くという
  // デフォルトのアクションを継続させる
  if (!bSuccess)
    return true;

  // ウィンドウが開いたら、ブラウザによる処理をそこで止める
  return false;
} 

参考リソース

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

検証

手順

  1. ドキュメントにあるリンクを起動して、新しいウィンドウが開くかどうかを確認する。

  2. 新しいウィンドウを開くリンクごとに、次のいずれかを達成するためにスクリプトを用いることを確認する:

    1. リンクが新しいウィンドウを開くことを明示している

    2. デバイス非依存のイベントハンドラを用いている

    3. 新しいウィンドウを開けない場合、ブラウザが同じウィンドウにリンク先のコンテンツを開くことができる。

期待される結果

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。