WCAG 2.2 ガイドライン「2.5.6 同時入力メカニズム」Level AAA について

はじめに

WCAG 2.2の「2.5.6 同時入力メカニズム」は、ウェブコンテンツがプラットフォームで利用可能なすべての入力方法（例: タッチ、キーボード、マウス）を制限しないことを求めています。この基準は、ユーザーが自分にとって最適な入力方法を自由に選択できるようにし、アクセスしやすい体験を提供することを目的としています。

---

1. 基準の概要

要件

ウェブコンテンツは、以下の条件に該当しない限り、利用可能な入力方法を制限してはなりません：

1. 制限が本質的に必要な場合
   （例: 署名のジェスチャーが要求される場合）。
2. セキュリティを確保するために必要な場合
   （例: 銀行アプリの生体認証）。
3. ユーザー設定を尊重するために必要な場合
   （例: システムのアクセシビリティ設定）。

---

2. 実装方法

a. 複数の入力方法をサポート

ウェブコンテンツは、マウス、キーボード、タッチ、音声入力など、プラットフォームで利用可能なすべての入力方法に対応する必要があります。

例: マウスとキーボードの両方に対応

HTML

<button id="submitButton">送信</button>

JavaScript

document.getElementById('submitButton').addEventListener('click', () => {
  console.log('ボタンがクリックされました');
});

document.getElementById('submitButton').addEventListener('keydown', (event) => {
  if (event.key === 'Enter' || event.key === ' ') {
    console.log('キーボードでボタンが操作されました');
  }
});

---

b. 高レベルのイベントハンドラーを使用

特定の入力方法に依存しない高レベルのイベントハンドラー（例: focus, blur, click）を使用します。

例: 入力方法に依存しないイベントハンドラー

JavaScript

document.getElementById('inputField').addEventListener('focus', () => {
  console.log('入力フィールドがフォーカスされました');
});

---

c. 入力方法を制限しないデザイン

特定の入力方法（例: タッチ操作のみ）に依存せず、どの入力方法でも同じ操作が可能なデザインを心がけます。

例: タッチとマウスの両方に対応

HTML

<div id="dragArea">ドラッグエリア</div>

JavaScript

document.getElementById('dragArea').addEventListener('mousedown', () => {
  console.log('マウス操作でドラッグ開始');
});

document.getElementById('dragArea').addEventListener('touchstart', () => {
  console.log('タッチ操作でドラッグ開始');
});

---

3. よくある失敗例とその改善策

a. 入力方法を1種類に限定

失敗例

• タッチスクリーンでの操作をタッチ入力のみに制限。

改善策

• タッチ入力に加えて、キーボードやマウスでの操作も可能にする。

---

b. 入力方法に依存したイベントハンドラーのみを使用

失敗例

• mousedownイベントにのみ依存している場合、キーボードやタッチ入力では操作できない。

改善策

• clickイベントなど、より汎用性の高いイベントハンドラーを使用。

---

4. アクセシビリティのメリット

a. すべてのユーザーが利用可能

• 入力方法の制限を取り除くことで、障害のあるユーザーやデバイスの違いに関係なく、誰でも利用可能になります。

b. プラットフォーム間の互換性向上

• 各種デバイス（例: デスクトップ、モバイル、音声コントロールデバイス）で一貫した操作体験を提供できます。

c. 誤操作の防止

• 特定の入力方法に依存しない設計により、誤操作や利用制限を回避できます。

---

5. テスト方法

a. 手動テスト

1. キーボード、マウス、タッチ、音声入力などのさまざまな方法でコンテンツを操作可能か確認。
2. 入力方法を切り替えても動作が一貫しているか確認。

b. 自動テストツール

• AxeやWAVEを使用して、入力方法の制限がないことを検証。

---

まとめ

WCAG 2.2の「2.5.6 同時入力メカニズム」は、特定の入力方法に依存しない設計を採用し、すべての入力方法をサポートすることで、ユーザーが自分に最適な方法でコンテンツを操作できるようにすることを目的としています。

実装ポイント

1. 高レベルのイベントハンドラーを使用して、入力方法の汎用性を確保する。
2. 複数の入力方法をサポートし、ユーザーの選択肢を広げる。
3. 特定の入力方法に依存しないデザインを心がける。

これにより、すべてのユーザーにとって快適でアクセスしやすいウェブコンテンツを提供できます。

当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。