解説書 達成基準 2.4.3:フォーカス順序 (レベル A)

要約

目標

キーボードの利用者が、適切な順序でコンテンツをナビゲートできる。

何をすればよいか

各要素が、意味を保った順序でフォーカスを受け取るようにする。

なぜそれが重要か

キーボードだけでサイト又はアプリケーションをナビゲートしても意味が通る。

意図

この達成基準の目的は、利用者がコンテンツ内を順を追ってナビゲートするときに、コンテンツの意味と一致し、キーボードから操作可能な順序で、情報に出会うことを保証することである。このことにより、利用者のコンテンツに対するメンタルモデルを一貫したものとし、利用者が困惑する可能性を引き下げる。コンテンツの論理的な関係性を反映した順序が複数存在することもある。例えば、テーブル内のコンポーネント群の中を 1 行ずつ、又は 1 列ずつ移動することは、どちらもコンテンツの論理的な関係を反映している。どちらの順序もこの達成基準を満たすことができる。

ウェブコンテンツでのナビゲーションの順番が決まる方法は、コンテンツで用いるウェブコンテンツ技術によって定義されている。例えば、シンプルな HTML は、タブ移動順序という概念によってナビゲーション順序を定義している。動的な HTML では、フォーカスを他の要素にも割り当てることができるように tabindex 属性を付加して、スクリプトを用いてナビゲーション順序を修正することができる。スクリプトも、tabindex 属性も使用していない場合、ナビゲーション順序は、コンポーネントがコンテンツの流れの中で表れる順序になる (HTML 4.01 仕様書の 17.11 "Giving focus to an element" を参照のこと)。

この達成基準で対処しているナビゲーション順序ではない、キーボードナビゲーションの一例は、ツリーコンポーネントを行き来するための矢印キーを用いたナビゲーションである。利用者は、上下の矢印キーを使って、ツリーのノードからノードへと移動することができる。右向き矢印キーを押下するとノードを展開して、それから下向き矢印キーを使用すると新しく展開されたノードへと移動していく。アイテムが展開されたり閉じられたりするたびに、ナビゲーション順序に追加されたり削除されたりするので、このナビゲーション順序は、ツリーコントロールで予期される順序に従っている。そして、アイテムが展開されたり閉じられたりするたびに、ナビゲーション順序に追加されたり削除されたりする。

利用者はウェブページを理解して操作できているが、フォーカス順序がプログラムによる解釈される音声読み上げ順序 (達成基準 1.3.2 を参照) とは一致しないかもしれない。コンテンツに対して考えられうる論理的な音声読み上げ順序が数通りあり、フォーカス順序はそのうちのどれかと合致するのかもしれない。しかし、特定の提示における順序が、プログラムによる解釈される音声読み上げ順序とは異なるとき、複数ある提示の一つを使う利用者は、そのウェブページを理解したり操作したりするのを難しいと感じるかもしれない。コンテンツ制作者は、ウェブページを設計する際に、すべての利用者のことを注意深く考慮すべきである。

例えば、晴眼のキーボードの利用者がウェブページの視覚的提示で情報をやりとりしている一方で、スクリーンリーダーの利用者は、プログラムによる解釈される音声読み上げ順序で情報をやりとりしている。フォーカス順序が双方の利用者にとって意味が通じるようにし、どちらかの利用者がランダムに飛び回るようなことのないように注意すべきである。

誤解のないように書くと:

• フォーカス可能な構成要素は、ナビゲーションの順序が意味と操作性に影響を及ぼす時のみ、意味と操作性を保つ順序でフォーカスを受ける必要がある。
• 必要な場合は、意味と操作性を保つ複数の順序があるかもしれない。
• 意味と操作性を保つ複数の順序がある場合、それらのうち一つが提供されればよい。

利点

これらの手法は、文書を順を追ってナビゲートし、フォーカス順序がシーケンシャルな読み上げ順序と一致することを期待するキーボードの利用者に役立つ。

