ARIA 和非原生 HTML 語意簡介
到目前為止,我們鼓勵您使用原生 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 屬性我們就能提供元素缺少的資訊,讓螢幕閱讀器正確解讀。我們在這裡新增了 role
和 aria-checked
屬性,明確將元素識別為核取方塊,並藉此指定該元素預設為已勾選。清單項目現在會新增至無障礙樹狀結構,螢幕閱讀器會正確回報為核取方塊。
<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
Receive promotional offers
</li>
ARIA 的運作方式是變更及擴充標準 DOM 無障礙樹狀結構。
雖然 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 也提供了界限角色,可以擴充 HTML5 中的可用選項。詳情請參閱地標角色設計模式規格。