アクセシビリティに対応したテキストの要件

2025-08-22

このトピックでは、色と背景が必要なコントラスト比を満たすことを保証することで、アプリ内のテキストのアクセシビリティに関するベストプラクティスについて説明します。このトピックでは、ユニバーサル Windows プラットフォーム (UWP) アプリのテキスト要素に含めることができる Microsoft UI オートメーションロールと、グラフィックス内のテキストのベストプラクティスについても説明します。

コントラスト比

ユーザーには常にハイコントラストモードに切り替えるオプションがありますが、テキスト用のアプリデザインでは、そのオプションを最後の手段と見なす必要があります。より良い方法は、アプリのテキストが、テキストとその背景のコントラストレベルに関する特定の確立されたガイドラインを満たしていることを確認することです。コントラストのレベルの評価は、色の色合いを考慮しない決定論的手法に基づいています。たとえば、緑色の背景に赤いテキストがある場合、色覚障疸のあるユーザーがそのテキストを読み取れない可能性があります。コントラスト比を確認して修正すると、このようなアクセシビリティの問題を防ぐことができます。

ここで説明するテキストコントラストの推奨事項は、Web アクセシビリティ標準 G18 に基づいています。テキスト (およびテキストの画像) とテキストの背景の間に少なくとも 4.5:1 のコントラスト比が存在することを確認します。このガイダンスは、 W3C Techniques for WCAG 2.0 仕様に含まれています。

アクセシビリティが高いと見なすには、表示されるテキストの背景に対する最小輝度コントラスト比が 4.5:1 である必要があります。例外には、非アクティブな UI コンポーネントの一部であるテキストなど、ロゴや付随テキストが含まれます。

装飾され、情報を伝えるテキストは除外されません。たとえば、ランダムな単語を使用して背景を作成し、その単語を意味を変更せずに再配置または置換できる場合、単語は装飾と見なされ、この条件を満たす必要はありません。

カラーコントラストツールを使用して、表示されるテキストのコントラスト比が許容されることを確認します。コントラスト比をテストできるツールについては、 WCAG 2.0 G18 の手法 (リソースセクション) を参照してください。

注

WCAG 2.0 G18 の手法で示されている一部のツールは、UWP アプリでは対話形式で使用できません。ツールで前景色と背景色の値を手動で入力するか、アプリ UI の画面キャプチャを行ってから、画面キャプチャイメージに対してコントラスト比ツールを実行することが必要になる場合があります。

テキスト要素の役割

UWP アプリでは、次の既定の要素 (一般に テキスト要素 または textedit コントロールと呼ばれます) を使用できます。

TextBlock: ロールは Text です
TextBox: ロールは 編集です
RichTextBlock (およびオーバーフロークラス RichTextBlockOverflow): ロールは Text です
RichEditBox: ロールは編集

編集の役割を持つコントロールが報告されると、支援技術では、ユーザーが値を変更する方法があることを前提としています。したがって、 TextBox に静的テキストを配置すると、ロールが誤って報告され、アプリの構造がアクセシビリティユーザーに誤って報告されます。

XAML のテキストモデルには、主に静的テキストに使用される 2 つの要素 、TextBlock と RichTextBlock があります。これらはどちらも Control サブクラスでもなく、どちらもキーボードフォーカス可能でも、タブオーダーで表示することもできません。しかし、それは支援技術が読み取れない、または読まないという意味ではありません。スクリーンリーダーは通常、アプリ内のコンテンツを読み取る複数のモードをサポートするように設計されています。これには、専用の読み取りモードや、フォーカスを超えるナビゲーションパターンやタブオーダー ("仮想カーソル" など) が含まれます。そのため、タブオーダーがユーザーをそこに取得するように、静的テキストをフォーカス可能なコンテナーに配置しないでください。支援技術のユーザーは、タブオーダー内の何かは対話型であると想定しており、そこで静的なテキストが発生した場合は、役に立つよりも混乱が生じます。スクリーンリーダーを使用してアプリの静的テキストを調べるときに、ナレーターでこれをテストして、アプリのユーザーエクスペリエンスを把握する必要があります。

