無障礙樹狀結構簡介
假設您要建構專為螢幕閱讀器使用者設計的使用者介面。在這裡，您完全不需要建立任何視覺 UI，只要提供足夠的資訊供螢幕閱讀器使用即可。
您要建立的是一種描述頁面結構的 API，類似於 DOM API，但您可以減少資訊和節點，因為許多資訊僅適用於視覺呈現。看起來可能像這樣。
基本上，這就是瀏覽器實際向螢幕閱讀器呈現的內容。瀏覽器會擷取 DOM 樹狀結構，並將其修改為適合輔助技術使用的格式。我們將這個修改後的樹狀結構稱為「無障礙樹狀結構」。
您可以將無障礙樹狀結構想像成 90 年代的舊網頁：幾張圖片、許多連結，可能還有一個欄位和一個按鈕。
像這樣用視覺掃描網頁，就能獲得與螢幕閱讀器使用者類似的體驗。雖然有介面，但簡單直接，就像無障礙樹狀結構介面。
無障礙樹狀結構是大多數輔助技術互動的對象。流程大致如下。
- 應用程式 (瀏覽器或其他應用程式) 會透過 API，向輔助技術公開其 UI 的語意版本。
- 輔助技術可能會使用透過 API 讀取的資訊，為使用者建立替代的使用者介面。舉例來說，螢幕閱讀器會建立一個介面，讓使用者聽取應用程式的語音表示法。
- 輔助技術也可能允許使用者以不同方式與應用程式互動。舉例來說，大多數螢幕閱讀器都提供掛鉤，讓使用者輕鬆模擬滑鼠點擊或手指輕觸。
- 輔助技術會透過 Accessibility API，將使用者意圖 (例如「點擊」) 傳回應用程式。接著，應用程式會負責在原始 UI 的情境中適當解讀動作。
如果是網路瀏覽器，每個方向都會多一個步驟，因為瀏覽器實際上是網頁應用程式的平台，網頁應用程式會在瀏覽器中執行。因此，瀏覽器必須將網頁應用程式轉譯為無障礙樹狀結構，並確保根據輔助技術傳入的使用者動作，在 JavaScript 中觸發適當的事件。
但這完全是瀏覽器的責任。網頁程式開發人員的工作，就是瞭解這個過程，並開發利用這個過程的網頁，為使用者打造無障礙體驗。
為此，我們會確保正確表達網頁語意：確認網頁中的重要元素具有正確的無障礙角色、狀態和屬性，並指定無障礙元素名稱和說明。瀏覽器接著會允許輔助技術存取該資訊，打造自訂體驗。
原生 HTML 的語意
瀏覽器可以將 DOM 樹狀結構轉換為無障礙樹狀結構，因為 DOM 的大部分內容都具有「隱含」語意。也就是說，DOM 使用瀏覽器可辨識的原生 HTML 元素，且在各種平台上都能正常運作。因此，系統會自動處理原生 HTML 元素 (例如連結或按鈕) 的無障礙功能。只要編寫 HTML 來表達網頁元素的語意，就能善用這項內建無障礙功能。
不過，有時我們會使用看起來像原生元素，但實際上並非原生元素的元素。舉例來說，這個「按鈕」根本不是按鈕。
這項元素可以透過多種方式在 HTML 中建構，以下是其中一種方式。
<div class="button-ish">Give me tacos</div>
如果我們不使用實際的按鈕元素，螢幕閱讀器就無法得知其所在位置。此外，我們還必須額外新增 tabindex，才能讓僅使用鍵盤的使用者使用，因為以目前的程式碼來說，只能使用滑鼠。
只要使用一般 button 元素，而非 div，即可輕鬆修正這個問題。使用原生元素還有一個好處，就是可以處理鍵盤互動。請記住，您不必因為使用原生元素而失去精美的視覺效果；您可以設定原生元素的樣式，使其看起來符合您的需求，同時仍保留隱含的語意和行為。
我們在前面提過，螢幕閱讀器會朗讀元素的角色、名稱、狀態和值。使用正確的語意元素，即可涵蓋角色、狀態和值，但我們也必須確保元素名稱可供偵測。
名稱大致分為兩類：
- 可見標籤：所有使用者都可使用，用於將意義與元素建立關聯。
- 文字替代項目：僅在不需要視覺標籤時使用。
對於文字層級元素，我們不需要執行任何操作，因為根據定義，這類元素會包含一些文字內容。不過，對於輸入或控制項元素，以及圖片等視覺內容，我們必須確保指定名稱。事實上，為任何非文字內容提供替代文字，是 WebAIM 檢查清單的第一個項目。
其中一個方法是遵循「表單輸入內容具有相關聯的文字標籤」建議。將標籤與表單元素 (例如核取方塊) 建立關聯的方法有兩種。無論採用哪種方法，標籤文字也會成為核取方塊的點擊目標，這對滑鼠或觸控螢幕使用者也很有幫助。如要將標籤與元素建立關聯，請
- 將輸入元素放在標籤元素中
<label>
<input type="checkbox">Receive promotional offers?
</label>或
- 使用標籤的
for屬性，並參照元素的id
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>
正確標示核取方塊後，螢幕閱讀器就能回報該元素具有核取方塊角色、處於勾選狀態，且名稱為「接收促銷優惠？」。
