# アクセシビリティの拡張
## Content
## アプリ固有のアクセシビリティの追加
WijmoのFlexGridコントロールには、広範なアクセシビリティサポートが組み込まれていますが、それを拡張して、アプリケーションまたはユーザーベースに固有の追加サポートを提供したい場合があります。
アクセシビリティサポートの機能を拡張する方法を示すために、列が並べ替えられたとき、およびフィルターが適用されたときにユーザーに通知する方法について説明します。
```javascript
// アクセシビリティ機能を拡張します
var acX = new AccessibilityExtender(theGrid);
// 列がソートされたときにユーザーに通知します
theGrid.sortedColumn.addHandler(function(s, e) {
let col = s.columns[e.col];
acX.alert('column ' + col.header + ' sorted in ' + (col.currentSort == '+' ? 'ascending' : 'descending') + ' order');
});
// フィルターに接続します
var toSearch = null;
document.getElementById('filter').addEventListener('input', function(e) {
clearTimeout(toSearch);
toSearch = setTimeout(function () {
var search = e.target.value, rx = new RegExp(search, 'i');
theGrid.collectionView.filter = function (item) {
return !search || JSON.stringify(item).match(rx) != null;
};
// フィルターが適用されたことをユーザーに通知します
setTimeout(function () {
var msg = search ? 'grid filtered on ' + search : 'filter removed';
msg += ': ' + theGrid.rows.length + ' items displayed';
acX.alert(msg);
}, 200);
}, 900);
})
```
**AccessibilityExtender** オブジェクトを作成し、引数としてFlexGridを渡すことで、AccessibilityExtenderを作成し、FlexGridに関連付けます。 次に、このオブジェクトの **alert** メソッドを使用して、グリッドとの対話がフィルタリングか並べ替えかを問わず、ユーザーに通知できます。
## キーボード処理のハンドリング
FlexGridは、キーボード処理を含む多くの操作のモデルとしてMicrosoft Excelを使用します。 ただし、アクセシビリティに対応するために、キーボード処理ロジックにいくつかの変更を加えました。
1. **Ctrl+UP/DOWN**：Excelはこれらのキーを使用して、選択範囲をグリッドの最初と最後の行に移動しますが、ユーザー補助ツールではコントロール矢印が広く使用されています。 したがって、FlexGridは代わりに **Alt+PAGEUP/DOWN** を使用して、代わりに最初と最後の行に移動します。
2. **Tab**：Excelでは、 **Tab** キーを使用してセルを循環しますが、これは、フォーカスを次の要素に移動するというデフォルトのブラウザーの動作を妨げます。 FlexGridのデフォルトの動作は、ブラウザにフォーカスを処理させることですが、ユーザーがExcelのような動作に戻れるように、**keyActionTab** プロパティが追加されています。
3. **Enter**：ユーザーがEnterキーの動作をカスタマイズできるようにする **keyActionEnter** プロパティを追加しました。
FlexGridで使用される他のキーボードコマンドはARIAの推奨事項に従っており、Excelとほぼ互換性があります。
| キーボードの組み合わせ | 実行される操作 |
| ----------- | ------- |
| Shift + Space | 行を選択 |
| Ctrl + Space | 列を選択 |
| Space | 編集を開始するか、チェックボックスを切り替えます
現在のレベルグループを展開または折りたたみます |
| Ctrl + A | グリッドコンテンツ全体を選択します |
| Left/Right | 選択範囲の左/右にあるセルを選択します |
| Shift + Left/Right | - 選択範囲を拡張して、選択範囲の左/右にセルを含めます
- 列を左右に移動します（headersFocusability と allowDragging が設定され、列ヘッダーにフォーカスしている場合）
|
| Shift + Up/Down | - 選択範囲を拡張して、選択範囲の上/下のセルを含めます
- 行を上下に移動します（headersFocusability と allowDragging が設定され、行ヘッダーにフォーカスしている場合）
|
| Alt + Left/Right | 列幅を縮小/拡大します（allowResizing が必要です）
デフォルトの縮小/拡大幅は 2px です。FlexGrid.SHORTCUT\_KEY\_RESIZE\_GAP で調整できます。
deferResizing が有効になっている場合はプレビューモードに入ります。
Enter：プレビューを確定
Escape ：プレビューをキャンセル |
| Alt + Up/Down | - 現在のセルのリストボックスエディタをドロップダウンします
- 行の高さを縮小/拡大します（allowResizing が必要です）デフォルトの縮小/拡大幅は 2px です。FlexGrid.SHORTCUT\_KEY\_RESIZE\_GAP で調整できます。deferResizing が有効になっている場合はプレビューモードに入ります。 Enter：プレビューを確定 Escape ：プレビューをキャンセル
|
| PageUp/Down | 選択範囲の1ページ上/下のセルを選択します |
| Shift + PageUp/Down | 選択範囲を拡張して、選択範囲の1ページ上/下のセルを含めます |
| Alt + PageUp/Down | 選択範囲を最初/最後の行に移動します |
| Shift + Alt + PageUp/Down | 選択範囲を拡張して、最初/最後の行を含めます |
| Home/End | 選択範囲を最初/最後の列に移動します |
| Shift + Home/End | 選択範囲を拡張して、最初/最後の列を含めます |
| Ctrl + Home/End | 選択範囲を最初/最後の行と列に移動します |
| Shift + Ctrl + Home/End | 選択範囲を拡張して、最初/最後の行と列を含めます |
| Escape | 現在のセルまたは行の編集操作をキャンセルします |
| Tab | 選択範囲をページ上の次のフォーカス可能な要素に移動します（ **keyActionTab** プロパティを使用してオーバーライドできます） |
| Enter | 編集モードを終了し、選択範囲を現在のセルの下のセルに移動します（**keyActionEnter** プロパティを使用して上書きできます） |
| Delete, Backspace | 現在選択されている行を削除するか（ **allowDelete** プロパティがtrueに設定されている場合）、選択したセルのコンテンツをクリアします（値が不要な場合） |
| Ctrl + C or Ctrl + Insert | 選択範囲をクリップボードにコピーします（ **autoClipboard** プロパティがtrueに設定されている場合） |
| Ctrl + X | 選択範囲をクリップボードにコピーし、変更可能な選択範囲内のコンテンツをすべてクリアまたは削除します
（autoClipboard プロパティが true に設定され、preventCut プロパティが false に設定されている場合）。 |
| Ctrl + V or Shift + Insert | クリップボードの内容を選択した領域に貼り付けます（ **autoClipboard** プロパティがtrueに設定されている場合） |
| Ctrl + + | allowAddNew が true の場合、現在のアクティブ セルの上に新しい空白行を挿入します。(テンキーの + キー) |
| Ctrl + - | allowDelete が true の場合、アクティブ セルがある行を削除します。(テンキーの - キー) |
| Ctrl + Shift + P | アクティブ セルが配置されている列をピン留め/ピン留め解除します。 |
| Ctrl + Shift + F | アクティブ セルが配置されている列フィルターを開きます。 |
| Ctrl + Shift + S | アクティブ セルが配置されている列を並べ替えます。 |
| Alt + Shift + F | アクティブ セルの前のすべての行と列を固定します。 |
>type=note
> **組み込みのカット処理の動作**
> カット操作は次の2つのステップで実行されます：
>
> 1. 選択された内容をクリップボードにコピーします。
> 2. 変更可能な選択内容のみをクリアします。
>
> 適用されるルールは次のとおりです：
>
> * 読み取り専用または編集不可のセルは コピーはされますが削除されません。
> * コピー処理がキャンセルされた、または完了しなかった場合、内容は削除されません。
> * 編集可能と編集不可のセルが混在して選択されている場合、編集可能なセルの内容のみ削除されます。
>
> preventCut を true に設定すると、組み込みのカット処理を無効化し、独自のショートカット処理を実装できます。
## クリックイベントのハンドリング
FlexGridは、子要素へのイベントハンドラーの追加を回避し、代わりにそれらをグリッドのホスト要素にアタッチします。 次に、ヒットテストロジックに基づいてコマンドを適切な子要素に転送します。 これは、子要素の「クリック」メソッドを直接呼び出すことによって、子要素への参照を取得し、コードでイベントを発生させることを期待するアクセシビリティシナリオでいくつかの問題を提示します。
このシナリオに対応するために、Wijmoには、要素をパラメーターとして受け取り、必要なヒットテスト情報を構築する新しい **HitTest** コンストラクターが追加されました。これにより、グリッドはコード内のクリックイベントの発生を受け入れることができます。 たとえば、次のコードを使用して、列ヘッダーに「クリック」イベントを生成できます。
```javascript
// ヘッダーセルを取得
var headerCell = grid.columnHeaders.getCellElement(0,0);
// ヘッダーセルで「クリック」イベントを呼び出します。
headerCell.click();
```
または、次のコードを使用して、特定の列のフィルターエディターをドロップダウンすることもできます。
```javascript
// CSSセレクタを使用してフィルターグリフ要素を取得します
var selector = '.wj-flexgrid .wj-colheaders .wj-cell .wj-elem-filter'; var filterBtn = grid.hostElement.querySelector(selector);
columnHeaders.getCellElement(0, 0);
// フィルターグリフの「クリック」イベントを呼び出す
filterBtn.click();
```
同じアプローチに従って、クリックをシミュレートしてセルを選択したり、ノードを展開/折りたたんだり、セルに関連付けられたリストボックスをドロップダウンしたりできます。