キーボード操作
| キー | 動作 |
|---|---|
| 矢印キー | 1セル移動します。右から左に書く言語では左右が逆になります。 |
| Home / End | 行(Ctrl を併用するとグリッド全体)の最初または最後のセルに移動します。 |
| Page Down / Page Up | 1画面分の行を移動します。 |
| ヘッダー上で Enter または Space | その列で並べ替えます。Shift を併用すると並べ替えに追加します。 |
| ヘッダー上で Alt + 下矢印キー | 列のパネルを開きます。 |
| ヘッダー上で Alt + 左または右矢印キー | 列の幅を狭めたり広げたりします。Shift を併用すると列を移動します。 |
| セル上で Enter | セルを編集します。編集できない場合は行を開きます。 |
| F2 または文字入力 | セルを編集します。 |
| 編集中の Enter、Esc、Tab | Enter で確定、Esc でキャンセル、Tab で確定して次へ移動します。 |
| Space | 行を選択します。Shift を併用すると、最後に選択した行からここまでを選択します。 |
| Ctrl + A | すべての行を選択します。 |
アクセシビリティの注意点
role="grid"を持つネイティブの<table>で、labelで名前を付けます。ヘッダーにはaria-sort、選択できる行にはaria-selectedが付きます。- グリッドのタブストップは1つだけです。フォーカスはロービング
tabindexでセルからセルへ移動するため、スクリーンリーダーは各セルを行と列のヘッダーとともに読み上げます。 - ページングや仮想化の最中も、
aria-rowcount、aria-rowindex、aria-colindexは正しい値を保ちます。 - 並べ替え、絞り込み、ページの切り替え、編集エラーは、読み上げ中の内容に割り込まないステータス領域で読み上げられます。