表示サンプル: このページの修正箇所は次のように表示されます。
スクリプトで使用されるHTML及びXHTML
これは、次の達成基準に関連する実装方法である:
コンテンツ制作者はしばしば、ブラウザによって提供されるポップアップウインドウを使わずに、独自のダイアログを作成したがる。これは通常、ダイアログのコンテンツをdiv
の中に収めて、そのdiv
をコンテンツの上にCSSによる重なり順及び絶対配置を用いて配置するというやり方でおこなわれる。
これらのダイアログをアクセシブルにするには、いくつかの簡単なルールに従う必要がある。
リンクやボタンのonclick
イベントからダイアログを起動するスクリプトをトリガーにする。
ダイアログのdiv
をDocument Object Model (DOM) の中、トリガーした要素の直後に配置する。トリガーした要素がフォーカスを保持し、ダイアログのコンテンツをその要素のあとに挿入することで、ダイアログの中のコンテンツがスクリーンリーダーの読み上げ順序で次になり、タブ順序も次になる。それでも、ダイアログは視覚的にページ上のあらゆる場所に絶対配置できる。これは、下の例のようにダイアログをHTMLの中で作成し、CSSで非表示にする方法又は、トリガーした要素の直後にスクリプトで挿入する方法のどちらでも実装できる。
ダイアログのdiv内部のHTMLが、その他のコンテンツと同じアクセシビリティガイドラインの要件を満たしていることを保証する。
リンクがダイアログを開閉できたり、キーボードのフォーカスが外れるとダイアログが閉じるようにしたりすることはすばらしいが、必ずしも必要なわけではない。
この例のHTMLには、トリガーとなる要素、この場合はボタンとダイアログのフレームとして機能するdivがある。
トリガーとなる要素はボタンで、スクリプトはonclickイベントのトリガーである。これは適切なイベントをオペレーティングシステムに送るので、支援技術はDOMの中の変化に気がつくことができる。
この例では、ダイアログ内の送信及びリセットボタンは単純にdiv
に隠れている。
コード例:
...
<button onclick="TogglePopup(event,true)"
name="pop0001">オプション</button>
<div class="popover" id="pop0001">
<h3>並べ替えの情報を編集</h3>
<form action="default.htm" onsubmit="this.parentNode.style.display='none'; return false;" onreset="this.parentNode.style.display='none'; return false;">
<fieldset>
<legend>並び順</legend>
<input type="radio" name="order" id="order_alpha" /><label for="order_alpha">アルファベット順</label>
<input type="radio" name="order" id="order_default" checked="true" /><label for="order_default">既定</label>
</fieldset>
<div class="buttons">
<input type="submit" value="OK" />
<input type="reset" value="キャンセル" />
</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;
}
...
このコードの実装サンプル:ダイアログを開くオプションボタン
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
W4A Paper: Accessibility for Simple to Moderate-Complexity DHTML Web Sites by Cynthia C. Shelly and George Young, Microsoft Corporation. (PDF Format)
Microsoft Developer Network Whitepaper: Writing Accessible Web Applications by Cynthia C. Shelly and George Young. (Microsoft Word Format)
Microsoft Active Accessibility 2.0 SDK. Includes Inspect32.exe and other MSAA tools.
[変更ここまで][ここから変更] Microsoft Internet Explorer Developer Toolbar.[変更ここまで]. Allows examination of script-generated DOM in Microsoft Internet Explorer
Firebug. Allows examination of script-generated DOM in Firefox.
ページ内のすべての場所から、ダイアログのトリガーとなるもので、ポップアップウインドウでないものを探す。
Tabキーでその場所に移動してEnterキーを押下することで、ダイアログを開くことができる。
開いたら、タブ順序でダイアログが次の位置にある。
ダイアログがボタン又はリンクのクリックイベントによってトリガーされている。
スクリプトによって生成されたDOMを検証できるツールを用いて、DOM内でダイアログが次にある。
2., 3., 4.及び5.を満たしている。
注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記:
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。