はじめに
この記事を開いていただきありがとうございます！
WCAGは、障害のある人を含むすべてのユーザーがウェブを利用できるようにするためのガイドラインです。
WCAG 2.2では、「知覚可能」「操作可能」「理解可能」「堅牢」の4原則のもと、アクセシビリティを達成するための具体的な達成基準が定義されています。
今回の記事ではその中でも「第2章：操作可能（Operable）」にフォーカスします。
この章では、ユーザーがウェブサイトやアプリケーションを「操作できる」ようにするための要件が示されています。キーボード操作の対応、時間制限の配慮、フォーカスの可視化など、日々の実装に直結する項目が多数登場します。
目次
1. 第2章「操作可能（Operable）」とは
「操作可能」とは、ユーザーが支障なくウェブサイトを操作できる状態にすることを指します。たとえば、次のようなことが含まれます：
- キーボードで操作できる（マウスが使えない人のため）
- 時間制限があっても猶予や停止ができる
- ページ移動の導線が明確で迷わない
- 入力方法が多様（マウス・タッチ・音声）でも対応可能
これらは一見基本的なようですが、ユーザビリティとアクセシビリティを両立するうえで非常に重要です。
2. 各ガイドラインと達成基準の概要
2.1 ガイドライン2.1 キーボード操作可能
例： タブキーでボタンやリンクを順に移動でき、Enterキーで操作できる。
- 2.1.1 キーボード操作可能（A）：すべての機能がキーボードで使用可能であること。
- 2.1.2 キーボードトラップなし（A）：フォーカスがある要素に固定されて抜け出せなくなることを避ける。
2.2 ガイドライン2.2 十分な時間を提供
例： 自動ログアウトまでのカウントダウンに「延長」ボタンがある。
- 2.2.1 タイミング調整可能（A）：時間制限がある場合、ユーザーに調整手段を提供する。
2.3 ガイドライン2.3 発作の防止
例： 激しい点滅（例：赤と白の高速点滅）を避ける。
- 2.3.1 閃光のしきい値（A）：1秒間に3回以上の点滅は避ける。
2.4 ガイドライン2.4 ナビゲーション可能
例： 見出しが論理的な順番になっている。リンクに明確なラベルがある。
- 2.4.3 フォーカス順序（A）：フォーカスが論理的かつ直感的な順序で移動する。
- 2.4.4 リンクの目的（A）：リンクテキストだけで目的がわかるようにする。
2.5 ガイドライン2.5 入力モダリティ
例： スマホでタップ操作ができる。複雑なジェスチャーを不要に。
- 2.5.1 ポインタージェスチャー（A）：2本指や円を描くなどの複雑な操作ではなく、単一の操作でも代替可能にする。
2.6 ガイドライン2.6 ヘルプ（★新設）
例： ページの右下に常に表示されるチャットサポート。お問い合わせリンクが毎回同じ場所にある。
- 2.6.1 ヘルプの一貫性（A）：補助情報（ヘルプ、チャット、FAQなど）は一貫した場所に設置する。
3. 新しく追加された達成基準（WCAG 2.2）
3.1 2.4.11 フォーカスが見える（AAA）
- フォーカスされた要素（リンク・ボタンなど）がはっきり視認できるようにする。
- 例： 薄い青色枠だけでなく、太めのボーダーやアニメーションなどで強調表示。
3.2 2.4.13 フォーカスが表示され続ける（AA）
- フォーカスが操作中に一時的に見えなくならないようにする。
- 例： モーダルやポップアップの背後でフォーカスが消える問題に注意。
3.3 2.5.7 ドラッグ操作（AA）
- ドラッグ操作をキーボードやシングルクリックなどで代替可能にする。
- 例： ドラッグ＆ドロップ形式の並べ替えに上下ボタンで代替操作を提供。
3.4 2.5.8 ポインタのターゲットサイズ（AA）
- タップ・クリック対象は最低44×44 CSSピクセルに。
- 例： チェックボックスやリンクが小さすぎると誤タップにつながる。
3.5 2.6.1 ヘルプ利用の一貫性（A）
- 各ページでサポート方法が同じ位置・同じ方法で提供されていること。
- 例： ヘルプボタンが毎回右上に固定表示されている。
4. 最後に
今回はWCAG2.2の第２章についてまとめてきました。
第２章では、誰もが操作しやすいような直感的な操作についての基準が記載されており、より身近に感じることができました。
ここまで読んでいただきありがとうございました！