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

WCAG 2.0 達成方法集

Skip to Content (Press Enter)

このページのコンテンツ:

-

SCR21: ページにコンテンツを追加するために、Document Object Model (DOM) の機能を使用する

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

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

適用 (対象)

HTML 及び XHTML の中で利用される ECMAScript

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

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

SCR21 に関するユーザエージェントサポートノートを参照のこと。

解説

この達成方法の目的は、document.write 又は object.innerHTML の代わりに Document Object Model (DOM) の機能を用いて、ページ中にコンテンツを追加することである。document.write() メソッドは XHTML で正しい MIME タイプ (application/xhtml+xml) が指定されているときに動作せず、innerHTML プロパティは DOM の仕様ではないため利用すべきでない。もし DOM の機能を利用してコンテンツを追加すれば、ユーザエージェントは DOM にアクセスしてコンテンツを取り込むことができる。createElement() 関数を使って DOM の中に要素を作成することもできる。createTextNode() は要素に関連付けられたテキストを作成するのに用いられる。appendChild()、removeChild()、insertBefore() 及び replaceChild() 関数は、要素やノードを追加したり削除したりするのに用いられる。その他の DOM 関数は、作成された要素に属性を与えるときに使用される。

注記: フォーカス可能な要素を文書に追加するとき、tabindex 属性を用いて明示的なタブ順序を指定してはならない。なぜなら、文書の中央にフォーカス可能な要素を追加するときに問題が発生するからである。tabindex 属性を明示的に設定しないことで、デフォルトのタブ順序が新しい要素に割り当てられるようにする。

訳注 1: HTML 5.2§7.4.3. document.write() の Warning でも述べられているように、たとえ HTML (MIME タイプ text/html) であっても document.write() の使用は勧められていない。

訳注 2: innerHTML は 2018 年現在、DOM Parsing and Serialization 仕様で定義されている。

訳注: WAIC では SCR21 に関するアクセシビリティ・サポーテッド（AS）情報を提供している。

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

事例

事例 1

この例では、クライアントサイドスクリプトの使用法として、フォームの検証方法を紹介している。もしエラーがみつかれば、適切なエラーメッセージが表示される。この例では DOM 関数を使用し、タイトル、エラーに関する短い説明、及びエラー一覧の順序付リストを含むエラー通知を追加している。タイトルの内容はリンクとして書かれているので、focus メソッドを使って利用者の注意をエラーに向けることができる。個別のリスト項目もまた、リンクとして書かれているので、そのリンク先に移動したときにエラーのあるフォームのフィールドにフォーカスできるように書かれている。

この例では、簡単にするために二つのテキストフィールドだけを検証しているが、一般的なフォームハンドラにするために容易に拡張することができる。クライアントサイドの検証は、それを唯一の検証とすべきではなく、サーバーサイドの検証でも確認するべきである。クライアントサイドでの検証の利点は、利用者にすぐにフィードバックを提供することで、サーバーからエラーが帰ってくるまでの間、彼らを待たせることがないこと、及びサーバーへの余計なトラフィックを軽減できることである。

次の例はフォームにイベントハンドラを追加するスクリプトである。もしスクリプトが有効であれば、サーバーにフォームが送信される前に validateNumbers() 関数がクライアントサイドの検証のために呼び出される。もしスクリプトが有効でなければ、フォームはすぐにサーバー側に送信されるので、検証機能はサーバーにも実装されるべきである。

コード例:


window.onload = initialise;
function initialise()
{
  // 標準に準拠したユーザエージェントが対象
  if (!document.getElementById || !document.createElement || !document.createTextNode)
    return;

  // フォームにイベントハンドラを付加
  var objForm = document.getElementById('numberform');
  objForm.onsubmit= function(){return validateNumbers(this);};
}

次の例は validation の機能である。エラーメッセージの要素を作成するために createElement()、createTextNode()、及び appendChild() DOM 関数を使用しているところに注目して欲しい。

コード例:


function validateNumbers(objForm)
{
  // フィールドを検証
  var bFirst = isNumber(document.getElementById('num1').value);
  var bSecond = isNumber(document.getElementById('num2').value);
  // 問題がある場合、エラーを表示
  if (!bFirst || !bSecond)
  {
    var objExisting = document.getElementById('validationerrors');
    var objNew = document.createElement('div');
    var objTitle = document.createElement('h2');
    var objParagraph = document.createElement('p');
    var objList = document.createElement('ol');
    var objAnchor = document.createElement('a');
    var strID = 'firsterror';
    var strError;
    // 見出し要素にリンクを含めることによって、スクリーンリーダーは
    // フォーカスを置くことができる － そのリンク先はエラー一覧の中で 
    // 一番最初のエラー項目とする
    objAnchor.appendChild(document.createTextNode('Errors in Submission'));
    objAnchor.setAttribute('href', '#firsterror');
    objTitle.appendChild(objAnchor);
    objParagraph.appendChild(document.createTextNode('Please review the following'));
    objNew.setAttribute('id', 'validationerrors');
    objNew.appendChild(objTitle);
    objNew.appendChild(objParagraph);
    // 発見したエラーすべてをエラー一覧に追加
    if (!bFirst)
    {
      strError = 'Please provide a numeric value for the first number';
      objList.appendChild(addError(strError, '#num1', objForm, strID));
      strID = '';
    }
    if (!bSecond)
    {
      strError = 'Please provide a numeric value for the second number';
      objList.appendChild(addError(strError, '#num2', objForm, strID));
      strID = '';
    }
    // エラー情報に一覧を追加
    objNew.appendChild(objList);
    // 既存のエラーがあった場合、新規のエラーと置き換える
    // あるいは、新規のエラーをフォームの先頭に追加する
    if (objExisting)
      objExisting.parentNode.replaceChild(objNew, objExisting);
    else
    {
      var objPosition = objForm.firstChild;
      objForm.insertBefore(objNew, objPosition);
    }
    // フォーカスを見出しにあるアンカーに置いて、スクリーンリーダーに
    // 対してエラーがあることを警告する
    objAnchor.focus();
    // フォームを送信しない
    objForm.submitAllowed = false;
    return false;
  }
  return true;
}

