Skip to content

テクニック SCR26:動的なコンテンツを、Document Object Model の、そのトリガーとなる要素の直後に挿入する

このテクニックについて

このテクニックは 2.4.3: フォーカス順序 (ウェブページを動的に変更するために用いる場合、十分なテクニック) に関連する。

このテクニックは、HTML 及びスクリプトに適用される。

解説

このテクニックの目的は、Document Object Model (DOM) に挿入されたユーザインタフェースの要素をタブ順序及びスクリーンリーダーの読み上げ順序がユーザエージェント標準のふるまいによって正しく設定されるような方法で配置することである。このテクニックは、メニューやダイアログのように隠れているものと表示されているもの、全てのユーザインタフェース要素に利用することができる。

スクリーンリーダーの読み上げ順序は、Document Object Model 内の HTML の要素の順序に基づいており、それはタブ順序についても同様である。このテクニックでは、新しいコンテンツを DOM のそのトリガーとなる要素の直後に挿入する。トリガーとなる要素は、リンク又はボタンでなければならず、スクリプトはその onclick イベントにより呼び出されなければならない。これらの要素はもともとフォーカス可能であり、その onclick イベントはデバイスに依存しない。フォーカスは選択された要素に残り、その後に挿入された新しいコンテンツは、タブ順序及びスクリーンリーダーの読み上げ順序の両方において、次の順番となる。

このテクニックは同期された更新にも利用できることに注目して欲しい。(AJAX と呼ばれることのある) 非同期の更新では、支援技術に非同期のコンテンツが挿入されたことを通知するために追加のテクニックが必要となる。

事例

事例 1

この例では、リンクがクリックされた際にメニューを生成し、そのリンクの後に挿入する。リンクの onclick イベントは新しいメニューのための id をパラメータとして渡す ShowHide スクリプトを呼び出すために使用される。

<button aria-expanded="false" type="button" onclick="ShowHide('foo',this)">
  Toggle
</button>

ShowHide スクリプトは新しいメニューを含む div を生成し、リンクを挿入する。最終行がスクリプトの核心となる。スクリプトのトリガーとなる要素の親を探し、新しい子として生成された div をそれに追加する。これにより、新しい div は DOM 内でメニューの次になる。利用者が Tab キーを押したときには、フォーカスがメニュー内で最初のフォーカス可能な項目となる生成されたリンクに移動する。

function ShowHide(id,src){
  var el = document.getElementById(id);
  if (!el){
    el = document.createElement("div");
    el.id = id;
    var link = document.createElement("a");
    link.href = "/laptops";
    link.appendChild(document.createTextNode("Laptops"));
    el.appendChild(link);
    src.parentElement.appendChild(el);
    src.setAttribute("aria-controls", id);
    src.setAttribute("aria-expanded", "true");
   }
   else if (el && src.getAttribute("aria-expanded") === "false"){
     el.style.display = 'block';
     src.setAttribute("aria-expanded", "true");
   }
   else{
     el.style.display = 'none';
     src.setAttribute("aria-expanded", "false");    
   }   
}

CSS は div およびリンクをメニューのように見せるために利用される。

検証

手順

  1. ポップアップではないダイアログのトリガーとなる全てのエリアを探す。
  2. そのダイアログがボタン又はリンクのクリックイベントによりトリガーされることをチェックする。
  3. スクリプトによって生成された DOM を調査できるツールを使って、ダイアログが DOM 内で次の位置にきていることをチェックする。

期待される結果

  • 2 及び 3 が真である。
Back to Top