運用 Jetpack Compose 導入無障礙設計

如果想打造所有人都能使用的多元包容應用程式,就必須善用無障礙功能。 Compose 為建構無障礙 UI 提供基礎,讓您的應用程式不論在何處都能使用。

核心概念

  • 語意:代表無障礙服務 UI 元素意義的系統。包括說明、狀態,以及使用者可執行的動作等屬性。

  • 週遊:TalkBack 等無障礙服務在畫面中元素瀏覽的順序。您可以自訂這個順序,提供更優質的使用者體驗。

  • 無障礙功能動作:使用者可對 UI 元素執行的特定動作,例如點擊、捲動和關閉。您的應用程式會將使用者傳送至無障礙服務。

開始使用

Compose 無障礙模型和工具的基礎是語意。詳情請參閱 Compose 中的語意指南。

開發應用程式時,請注意下列重要步驟,即可改善 Compose 應用程式的無障礙功能:

  • 考量最小觸控目標大小請確保可點擊和互動式元素至少為 48dp。這種做法符合 Material Design 無障礙功能指南。
  • 新增點擊標籤如果您無法直接存取 clickable,請使用 clickable 修飾符或 semantics 修飾符描述點擊行為。
  • 描述視覺元素使用 contentDescription 參數以文字說明圖示和圖片。對於裝飾元素,請將 contentDescription 設為 null
  • 定義標題使用 semantics 修飾符屬性將元素標示為標題,以便輕鬆瀏覽。
  • 控制遍歷順序使用 isTraversalGroup 標記應一併讀取的元素群組。使用 traversalIndex 進一步自訂這些群組中的元素順序。

詳情請參閱專屬的「改善 Compose 無障礙功能的關鍵步驟」指南。

工具

  • TalkBack適用於 Android 的 Google 螢幕閱讀器,啟用這項功能後,即可針對採用輔助技術的使用者,測試應用程式語意的運作方式。
  • 版面配置檢查器以視覺化方式呈現應用程式的語意樹狀結構,並進行偵錯。
  • Compose 測試 API編寫與語意元素互動的測試,聲明 Compose UI 的無障礙功能。

程式碼研究室

如要進一步瞭解如何在 Compose 程式碼中支援無障礙功能,請參考「Jetpack Compose 中的無障礙功能」程式碼研究室。

其他資源