サイトアイコン IT & ライフハックブログ｜学びと実践のためのアイデア集

WCAG 2.2「2.5.1 ポインター操作のジェスチャー」Level Aとは？要件、実装例、テスト方法

greeden
close up photo of gaming mouse

Photo by John Petalcurin on Pexels.com

WCAG 2.2の達成基準「2.5.1 ポインター操作のジェスチャー」（Level A）は、複数の指や指の軌跡に依存する操作を、それらが本質的に必要な場合を除き、単純なタップやクリックでも実行できるようにする基準です。

たとえば、カルーセルをスワイプでしか切り替えられないなら、「前へ」「次へ」ボタンを用意します。

この代替手段により、細かな指の動きが難しい利用者や、マウスなど別の入力機器を使う利用者も同じ機能を選びやすくなります。

達成基準が対象とする操作

WCAG 2.2の達成基準2.5.1が対象とするのは、ウェブコンテンツ側が解釈するマルチポイントジェスチャーとパスベースジェスチャーです。

「サイト内のすべての機能を単一ポインターだけで操作できなければならない」という意味ではありません。

複数点や軌跡を使うように実装した機能に、軌跡を必要としない単一ポインターの操作方法も用意することが要件です。

ブラウザの履歴移動や画面のスクロールなど、ブラウザや支援技術そのものを操作するジェスチャーは、この達成基準の対象ではありません。

代替操作を設計する考え方

代替操作は、元のジェスチャーと同じ結果へ到達できるように設計します。

ジェスチャーを削除する必要はなく、使いやすい場合は残したまま、タップやクリックで選べるコントロールを併設できます。

ジェスチャーに依存する例 追加する単一ポインター操作 確認する結果
カルーセルを左右にスワイプする 「前へ」「次へ」ボタン 同じ順序で前後の項目へ移動できる
サイト内の画像ビューアーでピンチして拡大または縮小する 「拡大」「縮小」ボタン 同じ表示倍率の変更を実行できる
画面上に円などの形を描く 機能名を示した実行ボタン 描画ジェスチャーと同じ処理を実行できる
スライダーを一定方向へ動かす トラックのクリック、増減ボタン 値を指定または段階的に変更できる

例外になるのは、複数点や軌跡そのものが機能に欠かせない場合です。

実装が難しいという理由だけで例外にせず、そのジェスチャーを置き換えると機能の目的が成立しなくなるかを確認します。

カルーセルに前後ボタンを追加する

スワイプに対応したカルーセルには、同じ移動処理を呼び出す前後ボタンを併設します。

<div class='carousel-controls'>
  <button type='button' id='previous'>前へ</button>
  <button type='button' id='next'>次へ</button>
</div>
<div id='carousel'>
  <!-- カルーセルの項目 -->
</div>
const previousButton = document.getElementById('previous');
const nextButton = document.getElementById('next');

previousButton.addEventListener('click', () => moveCarousel('previous'));
nextButton.addEventListener('click', () => moveCarousel('next'));

function moveCarousel(direction) {
  // スワイプ操作とボタン操作から共通して呼び出す移動処理
}

ボタンとスワイプで別々の状態を管理すると、操作方法によって表示結果がずれるおそれがあります。

同じ移動処理を呼び出す構成なら、どちらの操作でも同じ項目へ移動できます。

スライダーに増減ボタンを追加する

スライダーのつまみを動かす操作に加え、値を一段階ずつ変えるボタンを用意すると、軌跡を描かずに値を調整できます。

「−」「＋」だけでは目的を読み取りにくいため、ボタンの表示名には操作結果が分かる言葉を使います。

<div>
  <button type='button' id='decrease'>値を下げる</button>
  <input type='range' id='slider' min='0' max='100' step='1' value='50'>
  <button type='button' id='increase'>値を上げる</button>
</div>
const slider = document.getElementById('slider');
const decreaseButton = document.getElementById('decrease');
const increaseButton = document.getElementById('increase');

function changeSliderValue(amount) {
  const minimum = Number(slider.min);
  const maximum = Number(slider.max);
  const current = Number(slider.value);
  slider.value = String(Math.min(maximum, Math.max(minimum, current + amount)));
  slider.dispatchEvent(new Event('input', { bubbles: true }));
}

decreaseButton.addEventListener('click', () => changeSliderValue(-Number(slider.step)));
increaseButton.addEventListener('click', () => changeSliderValue(Number(slider.step)));

この例では文字列として取得される属性値を数値へ変換し、最小値と最大値の範囲内で更新しています。

よくある失敗と修正方法

スワイプでしか項目を切り替えられない

スワイプだけを受け付けるカルーセルでは、軌跡を正確に入力できない利用者が前後の項目を表示できません。

カルーセルの近くに前後ボタンを置き、タップまたはクリックで同じ移動を実行できるようにします。

サイト内の画像拡大がピンチ操作に限られる

サイト内の画像ビューアーが2本指のピンチだけに依存すると、単一ポインターでは倍率を変更できません。

「拡大」「縮小」ボタンを追加し、現在の倍率に応じて同じ変更を行えるようにします。

キーボード対応だけで代替したことにする

キーボードで操作できることは有益ですが、達成基準2.5.1はポインターを使う利用者のための単純なタップまたはクリックも求めています。

キーボード対応は「2.1.1 キーボード操作」の実装とテストとして確認し、ポインターの代替操作とは分けて評価します。

手動テストの手順

  1. タッチ操作やマウス操作を受け付ける画面を洗い出します。
  2. 複数の指を使う操作と、移動の軌跡や方向で結果が決まる操作を特定します。
  3. 各機能を1本指のタップまたはマウスクリックだけで実行します。
  4. 元のジェスチャーと同じ結果へ到達できるか確認します。
  5. 代替コントロールの表示名から、操作結果を理解できるか確認します。
  6. 本質的なジェスチャーとして例外にした機能があれば、その理由を記録します。

この達成基準は、実際の操作と結果の対応を確認する必要があるため、自動検査だけで適合を判断することはできません。

自動検査は関連するマークアップ上の問題を探す補助として使い、ジェスチャーと代替操作の確認は手動で行います。

サイト全体の確認手順は、ウェブアクセシビリティチェックの進め方でも解説しています。

スクリーンリーダー確認との関係

スクリーンリーダーで代替コントロールを操作し、名前や状態、実行結果を確認することは、画面全体のアクセシビリティ検証に役立ちます。

ただし、スクリーンリーダーで動作することだけでは、単一ポインターで操作できるという達成基準2.5.1の確認にはなりません。

タップとクリックによる手動テストを行ったうえで、キーボードやスクリーンリーダーでも関連する問題がないかを別に確認します。

実装チェックリスト

達成基準2.5.1への対応では、便利なジェスチャーをなくすのではなく、それだけに依存しない操作経路を用意します。

当社では、ウェブアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。

アクセシビリティ改善を検討している方は、サービスの詳細をご覧ください。

モバイルバージョンを終了