Chrome無(wú)障礙樹(shù)查看器用於檢查網(wǎng)頁(yè)元素如何被屏幕閱讀器解析，幫助發(fā)現(xiàn)標(biāo)籤缺失、角色錯(cuò)誤等問(wèn)題。 1. 打開(kāi)DevTools後在Elements面板選中元素，於Computed標(biāo)籤頁(yè)下的Accessibility面板查看；2. 點(diǎn)擊“Show accessibility tree”可查看整頁(yè)無(wú)障礙結(jié)構(gòu)；3. 僅具可訪問(wèn)性語(yǔ)義的元素會(huì)出現(xiàn)在無(wú)障礙樹(shù)中，如帶role或aria-label的div、input、h1-h6、a等；4. 檢查時(shí)關(guān)注角色、名稱、狀態(tài)和屬性是否正確，例如確保按鈕有aria-label，避免角色誤用；5. 可結(jié)合Lighthouse進(jìn)行整體無(wú)障礙評(píng)分與分析。

Chrome 的無(wú)障礙樹(shù)查看器（Accessibility Tree Viewer）是一個(gè)非常實(shí)用的開(kāi)發(fā)者工具，可以幫助你查看網(wǎng)頁(yè)中元素是如何被屏幕閱讀器等輔助技術(shù)解析和呈現(xiàn)的。它能幫你快速發(fā)現(xiàn)無(wú)障礙方面的問(wèn)題，比如標(biāo)籤缺失、角色錯(cuò)誤或?qū)傩圆煌暾取?

打開(kāi)無(wú)障礙樹(shù)查看器

首先，你需要打開(kāi)Chrome 開(kāi)發(fā)者工具（DevTools），可以通過(guò)右鍵頁(yè)面任意位置選擇“檢查”，或者使用快捷鍵F12或Ctrl Shift I （Mac 上是Cmd Option I ）。

接著，在Elements 面板中選中一個(gè)DOM 元素，然後在右側(cè)找到Computed標(biāo)籤頁(yè)，在底部會(huì)看到一個(gè)叫Accessibility的面板。點(diǎn)開(kāi)後就能看到該元素在無(wú)障礙樹(shù)中的表現(xiàn)。

如果你想要更清晰地查看整個(gè)頁(yè)面的無(wú)障礙結(jié)構(gòu)，可以點(diǎn)擊Accessibility 面板裡的“Show accessibility tree” 按鈕，這時(shí)候會(huì)顯示整個(gè)頁(yè)面的無(wú)障礙節(jié)點(diǎn)層級(jí)。

理解無(wú)障礙樹(shù)的結(jié)構(gòu)

無(wú)障礙樹(shù)類似於DOM 樹(shù)，但不是所有DOM 節(jié)點(diǎn)都會(huì)出現(xiàn)在無(wú)障礙樹(shù)中。只有那些具有可訪問(wèn)性語(yǔ)義（如role、label、狀態(tài)等）的元素才會(huì)被包含進(jìn)來(lái)。

例如：

• 一個(gè)<div>默認(rèn)不會(huì)出現(xiàn)在無(wú)障礙樹(shù)里<li>加了<code>role="button"或aria-label的<div>就會(huì)被包含進(jìn)去<li>表單控件如<code><input> 、標(biāo)題<h1></h1>到<h6></h6> 、鏈接<a></a>等通常都會(huì)出現(xiàn)在無(wú)障礙樹(shù)中

在查看時(shí)，你可以看到每個(gè)節(jié)點(diǎn)的角色（role）、名稱（name）、狀態(tài)（states）和屬性（properties）。這些信息對(duì)理解用戶如何通過(guò)讀屏軟件感知內(nèi)容非常重要。

---

常見(jiàn)問(wèn)題與檢查建議

以下是一些你在使用無(wú)障礙樹(shù)查看器時(shí)可能會(huì)遇到的問(wèn)題，以及對(duì)應(yīng)的檢查方法：

• 元素沒(méi)有出現(xiàn)在無(wú)障礙樹(shù)中：可能是缺少必要的語(yǔ)義標(biāo)籤或交互功能?？紤]添加tabindex 、 role或aria-label 。
• 名稱（name）為空：這會(huì)導(dǎo)致屏幕閱讀器無(wú)法正確描述元素用途。確保使用了aria-label 、 aria-labelledby或文本內(nèi)容來(lái)提供名稱。
• 角色（role）不合適：比如用role="heading"來(lái)模擬標(biāo)題但沒(méi)有設(shè)置正確的層級(jí)。盡量使用原生HTML 標(biāo)籤，或者確保ARIA 角色使用得當(dāng)。
• 狀態(tài)和屬性缺失：比如按鈕是否被禁用、複選框是否被選中等狀態(tài)，應(yīng)該通過(guò)ARIA 屬性明確表達(dá)。

舉個(gè)例子：如果你有一個(gè)圖標(biāo)按鈕，只用了<span class="icon"></span> ，那它默認(rèn)不會(huì)出現(xiàn)在無(wú)障礙樹(shù)中。你需要加上role="button"和aria-label="關(guān)閉"這樣的屬性，才能讓屏幕閱讀器識(shí)別它的作用。

---

結(jié)合Lighthouse 做綜合評(píng)估

除了直接查看無(wú)障礙樹(shù)外，你還可以結(jié)合Chrome DevTools 中的Lighthouse功能做一次全面的無(wú)障礙評(píng)分。

進(jìn)入DevTools 後點(diǎn)擊Lighthouse標(biāo)籤，勾選“Accessibility”，運(yùn)行測(cè)試後會(huì)得到一份詳細(xì)的報(bào)告，包括對(duì)比度、鍵盤導(dǎo)航、ARIA 使用等多個(gè)維度的建議。

這種方法更適合整體評(píng)估網(wǎng)站無(wú)障礙水平，而無(wú)障礙樹(shù)查看器則更適合逐個(gè)排查具體元素的問(wèn)題。

---

基本上就這些。熟練使用無(wú)障礙樹(shù)查看器，能幫助你更快定位並修復(fù)網(wǎng)頁(yè)中隱藏的無(wú)障礙問(wèn)題。雖然看起來(lái)有點(diǎn)技術(shù)性，但只要多看看常見(jiàn)模式，很快就能上手。