動画アクセシビリティ完全チェックリスト：字幕/操作/低刺激/フォールバック

// コンテナ
<div className="relative" role="group" aria-label="動画プレイヤー">
  <video ref={ref} aria-label="デモ動画" preload="metadata" playsInline />
  <div className="controls flex gap-2 p-2" aria-label="再生コントロール">
    <button onClick={togglePlay} aria-pressed={playing} aria-label={playing ? '一時停止' : '再生'}>
      {playing ? 'Pause' : 'Play'}
    </button>
    <button onClick={toggleMute} aria-pressed={muted} aria-label={muted ? 'ミュート解除' : 'ミュート'}>M</button>
    <button onClick={()=>seek(-5)} aria-label="5秒戻る">-5s</button>
    <button onClick={()=>seek(5)} aria-label="5秒進む">+5s</button>
    <button onClick={toggleCaptions} aria-pressed={captions} aria-label={captions ? '字幕オフ' : '字幕オン'}>CC</button>
    <button onClick={toggleFullscreen} aria-label="全画面">F</button>
  </div>
</div>

// キーボードショートカット
useEffect(()=>{
  const h=(e:KeyboardEvent)=>{
    if(!ref.current) return;
    switch(e.key){
      case ' ': case 'Enter': togglePlay(); e.preventDefault(); break;
      case 'ArrowLeft': seek(-5); break;
      case 'ArrowRight': seek(5); break;
      case 'ArrowUp': changeVolume(+0.05); break;
      case 'ArrowDown': changeVolume(-0.05); break;
      case 'm': case 'M': toggleMute(); break;
      case 'f': case 'F': toggleFullscreen(); break;
      case 'c': case 'C': toggleCaptions(); break;
      case '.': stepFrame(); break;
    }
  };
  window.addEventListener('keydown',h); return ()=>window.removeEventListener('keydown',h);
},[]);