ウィンドウスプリッター

ウィンドウスプリッターとは？

ウィンドウスプリッターは、2つの領域（ペイン）の境界にあるつまみ（ハンドル）で、それぞれの大きさを調整できる UI です。 ファイラーの「フォルダ一覧｜中身」、エディタの「サイドバー｜本文」、 メールアプリの「一覧｜本文」などでよく見かけます。

マウスならドラッグで直感的に動かせますが、問題はマウスを使わない人です。 キーボードやスクリーンリーダーの利用者にも「ここは大きさを変えられる境界で、 いまどのくらいの割合か」を伝える必要があります。

なぜアクセシビリティが大事なの？

ドラッグ前提で作ると、次の人たちが取り残されます。

• キーボードだけで操作する人。仕切りが <div> だとTab でフォーカスできず、そもそもリサイズできません。
• スクリーンリーダーを使う人。ただの <div> は 「区切り（セパレーター）」とも、「いま 30%」とも認識されず、操作対象だと気づけません。

解決策は、ハンドルを role="separator" ＋ tabindex="0" にして、aria-valuenow / valuemin / valuemax で現在値を伝え、 矢印キーでリサイズできるようにすることです。

ライブデモ（推奨実装）

下の仕切りは APG に沿った実装です。マウスを使わず、境界のハンドルにフォーカスして矢印キーで動かしてみてください。

キーボード操作

必要な WAI-ARIA / ロール

実装：推奨パターン（Good）

マークアップ:

<div class="splitter">
  <!-- 左ペイン（リサイズ対象） -->
  <div id="primary-pane" class="pane">
    ナビゲーション
  </div>

  <!-- 境界ハンドル：これがウィンドウスプリッター -->
  <div role="separator"
       tabindex="0"
       aria-orientation="vertical"
       aria-label="ナビゲーションの幅"
       aria-controls="primary-pane"
       aria-valuenow="30"
       aria-valuemin="10"
       aria-valuemax="80"></div>

  <!-- 右ペイン（残りを埋める） -->
  <div class="pane">
    メインコンテンツ
  </div>
</div>

リサイズのスクリプト（aria-valuenow と幅の同期がすべて）:

const splitter = document.querySelector('.splitter');
const handle = splitter?.querySelector('[role="separator"]');
const primary = document.getElementById('primary-pane');

if (splitter instanceof HTMLElement && handle instanceof HTMLElement && primary) {
  const MIN = Number(handle.getAttribute('aria-valuemin')); // 10
  const MAX = Number(handle.getAttribute('aria-valuemax')); // 80
  const STEP = 5;
  let prev = Number(handle.getAttribute('aria-valuenow')); // 折りたたみ前の値を覚える

  // aria-valuenow（％）と実際の見た目を同期させるのが肝
  const apply = (value) => {
    const v = Math.min(MAX, Math.max(MIN, Math.round(value)));
    handle.setAttribute('aria-valuenow', String(v));
    primary.style.flexBasis = v + '%';
  };

  handle.addEventListener('keydown', (e) => {
    const now = Number(handle.getAttribute('aria-valuenow'));
    switch (e.key) {
      case 'ArrowLeft':  apply(now - STEP); break;   // 左ペインを狭く
      case 'ArrowRight': apply(now + STEP); break;   // 左ペインを広く
      case 'Home':       apply(MIN); break;          // 最小
      case 'End':        apply(MAX); break;          // 最大
      case 'Enter':                                  // 折りたたみ ⇄ 復帰
        if (now > MIN) { prev = now; apply(MIN); }
        else { apply(prev > MIN ? prev : MAX); }
        break;
      default: return; // 関係ないキーは素通り
    }
    e.preventDefault();
  });
}

アンチパターン（Bad）

下は <div> の仕切りに mousedown でドラッグだけ付けた「見た目だけ同じ」スプリッターです。マウスでは動きますが、キーボードでは一切操作できません。上のデモと同じように Tab → ← → を試して、違いを体感してください。

<!-- ❌ アンチパターン：ドラッグ専用の div 仕切り -->
<div class="splitter">
  <div id="left" class="pane">ナビゲーション</div>

  <!-- role も tabindex も aria-value* も無い。ただの div -->
  <div class="divider" onmousedown="startDrag()"></div>

  <div class="pane">メインコンテンツ</div>
</div>

<script>
  // マウスのドラッグでしか動かない（キーボードは完全に無視）
  function startDrag() {
    document.onmousemove = (e) => {
      document.getElementById('left').style.flexBasis = e.clientX + 'px';
    };
    document.onmouseup = () => (document.onmousemove = null);
  }
</script>

実装チェックリスト

• ハンドルに role="separator" が付いている
• ハンドルが tabindex="0" でフォーカスできる
• aria-label / aria-labelledby で名前が付いている
• aria-valuenow が操作と常に一致し、見た目の幅と同期している
• aria-valuemin / aria-valuemax があり、値が範囲内にクランプされる
• aria-controls で操作対象のペインを指している
• 矢印キーでリサイズ、Home/End で最小・最大にできる
• （任意）Enter で折りたたみ／元のサイズに復帰できる
• キーボードだけで操作でき、フォーカスが見える（フォーカスリングを消していない）

原文（英語）:Window Splitter Pattern — W3C APG（新しいタブで開きます）