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 圖案 規格的詳細資訊