將ARIA屬性與HTML5語義元素用於可訪問性

需要同時使用ARIA和HTML5語義標籤的原因是：HTML5語義元素雖自帶可訪問性含義，但ARIA能補足語義、增強輔助技術識別能力。例如舊版瀏覽器支持不足、無原生標籤的組件（如模態框）、需動態更新狀態時，ARIA提供更細粒度控制。 nav、main、aside等HTML5元素默認對應ARIA role，無需手動添加，除非需覆蓋默認行為。應加ARIA的情況包括：1. 補充缺失的狀態信息，如用aria-expanded表示按鈕展開/收起狀態；2. 給非語義標籤增加語義角色，如用div role實現選項卡並配合tabindex和aria-selected；3. 關聯控件與說明文本，如用aria-describedby將輸入框與提示文字關聯。注意事項包括不重複設置已有語義、不錯誤覆蓋原語義、不確定時不亂加屬性。

給HTML5 語義元素加上ARIA 屬性，其實是個常見但容易出錯的做法。不是用了<nav></nav>或者<main></main>就萬事大吉了，有時候還需要ARIA 來補足語義或者增強輔助技術的識別能力。

為什麼需要同時使用ARIA 和HTML5 語義標籤？

HTML5 的語義元素（比如<header></header> 、 <footer></footer> 、 <nav></nav> 、 <article></article>等）本身已經具備一定的可訪問性含義，能幫助屏幕閱讀器識別頁面結構。但在一些場景下，這些默認行為還不夠精准或靈活。

例如：

• 某些舊版瀏覽器或輔助技術可能對新語義標籤支持不夠好；
• 有些組件（如模態框、選項卡）沒有對應的原生HTML 標籤；
• 需要動態更新狀態（比如按鈕是否被選中、內容是否展開）時，ARIA 提供了更細粒度的控制。

所以，ARIA 是一種補充，而不是替代。

哪些HTML5 元素會自動帶上ARIA 角色？

很多HTML5 語義標籤在底層其實已經對應了一個ARIA role。比如：

• <nav></nav>對應role="navigation"
• <main></main>對應role="main"
• <aside></aside>對應role="complementary"
• <section></section>通常會被處理為role="region" （如果帶有標題）

這意味著你不需要手動加這些role，除非你想覆蓋默認行為或者為了兼容某些特殊情況。

不過要注意：如果你自己寫了一個div，並且用role 設置成navigation，它就不會像真正的<nav></nav>一樣出現在無障礙樹中，除非你手動添加其他屬性讓它“可聚焦”。

在哪些情況下應該加ARIA？

1. 補充缺失的狀態信息

比如一個切換按鈕（折疊面板），光靠<button></button>無法告訴用戶當前是“展開”還是“收起”狀態。這時候可以用aria-expanded ：

 <button aria-expanded="false">展開更多</button>

點擊後JS 動態修改這個值，屏幕閱讀器就能讀出狀態變化。

2. 給非語義標籤增加語義角色

如果你必須用<div>或<span>實現某種交互組件（比如tabs、menu），那就需要用ARIA 來定義它的角色和行為：

 <div role="tablist">
  <div role="tab" aria-selected="true" tabindex="0">選項卡一</div>
  <div role="tab" aria-selected="false" tabindex="-1">選項卡二</div>
</div>

這裡不僅用了role，還用了tabindex控制焦點順序， aria-selected表示當前激活狀態。

3. 關聯控件與說明文本

比如表單字段旁邊有個提示文字，想讓屏幕閱讀器也讀出來，可以這樣：

 <label for="username">用戶名：</label>
<input type="text" id="username" aria-describedby="username-tip">
<p id="username-tip">請輸入你的註冊郵箱作為用戶名。 </p>

這樣輸入框獲得焦點時，屏幕閱讀器也會讀出描述信息。

注意事項

• 不要重複設置已有的語義。比如<button></button>已經有role="button"，不需要再寫一遍。
• 避免錯誤地覆蓋原有語義。比如把<a></a>強行設成role="button"，可能導致鍵盤導航失效。
• 如果不確定某個ARIA 屬性的作用，先查MDN 或WAI-ARIA 官方文檔，別亂加。

基本上就這些。用得好，ARIA 能提升無障礙體驗；用得不好，反而破壞原生行為。關鍵是要理解每個屬性的意義，以及它和HTML5 語義之間的關係。

以上是將ARIA屬性與HTML5語義元素用於可訪問性的詳細內容。更多資訊請關注PHP中文網其他相關文章！