グリッドキーボードナビゲーションによる使いやすさ、アクセシビリティ、ARIAコンプライアンスの向上

(Last updated: April 13, 2023)

ユーザーの期待が進化するにつれて、最新の Web アプリケーションはますます複雑になっています。ほんの数例を挙げると、コンテンツの仮想化されたスクロール、編集可能なセルを含む複雑なデータ テーブル、さまざまなオーバーレイ コンポーネントなどのユーザー インターフェイス パターンを定義します。

マウスやタッチパッドを利用するユーザーにとっては、ページ要素を簡単に移動して操作できるため、これは問題ではありません。しかし、キーボードを使用している人にとっては、これはユーザー エクスペリエンスに劇的な影響を与える可能性があります。ほとんどの Web ページのコントロールと項目の数が大幅に増加しているため、最新の Web ページには数百のタブ位置が含まれている可能性があります。

そこで問題となるのは、AngularアプリのUXとウェブアクセシビリティを同時に改善するにはどうすればよいかということです。

ウェブサイトのアクセシビリティとは何ですか?

インターネットはすべての人のためのものであり、Web サイトのアクセシビリティが重要です。基本的に、ウェブアクセシビリティ(またはeアクセシビリティ)は、十分に確立されていれば、次のようなものに関係なく、あらゆるタイプの訪問者とあらゆるタイプのデバイスで任意のWebサイトを使用できるようにする慣行です。

• ユーザーの技術ノウハウまたは World Wide Web に関する以前の経験。
• 支援技術を使用する人々。
• 速度と帯域幅。
• マウスの使用/使用しない。

これは、可能な限り最善の方法で設計および開発されると、より多くのユーザーがそのコンテンツと機能に同じアクセスできるため、Webアプリ/Webサイトが達成すべき非常に重要な目標です。

Web サイトのアクセシビリティが重要なのはなぜですか?

Infragistics では、マウス、タッチパッド、キーボードのみのいずれを使用しているかに関係なく、最適なユーザー エクスペリエンスを確保したいと考えています。そのため、ページ内のキーボードナビゲーション用の新しいユーザーインターフェイスパターン(Ignite UI for Angularグリッド内のアクティブ要素ナビゲーションと呼ばれる)を作成しました。このパターンにより、igxGrid 用に設計されたインターフェイス内のタブ位置の数がわずか 5 つに減り、効率を高めるための新しいキーボード ショートカットが多数公開されます。

各タブ位置要素には単一のエントリ ポイントがあり、そこからユーザーは矢印キーを使用するだけで、対応するAngularグリッド要素コンテナ内のさまざまな項目に簡単に移動できます。したがって、ナビゲーションが簡素化され、Web サイトの使いやすさが向上します。

当社のIgnite UIツールボックスの最大の差別化要因の1つは、市場の他のグリッドとは異なり、エンドユーザーとそのエクスペリエンスをすべての最前線に置いていることです。そのため、すべての主要テクノロジーにわたってコンポーネントと機能の同等性を確保しています。つまり、Angular Gridで行うことは何でも実行でき、Ignite UI for BlazorまたはWeb Componentsにも簡単に移行できます。違いはありません。したがって、ユーザーを気にするのであれば、Ignite UIが解決策です。

ARIAサポートとは何ですか?

つまり、ARIAはAccessible Rich Internet Applicationの略で、HTML 要素に追加 される一連の属性であり、​すべての ユーザーが利用できるWeb アプリとWeb コンテンツ​を作成します。したがって、ARIA サポートは、ARIA プロパティの少なくとも一部をサポートするためのテクノロジー、ブラウザー、スクリーンリーダー、およびツールキットの機能です​​​​。

ページタブシーケンスとAria

W3C の WAI-ARIA Authoring Practices 1.1 の「基本的なキーボード ナビゲーション規則」セクションで説明されているように、タブ シーケンスには、複合 UI コンポーネントのフォーカス可能な要素を 1 つだけ含める必要があります。このようなComposite UIComponentsが 5 つあるため、5 つのタブ位置があります。

• ツールバー/エリア別グループ(存在する場合)。
• ヘッダー行コンテナー – ヘッダー行の最初のセルがアクティブになります。
• Tbody – ボディコンテナの最初の igxCell (0,0) がアクティブになります。
• フッター – 列の概要の最初のセルがアクティブになります (概要が有効になっている場合)。
• ページ UI – ページごとのアイテムドロップダウンがアクティブになります。

Tab キーを押すと、現在のコンテナーからタブ シーケンスの次の要素にフォーカスが移動します。これは、タブシーケンス「グリッドツールバー」>「グリッドヘッダー」>「グリッド本文コンテナ」>「サマリー」>「フッター–グリッドページネーター」の下の画像で示されています。

