共用方式為

協助工具文字的需求

  • 發行項

本主題說明確保應用程式中的文字符合無障礙條件的最佳做法 (確保色彩和背景滿足必要的對比率)。 此外，本主題還討論了通用 Windows 平台 (UWP) 應用程式中的文字元素可擁有的 Microsoft UI 自動化角色，以及圖形內含文字的最佳做法。

對比率

雖然使用者可隨時選擇切換至高對比模式，但應用程式的文字設計應將此選項視為最後的選擇。 更好的做法，是確保應用程式文字符合某些既定的文字與背景對比度指導方針。 對比度的評估，是基於不考慮色調的判定技巧進行的。 例如，如果您在綠色背景上顯示紅色文字，患有色盲的使用者將可能無法閱讀這段文字。 檢查並修正對比率，可以防止這類問題發生。

本文中的文字對比建議，是基於網頁協助工具標準 - G18：確保文字 (和文字影像) 與文字背景之間的對比率至少達到 4.5:1。 此指引包含在適用於 WCAG 2.0 的 W3C 技術規格中。

可見文字與背景之間的最低亮度對比必須達到 4.5:1，才能視為無障礙文字。 例外狀況包括標誌和附帶文字 (例如非使用中 UI 元件所包含的文字)。

不包括未傳達任何資訊的裝飾性文字。 例如，如果使用隨機字詞來建立背景，且這些字詞可以重新排列或取代而不會改變其意義，則這些字詞即視同於裝飾性文字，無需符合此標準。

色彩對比工具可用來確認可見文字的對比率是否符合標準。 如需可測試對比率的工具，請參閱適用於 WCAG 2.0 G18 的技術 (「資源」一節)。

注意

「適用於 WCAG 2.0 G18 的技術」列出的某些工具無法與 UWP 應用程式互動使用。 您可能需要在相關工具中手動輸入前景和背景色彩值，或是製作應用程式 UI 的螢幕擷取畫面，然後針對螢幕擷取影像執行對比率工具。

文字元素角色

UWP 應用程式可以使用下列預設元素 (通常稱為文字元素或 textedit 控制項)：

當控制項回報其角色為 Edit 時，輔助技術會假設使用者有辦法變更值。 因此，如果您在 TextBox 中放置靜態文字，您就誤報了控制項的角色，進而向協助工具使用者誤報了應用程式的結構。

在 XAML 的文字模型中，有兩個元素主要用於靜態文字，即 TextBlock 和 RichTextBlock。 這兩者都不是 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>

如果您要建立自己的控制項，則必須設定自己的 ARIA 控制項，如 W3C 標準中所述。

圖形內含文字

請盡可能避免在圖形中加入文字。 例如，您在影像來源檔案中包含的任何文字，如果在應用程式中顯示為 Image 元素，則輔助技術將無法自動存取或讀取這些文字。 如果您必須在圖形中使用文字，請確保您提供的 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 屬性，了解手機上的 Text size 設定變更。 方法如下：

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 上取得原始程式碼