2.4.3 適切なフォーカス順序にする
詳細
キー操作でフォーカス可能な要素は、適切な順序でフォーカスできるようにする。
フォーカスの順序が適切でないと、内容の理解や操作性に影響を受けるものがある。視覚的な順序だけではなく、スクリーンリーダーの読み上げ時やキー操作時にも、適切な順序で操作できるようにする。
たとえば、CSSやJavaScriptを用いてDOMの順序とは異なるレイアウトにしているコンテンツは特に注意が必要である。
レビュー・テスト方法
実装時、コードレビュー時、QAテスト時に下記の項目を確認する。
- コンテンツの表示順序と、フォーカスされる順序が一致している
- 一致していない場合、それが意図的なものかを確認する
実装方法
Android
コンテンツの表示順序とフォーカスされる順序が一致しておらず、それが意図したものではない場合に以下の実装を使用することができる。
nextFocusForward属性
<Constraintlayout>
<Button
android:id="@+id/button"
android:nextFocusForward="@+id/editText"
... />
<ImageView
android:id="@+id/imageview"
android:nextFocusForward="@+id/button"
... />
<EditText
android:id="@id/editText1"
android:nextFocusForward="@+id/imageview"
... />
</Constraintlayout>
iOS
ユーザーが意図していないフォーカス順での実装をしている場合、
コンテンツの（VoiceOverによる）フォーカス順はaccessibilityElements配列で制御することが可能。
var views = stackView.arrangedSubviews
views.reversed()
stackView.accessibilityElements = views