アクセシビリティの自動提案

ユーザーが入力フィールドに入力し、候補の一覧が表示されると、この種類のシナリオは自動提案と呼ばれます。これは、メールフィールドの [To: ] 行、Windows の [Cortana] 検索ボックス、Microsoft Edge の [URL] エントリフィールド、Weather アプリの [場所] エントリフィールドなどでよく使用されます。 XAML AutosuggestBox または HTML 組み込みコントロールを使用している場合、このエクスペリエンスは既定で既にフックされています。このエクスペリエンスにアクセスできるようにするには、入力フィールドとリストを関連付ける必要があります。これについては、「自動提案の実装」セクションで説明します。

ナレーターが更新され、特別な提案モードでこの種のエクスペリエンスにアクセスできるようになりました。大まかに言うと、編集フィールドとリストが正しく接続されると、エンドユーザーは次の操作を行います。

リストが存在し、リストが閉じるタイミングを把握する
使用可能な提案の数を把握する
選択した項目 (存在する場合) を把握する
ナレーターフォーカスをリストに移動できる
他のすべての読み取りモードで提案内を移動できる

提案リスト
候補リストの例

自動提案の実装

このエクスペリエンスにアクセスできるようにするには、入力フィールドとリストを UIA ツリーに関連付ける必要があります。この関連付けは、デスクトップアプリの UIA_ControllerForPropertyId プロパティまたは UWP アプリの ControlledPeers プロパティで行われます。

大まかに言えば、2 種類の自動提案エクスペリエンスがあります。

既定の選択
リストで既定の選択が行われた場合、ナレーターはデスクトップアプリで UIA_SelectionItem_ElementSelectedEventId イベントを検索するか、UWP アプリで発生する AutomationEvents.SelectionItemPatternOnElementSelected イベントを検索します。選択が変更されるたびに、ユーザーが別の文字を入力し、提案が更新されたとき、またはユーザーがリスト内を移動すると、 ElementSelected イベントが発生します。

既定の選択項目を含むリスト
既定の選択がある例

既定の選択なし
Weather アプリの [場所] ボックスなどの既定の選択がない場合、ナレーターは、リストが更新されるたびに、デスクトップ UIA_LayoutInvalidatedEventId イベントまたは UWP LayoutInvalidated イベントがリストで発生するように検索します。

既定の選択がないリスト
既定の選択がない例

XAML の実装

既定の XAML AutosuggestBox を使用している場合は、すべてが既にフックされています。 TextBox とリストを使用して独自の自動提案エクスペリエンスを作成する場合は、リストを TextBox の AutomationProperties.ControlledPeers として設定する必要があります。このプロパティを追加または削除するたびに、ControlledPeers プロパティの AutomationPropertyChanged イベントを発生させる必要があります。また、この記事で既に説明したシナリオの種類に応じて、SelectionItemPatternOnElementSelected イベントまたは LayoutInvalidated イベントを独自に発生させる必要があります。

HTML の実装

HTML で組み込みコントロールを使用している場合、UIA の実装は既にマップされています。既にフックされている実装の例を次に示します。

<label>Sites <input id="input1" type="text" list="datalist1" /></label>
<datalist id="datalist1">
        <option value="http://www.google.com/" label="Google"></option>
        <option value="http://www.reddit.com/" label="Reddit"></option>
</datalist>

独自のコントロールを作成する場合は、W3C 標準で説明されている独自の ARIA コントロールを設定する必要があります。

グラフィックス内のテキスト

可能な限り、グラフィックにテキストを含めないでください。たとえば、 Image 要素として アプリに表示されるイメージソースファイルに含めるテキストは、支援技術によって自動的にアクセスしたり読んだりすることはできません。グラフィックスでテキストを使用する必要がある場合は、"代替テキスト" と同等の AutomationProperties.Name 値に、そのテキストまたはテキストの意味の概要が含まれていることを確認します。パスの一部としてベクターからテキスト文字を作成する場合、またはグリフを使用する場合も同様の考慮事項が適用されます。

