セマンティック プロパティを使用してアクセス可能なアプリを構築する

アクセシビリティのセマンティクスは、さまざまな環境でテクノロジを使用し、さまざまなニーズとエクスペリエンスで UI にアプローチするユーザーにとってアプリを包括的なものにするエクスペリエンスの構築に関係しています。 多くの場合、アクセシビリティに関する法的要件は、開発者がアクセシビリティの問題に対処するための推進力となる可能性があります。 いずれの場合も、アプリが可能な限り最も多くの対象ユーザーに到達できるように、包括的でアクセシビリティの高いアプリを構築することをお勧めします。

Web Content Accessibility Guidelines (WCAG) は、Web とモバイルのグローバル アクセシビリティ標準および法的ベンチマークです。 これらのガイドラインでは、アプリをより知覚可能、操作可能、理解可能、堅牢にするためのさまざまな方法について説明します。

多くのユーザー アクセシビリティのニーズは、ユーザーがインストールした支援技術の製品、またはオペレーティング システムによって提供されるツールと設定によって満たされます。 これには、スクリーン リーダー、画面拡大ルール、ハイコントラスト設定などの機能が含まれます。

スクリーン リーダーは、通常、画面に表示されるコントロールの聴覚的な説明を提供します。 これらの記述子は、ユーザーがアプリ内を移動し、画像などの、入力またはテキストがないコントロールへの参照を提供するのに役立ちます。 スクリーン リーダーは、多くの場合、タッチスクリーン、トラックパッド、またはキーボードのジェスチャを使用して制御されます。 スクリーン リーダーを有効にする方法の詳細については、「Enable screen readers」をご覧ください。

オペレーティング システムには、独自の動作と構成を備えた独自のスクリーン リーダーがあります。 たとえば、ほとんどのスクリーン リーダーでは、フォーカスを受け取ったコントロールに関連付けられているテキストが読み上げられて、ユーザーはアプリ内を移動しながら自分がいる場所を知ることができます。 しかし、一部のスクリーン リーダーでは、ページが表示されたときにアプリのユーザー インターフェイス全体も読み上げられ、ユーザーはページで使用可能なすべての情報コンテンツを受け取ってから、移動を試みることができます。

ほとんどのスクリーン リーダーでは、アクセシビリティのフォーカスを受けるコントロールに関連付けられているテキストを自動的に読み取ります。 つまり、Text プロパティが設定されている Label や Button などのコントロールは、ユーザーにとってアクセシビリティがあることになります。 ただし、テキストが関連付けられていないため、Image、ImageButton、ActivityIndicator などは、アクセシビリティ ツリーに含まれていない可能性があります。

.NET Multi-Platform App UI (.NET MAUI) では、基になるプラットフォームのアクセシビリティ エクスペリエンスへのアクセスを提供するための 2 つの方法がサポートされています。 セマンティック プロパティは、アプリでアクセシビリティ値を提供するための .NET MAUI アプローチであり、推奨されるアプローチです。 オートメーション プロパティは、アプリでアクセシビリティ値を提供するための Xamarin.Forms アプローチであり、セマンティック プロパティに置き換えられてきたものです。 どちらの場合も、コントロールの既定のアクセシビリティ オーダーは、そのコントロールが XAML に示されている順序、またはレイアウトに追加された順序と同じです。 ただし、レイアウトが異なると、アクセシビリティの順序に影響を与える追加の要因が存在する場合があります。 たとえば、StackLayout のアクセシビリティの順序もその向きに基づいており、Grid のアクセシビリティの順序は行と列の配置に基づいています。 コンテンツの順序付けの詳細については、Xamarin ブログの「Meaningful Content Ordering」をご覧ください。

Note

WebView でアクセス可能な Web サイトが表示されると、.NET MAUI アプリでもアクセスできます。 逆に、WebView でアクセスできない Web サイトが表示されると、.NET MAUI アプリではアクセスできません。

セマンティック プロパティ

セマンティック プロパティは、アクセシビリティ フォーカスを受け取るコントロールと、ユーザーに読み上げるテキストに関する情報を定義するために使用されます。 セマンティック プロパティは、基になるプラットフォーム アクセシビリティ API を設定するために任意の要素に追加できる添付プロパティです。

