，因?yàn)楸緳C(jī)元素提供內(nèi)置可訪問(wèn)性。 2.應(yīng)用詠嘆調(diào)角色，例如角色=“導(dǎo)航”，角色=“ main”和角色=“互補(bǔ)”來(lái)闡明結(jié)構(gòu)區(qū)域的目的，即使它們可能與HTML5元素有關(guān)，它們?nèi)匀粺o(wú)害。 3。通過(guò)應(yīng)用角色=“ taberist”，cole =“ tab”，ARIA選擇，aria-controls和cromo =“ tabpanel”，將ARIA用於標(biāo)籤的自定義小部件，例如TABS，同時(shí)確保通過(guò)JavaScript確保鍵盤導(dǎo)航和動(dòng)態(tài)狀態(tài)更新。 4。使用Aria-live =“ parite”或aria-live =“自信”和aria-atomic =“ true”的ARIA LIVE區(qū)域來(lái)管理動(dòng)態(tài)內(nèi)容更新，以確保屏幕閱讀器宣布適當(dāng)?shù)淖兓?5。避免使用常見(jiàn)的ARIA錯(cuò)誤，例如在沒(méi)有鍵盤支持的非相互作用元素上使用冗餘角色，使用ARIA在沒(méi)有鍵盤支持的情況下，隱藏了聚焦元素或忽略焦點(diǎn)管理，而是使用屏幕讀取器測(cè)試，使用Dev工具，並遵循WAI-ARIA指南，以確保無(wú)需引入障礙而增強(qiáng)可訪問(wèn)性。

在您的HTML中添加ARIA（可訪問(wèn)的Internet應(yīng)用程序）角色是提高依靠屏幕閱讀器和其他輔助技術(shù)的用戶可訪問(wèn)性的強(qiáng)大方法。雖然語(yǔ)義HTML應(yīng)該始終首先出現(xiàn)，但當(dāng)本機(jī)元素還不夠時(shí)，Aria會(huì)填補(bǔ)空白，例如自定義小部件或動(dòng)態(tài)內(nèi)容。這是如何有效，安全地實(shí)施詠嘆調(diào)角色的方法。

---

1。首先使用語(yǔ)義HTML，然後使用詠嘆調(diào)

在添加任何ARIA角色之前，請(qǐng)問(wèn)：我可以使用本機(jī)HTML元素嗎？
按鈕，鏈接，標(biāo)題，列表和表單控件具有內(nèi)置可訪問(wèn)性。用詠嘆調(diào)覆蓋它們可能弊大於利。

?做到這一點(diǎn)：

 <按鈕>提交</button>

？不是這樣：

 <div角色=“ button”>提交</div>

本機(jī)<button>默認(rèn)情況下具有鍵盤焦點(diǎn)，單擊行為和屏幕閱讀器識(shí)別。除非您手動(dòng)添加事件處理程序和tabindex ，否則帶有role="button"的div缺乏所有功能。

經(jīng)驗(yàn)法則：僅當(dāng)您無(wú)法使用標(biāo)準(zhǔn)HTML實(shí)現(xiàn)所需的可訪問(wèn)行為時(shí)才使用ARIA。

---

2。扮演詠嘆調(diào)角色以增強(qiáng)意義

ARIA角色定義元素是什麼。它們可以幫助屏幕讀取器解釋動(dòng)態(tài)或非標(biāo)準(zhǔn)組件。

常見(jiàn)角色包括：

• role="navigation" - 用於導(dǎo)航部分
• role="main" - 主要內(nèi)容區(qū)域
• role="banner" - 用於網(wǎng)站標(biāo)題
• role="complementary" - 側(cè)欄
• role="contentinfo" - 對(duì)於頁(yè)腳

例子：

 <標(biāo)頭角色=“ Banner”>
  <導(dǎo)航角色=“導(dǎo)航”>
    <ul>
      <li> <a href =“/”> home </a> </li>
      <li> <a href =“/of”> about </a> </li>
    </ul>
  </nav>
</header>