• 論理的で、使いやすいフォーカス順序は、ページの操作をキーボード使用に依存している運動障害のある利用者の役に立つ。
• 字を読むのが困難な障害のある利用者は、Tab キーを押下してフォーカスが予期しないどこかへ移動してしまうと、迷子のようになってしまう恐れがある。彼らは論理的なフォーカス順序の恩恵を受けている。
• 視覚障害のある利用者は、Tab キーを押下してフォーカスが予期しないどこかへ移動してしまったり、インタラクティブな要素に囲まれているコンテンツを容易に見つけることができなかったりすると、迷子のようになってしまう恐れがある。
• 画面拡大ソフトを使用していて、拡大率を高くしている利用者には、ページのごく小さい一部分だけしか見えないことがある。そのような利用者は、フォーカス順序が論理的でないと、誤った文脈でコンテンツの一部分を解釈してしまう恐れがある。

事例

• インタラクティブなコントロールのツリーがあるウェブページ上で、利用者は上下の矢印キーを使って、ツリーのノードからノードへと移動することができる。右向き矢印キーを押下するとノードを展開して、それから下矢印キーを使用すると新しく展開されたノードへと移動していく。
• あるウェブページは、スクリプトでモードレスダイアログを実装している。起動ボタンを動作させると、ダイアログが開く。ダイアログ内にあるインタラクティブな要素が、起動ボタンのすぐ後のフォーカス順序の位置に挿入される。ダイアログが開いているときには、フォーカス順序は、その起動ボタンからダイアログ内の要素へ移動し、それから起動ボタンの後にあるインタラクティブな要素へと移動する。ダイアログが閉じているときは、フォーカス順序は起動ボタンからその次に続いている要素へ移動する。
  訳注

  モードレスダイアログとは、ダイアログボックスを閉じなくても作業が続行できるタイプのダイアログボックスのことである。モードレスダイアログ（モードレスウィンドウ）とは - IT 用語辞典も参照のこと。

• あるウェブページは、スクリプトでモーダルダイアログを実装している。起動ボタンを動作させると、ダイアログが開き、そのダイアログの中にフォーカスが当たる。ダイアログが開いている限り、フォーカスはダイアログ内の要素だけに限定される。ダイアログが閉じられると、フォーカスはボタン又はボタンの次にある要素へ戻る。
  訳注

  モーダルダイアログとは、ダイアログボックスの中だけで強制的に作業をさせるダイアログボックスで、それが閉じられない限り作業の続行ができないタイプのダイアログボックスのことである。モーダルダイアログ（モーダルウィンドウ）とは - IT 用語辞典も参照のこと。

• HTML で制作されたウェブページには、左側にナビゲーションがある。そのナビゲーションは、HTML ではメインコンテンツの後にあり、CSS を用いてページの左側に表示されるように指定されている。tabindex 属性又は JavaScript を用いずに、フォーカスがメインコンテンツへ移動できるようにするためである。

  注記

  この事例は達成基準を満たしているが、必ずしもすべての CSS による配置が当てはまるとはかぎらない。配置が複雑な例では、意味及び操作性を保持できることもあれば、できないこともある。

• 次の例は、この達成基準を満たさない:

  ある企業のウェブサイトに、マーケティングデータを収集するフォームがあり、利用者がその企業の発行するいくつかのニュースレターに登録できるようになっている。マーケティングデータを収集するためのフォームのセクションには、氏名、郵便番号、県、市町村、番地などのテキストフィールドがある。フォームのその他のセクションには、利用者が配信してほしいニュースレターを指定することができるようにいくつかのチェックボックスがある。しかし、そのフォームのタブ移動順序は、フォームにおける異なるセクションのフィールドを行ったり来たりする。そのため、フォーカスは、氏名のテキストフィールドからあるチェックボックスへ、次に番地のテキストフィールドへ、そしてまた別のチェックボックスへというふうに移動してしまう。

テクニック

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断するテクニック、又は複数のテクニックの組み合わせを表している。しかしながら、必ずしもこれらのテクニックを用いる必要はない。その他のテクニックについての詳細は、WCAG 達成基準のテクニックを理解するの「その他のテクニック」を参照のこと。