重要

セマンティック プロパティは、各プラットフォームで同等の動作を強制しようとしません。 代わりに、各プラットフォームによって提供されるアクセシビリティ エクスペリエンスに依存します。

SemanticProperties クラスでは、次の添付プロパティが定義されます。

• string 型の Description は、スクリーン リーダーによって読み上げられる説明を表します。 詳細については、「 Description」を参照してください。
• string 型の Hint は Description に似ていますが、コントロールの目的などの追加のコンテキストを提供します。 詳細については、「ヒント」をご覧ください。
• SemanticHeadingLevel 型の HeadingLevel は、要素を見出しとしてマークして UI を整理し、移動しやすくします。 詳細については、「Heading levels」をご覧ください。

これらの添付プロパティでは、スクリーン リーダーが要素について読み上げることができるように、プラットフォームのアクセシビリティ値が設定されます。 添付プロパティの詳細については、「添付プロパティ」をご覧ください。

説明

Description 添付プロパティは、スクリーン リーダーで要素の読み上げに使用される簡潔でわかりやすい string です。 このプロパティは、コンテンツの理解やユーザー インターフェイスの操作に重要な意味を持つ要素用に設定される必要があります。 このプロパティの設定は、XAML で行うことができます。

<Image Source="dotnet_bot.png"
       SemanticProperties.Description="Cute dot net bot waving hi to you!" />

または、C# で設定できます。

Image image = new Image { Source = "dotnet_bot.png" };
SemanticProperties.SetDescription(image, "Cute dot net bot waving hi to you!");

さらに、SetValue メソッドを使用して、Description 添付プロパティを設定することもできます。

image.SetValue(SemanticProperties.DescriptionProperty, "Cute dot net bot waving hi to you!");

ある要素のアクセシビリティ情報は、別の要素でも定義できます。 たとえば、Switch の隣の Label を使用して、Switch の内容を説明できます。 XAML では次のようにしてこれを実現できます。

<Label x:Name="label"
       Text="Enable dark mode: " />
<Switch SemanticProperties.Description="{Binding Source={x:Reference label} Path=Text}" />

または、C# で次のようにして設定できます。

Label label = new Label
{
    Text = "Enable dark mode: "
};
Switch mySwitch = new Switch();
SemanticProperties.SetDescription(mySwitch, label.Text);

警告

• Label で Description 添付プロパティを設定しないでください。 これにより、スクリーン リーダーによって読み上げられた Text プロパティが停止されます。 これは、視覚テキストがスクリーン リーダーによって読み上げられるテキストと理想的に一致する必要があるためです。
• Entry で Description 添付プロパティを設定したり、Android で Editor を設定したりしないでください。 これにより、TalkBack アクションが機能しなくなります。 代わりに、Placeholder プロパティまたは Hint 添付プロパティを使用してください。
• iOS では、子を持つコントロールで Description プロパティを設定すると、スクリーン リーダーは子にアクセスできなくなります。 これは、iOS では、親要素から子要素へのナビゲーションを可能にするアクセシビリティ機能が提供されていないためです。

ヒント

Hint 添付プロパティは、コントロールの目的など、Description 添付プロパティに追加のコンテキストを提供する string を表します。 このプロパティの設定は、XAML で行うことができます。

<Image Source="like.png"
       SemanticProperties.Description="Like"
       SemanticProperties.Hint="Like this post." />

または、C# で設定できます。

Image image = new Image { Source = "like.png" };
SemanticProperties.SetDescription(image, "Like");
SemanticProperties.SetHint(image, "Like this post.");

さらに、SetValue メソッドを使用して、Hint 添付プロパティを設定することもできます。

image.SetValue(SemanticProperties.HintProperty, "Like this post.");

Android では、このプロパティの動作は、アタッチされているコントロールによって若干異なります。 例えば、Switch や CheckBox のようなテキスト値のないコントロールの場合、コントロールと共にヒントが表示されます。 ただし、テキスト値を持つコントロールの場合、ヒントは表示されず、テキスト値の後に読み取られます。

警告

