デバイス非依存な方法でカスタムダイアログを作成する

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

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

適用 (対象)

スクリプトで使用される HTML 及び XHTML

これは達成基準 2.4.3: フォーカス順序 (書かれていない達成方法を満たす慣習的な達成方法) に関する達成方法である。

解説

コンテンツ制作者はしばしば、ブラウザによって提供されるポップアップウインドウを使わずに、独自のダイアログを作成したがる。これは通常、ダイアログのコンテンツを div の中に収めて、その div をコンテンツの上に CSS による重なり順及び絶対配置を用いて配置するというやり方でおこなわれる。

これらのダイアログをアクセシブルにするには、いくつかの簡単なルールに従う必要がある。

  1. リンクやボタンの onclick イベントからダイアログを起動するスクリプトをトリガーにする。
  2. ダイアログの div を Document Object Model (DOM) の中、トリガーした要素の直後に配置する。トリガーした要素がフォーカスを保持し、ダイアログのコンテンツをその要素のあとに挿入することで、ダイアログの中のコンテンツがスクリーンリーダーの読み上げ順序で次になり、タブ順序も次になる。それでも、ダイアログは視覚的にページ上のあらゆる場所に絶対配置できる。これは、下の例のようにダイアログを HTML の中で作成し、CSS で非表示にする方法又は、トリガーした要素の直後にスクリプトで挿入する方法のどちらでも実装できる。
  3. ダイアログの div 内部の HTML が、その他のコンテンツと同じアクセシビリティガイドラインの要件を満たしていることを保証する。

リンクがダイアログを開閉できたり、キーボードのフォーカスが外れるとダイアログが閉じるようにしたりすることはすばらしいが、必ずしも必要なわけではない。

訳注

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

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

事例

事例 1: ダイアログを開くオプションボタン

この例の HTML には、トリガーとなる要素、この場合はボタンとダイアログのフレームとして機能する div がある。

トリガーとなる要素はボタンで、スクリプトは onclick イベントのトリガーである。これは適切なイベントをオペレーティングシステムに送るので、支援技術は DOM の中の変化に気がつくことができる。

この例では、ダイアログ内の送信及びリセットボタンは単純に div に隠れている。

...
<button onclick="TogglePopup(event,true)"
	name="pop0001">Options</button>

<div class="popover" id="pop0001">
  <h3>Edit Sort Information</h3>
  <form action="default.htm" onsubmit="this.parentNode.style.display='none'; return false;" onreset="this.parentNode.style.display='none'; return false;">
    <fieldset>
      <legend>Sort Order</legend> 
      <input type="radio" name="order" id="order_alpha" /><label for="order_alpha">Alphabetical</label>
      <input type="radio" name="order" id="order_default" checked="true" /><label for="order_default">Default</label>
    </fieldset>
<div class="buttons">
  <input type="submit" value="OK" />
  <input type="reset" value="Cancel" />
</div>
</form>

</div>
...

div、見出し、及び form 要素は CSS でダイアログに見えるようにスタイル付けされている。

...
a { color:blue; }
a.clickPopup img { border:none; width:0; }

div.popover { position:absolute; display:none; border:1px outset; background-color:beige; font-size:80%; background-color:#eeeeee; color:black; }
div.popover h3 { margin:0; padding:0.1em 0.5em; background-color:navy; color:white; }
#pop0001 { width:20em; }
#pop0001 form { margin:0; padding:0.5em; }
#pop0001 fieldset { margin-bottom:0.3em; padding-bottom:0.5em; }
#pop0001 input, #pop0001 label { vertical-align:middle; }
#pop0001 div.buttons { text-align:right; }
#pop0001 div.buttons input { width:6em; }
...

スクリプトはポップアップする div の表示を切り替え、表示させたり隠したりする。

...
function TogglePopup(evt,show)
{
	HarmonizeEvent(evt);
	var src = evt.target;
	if ("click" == evt.type)
	{
		evt.returnValue = false;
	}
	var popID = src.getAttribute("name");
	if (popID)
	{
		var popup = document.getElementById(popID);
		if (popup)
		{
			if (true == show)
			{
				popup.style.display = "block";
			}
			else if (false == show)
			{
				popup.style.display = "none";
			}
			else
			{
				popup.style.display = "block" == popup.style.display ? "none" : "block";
			}
			if ("block" == popup.style.display)
			{
				//window.alert(document.documentElement.scrollHeight);
				popup.style.top = ((document.documentElement.offsetHeight - popup.offsetHeight) / 2 ) + 'px';
				popup.style.left = ((document.documentElement.offsetWidth - popup.offsetWidth) / 2) + 'px';
			}
		}
	}
}

function SubmitForm(elem)
{ 
	elem.parentNode.style.display='none'; 
	return false;
}

function ResetForm(elem)
{ 
	elem.parentNode.style.display='none'; 
	return false;
}
...
このコードの実装サンプル: ダイアログを開くオプションボタン

参考リソース

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

訳注 1

「Microsoft Internet Explorer Developer Toolbar」はページが削除されているが、代わりに開発者ツールを使用できる。詳細については、Internet Explorer 開発者ツールを理解するを参照のこと。

訳注 2

Firefox のアドオン「Firebug」は開発が終了している。代わりに開発ツールを使用できる。開発ツール | MDN も参照のこと。

訳注 3

Google Chrome の場合、類似のツールが利用できる。詳細については、Chrome DevTools | Tools for Web Developers | Google Developers を参照のこと。

訳注 4

Edge の場合も、類似のツールが利用できる。詳細については、Microsoft Edge Developer Tools - Microsoft Edge Development | Microsoft Docs を参照のこと。

検証

手順

  1. ポップアップウインドウでないダイアログのトリガーとなるものページ内の全ての場所を探す。
  2. Tab キーでその場所に移動して Enter キーを押下することで、ダイアログを開くことができることを確認する。
  3. 一度開いたら、タブ順序でダイアログが次の位置にあることを確認する。
  4. ダイアログがボタン又はリンクのクリックイベントからトリガーされていることを確認する。
  5. スクリプトによって生成された DOM を検証できるツールを用いて、DOM 内でダイアログが次にあることを確認する。

期待される結果

  • 2.、3.、4. 及び 5. の結果が真である。