Accessibility
Guidelines

2.4.3 適切なフォーカス順序にする

適合レベル

A

※各レベルについては適合レベルとはをご覧ください

概要

キー操作でフォーカス可能な要素は、適切な順序でフォーカスできるようにする。

フォーカスの順序が適切でないと、内容の理解や操作性に影響を受けるものがある。視覚的な順序だけではなく、スクリーンリーダーの読み上げ時やキー操作時にも、適切な順序で操作できるようにする。

たとえば、CSSやJavaScriptを用いてDOMの順序とは異なるレイアウトにしているコンテンツは特に注意が必要である。

テスト・チェック方法

実装時、コードレビュー時、QAテスト時に以下の項目を確認する。

  • コンテンツの表示順序と、フォーカスされる順序が一致している
  • 一致していない場合、それが意図的なものかを確認する

実装方法

Web

モーダルダイアログを起動すると、ダイアログにある最初のフォーカス可能な要素にフォーカスが当たるように実装されている。

<dialog>
  <p>サンプルです</p>
  <form method="dialog">
    <button autofocus type="button">OK</button>
  </form>
</dialog>

spindle-uiでは、Dialogコンポーネントを提供しており、autofocus属性と組み合わせて使用すると良い。

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

参考文献