移行中の知識
フォーカスを隠さない
Focus Not Obscured
定義
フォーカスを隠さない（focus not obscured）とは、keyboard focusを受けたcomponentが、author-created contentによって完全に覆い隠されないようにすることです。WCAG 2.2 Success Criterion 2.4.11（Level AA）は、focused componentが完全に隠れないことを求めます。focus indicator自体の見た目やfocus順序とは別に、sticky header、cookie banner、drawerなどのoverlayとの空間関係を確認します。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
長いformやsettings page
sticky headerの下へfocusが入る
見るポイント
Tab移動やanchor jumpでcontrolへfocusした時、sticky headerの下へ完全に隠れないか確認する。必要ならscroll marginやlayoutを調整し、focus位置を可視領域へ保つ。
mobile-sizeのWeb UI
bottom sheetと背面control
見るポイント
open中のsheetやbannerがfocus対象を覆う場合、focusを適切な領域へ制御するか、focused elementが見えるようscroll・overlay構造を調整する。
注意
誤解しやすい点
- focus ringが十分目立つため、component本体がoverlayに隠れていても問題ないと考える。
- viewport外へscrollしただけの状態と、author-created overlayで隠される状態を区別しない。
- AAAのFocus Not Obscured (Enhanced)とAAのMinimum要件を混同する。
関連
関連する概念
出典