小ネタ: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 の値となっている場合は「タブ ストップがありません」というエラーが出ました。
一括でチェックするのに捗りますね。
※値を設定していない場合はエラーとなりませんでした。ご注意ください。

参考サイト

PowerApps x Daily UI #007 – Settings

この記事は「PowerAppsでDaily UIチャレンジ!UI100本ノックに挑戦します」の#007です。今回のpromptは「Settings」です。

この投稿のためにデータを仕込んでいたら先に「PowerApps x Daily UI #060」ができてしまったという経緯があります。PowerAppsちゃんはパワフルすぎるため、データを仕込むためのライトなアプリも爆速で作れてしまうんですね…あらゆるI/OがPowerAppsになっていく…
さて、Settingでやりやかったのはテーマカラーの設定です。前述のとおり色の指定自体はCDSに突っ込んでしまいましたので、もはや指定は何もすることがないくらいにラクチンです。

Power Platform のテーマカラーからアプリのテーマカラーを設定しよう

続きを読む PowerApps x Daily UI #007 – Settings

PowerApps x Daily UI #060 – Color Picker

この記事は「PowerAppsでDaily UIチャレンジ!UI100本ノックに挑戦します」の#060です。今回のpromptは「Color Picker」です。

元々は #007 を書こうと思っていたのですが、副次的にこちらが先にできてしまったので公開します!

Office+α のアプリとテーマカラーを表示するアプリ

今回は画像を使いたいのと、それほど件数が多くないということもあって、CDSのエンティティからアプリをビルドしました。この方法だと、本当に何も考えずに一瞬でアプリが作れるので、使い捨てのアプリを作るときにもとてもすばらしいです…。
アイコンセットはFastTrackから。

続きを読む PowerApps x Daily UI #060 – Color Picker

一日中PowerAppsでアプリを作ろう – #AppDay の取り組みについて

こんにちは!2019年も半分が終わりますね。今回は技術的な話題ではなく、私のチームで取り組んでいる「#AppDay」というものについてご紹介したいと思います。

AppDayとは?

タイトルにも書きましたが「一日中PowerAppsでアプリを作ろう」という日です。背景を少し書いておくと、私はユーザー部門ではなくSIerとしてPowerAppsやMicrosoft Flowをお客様に提案する立場なので、いわゆる社内展開の事例とは異なるのですが、概念としてとてもおすすめできるなと思ったので記事にしてみました。少しでもご参考になると幸いです!

続きを読む 一日中PowerAppsでアプリを作ろう – #AppDay の取り組みについて

PowerApps x Daily UI #006 – User Profile

この記事は「PowerAppsでDaily UIチャレンジ!UI100本ノックに挑戦します」の#006です。今回のpromptは「User Profile」です。

前回からすごく間が開いてしまいました。このあいだにWordpressの更新があって継続するかどうか悩みましたが、初志をわすれずにぼちぼち頑張っていこうと思います。
さて、Office365のプロファイルといえばDelveですが、みなさまの会社では活用されていますか?今回はDelveを中心としたOffice365アカウントの基本的な情報をもとに、使いやすい「従業員検索」アプリを作成してみました。

Delveのプロファイルってどんなだっけ?

こんな感じです。

企業ではADと人事システムが連携していて、部署や役職などある程度の情報は自動で設定される場合が多いですね。
今回はモバイルからの用途を想定して作ってみました。

続きを読む PowerApps x Daily UI #006 – User Profile

小ネタ:毎日FlowでBingの壁紙をDLする

小ネタです。Bingで提供されている壁紙を、Flowを使って毎朝自動でダウンロードする方法。

URL(json)
http://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=ja-JP

この小ネタをわざわざ書いたのは、BingがちゃんとJSON(/xml/rss)で返してくれることに驚いたからです。「bing image url」で検索するとstackoverflowにこんな投稿がありました。世界には自分と同じようなことをしたい人がわりとたくさんいるんだなあと思ったので、今後もめげずにアウトプットしていきます。 ;-)

PowerApps x Daily UI #005 – App Icon

この記事は「PowerAppsでDaily UIチャレンジ!UI100本ノックに挑戦します」の#005です。

今回のpromptは「App Icon」です。アプリアイコンといえば先日、Officeの新しいアイコンが公開され、Office365環境には順次リリースされていますが、PowerPlatformのアイコンは古いままでちょっとさみしい気持ち…。ということで今回は、動作するPowerAppsアプリではないのですが、「新Officeアイコン風PowerPlatformアイコン」を作ってみました!

続きを読む PowerApps x Daily UI #005 – App Icon