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 在網頁上執行「點擊」、「捲動」或變更值等動作。