無障礙功能樹狀結構簡介
假設您要建構「僅限螢幕閱讀器使用者」的使用者介面， 在這裡，你無須建立任何視覺化 UI，只要提供足夠的內容即可 螢幕閱讀器會用到的資訊
您要建立的項目是描述頁面結構的 API， 但若是如此 因為許多資訊對於視覺呈現的效果很有幫助這項服務 看起來會像這樣
基本上，這基本上是瀏覽器向螢幕閱讀器顯示的內容。 瀏覽器擷取 DOM 樹狀結構，並修改為實用的形式 輔助技術。我們將這個修改過的樹狀結構稱為「無障礙功能」 樹狀結構。
你可能將無障礙樹狀結構視覺化，看起來與舊版網頁很類似 包括幾張圖片、大量連結 例如欄位和按鈕
在這個示例中以視覺方式掃描網頁，就能獲得類似以下的體驗： 每個螢幕閱讀器使用者都能享有的體驗這裡的操作介面雖然簡單 非常類似
無障礙樹狀結構是多數輔助技術的互動類別。 就像這樣
- 應用程式 (瀏覽器或其他應用程式) 會顯示其語意版本的 透過 API 將 UI 轉換為輔助技術。
- 輔助技術可能會使用透過 API 讀取的資訊 為使用者建立替代的使用者介面呈現方式例如： 螢幕閱讀器建立介面，讓使用者可以聽到語音 應用程式的表示法
- 輔助技術可能也會讓使用者在 改變。舉例來說，大多數螢幕閱讀器都提供掛鉤 方便使用者模擬點按或輕觸滑鼠的動作
- 輔助技術將使用者意圖 (例如「點擊」) 轉發回 透過無障礙 API 存取應用程式接著，應用程式會負責 根據原始使用者介面的內容適當解讀動作。
在網路瀏覽器中，每個方向都需要額外的步驟，因為瀏覽器 實際上是執行網頁應用程式的平台。因此瀏覽器 會將網頁應用程式轉譯為無障礙樹狀結構，並且務必 會根據發生的使用者動作，在 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>
如果核取方塊已正確標示，螢幕閱讀器就能回報 元素具有核取方塊角色、處於勾選狀態，且名稱為「接收」 促銷優惠？」
