スクリーン リーダーを使用するユーザーや身体の不自由なユーザーの場合、適切なキーボード アクセスが提供されていないアプリケーションでは使いづらいことがあります。 Xamarin.Forms アプリケーションでは、望ましいタブ オーダーを指定して、ユーザビリティとアクセシビリティを改善することができます。 コントロールのタブ オーダーを指定することで、キーボード ナビゲーションが有効になり、アプリケーション ページが特定の順序で入力を受け取れるようになり、スクリーン リーダーがフォーカス可能な要素をユーザーに対して読み上げられるようになります。
既定では、コントロールのタブ オーダーは、XAML に列記されている順序、またはプログラムで子コレクションに追加された順序と同じです。 この順序はキーボードでコントロールをナビゲーションし、スクリーン リーダーが読み上げる順序であり、多くの場合、この既定の順序が最善の順序です。 ただし、次の XAML コードの例で示すように、既定の順序が望ましい順序と同じではないこともあります。
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Text="You"
HorizontalOptions="Center" />
<Label Grid.Column="1"
Text="Manager"
HorizontalOptions="Center" />
<Entry Grid.Row="1"
Placeholder="Enter forename" />
<Entry Grid.Column="1"
Grid.Row="1"
Placeholder="Enter forename" />
<Entry Grid.Row="2"
Placeholder="Enter surname" />
<Entry Grid.Column="1"
Grid.Row="2"
Placeholder="Enter surname" />
</Grid>
次のスクリーンショットは、このコード例での既定のタブ オーダーです。
このタブ オーダーは行ベースであり、XAML でコントロールが列記されている順序です。 したがって、Tab キーを押すと、名の 2 つの Entry インスタンス、姓の 2 つの Entry インスタンスの順に移動します。 しかし、列優先のタブ ナビゲーションを使用して、Tab キーを押すと名と姓のペアの順に移動するようにした方が、エクスペリエンスがわかりやすくなります。 これは、入力コントロールのタブ オーダーを指定することで実現できます。
Note
ユニバーサル Windows プラットフォームでは、キーボード ショートカットを定義して、ユーザーがタッチやマウスではなくキーボードを使用してアプリケーションの表示されている UI 間をすばやく移動してやり取りするわかりやすい方法を提供することができます。 詳しくは、「VisualElement アクセス キーの設定」をご覧ください。
タブ オーダーを設定する
ユーザーが Tab キーを押してコントロール間を移動するときに VisualElement インスタンスがフォーカスを受け取る順序を指定するには、VisualElement.TabIndex プロパティを使用します。 プロパティの既定値は 0 で、任意の int 値に設定できます。
既定のタブ オーダーを使用するとき、または TabIndex プロパティを設定するときは、次の規則が適用されます。
TabIndexが 0 に設定されているVisualElementインスタンスは、XAML または子コレクションでの宣言の順序に基づいて、タブ オーダーに追加されます。TabIndexに 0 より大きい値が設定されているVisualElementインスタンスは、TabIndexの値に基づいてタブ オーダーに追加されます。TabIndexに 0 より小さい値が設定されているVisualElementインスタンスは、値が 0 のすべてのものより前のタブ オーダーに追加されて表示されます。TabIndexが競合する場合は、宣言の順序によって解決されます。
タブ オーダーが定義された後、Tab キーを押すと、フォーカスは TabIndex の昇順でコントロール間を移動し、最後のコントロールに達すると先頭に戻ります。
警告
ユニバーサル Windows プラットフォームでは、タブ オーダーがコントロール宣言の順序と同じになるように、各コントロールの TabIndex プロパティを int.MaxValue に設定する必要があります。
次の XAML の例では、列優先のナビゲーションになるように入力コントロールに設定された TabIndex プロパティを示します。
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Text="You"
HorizontalOptions="Center" />
<Label Grid.Column="1"
Text="Manager"
HorizontalOptions="Center" />
<Entry Grid.Row="1"
Placeholder="Enter forename"
TabIndex="1" />
<Entry Grid.Column="1"
Grid.Row="1"
Placeholder="Enter forename"
TabIndex="3" />
<Entry Grid.Row="2"
Placeholder="Enter surname"
TabIndex="2" />
<Entry Grid.Column="1"
Grid.Row="2"
Placeholder="Enter surname"
TabIndex="4" />
</Grid>
次のスクリーンショットは、このコード例でのタブ オーダーです。
ここでのタブ オーダーは列ベースです。 したがって、Tab キーを押すと、名と姓の Entry ペアの順に移動します。
重要
iOS と Android のスクリーン リーダーは画面上のアクセシビリティ対応の要素を読み上げるときに VisualElement の TabIndex を考慮します。
タブ オーダーからコントロールを除外する
コントロールのタブ オーダーを設定するだけでなく、タブ オーダーからコントロールを除外することが必要な場合があります。 これを実現するための 1 つの方法は、コントロールの IsEnabled プロパティを false に設定することです。無効になっているコントロールはタブ オーダーから除外されます。
ただし、無効になっていなくても、タブ オーダーからコントロールを除外することが必要になることがあります。 これは VisualElement.IsTabStop プロパティを使って実現できます。これは、VisualElement がタブ ナビゲーションに含まれるかどうかを示します。 既定値は true で、値を false にすると、そのコントロールは、TabIndex が設定されているかどうかにかかわらず、タブ ナビゲーション インフラストラクチャによって無視されます。
サポートされているコントロール
TabIndex プロパティと IsTabStop プロパティは、1 つ以上のプラットフォームでキーボード入力を受け付ける次のコントロールでサポートされています。
ButtonDatePickerEditorEntryNavigationPagePickerProgressBarSearchBarSliderStepperSwitchTabbedPageTimePicker
Note
これらの各コントロールは、すべてのプラットフォームにおいてタブでフォーカスを設定できるわけではありません。