フィードバック

アクセシビリティ対応キャンバスアプリのコントロールを整理する

  • [アーティクル]

スクリーン リーダーのユーザーが順番にナビゲートできるように、アプリのコントロールを整理する必要があります。 論理的な順序は、キーボード ユーザーの混乱を減らし、生産性を向上させます。

分かりやすいスクリーン名

画面が読み込まれると、スクリーン リーダーでその名前が読み上げられます。 ユーザーを惹きつけるために、分かりやすい名前をつけましょう。

Power Apps Studio のコントロール ツリー、またはプロパティパネルで画面名を変更できます。 スクリーンを選択し、鉛筆アイコンを選択して名前を編集します。 を選択してスクリーンの名前を変更します。

スクリーン名は、図で強調表示されているように、コントロール ツリーまたはプロパティ パネルから変更できます。

スクリーンの最初の要素はその名前です。 視覚的には非表示になっており、スクリーン リーダーのユーザーのみがアクセスできます。

新しい画面が読み込まれると、Power Apps はスクリーン名にフォーカスします。 画面の読み込み時に 直ちに SetFocus を使用すると、スクリーン名が読み取られません。 可視化されたタイトルを作成し、それをライブ リージョンにして、コンテキストの変更の告知を検討します。

論理コントロールの順序

スクリーン リーダーのユーザーは、コンテンツを順番にナビゲートできます。 順序は、コントロールの位置によって、上から下、左から右の順に決定されます。 コントロールのサイズは重要ではなく、その X および Y プロパティが重要となります。

この例では、A が一番上に最も近いため、順序の最初に表示されます。 B と C は縦方向の位置は同じですが、B の方が左に近いため、C よりも先に表示されます。D は上から一番離れているため、最後に表示されます。

配置が 4 つのコントロールの順序にどのように影響するか。

注意

  • アプリ編集時の プレビュー モードでは、パフォーマンス上の理由からコントロールの順序が更新されません。 アプリが公開されて実行されると、順序が修正されます。
  • コントロールの順序は、Power Apps Studio のコントロールのツリービューに表示されるものと同じではありません。 ツリービューは、アプリに追加されたタイミングに従ってコントロールを並べ替えます。 アプリの実行時のコントロールの順序には影響しません。

グループ化されたコントロール

既定の順序は、分離されたコンテンツには適していますが、グループ化されたコンテンツには適していません。 長方形 コントロールでっ描画された2つのタイルが並んでいるとします。 各タイルには見出しがあります。 見出しの下には、2 つのボタンが縦に並んでいます。最初のタイルには A と B、もう一つのタイルには C と D が表示されます。

誤った慣行の例 : フラットな構造で編成されたコントロール。

既定では、上から下、左から右の順になっています。 したがって、コントロールの順序は次のとおりです :

  1. 左 長方形
  2. 右 長方形
  3. 左見出し
  4. 右見出し
  5. A
  6. C
  7. B
  8. D

この構造では、A と B が近い場所にあり、同様に C と D も近い場所にあることが伝わりません。

関連するコンテンツをグループ化するには、コンテナ を使用します。 コンテナ の中のすべてのコントロールは、順番に一緒に表示されます。 コンテナの中では、コントロールは上から下、左から右へと同じルールで並べられます。

前の例の 長方形 を コンテナ に置き換えることで、スクリーン リーダーのユーザーにとって論理的な制御順序になりました。

  1. 左 コンテナ
  2. 左見出し
  3. A
  4. B
  5. 右 コンテナ
  6. 右見出し
  7. C
  8. D

推奨される方法の例 : コンテナーを使用して階層構造に編成されたコントロール。

フォームカード と ギャラリー の中のすべてのコントロールは自動的にグループ化されるため、コンテナ を使う必要はありません。 ただし、サブグループがある場合は、コンテナ を引き続き使用する必要があります。

この例では、ギャラリー 行の左側にはサムネイルと2つのテキストがあります。 右側には2つのボタンがあります。 視覚的にも論理的にも、2つのコントロールをグループ化する必要があります。 これにより、スクリーン リーダーのユーザーは、右のグループの前にまず左のグループが示されます。

推奨される方法の例 : ギャラリー内の関連するコントロールは、コンテナー内にグループ化されます。

論理キーボード ナビゲーションの順序

TabIndex は、キーボード ユーザーがどのようにしてコントロールに到達するかを指定します。 TabIndex 0 または -1 のいずれかである必要があります。 上記のような論理的な制御順序では、TabIndex を 0 よりも大きくする理由はほとんどありません。

キーボードのナビゲーション順序は、コントロールの視覚的な流れに従う必要があります。 ナビゲーションの順序が予測しにくい場合は、最初にアプリの構造が論理的であるかどうかを確認する必要があります。

注意

キーボードの操作順序は、制御順序とは異なります。 TabIndex は、 Tab キーのナビゲーションにのみ影響します。 スクリーン リーダーのユーザーがアプリを直線的にナビゲートする方法は変更されません。 一部のスクリーン リーダーのユーザーは、キーボードも使用していません。

キーボードのナビゲーション順序が制御順序と異なる必要があるまれなシナリオでは、TabIndex をカスタマイズできます。

次の手順

Power Apps のアクセシビリティ対応の色

関連項目