WCAG 2.1 達成基準 2.1.1 「キーボード」の検品について
品質管理スタッフ 小稗アクセシビリティに関する検品について、今回はWCAG 2.1の2.1.1「キーボード」という項目を取り上げたいと思います。
該当の達成基準2.1.1項目についてはWeb Content Accessibility Guidelines (WCAG) 2.1（ウェブアクセシビリティ基盤委員会による日本語訳）のページで確認できます。
以下、達成基準の日本語訳です。
「コンテンツのすべての機能は、個々のキーストロークに特定のタイミングを要することなく、キーボードインタフェースを通じて操作可能である」
該当のWebコンテンツを閲覧するのにキーボードで必要な操作が完結できること、と言い換えることができるでしょう。マウスやタッチスクリーンなど、特定の入力デバイスに依存せずにコンテンツが閲覧できることがポイントになります。ただし、手書き入力など「その根本的な機能が利用者の動作による始点から終点まで続く一連の軌跡に依存して実現されている場合」はこの項目の適用対象から外れます。
検品の方法
キーボードのtabキーを押し、チェックするページ内の各要素にフォーカスが可能であるか、ページ上部から順にフォーカスを移動して確認していきます。リンクやinput要素などについて指示された原稿があり、その原稿との一致を合わせてチェックする場合は、リンクやinput要素であるべき箇所へフォーカスするか並行して目視でチェックしていきます。
ドロップダウン（select要素）についてはtabキーでフォーカスした後、キーボード操作のみで選択肢を表示したり、実際に選択できるかを確認します。PC画面ですとマウスで完結させやすい挙動と思われますが、忘れずに確認したい内容です。
またJavaScriptで実装されている機能も確認対象となります。以下は一例です。
- ドロップダウン内のリンク、「×」などで表現される閉じるボタン
- カルーセルでスライドする各要素、左右の矢印ボタン、インジケーター、再生ボタンと一時停止ボタン
- モーダル画面を表示するリンク、モーダル内の各要素、閉じるボタン
モーダル画面で閉じるボタンにキーボードフォーカスができない場合、実装によってはマウスがないと開いたモーダル画面を閉じることができなくなるという状況が考えられます。特定の操作（この場合はマウス）に依存している挙動になりますので、改善の必要ありと判断します。
WCAG 2.1 2.1.2「キーボードトラップなし」と同時に検品
2.1.1と似ているように見える項目ですが、キーボード操作が途中で止まってしまわないように配慮する内容です。達成基準の日本語訳は以下の通りです。
「キーボードインタフェースを用いてキーボードフォーカスをそのウェブページのあるコンポーネントに移動できる場合、キーボードインタフェースだけを用いてそのコンポーネントからフォーカスを外すことが可能である。さらに、修飾キーを伴わない矢印キー、Tab キー、又はフォーカスを外すその他の標準的な方法でフォーカスを外せない場合は、フォーカスを外す方法が利用者に通知される」
検品にあたっては、tabキーを押し続けてページを一巡できるか（ページ先頭からフォーカスして、ページ先頭まで再び戻ってくることができるか）を確認します。動きが止まってしまう（フォーカスを外すことができない要素がある）場合、また複数の要素でできたコンポーネント内で、意図せずフォーカス遷移がループして閉じ込められてしまう場合も問題のある実装と判断します。
キーボード（主にtabキー）を操作してフォーカスの状態を確認する点では2.1.1と同様ですので、同時に確認することで効率的に検品を進めることができます。