web-dev-qa-db-ja.com

JavaScriptコントロールのキーボードナビゲーションのベストプラクティス

メニューなどのDHTMLウィジェットを作成するときの「ベストプラクティス」は、ユーザーがタブキーを使用してウィジェットに移動し、矢印キーを使用してウィジェット内を移動できるようにすることです。これは、コントロール間およびコントロール間を移動するときにOSが従来機能していた方法に従い、ユーザーがタブオーダーに沿ってコントロールを簡単にスキップできるようにします。 http://dev.aol.com/dhtml_style_guide/ などを参照してください。

ただし、多くの人が(DHTMLウィジェットをキーボードでアクセスできるようにするのが面倒な場合でも、このアドバイスを無視して、ユーザーがコントロール内の要素間でタブ移動できるようにします)。

私はexperiencedアクセシビリティの人々に現在のベストプラクティスは何かと尋ねています。ほとんどのキーボードユーザーは、DHTMLコントロールからこの動作を期待していますか?彼らがコントロール内の矢印キーでナビゲートできることを期待していない場合、これは役立つよりも多くの人々を混乱させることになるかもしれません...事前に感謝します

7
Aaron

タブオーダーを使用すると、あらゆる種類のフォームに入力する(退屈なことが多い)タスクが高速化されるため、経験豊富なユーザーにとって非常に役立ちます。政府機関への毎年の税務申告から、ユーザー名/パスワードの小さなサインインまで、すべてのフォームがあります。キーボードのみのコントロールを使用すると、ユーザーエクスペリエンスが向上し、ユーザーは努力のためにあなたを気に入るはずです(これは時間で測定すると非常に簡単です)。

tabindex html-attributeは、左から右(LTR読み取り国では逆。RTL読み取り国では逆に適用)と上から下へのすべての入力に従います。ラベルにtabindexを使用しないでください。ラベルが邪魔になり、ユーザーエクスペリエンスが低下します。これは一般的な問題ですが、気を付ければ簡単に修正できます。

正しいタブ順序を設定することは、小さいながらも退屈な開発タスクです。あなたはその仕事を完了するのに多くを得ることができません。一方、タブオーダーを適切に設定することを拒否した場合、多くを失うことになります。ユーザーは製品に不満を感じます。ユーザーエクスペリエンスはピークに達します。誰もが競合他社のソフトウェアの使用を開始します。

ユーザビリティの問題:タブ順

Microsoft および Adobe 次のタブ順序(tabindex)の使用を推奨します。

ASP.NET Webページでコントロールを使用するユーザーエクスペリエンスを強化するために、ユーザーがASP.NET Webサーバーコントロールをタブで移動できる順序を指定し、ページが最初にフォーカスされたときにページ上のどのコントロールにフォーカスを置くかを指定できます。開いた。 (Microsoft)


タブ順は、インタラクティブフォームや固定レイアウトのフォームで重要です。インタラクティブフォームの場合、タブの順序は、フォームに入力するときのエンドユーザーのエクスペリエンスに影響します。 (Adobe)

Microsftは Top Guidelines Violations もリストしています:

タブストップ内では、矢印キーの順序は、例外なく、左から右、上から下に流れる必要があります。矢印キーは、すべてのアイテムを停止せずに両方向に循環します。

TL; DR

したがって、作成しているすべてのWebアプリで例外なくタブオーダー(tabindex)を実装する必要がありますと言っても安全だと思います。

4
Benny Skogberg