テキストのフォントサイズとスケール

フォントの使用が小さすぎる場合、ユーザーはアプリでテキストの読み取りが困難になる可能性があるため、アプリケーション内のテキストが最初に妥当なサイズであることを確認してください。

明確な作業を完了すると、Windows には、ユーザーがテキストを読むための独自のニーズと好みを利用して調整できるさまざまなアクセシビリティツールと設定が含まれています。これらには次のものが含まれます。

拡大鏡ツール。UI の選択した領域を拡大します。アプリ内のテキストのレイアウトによって、拡大鏡を読み取りに使用するのが難しくならないようにする必要があります。
Settings->System->Display->Scale とレイアウトのグローバルスケールと解像度の設定。どのサイズ設定オプションを使用できるかは、ディスプレイデバイスの機能によって異なります。
Access->Display の Settings->Ease のテキストサイズ設定。 [ テキストのサイズを大きく する] 設定を調整して、すべてのアプリケーションと画面のサポートコントロールのテキストのサイズのみを指定します (すべての UWP テキストコントロールでは、カスタマイズやテンプレートを使用せずにテキストのスケーリングエクスペリエンスがサポートされます)。

注

[ すべてを大きくする ] 設定を使用すると、ユーザーはプライマリ画面でのみテキストとアプリの優先サイズを一般的に指定できます。

さまざまなテキスト要素とコントロールには 、IsTextScaleFactorEnabled プロパティがあります。このプロパティの既定の値は true です 。 true の場合、その要素内のテキストのサイズをスケーリングできます。スケーリングは、 FontSize が小さいテキストに大きな FontSize を持つテキストよりも大きい程度の影響を与えます。要素の IsTextScaleFactorEnabled プロパティを false に設定することで、自動サイズ変更を無効にすることができます。

詳細については、「テキストのスケーリング」を参照してください。

次のマークアップをアプリに追加して実行します。 テキストサイズの設定を調整し、各 TextBlock の動作を確認します。

XAML

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been left set to its default value of true."
    Style="{StaticResource BodyTextBlockStyle}"/>

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been set to false."
    Style="{StaticResource BodyTextBlockStyle}" IsTextScaleFactorEnabled="False"/>

すべてのアプリで UI テキストを汎用的にスケーリングすることは、ユーザーにとって重要なアクセシビリティエクスペリエンスであるため、テキストのスケーリングを無効にすることはお勧めしません。

TextScaleFactorChanged イベントと TextScaleFactor プロパティを使用して、電話のテキストサイズ設定の変更を確認することもできます。その方法を次に示します。

{
    ...
    var uiSettings = new Windows.UI.ViewManagement.UISettings();
    uiSettings.TextScaleFactorChanged += UISettings_TextScaleFactorChanged;
    ...
}

private async void UISettings_TextScaleFactorChanged(Windows.UI.ViewManagement.UISettings sender, object args)
{
    var messageDialog = new Windows.UI.Popups.MessageDialog(string.Format("It's now {0}", sender.TextScaleFactor), "The text scale factor has changed");
    await messageDialog.ShowAsync();
}

TextScaleFactor の値は、範囲 [1,2.25] の double です。最小のテキストは、この量でスケールアップされます。たとえば、テキストに合わせてグラフィックスをスケーリングするために値を使用できる場合があります。ただし、すべてのテキストが同じ要素によって拡大縮小されるわけではないことに注意してください。一般に、テキストが大きいほど、スケーリングの影響を受けなくなります。

これらの型には 、IsTextScaleFactorEnabled プロパティがあります。

例示

WinUI 3 ギャラリーアプリを開き、テキストアクセシビリティサポートの動作を確認する

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロール、機能、および機能の対話型の例が含まれています。 Microsoft Store からアプリを取得するか、GitHub でソースコードを取得する

フィードバック

このページはお役に立ちましたか?