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

  • [アーティクル]

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

コントラスト比

ユーザーはハイ コントラスト モードにいつでも切り替えることができますが、テキスト用のアプリ設計ではこのオプションを最後の手段にする必要があります。 これよりも、アプリのテキストが、テキストと背景とのコントラストのレベルに関して確立されているガイドラインに準拠するようにすることをお勧めします。 コントラストのレベルは、色合いを考慮しない確定的な方法に基づいて評価されます。 たとえば、緑の背景の上に赤のテキストを配置すると、色覚に障碍があるユーザーはそのテキストを読み取ることができない場合があります。 コントラスト比を確認して修正することで、このようなアクセシビリティの問題を防ぐことができます。

ここで説明するテキストのコントラストに関する推奨事項は、「G18: テキスト (および画像化された文字) とテキストの背景のコントラスト比を 4.5:1 以上にする」という Web アクセシビリティ標準に基づいています。 このガイドラインは、W3C Techniques for WCAG 2.0 仕様に含まれています。

表示テキストがアクセシビリティに対応していると見なされるためには、背景に対する明暗のコントラスト比が最低でも 4.5:1 以上であることが必要です。 ただし、ロゴや、非アクティブな UI コンポーネントの一部のテキストなどの付随テキストは、例外です。

装飾テキストや、伝える情報がないテキストも例外になります。 たとえば、ランダムな文字を使って背景を作成し、意味を変えることなくその文字を再配置したり置換したりできる場合、文字は装飾と見なされ、この基準を満たす必要がありません。

色コントラスト ツールを使って、表示テキストのコントラスト比が適切であることを検証します。 コントラスト比をテストできるツールについては、Techniques for WCAG 2.0 の G18 (リソース セクション) をご覧ください。

注意

Techniques for WCAG 2.0 の G18 にリストされたツールのいくつかは、UWP アプリで対話的に使うことができません。 場合によっては、前景と背景の色の値を手動でツールに入力する必要があります。またアプリ UI の画面をキャプチャした後、そのキャプチャ画像に対してコントラスト比ツールを実行することが必要になる場合もあります。

テキスト要素の役割

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

コントロールから Edit の役割があることが報告されると、支援技術では、ユーザーが値を変更できると想定します。 このため、静的テキストを TextBox に配置すると、役割が誤って報告され、この結果、アクセシビリティ対応を必要とするユーザーにアプリの構造が誤って報告されます。

XAML のテキスト モデルでは、静的なテキスト、TextBlock、RichTextBlock で主に使われる 2 つの要素があります。 これらはいずれも Control サブクラスではないため、キーボード フォーカス可能でなく、またタブ オーダーに含めることはできません。 ただし、支援技術でそれらを読み取ることができないか、または読み取られないわけではありません。 スクリーン リーダーは一般的に、「仮想カーソル」など、フォーカスとタブ オーダーを超える専用読み取り値モードやナビゲーション パターンを含めて、アプリ内のコンテンツを読み取る複数のモードをサポートするように設計されています。 したがって、タブ オーダーによりユーザーが移動できることのみを理由として、フォーカス可能なコンテナーに静的テキストを格納しないでください。 支援技術ユーザーは、タブ オーダー内では対話的であることを期待しており、そこに静的なテキストが存在するとその有用性にも増して、混乱を招くことになります。 アプリの静的テキストを調べるためにスクリーン リーダーを使う場合に、アプリに対するユーザー エクスペリエンスの感覚を得るために、自身で、ナレーターによりこの出力のテストを行う必要があります

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

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

ナレーターは、特別な候補の表示モードによって、このタイプのエクスペリエンスをアクセシビリティ対応にするように更新されました。 大まかに言うと、編集フィールドと一覧が正しく接続されている場合、エンドユーザーには次のようなメリットがあります。

  • 一覧が存在していることと一覧が閉じるタイミングを把握する
  • 利用可能な入力候補の数を把握する
  • 項目が選択されている場合は、選択項目を把握する
  • ナレーターのフォーカスを一覧に移動できる
  • 他のすべての閲覧モードで候補内を移動できる

候補一覧
候補一覧の例

自動提案の実装

このエクスペリエンスをアクセシビリティ対応にするには、UIA ツリーで、入力フィールドと一覧が関連付けられている必要があります。 この関連付けは、デスクトップ アプリの UIA_ControllerForPropertyId プロパティまたは UWP アプリの ControlledPeers プロパティを使って設定されます。

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

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

既定の選択を含む一覧
既定の選択がある場合の例

既定の選択がない
天気予報アプリの場所のボックスなど、既定の選択がない場合、ナレーターはデスクトップの 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 要素として表示されるイメージ ソース ファイルにテキストを含めると、支援技術ではそのテキストのアクセスや読み取りを自動的に行うことはできません。 グラフィックス内でテキストを使う必要がある場合は、"alt テキスト" に相当するものとして指定する AutomationProperties.Name の値に、そのテキストまたはテキストの意味の要約を含めてください。 これは、テキスト文字をベクトルから Path の一部として作成する場合や、Glyphs を使って作成する場合も同様です。

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

使っているフォントが小さすぎる場合、ユーザーはアプリケーション内のテキストを読みづらくなることがあります。そのため、まずアプリケーション内のテキストが適切なサイズであることを確認してください。

この一目でわかることが完了したら、Windows にはさまざまなユーザー補助ツールと設定が用意されているので、ユーザーはそれらを使って、テキストを読むためのニーズや好みに合わせて調整することができます。 次に例を示します。

  • 拡大鏡ツールは UI で選択された領域を拡大できます。 アプリ内のテキストのレイアウトによって、拡大鏡を使用した読み取りが困難にならないようにする必要があります。
  • [設定] -> [システム] -> [表示] -> [拡大縮小とレイアウト] のグローバルなスケールと解像度の設定。 ディスプレイ デバイスの機能に左右されるため、実際に使用できるサイズ変更のオプションは異なる場合があります。
  • [設定] -> [簡単操作] -> [表示] のテキスト サイズ設定。 [テキストを大きくする] 設定を調整すると、すべてのアプリケーションと画面で、サポートされるコントロール内のテキストのサイズのみが指定されます (すべての 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 プロパティを使って、電話の [テキスト サイズ] 設定の変更に関する情報を確認することもできます。 その方法は次のとおりです。

C#

{
    ...
    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] の倍精度浮動小数点数です。 最も小さい文字がこの大きさまで拡大されます。 たとえば、この値を使ってテキストに合わせてグラフィックスを拡大縮小できます。 ただし、すべてのテキストが同じ倍率で拡大縮小されるわけではないことに注意してください。 一般に、最初の状態のテキストのサイズが大きいほど、拡大縮小の影響は小さくなります。

次の型に IsTextScaleFactorEnabled プロパティがあります。

例

ヒント

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

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