Chrome 開發人員工具即將推出完整的無障礙功能樹狀結構，讓開發人員更容易瞭解整個樹狀結構。在這篇文章中，您將瞭解這個樹狀結構的建立方式，以及如何在工作中運用。
什麼是無障礙樹狀結構？
螢幕閱讀器等輔助技術會使用 Chromium 的無障礙 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 節點，其中 A 有子 X 和 B，X 則有子 C。如果 X 是忽略的節點，我們會從樹狀結構中縮減 X，改為建立樹狀結構，其中 C 是 A 的子項。
在前端建構完整的樹狀結構 (包括已忽略的節點)，且僅在轉譯節點之前修剪這些節點。我們這麼做的原因有二：
- 由於兩個端點都具有相同的樹狀結構結構，因此從後端處理節點更新會簡單許多。例如，如果範例中的節點 B 已移除，我們便會收到節點 X 的更新 (因為其子項已變更)，但如果我們刪減該節點，就會很難想出應該更新哪些內容。
- 這個做法能確保所有 DOM 節點都有對應的無障礙節點。切換樹狀結構時，我們會選取與目前 DOM 樹狀結構中所選節點相對應的節點。因此，在前例中，如果使用者在選取 X 對應的 DOM 節點時切換樹狀結構，我們會在節點 A 和 B 之間插入 X，然後在樹狀結構中選取 X。這可讓使用者檢查所有 DOM 節點的無障礙節點，並判斷忽略該節點的原因。
未來構想
啟動新的無障礙樹狀結構只是第一步。在新檢視畫面中，我們可以針對未來的專案提供一些構想，但我們也非常想瞭解你的寶貴意見！
其他篩選方式
如上所述，我們目前會篩除不感興趣的節點。我們可以提供方法來停用這項行為並顯示所有節點，或提供替代篩選功能，例如「顯示地標節點」或「顯示標題」。
醒目顯示無障礙功能
我們可以將「無障礙功能最佳做法」分析與樹狀結構結合，並直接在違規的節點上強調無障礙功能的問題。
在開發人員工具中顯示無障礙功能操作
目前我們顯示的樹狀圖是單向的，也就是說，我們在瀏覽特定網頁時，能夠得知哪些資訊會提供給輔助技術。無障礙動作代表雙向通訊，可讓輔助技術在畫面上顯示的 UI 上運作。我們可在開發人員工具中顯示這類動作，讓使用者透過輔助技術提供的 API 在網頁上執行「點擊」、「捲動」或變更值等動作。