ARIA 簡介

ARIA 和非原生 HTML 語意簡介

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

到目前為止,我們鼓勵您使用原生 HTML 元素,因為這類元素能夠提供焦點、鍵盤支援和內建語意功能,但有時有些簡單的版面配置和原生 HTML 無法正常運作。舉例來說,彈出式選單目前並沒有標準化的 HTML 元素,適用於非常常見的 UI 結構。而且沒有提供語意特性的 HTML 元素,例如「使用者需要盡快知道這一點」。

在本課程中,我們將探討如何表示 HTML 無法自行表達的語意。

Web Accessibility Initiative 的無障礙豐富網際網路應用程式規格 (WAI-ARIA,或簡稱 ARIA) 非常適合用於處理無法使用原生 HTML 管理無障礙功能問題的區域。運作原理時,您可以指定屬性來修改元素,將元素轉譯成無障礙樹狀結構。我們來看看範例

在以下程式碼片段中,我們會使用清單項目做為自訂核取方塊。CSS「核取方塊」類別會提供元素所需的視覺特性。

<li tabindex="0" class="checkbox" checked>
    Receive promotional offers
</li>

雖然這樣方便視障使用者順利操作,但螢幕閱讀器不會顯示該元素應勾選的核取方塊,因此低視能使用者可能會完全遺漏該元素。

不過,使用 ARIA 屬性我們就能提供元素缺少的資訊,讓螢幕閱讀器正確解讀。我們在這裡新增了 rolearia-checked 屬性,明確將元素識別為核取方塊,並藉此指定該元素預設為已勾選。清單項目現在會新增至無障礙樹狀結構,螢幕閱讀器會正確回報為核取方塊。

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
    Receive promotional offers
</li>

ARIA 的運作方式是變更及擴充標準 DOM 無障礙樹狀結構。

標準 DOM 無障礙樹狀結構。
ARIA 擴增無障礙功能樹狀結構。

雖然 ARIA 允許我們針對頁面上任何元素稍微修改 (甚至是大幅) 無障礙樹狀結構,這是唯一的變更。ARIA 不會擴增任何元素的固有行為,也不會讓元素成為可聚焦元素,也不會為其提供鍵盤事件監聽器。而這只是我們的開發任務的一部分

請務必瞭解,不需要重新定義預設語意。不論用途為何,標準 HTML <input type="checkbox"> 元素都不需要額外的 role="checkbox" ARIA 屬性即可正確公告。

另外值得注意的是,特定 HTML 元素對這些 ARIA 角色和屬性可使用的 ARIA 角色和屬性有所限制。舉例來說,標準 <input type="text"> 元素可能未套用任何其他角色/屬性。

詳情請參閱 HTML 規格中的 ARIA

我們來看看 ARIA 還有哪些功能。

ARIA 可以執行哪些操作?

如核取方塊範例所示,ARIA 可以修改現有元素語意,或將語意新增至沒有原生語意的元素。也可以表達完全不存在於 HTML 中的語意模式,例如選單或分頁面板。我們通常可以透過 ARIA 建立純 HTML 無法使用的小工具類型元素。

  • 舉例來說,ARIA 可以新增僅適用於輔助技術 API 的額外標籤和說明文字。
<button aria-label="screen reader only label"></button>
  • ARIA 可以表示延伸標準父項/子項連線的元素之間的語意關係,例如控制特定區域的自訂捲軸。
    <div role="scrollbar" aria-controls="main"></div>
    <div id="main">
    . . .
    </div>
  • ARIA 就可以讓部分網頁「上線」,在資訊變更時立即通知輔助技術。
    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

ARIA 系統的核心層面是一組角色,無障礙術語中的角色專用於特定 UI 模式的簡短指標。ARIA 提供模式詞彙,我們可透過任何 HTML 元素的 role 屬性使用。

在上述範例中套用 role="checkbox" 時,我們可告知輔助技術,元素應遵循「核取方塊」模式。也就是說,我們保證該狀態會處於已勾選狀態 (已勾選或未勾選),且可用滑鼠或空格鍵切換狀態,就像標準 HTML 核取方塊元素一樣。

事實上,由於鍵盤互動功能在螢幕閱讀器的使用情況中特別明顯,因此請務必確保在建立自訂小工具時,role 屬性一律套用在與 tabindex 屬性相同的位置,這可確保鍵盤事件導向正確的位置,並確保當焦點位於元素所在位置時,能夠準確傳達其角色。

ARIA 規格說明 role 屬性可能值和相關 ARIA 屬性的分類,可以搭配這些角色使用。這是最佳資訊來源,提供 ARIA 角色和屬性搭配運作的方式,以及如何透過瀏覽器和輔助技術所支援的方式使用這些項目。

所有可用 ARIA 角色的清單。

不過,規格相當密集;如要從這裡開始,請參閱 ARIA 編寫做法文件,其中探索了使用可用 ARIA 角色和屬性的最佳做法。

ARIA 也提供了界限角色,可以擴充 HTML5 中的可用選項。詳情請參閱地標角色設計模式規格。