無障礙樹狀結構簡介
假設您要建構的是僅限螢幕閱讀器使用者的使用者介面，在這裡，您不必建立任何視覺化 UI，只要提供足夠的資訊讓螢幕閱讀器使用即可。
您要建立的 API 是描述頁面結構的 API，與 DOM API 類似，但即使提供的資訊較少，節點也較少，因為許多資訊都僅適用於視覺呈現。可能如下所示：
這基本上是瀏覽器實際向螢幕閱讀器呈現的內容。瀏覽器會將 DOM 樹狀結構修改為輔助技術可用的格式。我們稱這個經過修改的樹狀圖為「無障礙樹狀圖」。
您可能會將無障礙樹狀結構視覺化，看起來像是 90 年代的舊網頁：幾張圖片、大量連結，例如欄位和按鈕。
在這個案例中，以視覺方式掃描網頁，可提供與螢幕閱讀器使用者相似的體驗。介面雖然存在，但簡單直接，就像無障礙樹狀結構介面一樣。
無障礙樹狀結構是多數輔助技術的互動類別。流程大致如下。
- 應用程式 (瀏覽器或其他應用程式) 透過 API，將其 UI 的語意版本公開給輔助技術。
- 輔助技術可能會使用透過 API 讀取的資訊，為使用者建立其他使用者介面呈現方式。舉例來說，螢幕閱讀器會建立使用者可聽到應用程式語音呈現方式的介面。
- 輔助技術也可能允許使用者以不同的方式與應用程式互動。舉例來說，大多數螢幕閱讀器都提供鉤子，讓使用者輕鬆模擬滑鼠點擊或手指輕觸動作。
- 輔助技術會透過無障礙 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>
如果核取方塊加上正確標籤，螢幕閱讀器就能回報元素具備核取方塊的角色、處於勾選狀態，且名稱為「要接收促銷優惠嗎？」。
