共用方式為


無障礙文本需求

本主題說明應用程式中文字協助工具的最佳做法,方法是確保色彩和背景符合必要的對比比例。 本主題也會討論通用 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 應用程式可以使用下列預設元素 (通常稱為 文字元素文字編輯控制項):

當控制項報告具有 「編輯」角色時,輔助技術會假設使用者有辦法變更值。 因此,如果您將靜態文字放入 TextBox,則會錯誤地報告角色,因此錯誤地向協助工具使用者報告應用程式的結構。

在 XAML 的文字模型中,有兩個主要用於靜態文字的元素: TextBlockRichTextBlock。 這兩個都不是 Control 子類別,因此它們都無法以鍵盤聚焦,也無法出現在 Tab 鍵順序中。 但這並不意味著輔助技術不能或不會讀取它們。 螢幕助讀程式通常設計為支援多種模式來閱讀應用程式中的內容,包括專用的閱讀模式或超越焦點和 Tab 鍵順序的導覽模式,例如「虛擬游標」。 因此,不要將靜態文字放入可聚焦的容器中,只是為了讓 Tab 鍵順序將使用者帶到那裡。 輔助技術使用者期望 Tab 鍵順序中的任何內容都是互動式的,如果他們在那裡遇到靜態文本,那將更令人困惑而不是有用。 您應該使用朗讀程式自行測試此專案,以瞭解使用螢幕助讀程式檢查應用程式靜態文字時應用程式的使用者體驗。

自動建議協助工具

當使用者輸入輸入欄位並出現潛在建議清單時,這種類型的案例稱為自動建議。 這在郵件欄位的 [ 收件者: ] 行、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 標準中進行了說明。

圖形中的文字

盡可能避免在圖形中包含文字。 例如,您在應用程式中顯示為 「影像 」元素的影像來源檔案中的任何文字,輔助技術都無法自動存取或讀取。 如果您必須在圖形中使用文字,請確定您提供的等同於「替代文字」的 AutomationProperties.Name 值包含該文字或文字意義摘要。 如果您要從向量建立文字字元作為 路徑的一部分,或使用 字符,則適用類似的考量。

文字字體大小和比例

當字體使用量太小時,用戶可能難以閱讀應用程序中的文本,因此首先請確保應用程序中的任何文本大小合理。

完成顯而易見的工作後,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 控制項、特性和功能的互動式範例。 從 Microsoft Store 取得應用程式,或在 GitHub 上取得原始程式碼