應用程式開發

已完成

協助工具的重要性延伸至所有形式的技術,包含數位軟體和應用程式。 設計應用程式時,需要考慮兩個主要因素:使用者介面 (UI) 和程式設計存取。 UI 是使用者與電腦系統互動的方式,例如:用於巡覽的連結和圖形。 程式設計存取與應用程式如何以程式設計方式存取另一個應用程式中的資訊 (例如:藉由呼叫程式碼) 相關。 例如:如果有人使用螢幕助讀程式來存取應用程式,螢幕助讀程式會呼叫程式碼傳達該應用程式 UI 中的內容。

使應用程式無障礙的步驟有很多,但要記住的重點如下:

  • 對程式設計方式存取公開您的 UI 元素。
  • 請確定您的應用程式支援鍵盤瀏覽,以供無法使用滑鼠或觸控式螢幕的人員使用。
  • 請確定您的應用程式支援可存取的色彩和對比設定。

鍵盤導覽

對於視障者或有行動問題的使用者,能夠以鍵盤瀏覽應用程式是很重要的。 不過,只有需要使用者互動才能運作的控制項應獲得鍵盤焦點,例如:連結、按鈕和表單控制項。 不需要動作的元件 (例如:靜態影像) 並不需要鍵盤焦點。 例如:Microsoft 標誌是不需要採取動作的靜態影像。

不同於使用滑鼠或觸控式螢幕瀏覽,鍵盤瀏覽是線性的。 考慮使用鍵盤瀏覽時,需要思考使用者將如何與您的產品互動,以及有邏輯的瀏覽應如何進行。 西方文化中,人們通常習慣由左至右、由上至下閱讀。 因此,常見的鍵盤瀏覽做法便是跟隨這個模式。

設計鍵盤瀏覽時,請檢查您的 UI,並思考下列問題:

  • 如何在 UI 中配置或分組控制項?
  • 是否有一些重要的控制項群組?
  • 如果是,這些群組是否包含另一個層級的群組? 例如:功能表項目是否擁有巢狀子清單包含於其中?
  • 在對等控制項之間,使用者是否可以透過 TAB 鍵隨意瀏覽,或您的 UI 是否需要特殊的瀏覽方式,例如:方向鍵?

Horizontal app navigation icons.

應用程式功能表元素/控制項的群組

您的目標,是協助使用者了解 UI 配置的方式,並識別可執行動作的控制項。 如果使用者完成瀏覽迴圈之前需要太多定位處理,請考慮將相關的控制項分組在一起。 某些相關控件,例如混合式控件,可能需要在開發應用程式的早期探索階段解決。 在您開始開發您的產品之後,很難重新修改鍵盤瀏覽,因此請仔細並儘早規劃!

如果要深入了解 UI 元素之間的鍵盤瀏覽,請至下方網址探索 Windows 開發人員中心文件,以了解關於鍵盤協助工具的資訊。

適用於協助工具的工程軟體電子書有一篇探討此主題的實用章節,標題為「設計邏輯階層」。

色彩和對比

Windows 內建的協助工具功能之一是高對比模式,此模式會提高電腦螢幕上文字和影像的色彩對比。 對某些人來說,提升色彩對比能降低眼睛疲勞,並使畫面更容易閱讀。

Two calculator applications with high contrast color schemes.

淺色主題和高對比黑色主題中顯示的小算盤

您應用程式的 UI 必須設計成在使用或沒有高對比模式的檢視情況下,都同樣能正常運作。 例如,當您以高對比度驗證 UI 時,請檢查控件是否一致編碼,而且您使用系統色彩而非硬式編碼色彩。 確定高對比使用者能夠在畫面上看到未使用高對比的使用者能夠看到的所有控制項。

只要您不覆寫系統色彩,通用 Windows 平台 (UWP) 應用程式在所有 Windows 平台上運作,且裝置默認支援高對比度主題。 如果使用者從其裝置的系統設定或協助工具選取高對比主題,UWP 架構會自動使用色彩和樣式設定,為 UI 中的控制項和元件產生高對比的配置和轉譯。

如需詳細資訊,請參閱關於高對比的 Windows 支援文章。

如果您想要針對設計用途 (而不是系統色彩) 使用自己的色彩主題,請考慮下列指南:

色彩對比比例:已更新的美國《復健法 508 條款》和其他法規要求文字及其背景之間的預設色彩對比必須至少為 4.5:1。 比例是指文字和背景的亮度對比。 其中一種方式是將亮度對比視為文字和背景色彩的亮度與暗度之間的差異。 例如:黑色背景的白色文字比例為 21:1。 您可以使用更繽紛的文字和背景配置,但是比例應至少為 4.5:1 或更佳。

大型文字的比例不需要太大。 針對大型文字,所需的預設對比為 3:1。 大型文字定義為字型大小 18點及更大,或 14 點且為 粗體 (以及更大的)。

色彩組合:大約 7% 的男性 (以及小於 1% 的女性) 具有某種形式的色彩缺陷。 身為色盲的使用者有區別特定色彩的問題,因此不應該單獨使用色彩來傳達應用程式中的狀態或意義。 換句話說,請勿在螢幕上提及參考「紅點」。 相反地,您可以包含具有特殊標記或圖形的圖示,如此一來色盲使用者也可以輕鬆地識別。 針對裝飾性的影像 (例如:圖示或背景),色彩組合應該要以色盲使用者能夠最大限度地認知該影像為前提做出選擇。

Examples of home icons with high color contrast and low color contrast.

高色彩對比 (21:1 比例) 的圖示範例,以及低色彩對比 (1:5 比例) 的圖示。

程式設計存取

需要以程式設計方式存取,才能在應用程式中建立協助工具。 以程式設計方式存取可確保 UI 控制項會公開至輔助技術或替代輸出裝置。

若沒有以程式設計方式存取,輔助技術的應用程式開發介面便無法正確地解讀資訊,讓使用者無法有效地使用應用程式或與應用程式互動。 其他人使用的輔助技術,會決定使用者可以採取的動作和選項。 因此,如果應用程式沒有無障礙名稱和描述,輔助技術可能會將數個部分視為無法使用。

例如:內容和互動式 UI 控制項的無障礙名稱和描述,是在應用程式中以程式設計方式存取的重大元素。 針對利用 Microsoft 朗讀程式或點字顯示器的應用程式使用者,影像或按鈕的描述性名稱可協助他們了解並瀏覽應用程式。

如需有關將應用程式 UI 元素提供給輔助技術的詳細資訊,請參閱 Windows 開發人員中心文件,以了解如何公開基本的協助工具資訊

如需有關輔助技術應用程式的詳細資訊,請瀏覽 Microsoft 輔助技術合作夥伴 \(英文\) 的清單。

協助工具檢查清單

如本課程模組所述,需要數個步驟才能讓您的應用程式可供存取。 您可能會發現追蹤檢查清單有助於追蹤開發應用程式時的每個需求。 以下是您可能會發現有用的輔助功能檢查清單縮寫版本:

  1. 針對應用程式中的內容和互動式元素,設置無障礙的名稱 (必要) 和描述 (可選用)。
  2. 實作鍵盤協助工具。
  3. 以視覺化方式驗證您的 UI,以確保文字對比足夠、高對比主題中的元素正確轉譯,以及正確使用色彩。
  4. 執行協助工具、解決回報的問題,以及驗證螢幕閱讀體驗。
  5. 請確定應用程式的所有功能都跟隨協助工具指南。
  6. 在 Microsoft Store 中將您的應用程式宣告為無障礙