無障礙功能樹狀結構簡介
假設您要建構「僅限螢幕閱讀器使用者」的使用者介面, 在這裡,你無須建立任何視覺化 UI,只要提供足夠的內容即可 螢幕閱讀器會用到的資訊
您要建立的項目是描述頁面結構的 API, 但若是如此 因為許多資訊對於視覺呈現的效果很有幫助這項服務 看起來會像這樣
![螢幕閱讀器 DOM API 模擬圖](https://web.developers.google.cn/static/articles/the-accessibility-tree/image/screen-reader-dom-api-moc-86f15b848dd25.jpg?authuser=19&hl=zh-tw)
基本上,這基本上是瀏覽器向螢幕閱讀器顯示的內容。 瀏覽器擷取 DOM 樹狀結構,並修改為實用的形式 輔助技術。我們將這個修改過的樹狀結構稱為「無障礙功能」 樹狀結構。
你可能將無障礙樹狀結構視覺化,看起來與舊版網頁很類似 包括幾張圖片、大量連結 例如欄位和按鈕
![1990 年代風格網頁](https://web.developers.google.cn/static/articles/the-accessibility-tree/image/a-1990s-style-web-page-71a74592e602e.png?authuser=19&hl=zh-tw)
在這個示例中以視覺方式掃描網頁,就能獲得類似以下的體驗: 每個螢幕閱讀器使用者都能享有的體驗這裡的操作介面雖然簡單 非常類似
無障礙樹狀結構是多數輔助技術的互動類別。 就像這樣
- 應用程式 (瀏覽器或其他應用程式) 會顯示其語意版本的 透過 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>
如果核取方塊已正確標示,螢幕閱讀器就能回報 元素具有核取方塊角色、處於勾選狀態,且名稱為「接收」 促銷優惠?」
![VoiceOver 在螢幕上輸出的文字,顯示了核取方塊的朗讀標籤](https://web.developers.google.cn/static/articles/the-accessibility-tree/image/on-screen-text-output-vo-2bf0c33d65f23.png?authuser=19&hl=zh-tw)