適用 (対象)
緊急ではない情報提供のアラートにスクリプトを使用するウェブコンテンツ技術
これは、次の達成基準に関する達成方法である:
- 達成基準 2.2.4: 割り込み (十分な達成方法)
- 達成基準 4.1.3: ステータスメッセージ (参考)
解説
この達成方法の目的は、メッセージ (アラート) を含むダイアログを利用者に表示することである。アラートが表示されたとき、それがフォーカスされると、利用者はそれを閉じるためにダイアログの OK ボタンを押さなければならない。これらのアラートにフォーカスが移ってしまうと、特に、緊急ではない情報に使用されたとき、利用者の気が散ってしまうかもしれない。今日の名言、役に立つ小技、又は特定のイベントまでのカウントダウンなど、緊急ではない目的のアラートは、利用者がウェブページに提供された選択肢でそれらを有効にすることなしには現れないようにする。
この達成方法では、アラートを表示するかどうかの利用者の選択を保存する JavaScript のグローバル変数に割り当てる。初期値は false にする。 ラッパー関数は、アラートを表示する前にこの変数の値をチェックするために作成される。alert() 関数を直接呼び出すよりもむしろ、アラートを表示するすべての呼び出しをこのラッパー関数にかけるようにする。ページの上部には、ページでのアラートの表示を利用者が有効にするためのボタンを提供する。この達成方法は訪問ベースで 1 回の訪問ごとに作動する。ページが読みこまれるたび、アラートは無効にされ、利用者は手動でそれらを有効にしなければならない。あるいは、コンテンツ制作者は、利用者の選択をセッションを越えて保存するためにクッキーを使用することができる。
事例
例 1
以下のスクリプトは、利用者が「アラートを利用する」というボタンを選択するなら、10 秒ごとにアラートボックスに名言を表示する。利用者は再び「アラートを利用しない」を選択することで、名言のアラートボックスを非表示にすることができる。
<script type="text/javascript">
var bDoAlerts = false; // global variable which specifies whether to
// display alerts or not
/* function to enable/disable alerts.
* param boolean bOn - true to enable alerts, false to disable them.
*/
function modifyAlerts(isEnabled) {
bDoAlerts = isEnabled;
}
/* wrapper function for displaying alerts. Checks the value of bDoAlerts
*and only calls the alert() function when bDoAlerts is true.
*/
function doAlert(aMessage) {
if (bDoAlerts) {
alert(aMessage);
}
}
// example usage - a loop to display famous quotes.
var gCounter = -1; // global to store counter
// quotes variable would be initialized with famous quotations
var quotes = new Array("quote 1", "quote 2", "quote 3", "quote 4", "quote 5");
function showQuotes() {
if (++gCounter >= quotes.length) {
gCounter = 0;
}
doAlert(quotes[gCounter]);
setTimeout("showQuotes();", 10000);
}
showQuotes();
</script>
ページの本文内には、アラートを有効にしたり無効する方法を含める。以下はひとつの例である:
<body> <p>Press the button below to enable the display of famous quotes using an alert box<br /> <button id="enableBtn" type="button" onclick="modifyAlerts(true);"> Turn Alerts On</button><br /> <button id="disableBtn" type="button" onclick="modifyAlerts(false);"> Turn Alerts Off</button></p>
このコードの動作例: Demonstration of Alerts.
検証
手順
JavaScript の alert を使用した緊急ではない中断をサポートするウェブページにおいて:
- ウェブページを読み込んだとき、緊急ではないアラートが表示されないことを確認する。
- 緊急ではないアラートを有効にするメカニズムがあることを確認する。
- 緊急ではないアラートを有効にすると、アラートが表示されることを確認する。
期待される結果
- JavaScript の alert を使用して緊急ではない中断をサポートするウェブページでは、上記の #1、#2 及び #3 の結果が真である。