Chrome 開發人員工具即將推出完整的無障礙樹狀結構，讓開發人員更容易掌握整個樹狀結構。本文將帶您瞭解這個樹狀結構的建立方式，以及如何在工作中使用。
什麼是無障礙功能樹狀結構？
螢幕閱讀器等輔助技術會使用 Chromium 的 Accessibility API，與網頁內容互動。這個 API 的基礎模型是無障礙樹狀結構：輔助技術可以查詢屬性和屬性，並對其執行動作的無障礙物件樹狀結構。網頁開發人員主要是透過 DOM 屬性 (例如 HTML 的 ARIA 屬性) 塑造及操控無障礙樹狀結構。
我們在 Chrome 開發人員工具中提供無障礙窗格，協助開發人員瞭解內容以輔助技術公開的方式呈現。具體來說，在 DOM 樹狀結構檢視器中選取節點時，相應無障礙節點的屬性會顯示在窗格中，同時顯示節點的祖系及其直系子項。
樹狀結構的建立方式為何？
在瞭解開發人員工具中的全新完整樹狀檢視功能前，我們先簡單介紹一下無障礙樹狀結構的特徵。無障礙樹狀結構是 DOM 樹狀結構的衍生項目。其結構大致相同，但已簡化移除無語意內容的節點，例如只用於樣式的 <div> 元素。樹狀結構中的每個節點都具有角色，例如 Button 或 Heading，且名稱通常可取自 ARIA 屬性或衍生自節點內容。如果我們查看 HTML 文件：
<html>
<head>
<title>How old are you?</title>
</head>
<body>
<label for="age">Age</label>
<input id="age" type="number" name="age" value="42">
<div>
<button>Back</button>
<button>Next</button>
</div>
</body>
</html>
Chromium 中的轉譯器 (名為 Blink) 大致會產生內部無障礙樹狀結構，如下所示。
role='rootWebArea' focusable name='How old are you?'
role='genericContainer' ignored
role='genericContainer' ignored
role='labelText'
role='staticText' name='Age'
role='spinButton' editable focusable name='Age' value='42'
role='genericContainer' editable
role='staticText' editable name='42'
role='genericContainer'
role='button' focusable name='Back'
role='staticText' name='Back'
role='button' focusable name='Next'
role='staticText' name='Next'
請注意，此表示法包含多個具備 genericContainer 角色的多餘節點，看似與上述陳述式相牴觸，因為無障礙樹狀結構是 DOM 樹狀結構的簡化導引。不過，大部分節點只會出現在內部樹狀結構中，不會出現在輔助技術中。由於開發人員工具會直接從轉譯器程序收集無障礙資訊，因此是由開發人員工具處理的樹狀結構表示法。
開發人員工具中的完整無障礙功能樹狀結構
全新的完整無障礙功能樹狀結構會與 DOM 樹狀結構保持同步，讓開發人員可在兩個樹狀結構之間切換。我們希望新型樹木可以提升探索性、實用度和易用性。
您已瞭解無障礙樹狀結構的運作方式，現在可以使用開發人員工具查看新的樹狀檢視外觀。以下 HTML 文件具有標題、標題和兩個按鈕，以顯示樹狀結構。
<!DOCTYPE html>
<title>Test</title>
<h1>Heading for example page</h1>
<div>
<button>Back</button>
<button>Next</button>
</div>
先前的樹狀檢視只能讓您探索單一節點及其祖系。
現在，當您切換新樹狀結構時，它會取代 DOM 樹狀檢視，可讓您查看網頁的完整無障礙樹狀結構：
懶樹施工
為了提升樹系在大型園區中的效能，我們在進行研究時，在前端延遲建構該樹狀結構。在樹狀結構中展開節點後，系統會透過 Chrome 開發人員工具通訊協定 (CDP) 擷取節點的子項，並重新建構樹狀結構。
直播
新的樹狀檢視功能已上線，如果轉譯器中的無障礙樹狀結構變更，系統會動態更新。它和的機制一樣，可以通知輔助技術變更樹狀結構，並據此將事件發出到具有更新節點的開發人員工具前端。實際上，CDP 後端會監聽樹狀結構的更新、追蹤先前要求的節點，如果其中有任何節點變更，系統會將事件傳送至開發人員工具前端。
許多樹木的故事
在無障礙功能樹狀結構的說明中，您瞭解 Blink 如何為要轉譯的 DOM 建構無障礙樹狀結構，而開發人員工具是透過 CDP 擷取這個樹狀結構。雖然這確實如此，但我們在說明中遺漏了一些併發症。事實上，Chromium 中無障礙樹狀結構有許多不同的體驗。為開發人員工具設計新的樹狀檢視時，我們已在流程中做了一些選擇，決定要在 Chromium 的無障礙功能內部中顯示哪些功能。
平台
每個平台都有不同的無障礙 API，雖然所有平台的樹狀結構形狀都相同，但用於與樹狀結構互動的 API 都不同，屬性名稱也可能會有所不同。開發人員工具會顯示 Chromium 的內部樹狀結構，其中角色和屬性通常與 ARIA 規格中定義的角色相符。
多個頁框和網站隔離
Chromium 不僅會將每個分頁的內容放入不同的轉譯器程序，也在不同轉譯器程序中隔離跨網站文件，因此我們必須透過 CDP 分別連線至每個處理外的子文件，並擷取其無障礙樹狀結構。接著，我們會將這些子樹狀結構拼接在前端，藉此營造出一個連貫樹狀結構的圖示，雖然這些子樹狀結構位於 Chromium 的不同轉譯器程序中。
已忽略和不感興趣的節點
系統預設會隱藏部分節點：系統會忽略的節點以及角色為「一般」且沒有名稱的節點。這些節點沒有語意含義，如果節點遭到忽略的節點，輔助技術也不會曝露。我們隱藏這些節點，以免樹狀檢視過於雜亂。如果我們沒有這麼做，大部分網頁的無障礙樹狀結構看起來會像這樣：
這裡要注意的是，這基本上代表我們需要建構另一個不同於後端可用的樹狀結構。舉例來說，假設節點 A、B、C 和 X 具有子項 X 和 B，X 則是子 C。如果 X 是忽略的節點，我們會從樹狀結構中修剪 X，而是改為建立樹狀結構，其中 C 是 A 的子項到 A。
在前端，我們會建構包含忽略的節點的完整樹狀結構，且在轉譯節點前只會修剪這些節點。這麼做的原因有二：
- 從後端處理節點更新更簡單，因為兩個端點上的樹狀結構結構都相同。舉例來說，如果範例中的節點 B 遭到移除，我們會收到節點 X 的更新 (因為其子項已變更)，但如果裁舊節點，我們就很難判斷應該更新什麼。
- 這可確保所有 DOM 節點都有對應的無障礙節點。切換樹狀結構時，我們會選取與目前在 DOM 樹狀結構中選取的節點相對應的節點。因此，在上一個範例中，如果使用者在選取與 X 對應的 DOM 節點時切換樹狀結構，我們會在節點 A 和 B 之間插入 X，然後在樹狀結構中選取 X。如此一來，使用者就能檢查所有 DOM 節點的無障礙節點，並協助判斷系統忽略該節點的原因。
未來構想
推出新的無障礙樹狀結構只是第一步。對於日後的專案，我們有幾項想法可以根據新的觀點製作，我們也非常希望收到您的寶貴意見！
其他篩選方式
如上所述，我們目前會過濾掉系統認為不感興趣的節點。我們可以停用這項行為並顯示所有節點，或提供其他篩選條件，例如「顯示地標節點」或「顯示標題」。
醒目顯示無障礙問題
我們可以運用樹狀結構進行「無障礙最佳做法」分析，並直接在違規節點上醒目顯示無障礙功能問題。
在開發人員工具中顯示無障礙功能動作
我們目前顯示的樹狀結構只有單向：可讓我們瞭解在瀏覽特定網頁時，輔助技術會傳輸哪些資訊。無障礙動作代表雙向的通訊方式，可讓輔助技術根據顯示的 UI 執行相應動作。我們可在開發人員工具中顯示這類動作，以便透過輔助技術使用的 API 執行「點擊」、「捲動」或變更頁面值。