アクセシビリティの遵守 (igTreeGrid)
igTreeGrid アクセシビリティの遵守
すべての Ignite UI for jQuery™ コントロールおよびコンポーネントは、1973 年リハビリテーション法第 508 条第 1194 部 22 条を遵守しています。表 1 には、コントロールに関連する第 1194 部 22 条の特定の規則が記載されています。また、グリッド コントロールが各規則を遵守するための詳しい方法も含んでいます。
各アクセシビリティ規則の要件を満たすために、場合によっては、コントロールを操作して特定のプロパティを設定する必要がありますが、それ以外の場合は、コントロール自身がこの作業を行います。
注: jQuery コントロールはクライアント専用のため、一部の規則はサポートされておらず、制限として扱います。
表 1: 第 508 条遵守の説明
| 規則 |
規則を遵守する方法 |
| (a) |
あらゆる非テキスト要素に対してテキスト相当物を提供するものとします（つまり、「alt」、「longdesc」を介して、または要素コンテンツで)。 |
| (b) |
マルチメディア プレゼンテーションに相当する代替物をプレゼンテーションと同期するものとします。 |
| (d) |
コントロールのマークアップは、クライアント側コントロールであり CSS のルールに依存するため関連づけられるスタイル シートなしでは読み取ることはできません。 |
| (g) |
行と列のヘッダーはデータ テーブルで識別しなければなりません。 |
| (h) |
マークアップは、行または列のヘッダーの 2 つ以上の論理レベルを有するデータ テーブル用にデータ セルとヘッダー セルを関連づけるために使用します。 |
| (n) |
igTreeGrid コントロールは、ページのタブ列に加えられ、マウス クリックなどによってフォーカスを獲得します。キーボードでナビゲートできるように、選択が有効になっている必要があります。
- 左矢印 -- セルを選択するとき、このコマンドは前のセルを選択された状態にします。
- 右矢印 -- セルを選択するとき、このコマンドは次のセルを選択された状態にします。
- 上矢印 -- 前の行にある行/セルを選択された状態にします。
- 下矢印 -- 次の行にある行/セルを選択された状態にします。
- SHIFT+上 (または下) 矢印 -- 複数セクションの上 (または下) の行/列を含みます。
- CTRL+ 上 (または下) 矢印: 現在アクティブな行/列を変更します。
- SHIFT+ENTER -- 現在選択されている行/セルを選択解除します。
* 説明ラベルは igTreeGridUpdating 機能の一部なので、エディター入力要素には提供されません。グリッドの要素はサポートされないフォームのみの場合に便利です。 |
* - コントロールの制限
WAI-ARIA サポート
igTreeGrid は WAI-ARIA 仕様 を実装します。障害を持つユーザーに Web コンテンツおよび Web アプリケーションへのアクセシビリティを提供するデザインを定義したものです。
以下のリストは、igGrid から継承される ARIA 属性および igTreeGrid のみの ARIA 属性の詳細を提供します。
igGrid ウィジェットから継承される ARIA 属性:
- igGrid のすべての要素が igGrid の tabindex オプションからの相対値を持つ tabindex 属性を描画します。TAB および SHIFT+TAB キーの使用で要素へアクセスできます。
- 各ヘッダー要素は、列のヘッダー テキストに設定された aria-label 属性を使用します。title 属性がある場合、title 属性の値の代わりにヘッダー テキストが読み込まれます。
- すべての列ヘッダーは columnheader role を使用します。
- thead、tbody、および tfoot 要素は rowgroup role を使用します。
- 行は row role を使用します。
- 行セレクター要素は rowheader role を使用します。
- 表の本体の行内の表のセル要素は gridcell role を使用します。
- 表の本体の行内の表のセル要素は aria-describedby 属性を使用します。その属性の値は、表のセルに属する列に対応する columnheader 要素の id に設定されます。
- 表の本体の行での表セル要素は、選択機能が有効な場合、aria-selected 属性を使用します。 構成で行が初期化で選択される場合以外、aria-selected のデフォルト値は false です。
- 選択機能が有効な場合、表は aria-multiselectable 属性を使用します。この属性の値は、選択機能の multipleSelection オプションの値に基づいて設定されます。
- チェックボックスは checkbox role および aria-checked 属性を使用します。また、チェックボックスは aria-title 属性を使用します。この属性の値は関連する列ヘッダーに対応します。
階層構造を定義する igTreeGrid に特有の追加の属性:
- igTreeGrid は treegrid ロールを使用します。
- 展開インジケーターはフォーカス可能で、Enter/Space キーを使用して現在の行を展開/縮小します。
- 行は aria-level 属性を持ちます。構造で行の階層レベルを定義します。
- 行は aria-expanded 属性を持ちます。行の現在の展開/縮小状態についての情報を保存します。
- 各行は id 属性を持ちます。親行は aria-owns 属性を持ちます。関連の子行 ID への参照を保存します。
