スライダー

スライダーとは？

スライダーは、つまみを左右（または上下）に動かして、 ある範囲の中から1つの値を選ぶ UI です。音量・明るさ・再生位置などでよく使われます。

ポイントは、「いまの値」「動かせる範囲（最小・最大）」を、目で見えない人にも伝えること、 そしてマウスだけでなくキーボードでも操作できることです。

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

• キーボードだけで操作する人。つまみが <div> だとTab でフォーカスできず、矢印キーで値も変えられません。マウス前提の実装は「操作不能」になります。
• スクリーンリーダーを使う人。役割（スライダー）・現在値・範囲が伝わらないと、 「いま何%なのか」「あとどれだけ動かせるのか」が全く分かりません。

この両方を一番カンタンに満たすのが、ネイティブの<input type="range"> です。キーボード操作も読み上げも、ブラウザが用意してくれます。

ライブデモ（推奨実装）

下はネイティブの <input type="range"> です。マウスを使わず、フォーカスして矢印キーで動かしてみてください。

キーボード操作

必要な WAI-ARIA / ロール

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

マークアップ:

<label for="volume">音量</label>
<input
  type="range"
  id="volume"
  name="volume"
  min="0"
  max="100"
  step="1"
  value="40" />
<output for="volume" id="volume-out">40</output>

表示の同期（任意。読み上げは input 自身が担う）:

const input = document.getElementById('volume');
const out = document.getElementById('volume-out');

// 値が変わるたびに output へ反映（表示用。読み上げは input が担う）
input.addEventListener('input', () => {
  out.textContent = input.value;
});

デザイン上どうしてもネイティブが使えないときだけ、role="slider" で自作します。 その場合は値と範囲、キーボード操作をすべて自前で用意します。

<!-- ネイティブが使えない見た目要件のときだけ自作する -->
<span id="bright-label">明るさ</span>
<div
  role="slider"
  tabindex="0"
  aria-labelledby="bright-label"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="40"
  aria-valuetext="40%"
  class="slider"
  id="bright-slider">
  <span class="slider-thumb"></span>
</div>

const slider = document.getElementById('bright-slider');
const MIN = 0, MAX = 100, STEP = 1, BIG = 10;

function setValue(next) {
  const v = Math.min(MAX, Math.max(MIN, next));
  slider.setAttribute('aria-valuenow', String(v));
  slider.setAttribute('aria-valuetext', v + '%'); // 人にわかる単位を補う
  slider.style.setProperty('--pos', ((v - MIN) / (MAX - MIN)) * 100 + '%');
}

slider.addEventListener('keydown', (e) => {
  const now = Number(slider.getAttribute('aria-valuenow'));
  let next = now;
  switch (e.key) {
    case 'ArrowRight': case 'ArrowUp':   next = now + STEP; break;
    case 'ArrowLeft':  case 'ArrowDown': next = now - STEP; break;
    case 'PageUp':   next = now + BIG; break;
    case 'PageDown': next = now - BIG; break;
    case 'Home': next = MIN; break;
    case 'End':  next = MAX; break;
    default: return; // 関係ないキーは素通り
  }
  e.preventDefault();
  setValue(next);
});

アンチパターン（Bad）

下は <div> をマウスでドラッグするだけのスライダーです。マウスでは動きますが、キーボードでは一切操作できず、値も読み上げられません。

<!-- ❌ アンチパターン：div をドラッグするだけ -->
<div class="track" onmousedown="startDrag(event)">
  <div class="knob" id="knob"></div>
</div>
<!--
  role も tabindex もないのでフォーカスできず、
  キーボードでは一切動かせない。
  aria-valuenow も無いので、いまの値が読み上げられない。
-->

実装チェックリスト

• まず <input type="range"> を検討した（最優先）
• つまみに名前がある（<label for> または aria-label(ledby)）
• キーボードでフォーカスでき、← → で値を変えられる
• Home / End で最小・最大へ動く
• 自作時は role="slider" + aria-valuemin/max/now がある
• 値を動かすたびに aria-valuenow を更新している
• 数値だけで意味が伝わらないときは aria-valuetext を添える
• フォーカスが見える（フォーカスリングを消していない）

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