Tab/Shift+Tabキーを用いたチェック

Tab/Shift+Tabキーを用いたチェックは、以下を確認するために行います。

  • キーボードのみによる操作が可能か

  • 自然な順序でフォーカスが移動するか

  • ユーザーの混乱を招くような挙動を発生させないか

キーボードのみによる操作

上肢が不自由でマウスなどのポインティング・ディバイスの操作が難しいユーザーの中には、主にキーボードを使ってPCを操作している人がいます。このようなユーザーに加えて、スクリーン・リーダーのユーザーも基本的にはキーボードのみを用いた操作を行います。

キーボードのみを用いた操作の場合、以下の点を満たしていることが必要です。

  • 操作を受け付けるあらゆるコンポーネント(リンク、ボタン、フォーム・フィールドなど)に、Tab/Shift+Tabキーで到達できる:

    キーボードのみで操作している場合、マウスを使用できる場合と異なり、画面上の任意の位置にフォーカスを移動させることができません。そのため、操作対象となり得るコンポーネントには、キーボードの操作のみで確実に移動できるようにする必要があります。

  • 操作を受け付けるコンポーネントは、キーボードからでも操作ができる:

    必ずしもマウスを使っているわけではないという前提ですから、操作を受け付けるコンポーネントについてはキーボードのみで操作できる必要があります。

    • マウス・クリックをトリガーとしたようなイベントは、Enterキーの押下もトリガーになるようにする

    • ホバーによってのみ表示される情報や実行できる機能がない

  • フォーカスされているコンポーネントを視覚的に判別できる:

    例えばあるボタンを押すとき、マウスを使用している場合にはマウス・ポインターを対象のホタンの上に移動してクリックすれば良いですが、キーボードのみを使用している場合、基本的にはTab/Shift+Tabキーでフォーカスを目的のボタンに移動させた上で、Enterキーやスペースキーを押下する必要があります。この際、どのコンポーネントがフォーカスされているのかが視覚的に分からないと、目的のボタンにフォーカスがあるかどうかの判断ができません。CSSでoutline: noneが指定されているなど、フォーカスされていることを示す表示(フォーカス・インジケーター)が消されているとこの問題が発生します。

関連ガイドライン

フォーカスの移動順序

前述のようにマウスを使用しない場合は、基本的にTab/Shift+Tabキーでフォーカスを移動させます。その際、フォーカスの移動順序について、以下の観点から自然なものになるようにする必要があります。

  • 画面レイアウト:

    多くの場合、左から右、上から下の順に移動するのが自然な順序ですが、これに逆行する順序であったり、画面上の離れた場所に移動するような箇所がある場合は、問題がある可能性があります。

  • 想定される操作手順:

    主に入力フォームにおいて、フォーカスの移動順序が、想定される情報の入力順序に応じたものになっていることを確認する必要があります。

  • 文脈:

    上記の画面レイアウトと操作手順の観点で自然な順序でフォーカスが移動するようになっていれば、ほとんどの場合問題ありませんが、コンテンツを読む場合の順序とフォーカスの移動順序も合致していることを確認する必要があります。

関連ガイドライン

ユーザーの混乱を招く挙動

Tab/Shift+Tabキーでフォーカスを移動した際に、ユーザーが予期しないような挙動が発生しないことを確認する必要があります。ガイドラインでは、フォーカスが移動したときに以下のような挙動のコンポーネントを作らないように求めています。

  • ページ遷移

  • フォーム送信

  • モーダル・ダイアログの表示

このような挙動は、ユーザーを混乱させるだけでなく、ユーザーが意図しない操作を実行してしまうことにもつながります。

フォーム操作で発生する動的な変化が及ぼす影響も併せて参照。

関連ガイドライン