無障礙樹狀結構

無障礙樹狀結構簡介

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

假設您要建構僅供螢幕閱讀器使用者使用的使用者介面。您完全不需要建立任何視覺 UI,只需提供足夠的資訊,讓螢幕閱讀器使用即可。

您要建立的 API 類型是用來描述網頁結構的 API,類似於 DOM API,但您可以使用較少的資訊和節點,因為許多資訊只適用於視覺呈現。可能如下所示:

螢幕閱讀器 DOM API 模擬圖

這基本上是瀏覽器實際向螢幕閱讀器呈現的內容。瀏覽器會將 DOM 樹狀結構修改為輔助技術可用的格式。我們稱這個經過修改的樹狀圖為「無障礙樹狀圖」

您可以將無障礙樹狀圖視為 90 年代的舊網頁:幾張圖片、大量連結,以及一個欄位和按鈕。

1990 年代風格的網頁

在這種情況下,透過視覺掃描方式向下瀏覽網頁,就能獲得類似螢幕閱讀器使用者所獲得的體驗。介面雖然存在,但簡單直接,類似無障礙樹狀介面。

無障礙樹狀結構是大多數輔助技術互動的對象。流程大致如下所示。

  1. 應用程式 (瀏覽器或其他應用程式) 透過 API,將其 UI 的語意版本公開給輔助技術。
  2. 輔助技術可能會使用透過 API 讀取的資訊,為使用者建立其他使用者介面呈現方式。舉例來說,螢幕閱讀器會建立使用者可聽到應用程式語音呈現方式的介面。
  3. 輔助技術也可能讓使用者以不同方式與應用程式互動。舉例來說,大多數螢幕閱讀器都提供鉤子,讓使用者輕鬆模擬滑鼠點擊或手指輕觸動作。
  4. 輔助技術會透過無障礙 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>

當核取方塊已正確標示時,螢幕閱讀器就能回報元素的角色為核取方塊、處於勾選狀態,且名稱為「Receive promotional offers?」。

VoiceOver 的螢幕上文字輸出內容,顯示核取方塊的語音標籤