Hint プロパティは Android の Entry.Placeholder プロパティと競合し、どちらも同じプラットフォーム プロパティにマップされます。 そのため、Hint の値を Entry.Placeholder の値と異なる値に設定することはお勧めしません。

見出しレベル

HeadingLevel 添付プロパティを使用すると、要素を見出しとしてマークして UI を整理し、移動しやすくすることができます。 スクリーン リーダーの中には、ユーザーが見出し間をすばやく移動できるものもあります。

見出しのレベルは 1 から 9 で、None を定義する SemanticHeadingLevel 列挙型と、Level9 メンバーによる Level1 で表されます。

重要

Windows には 9 レベルの見出しが用意されていますが、Android と iOS では 1 つの見出ししか提供されません。 したがって、HeadingLevel を Windows で設定すると、正しい見出しレベルにマップされます。 ただし、Android と iOS で設定すると、1 つの見出しレベルにマップされます。

この添付プロパティの設定例を次に示します。

<Label Text="Get started with .NET MAUI"
       SemanticProperties.HeadingLevel="Level1" />
<Label Text="Paragraphs of text go here." />
<Label Text="Installation"
       SemanticProperties.HeadingLevel="Level2" />
<Label Text="Paragraphs of text go here." />    
<Label Text="Build your first app"
       SemanticProperties.HeadingLevel="Level3" />
<Label Text="Paragraphs of text go here." />     
<Label Text="Publish your app"
       SemanticProperties.HeadingLevel="Level4" />
<Label Text="Paragraphs of text go here." />   

または、C# で設定できます。

Label label1 = new Label { Text = "Get started with .NET MAUI" };
Label label2 = new Label { Text = "Paragraphs of text go here." };
Label label3 = new Label { Text = "Installation" };
Label label4 = new Label { Text = "Paragraphs of text go here." };
Label label5 = new Label { Text = "Build your first app" };
Label label6 = new Label { Text = "Paragraphs of text go here." };
Label label7 = new Label { Text = "Publish your app" };
Label label8 = new Label { Text = "Paragraphs of text go here." };
SemanticProperties.SetHeadingLevel(label1, SemanticHeadingLevel.Level1);
SemanticProperties.SetHeadingLevel(label3, SemanticHeadingLevel.Level1);
SemanticProperties.SetHeadingLevel(label5, SemanticHeadingLevel.Level1);
SemanticProperties.SetHeadingLevel(label7, SemanticHeadingLevel.Level1);

さらに、SetValue メソッドを使用して、HeadingLevel 添付プロパティを設定することもできます。

label1.SetValue(SemanticProperties.HeadingLevelProperty, SemanticHeadingLevel.Level1);

セマンティック フォーカス

コントロールには、指定した要素にスクリーン リーダー フォーカスを強制する SetSemanticFocus 拡張メソッドがあります。 たとえば、Label の名前付き label を指定すると、スクリーン リーダー フォーカスは、次のコードを使用して要素に強制的に移動できます。

label.SetSemanticFocus();

セマンティック スクリーン リーダー

.NET MAUI には、ユーザーにテキストを読み上げるようスクリーン リーダーに指示できる ISemanticScreenReader インターフェイスが用意されています。 インターフェイスは Default プロパティを介して公開され、Microsoft.Maui.Accessibility 名前空間で使用できます。

スクリーン リーダーにテキストを読み上げるよう指示するには、Announce メソッドを使用して、テキストを表す string 引数を渡します。 このメソッドの使用例を次に示します。

SemanticScreenReader.Default.Announce("This is the announcement text.");

制限事項

テキストを読み上げるには、既定のプラットフォーム スクリーン リーダーを有効にする必要があります。

オートメーション プロパティ

オートメーション プロパティは、要素が基になるプラットフォームのアクセシビリティ フレームワークにどのように報告されるかを示すために、任意の要素に追加できる添付プロパティです。

AutomationProperties クラスでは、次の添付プロパティが定義されます。

