小ネタ:PowerApps キャンバスアプリのアクセシビリティに対応しよう (TabIndex編)

アプリを作成する際にはアクセシビリティについても検討する必要があります。PowerAppsにはアクセシビリティを担保するための機能が備わっているので、これを利用して様々な環境での利用に配慮したアプリを作ることができます。
今回はアプリをキーボードだけで使えるようにTabIndexの対応をしてみます。
※一部の内容はPowerAppsの特別な文脈ではなく、HTMLの仕様に基づく一般的なものであることを追記しておきます。

TabIndexの対応をしてみよう

TabIndexとは、Tabキーを押して要素にフォーカスする際の順序を決定するプロパティです。Indexとありますが推奨値は -1 または 0 のいずれかです。こちらのアプリを例にとってみます:

上の画像の赤枠で囲っている箇所(=対話的な要素)にはTabで移動したいので、その場合はTabIndexプロパティを0に設定します。
その他のラベルやアイコンなどはTabで移動する必要がないため、-1とします。
このように設定することで、上から下、および左から右(Zの形)で自動的にフォーカスの順序が決定されます。

TabIndexプロパティ以外にも設定が必要

Tabで適切に移動ができるようになりましたが、それだけではまだ足りません。マウスでクリックしたり、指でタップするのとは異なり、キーボードで遷移する場合には、現在フォーカスしているコントロールがどこなのかを明確にする必要があります。そのためには、以下の2つのプロパティを適切に設定します:

  • FocusedBorderColor:コントロールにフォーカスがあるときの境界線の色
  • FocusedBorderThickness:コントロールにフォーカスがあるときの境界線の太さ

実際の動作のようす

TabIndex、FocusedBorderColor、FocusedBorderThickness を適切に設定した場合、このような動きになります。

まとめ

  • TabIndexを正しく設定しよう(フォーカスさせたいコントロールは0、それ以外は-1)
  • コントロールにフォーカスがあるときの境界線の色(FocusedBorderColor)と太さ(FocusedBorderThickness)も正しく設定しよう

ちなみにアクセシビリティチェッカーではどんな結果になるの?

IconコントロールやTextInputコントロールに対して、TabIndexが -1 の値となっている場合は「タブ ストップがありません」というエラーが出ました。
一括でチェックするのに捗りますね。
※値を設定していない場合はエラーとなりませんでした。ご注意ください。

参考サイト