運用 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 中的無障礙功能」程式碼研究室。
其他資源
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2024-04-23 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2024-04-23 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2024-04-23 (世界標準時間)。"]]