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

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

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

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

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

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

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

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

注

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

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

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

重要

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

SemanticProperties クラスは、次の添付プロパティを定義します。

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

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

説明

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!");

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

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

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

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

警告

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

ヒント

Hint添付プロパティは、コントロールの目的など、string添付プロパティに追加のコンテキストを提供するDescriptionを表します。 このプロパティの設定は、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 までのレベルがあり、SemanticHeadingLevel 列挙体によって表され、SemanticHeadingLevel は Level1、Level9 から までのメンバーを定義します。

重要

Windows には 9 レベルの見出しが用意されていますが、Android と iOS では 1 つの見出ししか提供されません。 したがって、Windows で HeadingLevel が設定されている場合は、正しい見出しレベルにマップされます。 ただし、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.Level2);
SemanticProperties.SetHeadingLevel(label5, SemanticHeadingLevel.Level3);
SemanticProperties.SetHeadingLevel(label7, SemanticHeadingLevel.Level4);

さらに、 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 クラスは、次の添付プロパティを定義します。

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

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

スクリーン リーダーごとに、さまざまなアクセシビリティ値が読み取られます。 そのため、自動化プロパティを使用する場合は、最適なエクスペリエンスを確保するために、各プラットフォームで完全なアクセシビリティ テストを実行することをお勧めします。

重要

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

ExcludedWithChildren

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

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

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

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

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

IsInAccessibleTree

警告

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

IsInAccessibleTree型のbool?添付プロパティは、要素がスクリーン リーダーに表示されるかどうかを決定します。 他のオートメーション プロパティを使用するには、 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 プロパティを省略してプレースホルダー テキストに置き換えることがあります。 たとえば、"Enter your name here" は、ユーザーの実際の入力の前にコントロールにテキストを配置する Entry.Placeholder プロパティの候補として適しています。

LabeledBy

重要

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

LabeledBy添付プロパティを使用すると、別の要素で現在の要素のアクセシビリティ情報を定義できます。 たとえば、Labelの横にあるEntryを使用して、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 MAUI アプリは通常、複数のプラットフォームを対象とします。つまり、プラットフォームに従ってアクセシビリティ機能をテストします。 各プラットフォームでアクセシビリティをテストする方法については、次のリンクを参照してください。

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

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

• Android および Windows アプリ用の Accessibility Insights。
• Android アプリ用のアクセシビリティ スキャナー。
• iOS および macOS アプリのアクセシビリティインスペクター。
• Android Studio Layout Inspector はAndroidアプリ用です。
• 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] を選択.

注

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

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

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

VoiceOver を有効にする

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

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

VoiceOver チュートリアルは、VoiceOver が有効になったら VoiceOver Practice を選択することで開くことができます。

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

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

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

VoiceOver チュートリアルは、[ Open VoiceOver Training]\(VoiceOver トレーニングを開く\)... を選択して開くことができます。

VoiceOver を有効にする別の方法については、「 Mac で VoiceOver をオンまたはオフにする」を参照してください。

ナレーターを有効にする

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

ナレーターの詳細については、「ナレーター の完全なガイド」を参照してください。

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

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

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