GTM-MML4VXJ
Skip to main content

7.2.4.3 フォーカス順序に関する達成基準

ウェブページが順番にナビゲートできて、そのナビゲーション順序が意味又は操作性に影響を及ぼす場合、フォーカス可能なコンポーネントは意味及び操作性を保持した順序でフォーカスを受け取らなければならない。

引用元: JIS X 8341-3:2010「高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第3部:ウェブコンテンツ」

解説

ウェブページ内でフォーカスを受け取ることのできるコンポーネント(リンクやフォーム・コントロールなど)は、ユーザーがキーボード操作でフォーカスを移動させている際には、コンテンツの意味や操作性に沿った順序でキーボードフォーカスを受け取らなければなりません。

本達成基準を満たす方法として、最もシンプルでより多くのユーザーにとって望ましいのは、「 7.1.3.2 意味のある順序に関する達成基準 」と同様に、見た目の並び順とキーボード操作時のフォーカス移動順序を一致させることです。画面を見てキーボードだけで操作しているユーザーは、見た目の並び順と異なる順序でフォーカスが移動していくと困惑してしまう可能性があります。

「7.1.3.2 意味のある順序に関する達成基準」と同じように、本達成基準を満たすためには、必ずしもコンテンツの見た目の並び順がキーボード操作時のフォーカス移動順序と一致している必要はありません。フォーカス移動順序が見た目の並び順と異なっていたとしても、それによってコンテンツの意味が変わってしまったり、操作性に問題が生じたりしない限りは、本達成基準を満たすことができます。

リンクやボタンの操作をトリガーとしてダイアログボックスを表示する場合、ダイアログボックスが開くとフォーカスはそのダイアログボックスへ移動し、フォーカスを受け取ることのできるリンクやフォーム・コントロールに順に移動するようにします。ユーザーが、[OK]、[キャンセル]または[閉じる]ボタンなどを押せば、ダイアログボックスが閉じられて、フォーカスが元のトリガーとなったリンクやボタンの位置に戻るようにします。

また、HTMLのウェブページでは、tabindex属性を用いて、キーボードフォーカスの移動順序を制御することも可能です。tabindex属性の値には、"0" から "32767" までの間の数値を用いることができます。ユーザーがキーボード操作でフォーカスを移動させていく際、tabindex属性値の小さいほうから順に移動していきます。そして、"0" よりも大きい tabindex属性値を持つ全ての要素がフォーカスを受け取った後で、tabindex属性がない要素とtabindex属性値が "0" の要素が、HTMLのソースコードに記述されている順序でフォーカスを受け取っていきます。tabindex属性を用いる際には、それによる移動順序が論理的で、コンテンツの意味と操作性が保持されていることを確認する必要があります。

事例と実装

良い例:操作性を保持したフォーカス順序

スクリーンショット:テキストフィールド、ラジオボタン、[検索]ボタンの順でフォーカス移動するサイト内検索

サイト内検索のキーワードを入力するテキストフィールド、検索を実行する[検索]ボタン、検索範囲を指定するラジオボタン(「サイト内を検索」と「ウェブを検索」)があり、見た目にはテキストフィールドの直後に[検索]ボタンがあり、それらの下にラジオボタンが並んでいる。しかし、キーボード操作時のフォーカス移動順序は、見た目の並び順と異なり、テキストフィールド、ラジオボタン、[検索]ボタンの順にしている。これは、ユーザーがキーワードを入力した後の操作性を考慮して、検索を実行する前に検索範囲を指定できるようにしているからである。

悪い例:操作性に問題のあるフォーカス順序

スクリーンショット:テキストフィールド、[検索]ボタン、ラジオボタンの順で読み上げられるサイト内検索

見た目の並び順と同様に、キーボード操作時にはテキストフィールド、[検索]ボタン、ラジオボタンの順でフォーカスが移動する。検索範囲を変更したい場合には、[検索]ボタンを一度通り過ぎてラジオボタンに移動した後、逆順で[検索]ボタンに戻らなければならないため、操作性に問題が生じる。また、音声読み上げの場合には、ユーザーが[検索]ボタンの後に検索範囲を指定できるラジオボタンがあることに気づかないかもしれない。

参考情報

関連する達成基準

等級A