5 つのタブ位置コンテナーのそれぞれを個別のグループ化エンティティと見なすことができ、ページ上のタブ位置の数を減らすことができます。グリッドには豊富な DOM 構造と多数の仮想化コンテナがあり、パフォーマンスが向上します。したがって、ページタブシーケンスには複数のフォーカス可能なグリッド要素部分があります。これにより、すべてのタブストップコンテナで個別の豊富なナビゲーションを行うことができます。

注: デフォルトのブラウザフォーカス可能なアクションは永続化されることに注意してください。ng-templates の HTML 要素部分や、グリッドに個別に追加された他の要素のフォーカスを妨げるものではありません。ブラウザはデフォルトでフォーカスアクションを処理します。追加のフォーカス可能な ディレクティブを適用する必要はありません。

Active Element Navigation

W3c の基本的なキーボード ナビゲーション規則を参照すると、すべての対話型 UI コンポーネントはキーボード経由でアクセスできる必要があります。これは、タブ シーケンスに含めるか、タブ シーケンス内のコンポーネントから到達可能にすることで実現するのが最適です。グリッドの場合のナビゲーションでは、ナビゲーションキー(矢印キー、ホーム/エンド、ctrl + 'アクションキー')を使用して、これらのフォーカス可能なコンテナのそれぞれを移動することができます。ここで、アクティブ要素ナビゲーションの概念が始まります

ここで、アクティブな要素は、フォーカスされたコンテナーから最初に表示される要素です。しかし、この要素は焦点が合わなくなります。焦点は実際のコンテナにとどまります。アクティブな要素を使用すると、ほとんどのグリッド要素をナビゲートし、フォーカスされた複合コンポーネントに基づいて機能をアクティブにすることができます。

フォーカスされた要素は、選択された要素やアクティブな要素とどう違うのですか?

​フォーカスされた要素はポインタと見なします – ナビゲーションのパス (ページタブシーケンス) を追跡します。すでにご存知のとおり、そのような複合要素が 5 つあります。Active 要素は、これらのフォーカス可能なコンテナー間を移動するために使用されます。下の画像でわかるように、灰色のセルの背景を持つ太いオレンジ色の境界線は、ビジュアル ユーザーにとって現在アクティブな要素を示しています。

選択された要素は、aria-selected="true"を持つ要素です。igxGridの場合、aria-selectedは、セル、行、列の選択(WAI-ARIA)の3種類の選択要素すべてに適用できます。

上記のセクションから得られる重要なポイント:

• フォーカスされた要素 – ページタブシーケンスのパスを追跡 – グリッドのツールバー、ヘッダー、本文、フッター、およびポケットベル。
• アクティブ要素 – 方向キー (およびホーム/終了などの特殊キー) を使用して、フォーカス可能な 5 つのコンテナ内を移動します。
• 選択された要素 –aria-selected="true"とグリッド選択スタイル(セル、行、または列の選択)が適用されています。

キーと動作のマッピングに関する具体的な推奨事項については、WAI-ARIA オーサリング プラクティス ガイド内のガイドラインに従います。したがって、ARIA グリッドが提供する役割は、グリッド、行、グリッドセル、行ヘッダー、列ヘッダーなど、Ignite UI for Angularグリッドでも認識できます。

Tab Navigation

グリッドはプライマリに従いますキーボード ナビゲーションの規則そのタブそしてShift + タブキーは、ある UI コンポーネントから別の UI コンポーネントにフォーカスを移動します。矢印キーは、複数の要素を含むコンポーネント内のアクティブな状態を変更します。

以前のタブ操作の動作と比較して、次の変更が行われました。

• ​Tabキーを使用してIgxGrid内のセル間を移動することはできません。ナビゲーションは矢印キーでのみ実行されるようになりました。
• ​Tabキーを使用すると、次の編集可能なセルにのみ移動できます (セルが編集モードのときのみ)。(行の)最後の編集可能なセルに到達すると、ナビゲーションは次の行の編集可能なセルに続行されます。最後の編集可能なセルに到達すると、タブナビゲーションは次のフォーカス可能なタブ位置要素に進みます。

私たちが行ったパフォーマンスの改善とコードの強化

新しいキーボードナビゲーションのコンセプトの結果、コードを最適化し、Ignite UI for Angularグリッドのパフォーマンス向上を実装することができました。それらには次のものが含まれます。

