移行中の知識
フォーカス順序
Focus Order
定義
フォーカス順序（focus order）とは、keyboardなどでfocusable componentを順次移動する時の順序です。WCAG 2.2 Success Criterion 2.4.3（Level A）は、そのnavigation sequenceが意味や操作へ影響する場合、meaningとoperabilityを保つ順序でfocusを受けることを求めます。必ずvisual layoutと一字一句同じ順序にすることではなく、論理的な関係を壊さないことが中心です。responsive layoutで見た目の位置関係が変わっても、この論理的な順序を再確認します。Dialogのinitial focusやfocus containment、close後のfocus returnのようなpattern固有のfocus managementは、この一般的な順序要件と区別して確認します。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
desktopで2column、mobileで1columnになるform
responsive layoutの並べ替え
見るポイント
CSSでvisual orderだけを変更した結果、Tab移動が見た目と無関係に飛ばないか確認する。source order、visual order、task sequenceの関係を見て、meaningとoperationを保つ順序を選ぶ。
dialog interaction
modal内外のfocus sequenceを分けて確認する
見るポイント
dialog内でTab移動が論理的な順序になっているかをFocus Orderとして確認する。そのうえで、open時にどこへfocusを置くか、focusをdialog内へ保つか、close後にどこへ戻すかはmodal dialog固有のfocus managementとしてWAI-ARIA APG等のpattern guidanceへ分けて戻る。これらをWCAG 2.4.3だけから一括して導出しない。
注意
誤解しやすい点
- focus orderは必ず左上からvisual orderと完全一致しなければならないと一般化する。
- positive tabindexで見た目に合わせて順序を手作業し、DOMやdynamic content変更で破綻しやすい構造を作る。
- focus indicatorが見えていることだけを確認し、移動順がmeaningやoperationを壊していないかを見ない。
- responsive reflowでvisual orderだけ変え、keyboard sequenceとの関係を再確認しない。
- dialogのinitial focus、focus containment、focus return等をすべてWCAG 2.4.3 Focus Orderそのものの要件として扱う。
関連
関連する概念
出典