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

[アーティクル]
05/05/2023

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

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

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

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

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

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

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

Note

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

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

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

重要

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

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

Descriptionは、スクリーンリーダーによって読み上げられる説明を表す型 stringです。詳細については、「 Description」を参照してください。
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をDescription設定しないでください。これにより、スクリーンリーダーによって読み上げられるプロパティが停止 Text されます。これは、ビジュアルテキストがスクリーンリーダーによって読み上げられるテキストと理想的に一致する必要があるためです。

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

<Label x:Name="label"
       Text="Enter your name: " />
<Entry SemanticProperties.Description="{Binding Source={x:Reference label} Path=Text}" />

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

Label label = new Label
{
    Text = "Enter your name: "
};
Entry entry = new Entry();
SemanticProperties.SetDescription(entry, label.Text);

警告

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介して Level9 をLevel1定義Noneする列挙体によって表されます。

重要

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.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 、次の添付プロパティを定義します。

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

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

重要

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

ExcludedWithChildren

型bool?の添付プロパティはExcludedWithChildren、要素とその子をアクセシビリティツリーから除外するかどうかを決定します。これにより、などの別のレイアウトStackLayout上にをAbsoluteLayout表示するなどのシナリオがStackLayout可能になり、が表示されていないときにアクセシビリティツリーから除外されます。 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 では、プロパティがtrue子を持つコントロールにある場合IsInAccessibleTree、スクリーンリーダーは子に到達できません。これは、iOS では、親要素から子要素へのナビゲーションを可能にするアクセシビリティ機能が提供されないためです。

名前

重要

Name添付プロパティは、添付プロパティに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添付プロパティは、添付プロパティに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添付プロパティは、バインドによって置き換えられます。詳細については、「 SemanticProperties: Description」を参照してください。

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 MAUI アプリは通常、複数のプラットフォームを対象とします。これは、プラットフォームに従ってアクセシビリティ機能をテストすることを意味します。次のリンクに従って、各プラットフォーム上でアクセシビリティをテストする方法について学習します。

アクセシビリティテストに役立つツールを次に示します。

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

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

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

各プラットフォームには、アクセシビリティ値をナレーションするための既定のスクリーンリーダーが異なります。

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

TalkBack を有効にする

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

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

Note

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

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

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

VoiceOver を有効にする

VoiceOver は、iOS と macOS で使用されるプライマリスクリーンリーダーです。 iOS では、VoiceOver を次のように有効にすることができます。

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

VoiceOver チュートリアルを開くには、VoiceOver が有効になったら、 VoiceOver プラクティスを選択します。

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

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

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

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

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

ナレーターを有効にする

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

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

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

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

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

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

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

説明

ヒント

見出しレベル

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

制限事項

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

ExcludedWithChildren

IsInAccessibleTree

名前

HelpText

LabeledBy

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

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

TalkBack を有効にする

VoiceOver を有効にする

ナレーターを有効にする

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

その他のリソース

その他のリソース

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

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

説明

ヒント

見出しレベル

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

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

制限事項

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

ExcludedWithChildren

IsInAccessibleTree

名前

HelpText

LabeledBy

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

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

TalkBack を有効にする

VoiceOver を有効にする

ナレーターを有効にする

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

その他のリソース

その他のリソース

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

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

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

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

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

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