• bool? 型の ExcludedWithChildren は、要素とその子をアクセシビリティ ツリーから除外するかどうかを決定します。 詳細については、「ExcludedWithChildren」をご覧ください。
• bool? 型の IsInAccessibleTree は、要素がアクセシビリティ ツリーで使用できるかどうかを示します。 詳細については、「IsInAccessibleTree」をご覧ください。
• string 型の Name は、要素の短い説明を表し、その要素の読み上げ可能な識別子として機能します。 詳細については、「 Name」を参照してください。
• string 型の HelpText は、要素の詳しい説明を表し、要素に関連付けられているヒント テキストと考えることができます。 詳細については、「HelpText」をご覧ください。
• VisualElement 型の LabeledBy は、現在の要素に対するアクセシビリティ情報を別の要素で定義できるようにします。 詳細については、「LabeledBy」をご覧ください。

これらの添付プロパティでは、スクリーン リーダーが要素について読み上げることができるように、プラットフォームのアクセシビリティ値が設定されます。 添付プロパティの詳細については、「添付プロパティ」をご覧ください。

スクリーン リーダーごとに読み上げられるアクセシビリティ値は異なります。 そのため、オートメーション プロパティを使用する際には、各プラットフォームでアクセシビリティのテストを十分に行い、最適なエクスペリエンスを確認することをお勧めします。

重要

オートメーション プロパティは、アプリでアクセシビリティ値を提供するための Xamarin.Forms アプローチであり、セマンティック プロパティに置き換えられてきたものです。 セマンティック プロパティの詳細については、「セマンティック プロパティ」をご覧ください。

ExcludedWithChildren

bool? 型の ExcludedWithChildren 添付プロパティは、要素とその子をアクセシビリティ ツリーから除外するかどうかを決定します。 これにより、表示されていないときにアクセシビリティ ツリーから StackLayout を除外して、StackLayout などの別のレイアウトの上に AbsoluteLayout を表示するなどのシナリオが可能になります。 XAML から次のように使用できます。

<StackLayout AutomationProperties.ExcludedWithChildren="true">
...
</StackLayout>

または、C# で次のようにして設定できます。

StackLayout stackLayout = new StackLayout();
...
AutomationProperties.SetExcludedWithChildren(stackLayout, true);

この添付プロパティが設定されている場合、.NET MAUI は、指定された要素とその子の false に IsInAccessibleTree 添付プロパティを設定します。

IsInAccessibleTree

警告

この添付プロパティは、通常、未設定にしておく必要があります。 ほとんどのコントロールはアクセシビリティ ツリーに存在する必要があり、AutomationProperties.ExcludedWithChildren 添付プロパティは、要素とその子がアクセシビリティ ツリーから削除される必要があるシナリオで設定できます。

bool? 型の IsInAccessibleTree 添付プロパティは、要素がスクリーン リーダーで認識できるかどうかを決定します。 他のオートメーション・プロパティを使用するには、true に設定する必要があります。 XAML では次のようにしてこれを実現できます。

<Entry AutomationProperties.IsInAccessibleTree="true" />

または、C# で次のようにして設定できます。

Entry entry = new Entry();
AutomationProperties.SetIsInAccessibleTree(entry, true);

警告

iOS では、子を持つコントロールの IsInAccessibleTree プロパティが true である場合、スクリーン リーダーは子に到達できません。 これは、iOS では、親要素から子要素へのナビゲーションを可能にするアクセシビリティ機能が提供されていないためです。

名前

重要

Name 添付プロパティは、.NET 8 では非推奨になりました。 代わりに、Description 添付プロパティを使用します。

Name 添付プロパティの値は、スクリーン リーダーで要素の読み上げに使用される簡潔でわかりやすいテキスト文字列である必要があります。 ユーザー インターフェイスの内容の理解や操作に重要な意味を持つ要素に対しては、このプロパティを設定する必要があります。 XAML では次のようにしてこれを実現できます。

<ActivityIndicator AutomationProperties.IsInAccessibleTree="true"
                   AutomationProperties.Name="Progress indicator" />

または、C# で次のようにして設定できます。

ActivityIndicator activityIndicator = new ActivityIndicator();
AutomationProperties.SetIsInAccessibleTree(activityIndicator, true);
AutomationProperties.SetName(activityIndicator, "Progress indicator");

HelpText

重要

HelpText 添付プロパティは、.NET 8 では非推奨になりました。 代わりに、Hint 添付プロパティを使用します。