<main角色=“ main”>
  <h1>歡迎</h1>
  <p>頁(yè)面內(nèi)容轉(zhuǎn)到這裡。 </p>
</main>

<旁邊的角色=“互補(bǔ)”>
  <h2>相關(guān)鏈接</h2>
  <ul> ... </ul>
</cater>

<頁(yè)腳角色=“ contentInfo”>
  <p>＆copy; 2024 Company </p>
</footer>

注意：現(xiàn)在，HTML5語(yǔ)義元素（例如， <nav>已經(jīng)具有role="navigation" ）所暗示的許多角色，因此它們通常是多餘的，但如果使用了，則無(wú)害。

---

3。使用ARIA進(jìn)行自定義小部件（小心）

構(gòu)建自定義UI組件（例如標(biāo)籤，下拉列表或模式）時(shí)，您將需要ARIA才能使其訪問(wèn)。

示例：自定義標(biāo)籤面板

<div角色=“ tablist”>
  在
  在
</div>

態(tài)
  標(biāo)籤1的內(nèi)容
</div>
<div id =“ panel-2” cool =“ tabpanel” aria-labelledby =“ tab-2”隱藏>
  標(biāo)籤2的內(nèi)容
</div>

使用的關(guān)鍵ARIA屬性：

• role="tablist" - 標(biāo)籤的容器
• role="tab" - 單個(gè)選項(xiàng)卡（必須是鍵盤焦點(diǎn)）
• aria-selected - 指示活動(dòng)選項(xiàng)卡
• aria-controls - 鏈接到其面板
• role="tabpanel" - 保留選項(xiàng)卡內(nèi)容
• hidden - 隱藏不活動(dòng)面板

??您還必須處理鍵盤導(dǎo)航（例如，箭頭鍵，Enter），並通過(guò)JavaScript更新Aria狀態(tài)。

---

4。使用現(xiàn)場(chǎng)區(qū)域管理動(dòng)態(tài)內(nèi)容

當(dāng)內(nèi)容動(dòng)態(tài)更新（例如，形式錯(cuò)誤，通知）時(shí)，請(qǐng)使用Aria Live區(qū)域，以便屏幕讀取器可以宣布更改。

 <div aria-live =“ plitite” aria-atomic =“ true” id =“ status-message”>
  <！ - 插入此處的消息將被讀取 - >
</div>

• aria-live="polite" - 用戶空閒時(shí)排隊(duì)消息
• aria-live="assertive" - 打斷緊急消息（少量使用）
• aria-atomic="true" - 在任何部分變化時(shí)讀取整個(gè)區(qū)域

示例使用：

 document.getElementById（'status-message'）。 textContent ='添加到購(gòu)物車中的項(xiàng)目。 ';

屏幕閱讀器將自動(dòng)宣布更新。

---

5。避免常見(jiàn)的詠嘆調(diào)錯(cuò)誤

即使是善意的詠嘆調(diào)，如果被濫用，也可能會(huì)傷害可及性。

？不：

• 在非相互作用元素上使用role="button"而無(wú)需使其鍵盤可訪問(wèn)
• 將ARIA角色添加到已經(jīng)具有隱式角色的元素中（例如， ）
• 當(dāng)存在語(yǔ)義元素時(shí)，將通用div或span與ARIA一起使用
• 忘記以模式或動(dòng)態(tài)內(nèi)容管理焦點(diǎn)
• 在可聚焦元素上使用aria-hidden="true" （使屏幕讀取器用戶感到困惑）

?做：

• 使用屏幕讀取器測(cè)試（例如，NVDA，Voiceover）
• 使用瀏覽器開(kāi)發(fā)工具檢查詠嘆調(diào)和可訪問(wèn)性樹(shù)
• 遵循Wai-Aria的創(chuàng)作實(shí)踐的複雜小部件

---

ARIA是一種強(qiáng)大的工具，但它不能替代良好的HTML結(jié)構(gòu)和鍵盤支持。使用它來(lái)增強(qiáng)而不是替代可訪問(wèn)性基本面。

基本上： HTML首先，在需要時(shí)ARIA，並始終進(jìn)行測(cè)試。