フォーカス順序

解説

スクリーンリーダや画面拡大をしている利用者はタブキーによるフォーカスの移動を行うことが多くあります。タブキーによるフォーカスの移動は、素直なHTMLであれば、HTMLの記述順になりますが、tabindexを与えることで、変更もできてしまいます。tabindexを与える場合は、意味の把握を妨げるような順序設定にならないように注意するようにしてください。

また、モーダルダイアログを作る場合などは、注意を要します。モーダルダイアログはスクリーンリーダを使っていない利用者にとっては、モーダルダイアログを閉じるまで他の動作はできません(というか、そういうものを「モーダルダイアログ」と呼びます)。スクリーンリーダを使っている利用者にとっても、同じように振舞うべきであり、タブキーでフォーカス移動をしていると、モーダルを抜けられてしまう、というようなことがあってはならないのです。

原則 操作可能 ユーザインタフェース コンポーネント及びナビゲーションは操作可能でなければならない。
ガイドライン ナビゲーション可能 利用者がナビゲートしたり、コンテンツを探し出したり、現在位置を確認したりすることを手助けする手段を提供すること。
達成基準 フォーカス順序
(2.4.3 A)
ウェブページが順を追ってナビゲートできて、そのナビゲーション順が意味又は操作に影響を及ぼす場合、フォーカス可能なコンポーネントは、意味及び操作性を損なわない順序でフォーカスを受け取る。

達成方法集のURL