HelpText 添付プロパティにはユーザー インターフェイス要素を説明するテキストを設定する必要があり、要素に関連付けられたヒント テキストと考えることができます。 XAML では次のようにしてこれを実現できます。

<Button Text="Toggle ActivityIndicator"
        AutomationProperties.IsInAccessibleTree="true"
        AutomationProperties.HelpText="Tap to toggle the activity indicator" />

または、C# で次のようにして設定できます。

Button button = new Button { Text = "Toggle ActivityIndicator" };
AutomationProperties.SetIsInAccessibleTree(button, true);
AutomationProperties.SetHelpText(button, "Tap to toggle the activity indicator");

一部のプラットフォームの Entry などの編集コントロールでは、HelpText プロパティを省略し、プレースホルダー テキストに置き換えることができる場合があります。 たとえば、"ここに名前を入力します" などは、ユーザーが実際に入力する前にコントロールにテキストを配置する Entry.Placeholder プロパティに適した候補です。

LabeledBy

重要

LabeledBy 添付プロパティは、.NET 8 では非推奨になりました。 代わりに、SemanticProperties.Description バインディングを使用します。 詳細については、「SemanticProperties: 説明」をご覧ください。

LabeledBy 添付プロパティを使用すると、現在の要素に対するアクセシビリティ情報を、別の要素で定義できます。 たとえば、Entry の隣の Label を使用して、Entry の内容を説明できます。 XAML では次のようにしてこれを実現できます。

<Label x:Name="label" Text="Enter your name: " />
<Entry AutomationProperties.IsInAccessibleTree="true"
       AutomationProperties.LabeledBy="{x:Reference label}" />

または、C# で次のようにして設定できます。

Label label = new Label { Text = "Enter your name: " };
Entry entry = new Entry();
AutomationProperties.SetIsInAccessibleTree(entry, true);
AutomationProperties.SetLabeledBy(entry, label);

重要

AutomationProperties.LabeledByProperty は、iOS ではサポートされていません。

アクセシビリティのテスト

通常、.NET MAU アプリは複数のプラットフォームを対象とします。これは、プラットフォームに応じてアクセシビリティ機能をテストすることを意味しています。 次のリンクに従って、各プラットフォーム上でアクセシビリティをテストする方法について学習します。

• Android でアプリのアクセシビリティをテストします。
• iOS でのアプリのアクセシビリティの確認。
• OS X でのアクセシビリティのテスト
• Windows でのアクセシビリティ テスト。

次のツールは、アクセシビリティ テストに役立ちます。

• Android アプリと Windows アプリのアクセシビリティ インサイト。
• Android アプリ用のアクセシビリティ スキャナー。
• iOS および macOS アプリのアクセシビリティ インスペクター。
• Android アプリ用 Android Studio Layout Inspector。
• iOS および macOS アプリ用の Xcode ビュー デバッガー。

ただし、これらのツールのいずれもスクリーン リーダーのユーザー エクスペリエンスを完全にエミュレートすることはできません。アクセシビリティに対応するためにアプリをテストし、トラブルシューティングする最善の方法は、スクリーン リーダーを備えた物理デバイスで常に手動で行うことです。

スクリーン リーダーの有効化

アクセシビリティ値を読み上げるスクリーン リーダーは、プラットフォームごとに異なります。

• Android では TalkBack が使用されます。 TalkBack を有効にする方法の詳細については、「TalkBack を有効にする」をご覧ください。
• iOS と macOS には VoiceOver があります。 VoiceOver を有効にする方法の詳細については、「VoiceOver を有効にする」をご覧ください。
• Windows ではナレーターが使用されます。 ナレーターを有効にする方法の詳細については、「ナレーターを有効にする」をご覧ください。

TalkBack を有効にする

TalkBack は、Android で使用される主要なスクリーン リーダーです。 有効にする方法は、デバイスの製造元、Android のバージョン、TalkBack のバージョンによって異なります。 ただし、通常、TalkBack は、デバイス設定を使用して Android デバイスで有効にすることができます。

1. [設定] アプリを開きます。
2. [アクセシビリティ]> [TalkBack] を選択します。
3. [TalkBack の使用] をオンにします。
4. [OK] を選択します。

Note

