SCR27：Document Object Modelを用いて、ページ上にある複数のセクションを並び替える

概要

SCR27は、ウェブページ上の複数のセクションをユーザが機器に依存せずに並び替えるためのスクリプトを用いる達成方法です。この方法は、特にドラッグ＆ドロップの操作が難しい場合や、マウス以外のデバイスを使用するユーザに対して有効です。達成方法の目的は、コンポーネントの再配置を支援するユーザブルかつアクセシブルなメカニズムを提供することです。

一般的な再配置の方法としては、コンポーネントに番号を付けて設定ページで並び替えを行う方法や、ドラッグ＆ドロップを利用して直接ページ上で再配置する方法があります。しかし、ドラッグ＆ドロップはマウス操作に依存するため、全てのユーザに対しては適切ではありません。

SCR27では、リンクリストを使ったメニューを提供し、コンポーネントを再配置するスクリプトのトリガーとして機器に依存しない onclick イベントを使用します。これにより、視覚的な再配置だけでなく、Document Object Model (DOM) においても正しい順序となるように配置され、スクリーンリーダーなどの支援技術でも適切に認識されます。

このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。

適用（対象）

こちらは、次の達成基準に関連する達成方法です。

• 2.4.3 フォーカス順序

実践的な方法

SCR27の実装において、再配置スクリプトの作成は重要なステップです。このスクリプトは、ユーザがコンポーネントの位置を変更する際にDOMを操作して正しい順序を維持します。以下に、再配置スクリプトの作成方法を詳しく説明します。

<div id="container">
  <div id="item1">Item 1</div>
  <div id="item2">Item 2</div>
  <div id="item3">Item 3</div>
</div>

<ul id="menu">
  <li><a href="#" onclick="move('item1', 'up')">Move Item 1 Up</a></li>
  <li><a href="#" onclick="move('item1', 'down')">Move Item 1 Down</a></li>
  <li><a href="#" onclick="move('item2', 'up')">Move Item 2 Up</a></li>
  <li><a href="#" onclick="move('item2', 'down')">Move Item 2 Down</a></li>
  <li><a href="#" onclick="move('item3', 'up')">Move Item 3 Up</a></li>
  <li><a href="#" onclick="move('item3', 'down')">Move Item 3 Down</a></li>
</ul>

<script>
  function move(id, direction) {
    const element = document.getElementById(id);
    if (!element) return;

    if (direction === 'up') {
      const previous = element.previousElementSibling;
      if (previous) {
        element.parentNode.insertBefore(element, previous);
      }
    } else if (direction === 'down') {
      const next = element.nextElementSibling;
      if (next) {
        element.parentNode.insertBefore(next, element);
      }
    }
  }
</script>

まとめ

SCR27は、Document Object Model (DOM) を用いて、ページ上にある複数のセクションを並び替える達成方法です。この方法は、ユーザがマウス操作に依存せずにコンポーネントの順序を変更できるようにするためのもので、リンクリストと機器に依存しない onclick イベントを使用します。これにより、視覚的にもDOM的にも正しい順序が保たれ、支援技術の利用者にもアクセシブルな体験を提供します。