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