WCAG 2.1 2.4.3「フォーカス順序」の検品について
品質管理スタッフ 小稗アクセシビリティに関する検品について、今回はWCAG 2.1の2.4.3「フォーカス順序」という項目を取り上げたいと思います。
該当の達成基準2.4.3項目についてはWeb Content Accessibility Guidelines (WCAG) 2.1（ウェブアクセシビリティ基盤委員会による日本語訳）のページで確認できます。
以下、達成基準の日本語訳です。
ウェブページが順を追ってナビゲートできて、そのナビゲーション順が意味又は操作に影響を及ぼす場合、フォーカス可能なコンポーネントは、意味及び操作性を損なわない順序でフォーカスを受け取る。
ページを読み進めていくのに沿ってフォーカスが自然な順序で移動しているか、と読み替えると理解しやすくなると思います。利用者がキーボードを使用してフォーカスを移動する際に困惑する可能性を減らすことが狙いです。
検品の方法、注意点
キーボードのtabキーを押してページ上部から順にフォーカスを移動し、ページ内の文脈に沿っているか、ページの大意をつかみながら目視で確認していきます。
また、ブラウザのCtrl+Uで表示したページのソースを開いて、tabindexの使用状況を確認することも有効です。tabindex属性を使用し、かつ属性の値が正の整数値の場合、フォーカス順序を意図的に変更している可能性があります。そもそも整数値の実装は推奨されていませんので、tabindex属性の使用を避けた実装が可能か検討することをおすすめします。詳細はMDNのページを参考にしてください。
また、JavaScriptで実装されている機能についても同様の視点でチェックが必要です。例えばモーダルウィンドウでは、以下の点に注意する必要があります。
- モーダルウィンドウ内をフォーカス移動する際に、フォーカスがモーダルウィンドウ内に留まること
- モーダルウィンドウを閉じた際に、モーダルウィンドウを開いたボタンの次の要素にフォーカスが移動すること
モーダルウィンドウを閉じたあと、例えばページのトップにフォーカスが移動してしまうとユーザーの操作を混乱させてしまう可能性があります。
WCAG 2.1 2.1.1「キーボード」、2.1.2「キーボードトラップなし」と同時に検品
先月投稿した記事でキーボード操作に関する項目を取り上げていますが、フォーカス順序はこの項目と並行してチェックすると効率よく作業が進みます。
改めて以下に列挙しますが、tabキーを操作してチェックするという点では共通していますので、まとめてチェックするのがおすすめです。
- キーボードで操作できない要素や機能がないこと（2.1.1）
- tabキーでフォーカス移動しページ内を一巡できること（2.1.2）
- フォーカスの順序がページの意味内容に沿っていること（2.4.3）
作業スピードや慣れなどで多少の個人差はあり得ると思いますが、個人的な手順としては、まずtabキーを押しっぱなしにしてページ内を一巡できるかを確認し（2.1.2）、そのあと意味を取りながらフォーカスを移動しつつ（2.4.3）、JavaScriptで制御されているボタンをキーボードで操作できるか（2.1.1）を確認しています。あらゆる場面でこの方法が最適というわけではありませんが、原則を定めておくとチェックしやすさを確保しながらチェックし忘れといったアクシデントの予防にもつながります。
なお、2.4.7「フォーカスの可視化」というレベルAAの達成基準があり、こちらも合わせて検品することが効率的なのですが、私が所属する品質管理部での検品では当社の標準対応＝レベルAを前提にしているためここでは割愛させていただきます。上記3項目の検品はフォーカスが見えていることを前提としています。