運用 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 中的無障礙功能」程式碼研究室。

其他資源