これらの手順はほとんどのデバイスに適用されますが、いくつかの違いが発生する可能性があります。

TalkBack を初めて有効にすると、TalkBack チュートリアルが自動的に開きます。

TalkBack を有効にする別の方法については、「Talkback のオンとオフを切り替える」をご覧ください。

VoiceOver を有効にする

VoiceOver は、iOS および macOS で使用される主要なスクリーン リーダーです。 iOS では、VoiceOver を次のように有効にすることができます。

1. [設定] アプリを開きます。
2. [アクセシビリティ]> [VoiceOver] を選択します。
3. [VoiceOver] を有効にします。

VoiceOver チュートリアルは、VoiceOver が有効になったら [VoiceOver の操作練習] を選ぶことで開くことができます。

VoiceOver を有効にする別の方法については、「iPhone で VoiceOver をオンにして練習する」と「iPad で VoiceOver をオンにして練習する」をご覧ください。

macOS では、VoiceOver を次のように有効にすることができます。

1. [システム環境設定] を開きます。
2. [アクセシビリティ]> [VoiceOver] を選択します。
3. [VoiceOver を有効にする] を選択します。
4. [VoiceOver の使用] を選択します。

VoiceOver チュートリアルは、[VoiceOver トレーニング] を選ぶと開くことができます。

VoiceOver を有効にする別の方法については、「Mac で VoiceOver をオン/オフにする」をご覧ください。

ナレーターを有効にする

ナレーターは、Windows で使用される主なスクリーン リーダーです。 ナレーターを有効にするには、Windows ロゴ キー + Ctrl + Enter キーを同時に押します。 これらのキーをもう一度押すと、ナレーターを停止できます。

詳細については、「ナレーターの詳細なガイド」をご覧ください。

アクセシビリティのチェック リスト

次のヒントに従って、.NET MAUI アプリに可能な限り幅広いユーザーがアクセスできるようにします。

• Web Content Accessibility Guidelines (WCAG) に従って、アプリがすべてのユーザーに対して認識可能、操作可能、理解可能、堅牢であることを確認します。 WCAG は、Web とモバイルのグローバル アクセシビリティの標準であり、法的ベンチマークです。 詳細については、「Web Content Accessibility Guidelines (WCAG) Overview」をご覧ください。
• ユーザー インターフェイスが自己記述型であることを確認します。 ユーザー インターフェイスのすべての要素がスクリーン リーダーにアクセス可能であることをテストします。 必要に応じて説明テキストとヒントを追加します。
• 画像とアイコンに代替テキストの説明があることを確認します。
• 大きなフォントとハイ コントラストをサポートします。 コントロールのサイズをハードコーディングすることは避け、代わりにより大きなフォント サイズに合わせてサイズを変更するレイアウトを優先します。 ハイコントラスト モードで配色をテストし、読み取り可能であることを確認します。
• ナビゲーションを念頭に置いてビジュアル ツリーを設計します。 代替入力方法を使用したコントロール間の移動が、タッチを使用する場合と同じ論理フローに従うように、適切なレイアウト コントロールを使用します。 さらに、スクリーン リーダーから不要な要素 (既にアクセス可能なフィールドの装飾的な画像やラベルなど) を除外します。
• オーディオやカラーのキューだけに依存しないでください。 進行状況、完了、またはその他の状態を示すのが音や色の変化のみである状況は避けてください。 明確な視覚的なキューを含むようにユーザー インターフェイスを設計し、音声と色は補強目的のみに使うか、特定のアクセシビリティ インジケーターを追加します。 色を選択するときは、色覚障碍のあるユーザーにとって区別が難しいパレットを避けるようにしてください。
• ビデオ コンテンツのキャプションと、オーディオ コンテンツの読み取り可能なスクリプトを提供します。 また、オーディオまたはビデオ コンテンツの速度を調整するコントロールを提供し、ボリューム コントロールとトランスポート コントロールを見つけやすく、使いやすくすることもできます。
• アプリで複数の言語がサポートされている場合は、アクセシビリティの説明をローカライズします。
• 対象となる各プラットフォームで、アプリのアクセシビリティ機能をテストします。 詳細については、「アクセシビリティのテスト」をご覧ください。