本章導讀這是“尋跡校園 HarmonyOS NEXT 實戰”系列第 40 篇。本文以 Bottom/Top/SideNavigation、ReportCard、ReportMedia、PublishFormPage和 2026-08-12 焦點驗收記錄為依據分析 ArkUI 頁面如何用原生Button、accessibilityText、accessibilityDescription、44×44vp 目標與正反向焦點鏈支持鍵盤和輔助技術同時誠實記錄當前圖片刪除按鈕只有 28×28vp、屏幕閱讀器全流程仍未完成等缺口。上圖為原創生成的無障礙交互插畫不是項目截圖。可點擊、可聚焦、可理解、可完成是四個不同層次觸屏能點到不能證明鍵盤和讀屏可用。一、可點擊不等于可訪問一個卡片即使綁定.onClick()仍可能存在Tab 無法進入焦點進入后沒有可見反饋讀屏只播報“按鈕”不知道操作對象圖標按鈕沒有名稱選中態只靠顏色觸控區域小于視覺圖標ShiftTab 跳出應用窗口Phone 和 XL 結構變化后順序混亂。無障礙需要從組件語義、名稱、操作描述、目標尺寸和運行焦點鏈共同驗證。二、本章的真實證據范圍證據路徑能證明什么導航組件entry/src/main/ets/components/*Navigation.ets原生 Button、名稱與描述首頁卡片entry/src/main/ets/pages/HomePage.ets記錄語義與選中說明媒體組件entry/src/main/ets/components/ReportMedia.ets用戶照片/品類兜底名稱發布表單entry/src/main/ets/pages/PublishFormPage.ets輸入名稱、照片添加/刪除按鈕主題尺寸common-ui/src/main/ets/theme/AppTheme.ets44vp 觸控目標基準焦點記錄artifacts/runtime/xunji-responsive-focus-state-audit.mdPhone/XL 模擬器焦點鏈精確輸入記錄artifacts/runtime/xunji-exact-xl-breakpoint-input-audit.mdTab/ShiftTab 與 1280vp 輸入當前沒有完整屏幕閱讀器播報記錄因此本文不會把焦點測試寫成讀屏通過。三、優先用原生 Button 承載動作導航、記錄卡片和候選操作優先使用Button而不是給普通Row綁定點擊。原生交互組件更容易獲得可聚焦語義系統按壓反饋鍵盤觸發enabled/disabled 狀態自動化定位輔助技術的控件角色。普通容器也能補語義但需要承擔更多焦點與狀態責任。四、BottomNavigation 的可訪問名稱Phone 底部導航為每項組合名稱與狀態.accessibilityText(${label}${tab!BottomTab.PUBLISHthis.selectedTabtab?已選中:}).accessibilityDescription(tabBottomTab.PUBLISH?打開登記類型選擇:切換到${label}頁面)視覺上用戶看到圖標和短標簽輔助技術能聽到“首頁已選中切換到首頁頁面”。選中態不再只依賴品牌藍。五、Top 與 Side 為什么保持同一語義契約md 的TopNavigation和 lg/xl 的SideNavigation雖然布局不同都接收同一個BottomTab和onSelect并使用相同頁面名稱。這樣窗口跨斷點后用戶不會在 Phone 聽到“登記”在大屏卻聽到“新增信息”這種不必要的概念變化。視覺編排可變業務詞匯應穩定。六、登記按鈕要描述目的而不是圖標中央加號的可訪問名稱不是“加號”而是.accessibilityText(登記).accessibilityDescription(打開登記類型選擇)圖標形狀是視覺實現用戶真正需要知道的是點擊后進入丟失/拾得登記類型選擇。七、ReportCard 如何播報一條記錄首頁記錄卡片組合業務字段privateaccessibilityLabel():string{return${this.statusLabel()}物品${this.report.title}${this.report.area}${this.report.timeLabel}${this.report.description};}卡片還根據布局提供動作描述Phone 為“打開物品詳情”分欄模式為“在右側預覽物品詳情”當前選中時變為“當前正在右側預覽”。八、名稱不能包含私密核驗信息輔助技術播報仍屬于用戶可感知輸出。記錄卡片只組合公開標題、區域、時間和公開描述不應把拾得記錄的私密核驗特征、聯系方式或剪貼板候選文本放進accessibilityText。無障礙不是擴大數據暴露范圍仍需遵守隱私分層。九、ReportMedia 的兩種名稱媒體組件根據來源提供不同文本.accessibilityText(用戶上傳的物品照片)沒有用戶照片時品類兜底圖使用.accessibilityText(${category}品類示意圖)這一區分很重要示意圖不能播報成真實物品照片否則輔助技術用戶會得到比視覺用戶更錯誤的事實。十、44×44vp 是最低交互基準主題定義exportclassAppSizes{staticreadonlyTOUCH_TARGET:number44;staticreadonlyCONTROL:number48;staticreadonlyPRIMARY_BUTTON:number52;}PageHeader返回按鈕直接使用TOUCH_TARGET篩選和候選按鈕多為 44vp主操作常為 52vp。視覺圖標可以只有 20–24vp但外層 Button 應提供足夠命中區域。十一、當前圖片刪除按鈕暴露了真實缺口PublishFormPage的照片刪除按鈕已經有明確名稱.accessibilityText(刪除第${index1}張照片)但當前尺寸是.width(28).height(28)它小于項目自己的 44vp 基準。名稱合格不代表目標尺寸合格這是當前靜態審計發現的待修復項不能在文章中宣稱“所有按鈕都滿足 44×44vp”。十二、刪除按鈕應擴大命中區而非放大圖標建議保留 18vp 左右的關閉圖標把外層 Button 擴到 44×44vp并使用透明或弱背景Button(×).width(AppSizes.TOUCH_TARGET).height(AppSizes.TOUCH_TARGET).accessibilityText(刪除第${index1}張照片)這樣視覺重量不會變得笨重觸控、鍵盤和自動化定位卻更穩定。本文只提出審計結論沒有修改項目代碼。十三、輸入框為什么需要顯式名稱Placeholder 不是可靠標簽用戶輸入后會消失讀屏行為也可能隨組件和系統版本不同。發布表單為關鍵字段設置物品名稱事件日期或當前日期公開特征私密核驗特征添加第 N 張照片打開系統圖片選擇器。視覺標簽、placeholder、錯誤文案和可訪問名稱應該互相補充而不是互相替代。十四、錯誤提示需要和字段形成關系僅在字段下面顯示紅字讀屏焦點停留在輸入框時可能不知道錯誤已經出現。理想實現需要字段名稱穩定必填與格式要求可理解提交后焦點或播報定位到第一個錯誤錯誤文案描述如何修復紅色不是唯一提示修復后錯誤狀態及時清除。當前文章只確認了部分字段名稱和可見錯誤結構沒有完整讀屏錯誤流證據。十五、enabled 與顏色必須同時更新禁用按鈕既要使用DISABLED/TEXT_DISABLED也要設置.enabled(false)。只改變顏色鍵盤仍可能觸發只禁用不改變視覺用戶又看不出當前不可操作。語義狀態、視覺狀態和交互狀態必須一致。十六、候選按鈕怎樣描述嵌入動作MatchResultsPage在獨立模式和嵌入模式中動作不同.accessibilityDescription(this.embedded?在中間詳情欄預覽此候選:打開候選物品詳情)這比統一播報“查看詳情”更準確因為 XL 中點擊后不會打開新頁面而是更新中欄。十七、焦點順序應服務任務順序Phone 首頁的自然任務順序是搜索類型篩選組合篩選記錄卡片底部導航回到搜索。XL 工作臺則擴展為搜索與篩選 → 左欄記錄 → 中欄詳情操作 → 小藝與候選 → 側欄導航 → 搜索。焦點順序不是 DOM 越短越好而是要符合用戶完成任務的路徑。上圖展示兩套布局的焦點閉環。Phone 經過底欄回到搜索XL 經過三欄與側欄回到搜索避免焦點跳入系統窗口區。十八、為什么需要 ShiftTab 反向測試只測 Tab 正向可能遺漏最后一個控件反向無法回到內容區隱藏組件仍占據焦點順序右欄末端候選無法進入自定義容器只支持單向點擊焦點從側欄跳出應用。精確 1280vp 記錄中Tab 從無焦點進入側欄首頁ShiftTab 反向進入右欄末端候選按鈕證明了當時模擬器輸入鏈路的雙向可達性。十九、布局斷點變化后焦點鏈也會變化sm 沒有側欄與右欄xl 沒有底部導航。斷點切換后不能要求焦點節點完全相同但必須保證當前布局所有關鍵動作可達不可見節點不繼續接收焦點正反向順序閉合業務選擇狀態不因焦點變化丟失用戶可以回到搜索或全局導航。焦點恢復和數據狀態恢復應分別測試。二十、2026-08-12 焦點驗收記錄當時的xunji-responsive-focus-state-audit.md記錄xl 焦點鏈 passed焦點在搜索、篩選、4 張記錄、中間詳情、小藝、3 個候選、側欄與搜索之間閉環377vp Phone 焦點鏈 passedPhone 經過搜索、篩選、4 張記錄、4 個底欄入口回到搜索xl → lg → xl 狀態恢復 passed。這是模擬器與當時構建的證據不能擴展為所有實體鍵盤或當前 release 包。二十一、布局樹證據與視覺截圖各自證明什么截圖適合確認焦點高亮是否可見、頁面是否被遮擋布局樹/節點記錄適合確認控件名稱、邊界和當前焦點。僅看截圖無法確認讀屏名稱僅讀布局樹也無法判斷高亮是否足夠明顯。一次完整驗收應保存兩類證據并記錄輸入動作序列。二十二、空名稱審計怎樣做可以按交互組件清單檢查所有只顯示圖標的 Button圖片添加/刪除返回、關閉、更多選中型篩選候選卡片與狀態卡片日期、Photo Picker、系統能力入口XL 中的嵌入頁面動作。檢查“名稱為空”只是第一步還要判斷名稱是否包含對象、狀態和結果。二十三、可訪問名稱不能使用視覺方向代替對象“點擊右邊按鈕”“藍色圖標”“上面的卡片”都依賴當前布局。斷點變化后這些描述會失效。更穩定的名稱是“切換到消息頁面”“刪除第 2 張照片”“在中間詳情欄預覽此候選”“當前設備中的校園失物記錄”“返回上一頁”。名稱應描述任務不描述偶然位置。二十四、屏幕閱讀器為什么必須獨立驗收鍵盤焦點通過只能證明控件可達和順序基本可用。屏幕閱讀器還涉及控件角色與名稱組合狀態變化播報列表數量與層級表單錯誤和必填圖片替代文本彈窗與焦點鎖定頁面切換后的標題播報中文停頓與長文本可理解性。當前項目沒有完成讀屏全流程因此必須保持not run。二十五、實體外設仍需驗證模擬器注入的KEYCODE_TAB和KEYCODE_SHIFT_LEFT KEYCODE_TAB能證明應用響應但不能替代藍牙鍵盤的系統組合鍵實體鼠標 hover 與點擊觸控板滾動外接顯示器焦點切換輸入法與快捷鍵沖突設備休眠恢復后的焦點。特別是當前首發只聲明 Phone大屏外設仍屬于后續能力驗證。二十六、無障礙驗收清單項目當前證據狀態Phone 正向焦點閉環2026-08-12 模擬器記錄passed有日期XL 正向焦點閉環2026-08-12 模擬器記錄passed有日期1280vp ShiftTab精確斷點記錄passed有日期導航可訪問名稱當前代碼靜態檢查passedReport/Media 名稱當前代碼靜態檢查passed圖片刪除按鈕 44vp當前為 28×28vpfailed屏幕閱讀器全流程無運行記錄not run實體鍵鼠無運行記錄not run把缺口寫進表格比一句“已適配無障礙”更可審查。二十七、工程復盤無障礙是組件契約如果共享導航、PageHeader、ReportCard 和媒體組件在底層擁有正確名稱、尺寸與狀態新頁面更容易繼承一致行為。反之每頁臨時給圖標加點擊會快速積累空名稱和小目標。無障礙 Token、組件語義、頁面焦點順序和真機讀屏驗證應形成完整鏈路不能只在上線前掃描一次。二十八、本文小結“尋跡校園”已經在導航、記錄卡片、媒體、輸入框和候選動作中使用原生 Button 與可訪問名稱并留有 Phone/XL 模擬器焦點閉環和 1280vp 正反向輸入證據。但當前圖片刪除按鈕仍只有 28×28vp屏幕閱讀器全流程和實體鍵鼠也未驗證。準確結論是“部分組件語義與模擬器焦點鏈通過仍有觸控目標與讀屏缺口”而不是籠統宣稱無障礙完成。系列導航第 40 篇 / 共 50 篇。上一篇《1280vp 臨界點狀態恢復》下一篇《ReportMedia 三層媒體策略》。