Caution

This document is an English translation of the “freee Accessibility Guidelines.” The normative version of this document is in Japanese, and the English version is informational. The English translation is incomplete, and any links with their link texts left in Japanese are untranslated. Please be aware that there may be inaccuracies in the translation or parts that are outdated.

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

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

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

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

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

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

上肢が不自由でマウスなどのポインティング・ディバイスの操作が難しいユーザーの中には、主にキーボードを使ってPCを操作している人がいます。また、このようなユーザーが利用する音声認識を用いた入力手段や、スイッチを用いたインターフェースの多くは、キーボードの挙動をエミュレートするようになっています。そのため、キーボードのみで操作できるようにすることで、このような支援技術を用いて入力している場合にも、問題なく操作できる可能性が向上します。

上肢が不自由なユーザーに加えて、スクリーン・リーダーのユーザーも基本的にはキーボードのみを用いた操作を行います。この場合の細かい挙動や操作方法は、スクリーン・リーダーを利用していない場合とは異なることもありますが、ポインティング・ディバイスを用いないという点は同じです。そのため、スクリーン・リーダー・ユーザーが利用できるようにするという点からも、キーボードのみで操作ができるようにすることは重要です。

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

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

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

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

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

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

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

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

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

なお、これらの確認は、必ずスクリーン・リーダーを利用しない状態で実施する必要があります。前述の通り、スクリーン・リーダーを利用している場合と利用していない場合では、細かい挙動や操作方法が異なる可能性があるためです。

参考：マウス・ポインターを消して操作する方法

以下の手順で、マウス・ポインターを非表示にすることができます。スクリーン・リーダーを使用していないとき、この状態で実行できない操作がある場合、ガイドラインを満たしていない状態です。

  1. 以下のコードをターゲットとするブックマーク（ブックマークレット）を作成。

    コードを表示
    javascript:(function(){var s=document.createElement('style');s.innerText="*{cursor:none !important;pointer-events:none !important}*:focus{cursor: none !important;pointer-events:none !important}";document.head.appendChild(s)})()
    マウス・ポインターを非表示にするブックマークレット

  2. チェック対象のページを表示した状態で、このブックマークレットを実行。

関連ガイドライン

フォーカスの移動順序

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

  • 画面レイアウト:

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

  • 想定される操作手順:

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

  • 文脈:

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

関連ガイドライン

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

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

  • ページ遷移

  • フォーム送信

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

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

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