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

このトピックでは、コントラスト、UI オートメーションテキストロール、グラフィックス内のテキストのガイダンスなど、Windows アプリのアクセシビリティ対応のテキスト要件について説明します。

コントラスト比

読みやすさを低くするための主要な軽減策としてハイコントラストモードを扱わないでください。既定のエクスペリエンスで十分な前景または背景のコントラストに基づくテキストデザイン。

コントラスト評価は決定論的であり、色相の認識を考慮していません。たとえば、緑色の背景の赤いテキストは、色が視覚的に異なって見える場合でも、色覚異常のある一部のユーザーでは読み取れない場合があります。

このセクションの推奨事項は、G18 と一致します。W3C Techniques for WCAG 2.0 のテキスト (およびテキストの画像) とテキストの背景の間に、少なくとも 4.5:1 のコントラスト比が存在することを確認します。

この要件を満たすには、表示されるテキストの背景に対する最小輝度コントラスト比が 4.5:1 である必要があります。例外には、非アクティブな UI のテキストなど、ロゴや付随テキストが含まれます。

情報を伝達しない装飾テキストは除外されます。たとえば、視覚的背景としてのみ使用され、意味を変えずに交換可能な単語は、この条件を満たす必要はありません。

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

注

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

テキスト要素の役割

Windows アプリでは、通常、次のテキスト要素とロールが使用されます。

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

コントロールが編集ロールを報告すると、支援技術はユーザーが値を編集できることを前提としています。 TextBox に静的テキストを配置すると、ロールモデルと対話モデルの両方が誤って報告されます。

静的テキストの場合は、 TextBlock と RichTextBlock を使用します。これらは Control サブクラスではなく、キーボードフォーカス可能ではなく、通常はタブオーダーでは表示されませんが、スクリーンリーダーはフォーカスに依存しない読み取り/ナビゲーションモード (仮想カーソルの動作など) で読み取ることができます。

タブナビゲーションを通じて公開するためだけに、静的テキストをフォーカス可能なコンテナーに配置しないでください。ユーザーはタブストップが操作可能であると期待しており、タブ順に含まれる静的コンテンツは通常、ユーザビリティに問題を生じさせます。ナレーターを使用して動作を検証します。

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

自動提案は、ユーザーが入力フィールドに入力している間に提案リストが更新されるパターンです。 XAML AutosuggestBox または組み込みの HTML コントロールを使用する場合、ほとんどのアクセシビリティ配線が組み込まれています。

カスタム実装にアクセスできるようにするには、UIA ツリーに入力リストと候補リストを関連付ける必要があります。自動提案の実装を参照してください。

ナレーターは、専用の提案エクスペリエンスでこのパターンをサポートしています。入力とリストが正しく接続されると、ユーザーは次のことができます。

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

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

自動提案の実装

UIA ツリーの入力フィールドと候補リストを関連付けます。デスクトップアプリで UIA_ControllerForPropertyId を使用するか、XAML アプリで ControlPeers を使用します。

自動提案の一般的な動作は 2 つあります。

既定の選択
リストに既定の選択項目がある場合、ナレーターはデスクトップアプリではUIA_SelectionItem_ElementSelectedEventIdを、XAML アプリではAutomationEvents.SelectionItemPatternOnElementSelectedを期待します。

入力またはリストナビゲーションによる更新など、選択が変更されるたびに、対応する選択されたイベントを発生させます。

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

既定の選択なし
既定の選択がない場合、リストが更新されるたびに、ナレーターはデスクトップアプリでは UIA_LayoutInvalidatedEventId、XAML アプリでは LayoutInvalidated を想定します。

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

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 セマンティクスを実装します。

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

可能な場合は、グラフィックスにテキストを埋め込むのを避けてください。画像ソース内でレンダリングされたテキストは、支援技術では自動的に読み取りできません。

グラフィックス内のテキストが必要な場合は、 AutomationProperties.Name を同等のコンテンツ (または簡潔なセマンティックサマリー) に設定します。パスまたはグリフを介してレンダリングされるテキストのようなコンテンツにも同じ原則を適用します。

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

テキストが小さすぎると、読みやすさの問題が発生する可能性があります。アプリ全体で適切な既定のサイズから始めます。

その後、次のような Windows テキスト関連のアクセシビリティ設定に対して検証する必要があります。

UI の一部を拡大する拡大鏡。レイアウトと折り返しが拡大率の下で読み取り可能であることを確認します。
設定->システム->ディスプレイ->スケールとレイアウトでのグローバルスケールと解像度の設定。使用可能な値は、ディスプレイハードウェアによって異なります。
設定->簡単操作->ディスプレイでのテキストサイズ設定。サポートされているコントロールのテキストをアプリや画面全体で大きく拡大します (WinUI テキストコントロールでは既定でサポートされています)。

注

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

多くのテキスト要素とコントロールは IsTextScaleFactorEnabled を公開します。既定値は true です。有効にすると、テキストは自動的に拡大縮小され、 FontSize の値が小さい場合は通常、大きい値よりも大きい値が影響を受けます。

必要な場合にのみ、IsTextScaleFactorEnabled を false に設定します。

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

このサンプルを使用して、テキストサイズが変更されたときの IsTextScaleFactorEnabled の動作と使用しない動作を比較します。

<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"/>

テキストのスケーリングを広く無効にしないでください。アプリ間のテキストスケーリングの一貫性は、重要なアクセシビリティ機能です。

WinUI テキストコントロールは、カスタマイズやテンプレートを使用せずに、フルテキストスケーリングエクスペリエンスをサポートします。他の WinRT ベースのアプリの場合は、 TextScaleFactorChanged を監視し、 TextScaleFactor を取得して、システムのテキストサイズの変更に対応できます。

private readonly Windows.UI.ViewManagement.UISettings _uiSettings = new();

public MainWindow()
{
    InitializeComponent();
    _uiSettings.TextScaleFactorChanged += UISettings_TextScaleFactorChanged;
}

private void UISettings_TextScaleFactorChanged(Windows.UI.ViewManagement.UISettings sender, object args)
{
    // Marshal to the UI thread before applying layout or visual updates.
    DispatcherQueue.TryEnqueue(() =>
    {
        var scale = sender.TextScaleFactor;
        // Apply updates for UI that depends on text scale.
    });
}

TextScaleFactor は、[1,2.25] の範囲内の double です。これを使用して、関連する UI 要素 (テキストによるグラフィックスのスケーリングなど) を調整できます。

すべてのテキストサイズで均一なスケーリングを想定しないでください。大きいテキストは通常、小さいテキストよりも影響を受けにくい。

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

例示

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

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

フィードバック

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

最終更新: 2026-08-26