ARIA 簡介

迄今爲止,我們一直在鼓勵使用原生 HTML 元素,因爲它們可爲您提供焦點、鍵盤支持和內置語義,但有時簡單佈局和原生 HTML 達不到目的。例如,彈出式菜單這個很常見的 UI 構件目前尚無相應的標準化 HTML 元素。 也沒有提供“用戶需要儘快瞭解與此有關的信息”之類語義特性的 HTML 元素。

因此,在本節課中,我們將探究如何表達 HTML 無法自行表達的語義。

無障礙網絡倡議的無障礙豐富互聯網應用規範(WAI-ARIA,簡稱 ARIA)適用於跨越某些領域的障礙,這些領域存在的無障礙問題無法通過原生 HTML 進行管理。它通過允許您指定某些屬性來發揮作用,這些屬性可以修改元素轉換成無障礙樹的方式。 下面我們來看一個示例。

在以下代碼段中,我們使用列表項作爲一種自定義複選框。CSS "checkbox" 類爲元素提供了所需的視覺特性。

<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 角色和屬性會受到限制。 例如,不得對標準 <input type="text"> 元素應用任何額外角色/屬性。

請參閱 ARIA in HTML 規範,瞭解詳細信息。

讓我們看一看 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="true">
  <span>GOOG: $400</span>
</div>

ARIA 系統的其中一個核心層面是其角色集。在無障礙術語中,角色是指特定 UI 模式的簡略指示器。我們可以通過任意 HTML 元素上的 role 屬性使用 ARIA 提供的模式詞彙表。

我們在上例中應用 role="checkbox" 時,是指示輔助技術,元素應遵循 "checkbox" 模式。 也就是說,我們可以保證它具有選中狀態(選中或未選中),並且這一狀態可使用鼠標或空格鍵進行切換,就像切換標準 HTML 複選框元素那樣。

事實上,由於鍵盤交互在屏幕閱讀器使用中的作用極其重要,因此必須確保在創建自定義小部件時,始終在同一位置應用 role 屬性和 tabindex 屬性;這可以確保鍵盤事件發生在正確的位置,並且當某個元素獲得焦點時,其角色能得到準確傳遞。

ARIA 規範 分類介紹了 role 屬性以及可與這些角色聯用的關聯 ARIA 屬性的可接受值。這是最佳的權威信息來源,其中包含 ARIA 角色和屬性如何協作,以及如何以瀏覽器和輔助技術支持的方式使用它們。

所有可用 ARIA 角色的列表

不過,該規範非常深奧;一個更爲淺顯的入門讀物是 ARIA 製作實踐文檔,該文檔探究了使用可用 ARIA 角色和屬性的最佳做法。

ARIA 還提供了可對 HTML5 中提供的選項進行擴展的地標角色。請參閱地標角色設計模式規範,瞭解詳細信息。