• セルフォーカスとぼかしハンドラを削除しました。
• ホイールとビューのデタッチハンドラーも削除されました。
• ナビゲーションサービスの削減。以前は、Grid、HierarchicalGrid、TreeGrid、MRL 機能用の 4 つのナビゲーション サービスがありました。今では3つしかありません。古い実装では、仮想化されたコンテンツでスクロールするときに、セルコンテキストを変更していました(実際のシェルは同じままでした)。しかし、ブラウザでは、すでに焦点が当てられている要素に焦点を合わせることができないという問題がありました。セルの焦点をぼかし、セルのコンテキストを変更して、再び焦点を合わせる必要がありました。今ではそれはもはや問題ではありません。
• タッチデバイスの機能強化。ここで、スクロールに焦点を合わせたセルがある場合は、ホイールハンドラをデタッチする前にセルをぼかします。
• 「イベントスタッキング」によるアプリケーションレベルのパフォーマンス向上。'ngZoneEventColescing: trueを使用します。

Const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule, { ngZoneEnetCoalescing: true }); 

Keyboard Navigation Features Integration

キーボードナビゲーション機能の統合に焦点を当てましょう。Angularグリッドには多くの機能があり、新しい変更で適切に動作するように、それらすべてを慎重に検討しました。

• Header navigation
  • これで、列ヘッダーと列グループのナビゲーションがスムーズになりました。キーの組み合わせで特定の機能を有効にする方法が説明されているこのヘッダー操作リストを確認してください。ライブデモ。
• Excel スタイルのフィルターと既定のフィルター行
  • Ctrl + Shift + Lは、Excelスタイルのフィルター/デフォルト(行)フィルターを開きます。
• 高度なフィルタリング
  • Alt + L opens the advanced filter dialog.
• Sorting
  • Ctrl + 上矢印キーは、アクティブな列ヘッダーを ASC 順に並べ替えます。列がすでに ASC でソートされている場合は、ソートが削除されます (トライステートなし)。
  • Ctrl + 下矢印キーを押すと、アクティブな列ヘッダーが DSC 順に並べ替えられます。列がすでに DSC でソートされている場合は、ソートが削除されます (トライ ステートなし)。
• グループ化
  • Shift + Alt + 右矢印を押して、アクティブな列でグループ化します。
  • Shift + Alt + 左矢印アクティブな列のグループ化を解除します (条件によるグループ化から削除します)。
• Multi-column headers 
  • Alt + left/up arrow key – collapse.
  • Alt + right/down arrow key – expand.
• Column Selection
  • Space key press – select a column.

注: スクリーンリーダーを使用している場合は、最初のヘッダークリック時にヘッダーコンテナ全体にフォーカスが当てられ、スクリーンリーダーがすべてのヘッダーキャプションを読み上げることに注意してください。ヘッダーをクリックすると、ヘッダーのキャプション + 選択状態が読み上げられます。例 –会社名、列ヘッダーが選択されています。

• セル編集–タブナビゲーションは、編集可能なセルに対してのみ機能するようになりました (編集モード)。タブナビゲーションを使用したセル編集では、グリッドの最後に達すると、最後のセルが送信されます。その後、ナビゲーションは次に使用可能なタブ位置要素に進みます。
• フィルタリング (チップのフィルタリング)– チップのタブ ナビゲーションが削除されるため、方向キーを使用してのみナビゲーションできます。また：
  • チップは列ヘッダーの一部になりました。
  • チップはもはやフォーカス可能な要素ではありません。

• ページング– Web サイトのアクセシビリティが向上します。ツールチップ、aria-labels、およびロールを追加しました。
• Default Key combination updates:
  • Ctrl + その他のキーは、グループ化された行領域ではなく、実際のセルでのみ機能します。これは、以前の動作とは異なります。GroupBy と Master-Detail は、Ctrl+ 方向キーでは機能しません。
  • Ctrl + 右/左矢印キーは、共通セル、集計行、ヘッダーでのみ機能します。
  • ホームとエンド(およびCtrl Home/End)は期待どおりに機能します。ここには変更はありません。
  • タブ位置/ヘッダー要素/本文セル/概要/ページング/グループ化/マスター詳細/MRL/セル編集のより豊富なビジュアルスタイルが提供されるようになりました。

結論として...

私たちは、継続的なイノベーションの必要性と、優れた機能は真のコラボレーションの結果であることを理解しています。開発者の共同の努力のおかげで、 Ignite UI for Angular Grid を使用する際の​キーボード ナビゲーションの複雑さを大幅に軽減することができました(ただし、主要なテクノロジーの他のすべてのグリッドでも、コンポーネントの ​同等性を念頭に置いて)。全体的なキーボード操作が改善され、直感的に使用できるようになり、Web サイトの使いやすさが向上し、Web サイト​を確保しながら Web サイトの使いやすさが向上しましたアクセシビリティ。