web-dev-qa-db-ja.com

タブは、タブ間を移動する前に、タブコンテナーのコンテンツを移動する必要がありますか?

Webページで使用した場合のアクセシビリティと使いやすさの点で、タブ(情報をグループ化するために使用されるコンテナーなど)とタブの順序(ページ上の要素間を移動するためにタブキーを押すときに使用)について質問があります。

ブラウザーは通常、ページ上の要素を順番に処理するようにタブオーダーを設定します(各要素にtabIndexが提供されている場合を除く)。これにより、タブが移動するようにタブコンテナーが配置されると、動作に奇妙な点が生じますコンテンツのトップ。

タブコンテナの実装は、CMSパッケージで使用されるカスタムのものであり、使用している特定のソフトウェアでは、タブの順序付けは完全に直感的ではないと感じています。

Comic Sansがまったく含まれていない、粗雑に描かれた画像を見てみましょう。

tab container

次のように、タブを押すと、最初に各タブを通過してから、タブのコンテンツに移動すると思いますか。

tab ordering through the tabs first

これは、実際には、コンテンツの上部にタブが配置されている場合の現在の動作方法です。これはまったく正しいとは思わない。

または、次のように、次のタブのヘッダーに移動する前に、タブを押すとタブのコンテンツ全体が機能することを期待していますか?

tab ordering through the content first

使いやすさとアクセシビリティの両方の観点から、両方のタブオーダーのメリットは何ですか?一方が他方よりもうまく機能するシナリオ、またはこれらがどのように機能することになっているかについて一般的に合意された標準はありますか?

7
Flyk

Windowsには、タブ付きダイアログの特定の動作があります。

Tab タブのフィールド間を移動し、最後の項目の後にタブ名がフォーカスされます。使用する Tab タブ名にフォーカスがあると、再び最初のフィールドに戻ります。次のタブには移動しません。

次のタブに移動するには、 Tab フォーカスをタブ名に移動するには、矢印キーを使用します  タブを変更します。フォーカスが表示されているタブの名前に移動し、 Tab 次に、新しいタブの項目間を移動します。

これはかなり直感的です。少なくとも、慣れるのにそれほど時間はかかりません。どのWebアプリも同様に動作するはずです。

Webアプリが同様に動作しない場合は、 Tab タブ付きダイアログ全体をフィールドの単一のコレクションとして扱い、最初のタブのフィールドを循環して、2番目のタブに移動する必要があります。この動作は簡単に理解できます。 しかしこれには、以前に表示されていたタブで発生したフィールドを修正するのが簡単ではない、またはキーボードを使用してタブ5からタブ1に戻るのが必ずしも簡単ではないという大きな欠点がありますいくつかのキーストローク。

5
Andrew Leach

Webアクセシビリティの観点から(例がWebサイトであるかどうかは不明ですが)、タブを内部のコンテンツとは別のナビゲーションアイテムとして保持する必要があります。スクリーンリーダー(したがってキーボードユーザーである可能性が高い)は、アイテムにアクセスするために、ナビゲーションにジャンプするか、コンテンツにジャンプします。ナビゲーション(タブ)にジャンプした場合、タブを使用することになります。

ユーザーがナビゲーションオプションをタブで移動していて、1つのタブのコンテンツを表示したい場合は、そのように選択します。コンテンツを表示したくない場合は、次のアイテムに「タブ」で移動して、彼らが興味を持っているもの。彼らが彼らが望むコンテンツの部分にたどり着くために各タブのすべてのコンテンツを循環しなければならないなら(そして彼らは彼らが望むコンテンツかどうかさえ知りませんまだ存在しています彼らはページのタイトルに到達するまで、スクリーンリーダーによってタブのタイトルが読み上げられなかったため)、それは良いユーザーエクスペリエンスではありません。

また、コンテンツを読んだ後にナビゲーションに戻りたい場合、ナビゲーションは関連するスクリーンリーダーのショートカットキーを使用して検索する1つの項目にすぎません。タブがナビゲーションとして設定されていない場合、タブに戻るのが困難になります。

タブをナビゲーションとして保持し、コンテンツをコンテンツとして保持すると、ユーザーはナビゲーションを閲覧したり、コンテンツを読み取ることができます。

ただし、タブがJavaScriptベースの場合、これは少し複雑になります。これは全体を開きます ARIA-regionの問題 (スクリーンリーダーのユーザーに、ページのロード後にページの特定の領域が更新されたことを通知します)これは考慮する必要があります(ただし、少し専門的すぎます)ここに行くために-ARIAリージョンがここで説明するのに十分にうまく機能する方法を完全には理解していないという事実と相まって!)

1
JonW

ユーザーとして、ハイパーリンクをクリックするといつでもタブ2に移動することを示すものは何ですか?

コンテキストを理解しないと、意味のある答えを提供することは困難です。通常、タブはデータを統合するように設計されているため、コンテンツが多いページをユーザーが簡単にふるいにかけたり、プロセスを分割してユーザーフローを簡略化したりできます。

そうは言っても、ユーザーがハイパーリンクをクリックする必要のあるコンテンツを見つけるとすぐに、ハイパーリンクが次のエクスペリエンスに移動します。

お役に立てれば。

0
user42404

ハイパーリンク間を移動するためにタブ(または後方に移動するにはShift + Tab)を、タブを移動するためにCtrl + Tab(後方にはCtrl + Shift + Tab)を使用しないのはなぜですか?それは多かれ少なかれ標準であると思いました...

0
user3147515