はじめに
今回の記事はTips てきな記事になります。
Power Apps ではアクセシビリティを向上させるためのTabIndex プロパティが存在します。
この設定を行うことにより、ユーザーがキーボードだけで操作を行うことができるようになります。
今回はこのTabIndex プロパティについて纏めようと思います。
TabIndex プロパティを設定してみる
TabIndex プロパティは各コントロールに設定することが可能です。
TabIndex プロパティは外面上部にある数式バーか、画面右にあるコントロールのプロパティから変更が可能です。
日本語名称では、"タブ遷移順"となっていますが、ここに設定する数値は0 or -1が推奨されています。
それぞれ以下の動作となります。
TabIndex 値 | 動作 | 既定 |
---|---|---|
0 | コントロールはキーボード ナビゲーションに関与します。 | Button、Text input、Combo box、およびその他の一般的な対話型コントロール。 |
-1 | コントロールはキーボード ナビゲーションに関与できません。 | Label、Image、Icon、およびその他の一般的な非対話型コントロール。 |
簡単に説明すると、
0を設定するとタブ遷移を行い
-1を設定するとタブ遷移を行いません。
このタブ遷移は特に特別な設定を行っていなかった場合、Z順で遷移を行います。
詳しくはこちらをご確認ください。
デフォルト値が-1のコントロールに関しても、もちろん0に設定することでタブ遷移を行えるようにすることが可能です。
その場合、 FocusedBorderColor
に任意の色を設定し、 FocusedBorderThickness
に0より大きい値を設定してください。
この設定を行わないと、現在フォーカス設定されているコントロールがユーザーからわからなくなってしまいます。
TabIndex
のデフォルト値が0のコントトールは上記プロパティに自身のボーダーカラーと線の太さが0より大きい値が設定されていますのでフォーカスされているコントロールがわかるようになっています。
実際の動作
まずは以下のようにテキストボックスを5つ配置したときのタブ遷移です。
ヒントのテキストに数値が設定されているテキストボックスの TabIndex
には0が設定されており、×が設定されている TabIndex
には-1が設定されています。
Power Apps でのタブ遷移 pic.twitter.com/lMLDdEjfNo
— コルネ (@koruneko32767) January 2, 2021
続いてギャラリーのタブ遷移です。
ギャラリーは WrapCount
で折り返しの数を指定することが可能です。
この数値を設定することで1行(1列)あたりに表示されるコントロールの数を指定できます。
今回は WrapCount
に3を設定しているので3行ずつ表示されています。
この状態でタブ遷移を行うと以下のようになります。
— コルネ (@koruneko32767) 2021年1月2日
上記のようにZ順でテキストボックスにタブ遷移が行われます。
ラベルには TabIndex
に-1を設定しているのでタブ遷移が行われません。
続いてギャラリー内でタブ遷移を行ったときに、ギャラリー外から選択されている項目を参照するとどのような動作になるのかみてみましょう!
— コルネ (@koruneko32767) 2021年1月2日
上記のようにタブ遷移でユーザーがコントロールへ移動した場合、外部からはユーザーが現在どのコントロールを選択しているのかわかりません。
これは恐らくタブ遷移ではコントロールを選択するのではなく、あくまでフォーカスを行っているだけだからかと思われます。
もし、ギャラリー内でユーザーが選択している項目によってなにか変化させるような実装を行いたい場合は、このような制限事項があるので注意が必要です。
現時点(2021/1/2)ではこの問題を回避するベストな方法が存在しないので、ケースバイケースで対応もしくは許容する必要があります。
最後にタブ遷移をZ順ではなくN順で行わせる方法についてです。
まずは下記のように、 TabIndex
のみを設定した場合は以下のようにZ順でタブ遷移を行います。
— コルネ (@koruneko32767) 2021年1月2日
上記のように上から下へ、左から右にタブ遷移を行っていますね。
これを、「テキストボックス → トグル」といった風にN順でタブ遷移を行うように設定してみます。
上記を実現するためにはグループをコンテナー内に設定します。
— コルネ (@koruneko32767) 2021年1月2日
これにより、上記のようにN順でタブ遷移が行われるようになりましたね。
1点注意として、N順でタブ遷移をしたい場合は、グループ化ではなくコンテナ化する必要があるという点です。
グループ化とした場合は以下のようにZ順でタブ遷移を行います。
— コルネ (@koruneko32767) 2021年1月2日
これらの違いに気を付けて各コントロールを設定しましょう。