// 数字を検証する関数
function isNumber(strValue)
{
  return (!isNaN(strValue) && strValue.replace(/^\s+|\s+$/, '') !== '');
}

以下は、エラーメッセージを作成して、関連するフォームのフィールドにフォーカスさせるための補助関数である。

コード例:


// エラー内容を説明する、エラーのフォームフィールドへのリンクの
// リスト項目を作成する関数
function addError(strError, strFragment, objForm, strID)
{
  var objAnchor = document.createElement('a');
  var objListItem = document.createElement('li');
  objAnchor.appendChild(document.createTextNode(strError));
  objAnchor.setAttribute('href', strFragment);
  objAnchor.onclick = function(event){return focusFormField(this, event, objForm);};
  objAnchor.onkeypress = function(event){return focusFormField(this, event, objForm);};
  // strIDに値がある場合、これがリストで一番目のエラーとなる
  if (strID.length > 0)
    objAnchor.setAttribute('id', strID);
  objListItem.appendChild(objAnchor);
  return objListItem;
}

// エラーのフォームフィールドにフォーカスを置く関数
function focusFormField(objAnchor, objEvent, objForm)
{
  // キーボードナビゲーションを可能にするAllow keyboard navigation over links
  if (objEvent && objEvent.type == 'keypress')
    if (objEvent.keyCode != 13 && objEvent.keyCode != 32)
      return true;
  // フォーカスをフォームコントロールに設定する
  var strFormField = objAnchor.href.match(/[^#]\w*$/);
  objForm[strFormField].focus();
  return false;
}

以下は事例のフォーム用 HTML である。

コード例:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>ECMAScript Form Validation</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<h1>Form Validation</h1>
<form id="numberform" method="post" action="form.php">
<fieldset>
<legend>Numeric Fields</legend>
<p>
<label for="num1">Enter first number</label>
<input type="text" size="20" name="num1" id="num1">
</p>
<p>
<label for="num2">Enter second number</label>
<input type="text" size="20" name="num2" id="num2">
</p>
</fieldset>
<p>
<input type="submit" name="submit" value="Submit Form">
</p>
</form>
</body>
</html>

この例はクライアントサイドスクリプトに限定しているため、サーバーサイドの検証によって補完されるべきである。例では、クライアントサイドスクリプトが利用できるときのエラーメッセージの作成に限定される。

このコードの実装サンプル: フォームの検証

参考リソース

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

(今のところ、なし。)

検証

手順

動的に新しいコンテンツを作成するページに対して:

  1. ソースコードを検証して、新しいコンテンツが document.write()、innerHTML、outerHTML、innerText 又は outerText を用いて作成されていないことを確認する。

訳注: 解説の訳注で示した document.write()、innerHTML に加えて、outerHTML は 2018 年現在、DOM Parsing and Serialization 仕様で定義されており、innerText は HTML 5.2§3.2.6. The innerText IDL attribute で定義されている。したがって、手順 1 に示されるものに関しては、outerText のみが非標準である。HTMLElement.outerText - Web APIs | MDN も参照のこと。

期待される結果

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

このウェブページは、WCAG 2.0 達成方法集: WCAG 2.0 の達成方法と失敗例 (この文書の最新版 (英語) を参照してください) の一部です。文書全体を単一 HTML ファイルにしたものもご利用いただけます。この文書と、Web Content Accessibility Guidelines (WCAG) 2.0 に関連する他の文書との関係については、The WCAG 2.0 Documents をご覧ください。パブリックコメントを送るには、Instructions for Commenting on WCAG 2.0 Documents に従ってください。

Copyright © 2016 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and document use rules apply.

【注意】 この文書は、W3C ワーキンググループノート Techniques for WCAG 2.0 の 2016 年 10 月 7 日時点での最新版をウェブアクセシビリティ基盤委員会 (WAIC) が翻訳して公開しているものです。この文書の正式版は、W3C のサイトにある英語版です。正確な内容については、W3C が公開している原文 (英語) をご確認ください。この翻訳文書はあくまで参考情報であり、翻訳上の誤りが含まれていることがあります。翻訳上の誤りを見つけられた場合は、翻訳に関するお問い合わせからご連絡ください。

【重要】 達成方法のタイトルが英語のままになっているものは、日本語訳を行っていないため、原文 (英語) にリンクしています。