ARIA 和非原生 HTML 語意簡介
到目前為止,我們建議您使用原生 HTML 元素,因為這類元素能突顯您的重點 鍵盤支援以及內建語意 版面配置和原生 HTML 則不會處理這項工作舉例來說 快速化的 HTML 元素,適合常見的使用者介面建構元素,也就是彈出式選單。挪威 是否有提供語義特性的 HTML 元素,例如「 使用者必須盡快瞭解這一點。」
在本課程中,我們將探討如何表示 HTML 無法表達的語意 生成式 AI 模型
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 無法擴增任何元素固有的行為就無法 可聚焦元素,或提供鍵盤事件監聽器。這也是 Google 新聞的
請特別注意
語意無論使用狀況為何,系統都會使用標準 HTML <input type="checkbox">
元素不需要額外的 role="checkbox"
ARIA 屬性
正確公告
另一個值得注意的是,某些 HTML 元素對於 ARIA 設有限制
角色和屬性舉例來說,標準 <input
type="text">
元素可能未套用任何額外的角色/屬性。
請參閱 HTML 規格中的 ARIA 瞭解詳情
我們來看看 ARIA 的其他功能。
ARIA 可以執行哪些操作?
如核取方塊範例所示,ARIA 可以修改現有的元素語意 或為沒有原生語意的元素新增語意它也可以 顯示 HTML 中完全不存在的語意模式,例如選單或分頁 面板。我們通常可以透過 ARIA 建立小工具類型元素無法達成的目標 。
- 舉例來說,ARIA 可以新增
。
<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 是可以透過 role
使用的模式詞彙
屬性。
在上一個範例中套用 role="checkbox"
時,我們得知
元素應根據「核取方塊」勾選的輔助技術。沒錯
我們保證廣告將處於已勾選狀態 (不論是否勾選)
而狀態可以用滑鼠或空格鍵切換
就像標準 HTML 核取方塊元素一樣
事實上,因為螢幕閱讀器中會醒目顯示鍵盤互動功能
因此在建立自訂小工具時,請務必確認
role
屬性一律會在 tabindex
的相同位置套用
屬性;這能確保鍵盤事件接收到正確的位置
專注於自身特色
ARIA 規格描述的是
role
屬性和相關 ARIA 的可能值分類
屬性可能會與這些角色搭配使用最棒的是
有關 ARIA 角色和屬性運作方式的確切資訊來源
以及如何在瀏覽器和
輔助技術
不過,規格相當複雜有一個更平易近人的地方:ARIA 編寫做法文件 ,該頁面將探討使用 ARIA 角色和 資源。
ARIA 也提供地標性角色,以便擴充 HTML5 提供的選項。詳情請見 Landmark Role Design 圖案 規格的詳細資訊