無障礙樹狀結構

無障礙樹狀結構簡介

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

假設您要建構的使用者介面「僅供螢幕閱讀器使用者」。在這裡,您無需建立任何視覺 UI,只要提供充足的資訊讓螢幕閱讀器使用即可。

您建立的 API 與 DOM API 類似,可用來說明頁面結構,但可以省時又較少資訊,因為大量資訊只能在視覺呈現時派上用場。看起來會像這樣。

螢幕閱讀器 DOM API 模擬

基本上,瀏覽器實際顯示在螢幕閱讀器的畫面上。瀏覽器會擷取 DOM 樹狀結構,並修改為有助於輔助技術的形式。我們將這個修改過的樹狀結構稱為「無障礙功能樹狀結構」。

您可以將無障礙功能樹狀結構視覺化,就像是 90 年代的舊網頁:幾張圖片、許多連結,或許一個欄位和一個按鈕。

1990 年代風格網頁

像這樣以視覺方式掃描頁面,就能提供與螢幕閱讀器使用者類似的體驗。這個頁面有介面,但簡單易用 與無障礙功能樹狀結構介面類似

無障礙樹狀結構是與大多數輔助技術互動的依據。流程大致如下。

  1. 應用程式 (瀏覽器或其他應用程式) 會公開 UI 的語意版本,以便透過 API 使用輔助技術。
  2. 輔助技術可能會使用透過 API 讀取的資訊,為使用者建立替代使用者介面呈現方式。舉例來說,螢幕閱讀器會建立介面,讓使用者聽到應用程式的語音呈現內容。
  3. 輔助技術也可能允許使用者以其他方式與應用程式互動。舉例來說,大多數螢幕閱讀器都提供掛鉤,讓使用者可以輕鬆模擬點按或手指輕觸的動作。
  4. 輔助技術透過無障礙功能 API 將使用者意圖 (例如「點擊」) 轉發回應用程式。然後,應用程式有責任在原始 UI 環境中適當解讀動作。

對網路瀏覽器來說,每個方向都還有一個額外步驟,因為瀏覽器實際上就是在其中執行的網頁應用程式平台。因此,瀏覽器需要將網頁應用程式轉譯成無障礙樹狀結構,並確保瀏覽器會根據輔助技術內的使用者動作,在 JavaScript 中觸發適當的事件。

但這才是瀏覽器的一切責任。我們身為網頁程式開發人員的職責,就是知道這會發生的情況,並會運用這個程序開發網頁,為使用者打造易於存取的體驗。

具體做法為確保我們能正確表達網頁的語意:確保網頁上的重要元素具有正確的可存取角色、狀態和屬性,並且指定可存取的名稱和說明。瀏覽器接著可讓輔助技術存取這些資訊,進而打造符合個人需求的體驗。

原生 HTML 中的語意

瀏覽器可將 DOM 樹狀結構轉換為無障礙功能樹狀結構,因為大部分的 DOM 都有「隱含」語義的意義。也就是說,DOM 會使用瀏覽器可辨識且在各種平台上可預測運作的原生 HTML 元素。系統會自動處理連結或按鈕等原生 HTML 元素的無障礙功能。只要編寫 HTML 來表達網頁元素的語意,就能利用這項內建無障礙功能。

不過,有時我們會使用看起來像原生元素,但事實的元素。比方說,「按鈕」不算是按鈕。

給我墨西哥夾餅

可能以多種方式在 HTML 中建構,如下所示。

<div class="button-ish">Give me tacos</div>

如果不使用實際的按鈕元素,螢幕閱讀器就無法得知實際導向的內容。此外,我們必須額外執行新增 Tab 鍵的工作,讓只有鍵盤的使用者能使用。由於程式碼現在經過編碼,因此只能搭配滑鼠使用。

您可以使用一般的 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 畫面文字輸出內容顯示核取方塊的語音標籤