譯者 | 劉濤

審校 | 重樓

你曾經(jīng)在 HTML 語(yǔ)言中使用過(guò)某個(gè)屬性，卻并未完全明白它的用途嗎？你并非個(gè)例！隨著時(shí)間的推移，我深入探究了眾多HTML屬性背后的含義，特別是那些對(duì)于可訪問(wèn)性極為關(guān)鍵的屬性。

在這個(gè)深入的教程里，我將剖析一些增強(qiáng)可訪問(wèn)性的關(guān)鍵HTML屬性，闡釋它們的作用以及何時(shí)有效地運(yùn)用它們。

先決條件

要學(xué)習(xí)本教程，你應(yīng)該對(duì)HTML具備基本的認(rèn)識(shí)，并且對(duì)Javascript知識(shí)稍有了解。

目錄

1. 什么是ARIA屬性？
2. alt屬性
3. aria-label屬性

• 使用 aria-label的最佳實(shí)踐

4. aria-labelledby屬性

• aria-label和aria-labelledby有什么不同
• 使用 aria-labelledby的最佳實(shí)踐

5. aria-describedby屬性

• 使用 aria-describedby 的最佳實(shí)踐

6. role屬性

• 常見(jiàn)的 role 值
• 使用 role 屬性的最佳實(shí)踐

7. aria-controls屬性

• 使用 aria-controls 的最佳實(shí)踐

8. aria-selected屬性

• 使用 aria-selected 的最佳實(shí)踐

9. tabindex屬性

• tabindex可能的值
• 使用tabindex的最佳實(shí)踐

10. title屬性

• title 的可訪問(wèn)性問(wèn)題
• 使用 title 屬性的最佳實(shí)踐

11. 在 label 中使用 for 屬性

• 使用 for 屬性的最佳實(shí)踐

12. scope 屬性

• 可能的 scope 值
• 使用 scope 的最佳實(shí)踐

13. aria-hidden 屬性

• 使用 aria-hidden 的最佳實(shí)踐

14. inert屬性

• 使用 inert 的最佳實(shí)踐

15. aria-live 屬性

• aria-live 可能的值
• 使用 aria-live 的最佳實(shí)踐

16. aria-roledescription屬性

• 使用aria-roledescription的最佳實(shí)踐

17. aria-atomic 屬性

• 使用 aria-atomic 的最佳實(shí)踐

18. 結(jié)論

1.什么是ARIA屬性？

本文中列出的大多數(shù)屬性都是ARIA屬性。ARIA，全稱為Accessible Rich Internet Applications（可訪問(wèn)富互聯(lián)網(wǎng)應(yīng)用），是由W3C（萬(wàn)維網(wǎng)聯(lián)盟）定義的一組屬性，旨在提升網(wǎng)絡(luò)應(yīng)用的可訪問(wèn)性。

ARIA屬性為輔助技術(shù)（如屏幕閱讀器）提供額外信息。正確運(yùn)營(yíng)這些屬性可以使復(fù)雜的網(wǎng)絡(luò)應(yīng)用對(duì)視覺(jué)、聽(tīng)覺(jué)或運(yùn)動(dòng)障礙人士更加友好。

使用ARIA的一個(gè)關(guān)鍵原則是：有時(shí)最好不要使用它。盡管這聽(tīng)起來(lái)可能有些矛盾，但你應(yīng)該僅在必要時(shí)才使用ARIA屬性。過(guò)度使用ARIA可能會(huì)干擾依賴輔助技術(shù)的用戶體驗(yàn)。雖然視力正常的用戶可能察覺(jué)不到任何問(wèn)題，但ARIA的過(guò)度或不當(dāng)使用可能會(huì)對(duì)可訪問(wèn)性產(chǎn)生負(fù)面影響。

2.alt屬性

如果你已經(jīng)在HTML中使用過(guò)圖片，那么alt屬性對(duì)你來(lái)說(shuō)或許并不陌生。你使用它來(lái)提供替代文本，這些文本會(huì)在圖片無(wú)法在屏幕上正確顯示時(shí)予以呈現(xiàn)。

然而，alt屬性最重要的用途在于可訪問(wèn)性。如果圖片元素中缺失alt屬性，那么屏幕閱讀器可能會(huì)僅顯示圖片文件的名稱或圖片的URL，而不是解釋它所展示的內(nèi)容。這可能會(huì)對(duì)用戶造成困擾，而我們不希望發(fā)生這種情況。

alt屬性中的內(nèi)容應(yīng)該簡(jiǎn)潔明了，因?yàn)?/span>其主要目的是為那些無(wú)法看到圖片的人簡(jiǎn)要地描述圖片。這涵蓋了依賴屏幕閱讀器的用戶、搜索引擎以及因網(wǎng)絡(luò)連接緩慢致使圖片可能無(wú)法加載的用戶。如果alt文本過(guò)長(zhǎng)，可能會(huì)包含不必要的細(xì)節(jié)，這些細(xì)節(jié)不會(huì)增加用戶對(duì)圖片內(nèi)容的理解。

alt屬性與圖片說(shuō)明有所不同。圖片說(shuō)明是可見(jiàn)的，可以提供更多關(guān)于圖片的上下文或額外信息。將圖片說(shuō)明用作alt文本可能會(huì)使其過(guò)長(zhǎng)且冗余。

如果圖片純粹是裝飾性的，那么alt屬性應(yīng)當(dāng)為空。若圖片有一個(gè)空的alt屬性，輔助工具將會(huì)跳過(guò)它。這對(duì)于幫助用戶專注于內(nèi)容而不被不必要的信息分散注意力非常重要。

下面是一個(gè)如何使用alt屬性的例子：

<p>Lions are remarkable for their powerful roars, 
which can be heard up to five miles away. 
These roars are used to communicate with other 
members of the pride, as well as to ward off rival lions and intruders. 
Although lions are often associated with the African savannah, 
a small population of Asiatic lions still exists in India's Gir Forest, 
making them one of the world's most endangered big cats.</p>

<img src="lion.jpg" alt="a lion" /> <!-- brief and gives context to the paragraph -->

<img src="background-stars.png" alt="" /> <!-- This image is purely for 
decoration so it's left empty -->

3.aria-label屬性

aria-label屬性用于為可能沒(méi)有可見(jiàn)文本的元素提供一個(gè)可訪問(wèn)的名稱。一個(gè)常見(jiàn)的例子是包含圖像或 SVG 的按鈕。

很多元素都有一個(gè)可訪問(wèn)的名稱——可訪問(wèn)的名稱是元素內(nèi)部的內(nèi)容。在這個(gè)例子中，標(biāo)題的可訪問(wèn)名稱是“Frequently Asked Questions”。

<h1>Frequently Asked Questions</h1>

包括使用輔助技術(shù)的人員在內(nèi)的每個(gè)人，都能清楚地理解上面這個(gè)例子的意思，因?yàn)樗丝梢?jiàn)的內(nèi)容。

但在下面的例子中，倘若按鈕沒(méi)有aria-label，依賴屏幕閱讀器的用戶或許會(huì)錯(cuò)過(guò)按鈕中的內(nèi)容。這是因?yàn)榘粹o中的內(nèi)容是一個(gè)SVG格式（Scalable Vector Graphics:可縮放矢量圖），而SVG不包含任何可見(jiàn)的內(nèi)容：

<button aria-label="Search">
 <svg
 fill="#000000" 
 height="20px"
 width="20px"
 xmlns="http://www.w3.org/2000/svg" 
 viewBox="0 0 488.4 488.4">
 <g stroke-width="0"></g>
 <g stroke-linecap="round" stroke-linejoin="round"></g>
 <g><g>
 <g>
 <path d="M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6 s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2 S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7 S381.9,104.65,381.9,203.25z" />
 </g> 
 </g></g>
 </svg>
</button>

不要過(guò)度使用aria-label。并非所有內(nèi)容都需要aria-label——例如，如果你有一個(gè)包含帶有alt的圖像的按鈕，或者帶有title的 SVG，那么這些屬性就充當(dāng)了該元素的可訪問(wèn)名稱。

<button>
 <img src="search-icon.png" alt="Search" /> <!-- no need for aria-label -->
</button>
<!-- Another example -->
<button>
 <svg
 fill="#000000"
 height="20px"
 width="20px"
 role="image"
 xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 488.4 488.4">
 <title>Search Icon</title> <!-- Accessible name -->
 <g stroke-width="0"></g>
 <g stroke-linecap="round" stroke-linejoin="round"></g>
 <g><g>
 <g>
 <path d="M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6 s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2 S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7 S381.9,104.65,381.9,203.25z" />
 </g> 
 <g><g>
 </svg>
</button>

你應(yīng)該謹(jǐn)慎且適當(dāng)?shù)厥褂胊ria-label。過(guò)度使用該屬性可能會(huì)導(dǎo)致幾個(gè)問(wèn)題：

• aria-label的內(nèi)容對(duì)視力正常的用戶不可見(jiàn)。如果有認(rèn)知障礙的用戶使用屏幕閱讀器來(lái)獲取支持時(shí)，他們可能不理解為什么聽(tīng)到的信息與在屏幕上看到的不同。
• 在大型代碼庫(kù)中廣泛使用aria-label會(huì)使 HTML 更難維護(hù)。你可能難以跟蹤標(biāo)簽的來(lái)源，特別是如果它們是通過(guò)編程方式設(shè)置的或在多個(gè)地方設(shè)置的。

使用aria-label的最佳實(shí)踐

• 只要有可能，就用可見(jiàn)文本標(biāo)簽。它們更易于理解和維護(hù)，并且能夠?yàn)樗杏脩籼峁┮恢碌捏w驗(yàn)。
• 倘若頁(yè)面上已經(jīng)存在一個(gè)可見(jiàn)的標(biāo)簽，請(qǐng)使用 aria-labelledby 將元素與現(xiàn)有文本關(guān)聯(lián)起來(lái)，而非使用 aria-label 創(chuàng)建一個(gè)新標(biāo)簽（我們稍后會(huì)探討這一點(diǎn)）。
• 如果你使用 aria-label，請(qǐng)讓文本保持簡(jiǎn)短且切中要害，并用最少的詞匯來(lái)描述元素的目的。

4.aria-labelledby屬性

aria-labelledby屬性用于將一個(gè)元素和另一個(gè)元素相關(guān)聯(lián)，后者充當(dāng)前者的標(biāo)簽。它能夠把目標(biāo)元素與頁(yè)面上的一個(gè)或多個(gè)其他元素相連接，這些元素中包含的文本將作為目標(biāo)元素的標(biāo)簽來(lái)使用。

你能夠在已經(jīng)存在可見(jiàn)的文本標(biāo)簽，或者標(biāo)簽需要由多個(gè)文本元素構(gòu)成時(shí)運(yùn)用此屬性。

例如，你能夠在<section>元素中使用aria-labelledby 屬性，從而將其與標(biāo)題或者其他文本相關(guān)聯(lián)，這些文本可作為整個(gè)部分的標(biāo)簽。

<h2 id="about-heading">About Us</h2> 
<section aria-labelledby="about-heading"> <!-- use the id of the h2 -->
 <p>We are a company dedicated to providing excellent service...</p>
</section>
<h2 id="services-heading">Our Services</h2>
<section aria-labelledby="services-heading">
 <p>We offer a wide range of services including...</p>
</section>

有時(shí)，你可能想將多個(gè)文本片段組合成標(biāo)簽，可以通過(guò)在aria-labelledby屬性中列出多個(gè)ID來(lái)實(shí)現(xiàn)這一點(diǎn)：

<h1 id="dialog-title">Confirmation Required</h1>
<p id="dialog-description">Are you sure you want to delete this item?</p>
<button aria-labelledby="dialog-title dialog-description">Yes</button>

aria-labelledby與aria-label在目的上是相似的，都是為了提供一個(gè)可訪問(wèn)的元素。

aria-label和aria-labelledby有什么不同

aria-label屬性直接為元素指定一串文本作為標(biāo)簽。這段文本在屏幕上不可見(jiàn)，但會(huì)被屏幕閱讀器等輔助技術(shù)朗讀出來(lái)。它通常用于那些沒(méi)有可見(jiàn)文本標(biāo)簽的情況。

而aria-labelledby屬性則通過(guò)引用頁(yè)面上已存在的一個(gè)或多個(gè)元素（利用這些元素的ID屬性）來(lái)作為目標(biāo)元素的標(biāo)簽。標(biāo)簽文本對(duì)所有用戶都是可見(jiàn)的，因?yàn)樗鼈儽旧砭褪琼?yè)面上其他元素內(nèi)容的一部分。

使用aria-labelledby的最佳實(shí)踐

• 當(dāng)頁(yè)面上已經(jīng)存在可以作為標(biāo)簽的文本時(shí)，應(yīng)優(yōu)先使用aria-labelledby而不是aria-label。這樣做可以減少冗余，并確保視力正常的用戶和屏幕閱讀器用戶都能看到相同的內(nèi)容。
• aria-labelledby引用的ID屬性在頁(yè)面上必須是唯一的，并且必須正確地指向現(xiàn)有的元素。如果ID缺失或錯(cuò)誤，標(biāo)簽將不會(huì)起作用，從而導(dǎo)致可訪問(wèn)性問(wèn)題。
• 當(dāng)組合多個(gè)標(biāo)簽時(shí)，請(qǐng)確保組合后的標(biāo)簽在一起閱讀時(shí)是有意義的。aria-labelledby中ID的順序很重要，因?yàn)槠聊婚喿x器會(huì)按照列出的順序來(lái)朗讀標(biāo)簽。
• 與aria-label一樣，應(yīng)避免在可以使用更簡(jiǎn)單方法（如直接使用可見(jiàn)的label元素）的情況下過(guò)度使用aria-labelledby。這有助于保持代碼的可維護(hù)性，并減少用戶的認(rèn)知負(fù)擔(dān)。

5.aria-describedby屬性

aria-describedby屬性用于將一個(gè)元素與一個(gè)或多個(gè)能為其提供額外描述性信息的元素相關(guān)聯(lián)。aria-describedby屬性用于為元素提供額外的上下文或說(shuō)明。

與旨在提供標(biāo)簽或名稱的aria-labelledby不同，aria-describedby旨在為用戶提供有關(guān)元素的更為詳細(xì)的信息或上下文，通常是對(duì)他們從標(biāo)簽中已經(jīng)了解到的內(nèi)容的補(bǔ)充。

<label id="full-name">Full name</label>
<input type="text" aria-labelledby="full-name" aria-describedby="info">
<span id="info">Enter your full name.</span>

當(dāng)在同一個(gè)元素上同時(shí)運(yùn)用了 aria-labelledby 和 aria-describedby 屬性時(shí)，屏幕閱讀器會(huì)首先聲明由 aria-labelledby 指定的標(biāo)簽，接著聲明元素的角色（例如，“按鈕”），最后聲明由 aria-describedby 所提供的描述。

使用aria-describedby的最佳實(shí)踐

• 當(dāng)你需要為用戶提供超出標(biāo)簽范疇的額外上下文或說(shuō)明時(shí)，應(yīng)當(dāng)使用“aria-describedby”屬性。這對(duì)于表單、復(fù)雜控件或者任何可能需要加以澄清的元素而言特別有用。
• 盡管“aria-describedby”旨在提供更為詳盡的描述，但是應(yīng)當(dāng)避免使用過(guò)長(zhǎng)的文本。要保持描述的內(nèi)容專注于用戶與元素有效交互所需要了解的信息。
• 和“aria-labelledby”相同，請(qǐng)確?！癮ria-describedby”所引用的元素具備唯一且相關(guān)的“id”屬性。這些元素的內(nèi)容應(yīng)當(dāng)直接與它們所描述的元素相關(guān)聯(lián)。

6.role屬性

role屬性用于指定元素的角色。你可以使用它來(lái)覆蓋語(yǔ)義元素的默認(rèn)角色，從而幫助輔助技術(shù)理解元素應(yīng)該如何被解釋或與之交互。

當(dāng)你使用非語(yǔ)義元素（如<div>或<span>）來(lái)創(chuàng)建交互式控件（如按鈕、對(duì)話框、選項(xiàng)卡等）時(shí)，role屬性會(huì)向輔助技術(shù)傳遞元素的預(yù)期行為。這樣，即使元素本身沒(méi)有明確的語(yǔ)義含義，輔助技術(shù)也能正確地識(shí)別和處理它。此外，你還可以使用role屬性來(lái)定義地標(biāo)角色，這些角色有助于導(dǎo)航，如banner或complementary。這些地標(biāo)角色定義了頁(yè)面的結(jié)構(gòu)，為屏幕閱讀器用戶提供了更好的導(dǎo)航體驗(yàn)。

常見(jiàn)的role值

地標(biāo)區(qū)域的角色：

• banner：代表網(wǎng)站的頭部。
• navigation：定義頁(yè)面的導(dǎo)航部分，通常用于網(wǎng)站或頁(yè)面的導(dǎo)航鏈接。
• main：標(biāo)記文檔的主要內(nèi)容，區(qū)別于側(cè)邊欄、頁(yè)腳等。
• contentinfo：代表頁(yè)腳信息。

下面的這個(gè)示例僅用于演示目的——在可能的情況下，你應(yīng)該使用正確的語(yǔ)義元素：

<div role="banner">
 <h1>My Website</h1>
</div>
<div role="navigation">
 <ul>
 <li><a href="#home">Home</a></li>
 <li><a href="#about">About</a></li>
 </ul>
</div>
<div role="main">
 <h2>Welcome to My Website</h2>
 <p>Here is some main content...</p>
</div>
<div role="contentinfo">
 <p>? 2024 My Website</p>
</div>

小部件和交互式元素的角色：

• button：代表一個(gè)按鈕元素，用戶可以點(diǎn)擊它來(lái)觸發(fā)某個(gè)動(dòng)作。
• dialog：標(biāo)記一個(gè)對(duì)話框或模態(tài)窗口，它要求用戶進(jìn)行交互。
• alert：將一個(gè)元素標(biāo)識(shí)為重要的消息或警告，需要用戶注意。
• tablist、tab和tabpanel：用于選項(xiàng)卡界面，其中tablist包含選項(xiàng)卡，tab控制其對(duì)應(yīng)tabpanel的可見(jiàn)性。

<div role="button" tabindex="0" onclick="submitForm()">Submit</div>
<div role="dialog" aria-labelledby="dialog-title" aria-modal="true">
 <h2 id="dialog-title">Confirmation</h2>
 <p>Are you sure you want to proceed?</p>
 <button onclick="closeDialog()">Close</button>
</div>

選項(xiàng)卡面板的示例：

<div role="tablist" aria-label="Sample Tabs">
 <button role="tab" id="tab-1" aria-controls="panel-1" aria-selected="true" tabindex="0">Tab 1</button>
 <button role="tab" id="tab-2" aria-controls="panel-2" aria-selected="false" tabindex="-1">Tab 2</button>
 <button role="tab" id="tab-3" aria-controls="panel-3" aria-selected="false" tabindex="-1">Tab 3</button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
 <h2>Content for Tab 1</h2>
 <p>This is the content of the first tab.</p>
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
 <h2>Content for Tab 2</h2>
 <p>This is the content of the second tab.</p>
</div>
<div role="tabpanel" id="panel-3" aria-labelledby="tab-3" hidden>
 <h2>Content for Tab 3</h2>
 <p>This is the content of the third tab.</p>
</div>

使用role屬性的最佳實(shí)踐

• 始終優(yōu)先使用已經(jīng)具有適當(dāng)角色的原生HTML元素（例如，<button>、<header>、 <nav>、<main>）。如此能夠在更廣泛的瀏覽器和設(shè)備上提供更優(yōu)的可訪問(wèn)性支持。
• 切勿過(guò)度使用或誤用role屬性，因?yàn)檫@可能會(huì)導(dǎo)致混淆并降低可訪問(wèn)性。在有需要的時(shí)候，使用role來(lái)增強(qiáng)或澄清，而不是替換語(yǔ)義HTML。
• 了解隱式角色。許多HTML元素具有隱式角色。例如，帶有href屬性的<a>元素自動(dòng)具有l(wèi)ink角色。避免向這些元素添加冗余的role屬性。

7.aria-controls屬性

aria-controls 屬性會(huì)通知屏幕閱讀器該元素由另一個(gè)元素所控制或者受其影響。它通常被用于聲明一個(gè)組件（如按鈕或者選項(xiàng)卡）控制或者與頁(yè)面的另一部分（如面板或者菜單）進(jìn)行交互。它也應(yīng)用于交互式組件，例如選項(xiàng)卡、折疊面板（accordions）和滑塊，以描述當(dāng)用戶與組件進(jìn)行交互時(shí)，頁(yè)面的哪些部分會(huì)受到影響。

例如，你能夠在選項(xiàng)卡按鈕上使用aria-controls來(lái)聲明每個(gè)按鈕控制所對(duì)應(yīng)的面板：

<!-- Tab Buttons -->
<button id="tab1" aria-controls="panel1">Tab 1</button>
<button id="tab2" aria-controls="panel2">Tab 2</button>
<!-- Content Panels -->
<div id="panel1" role="tabpanel">Content for Tab 1</div>
<div id="panel2" role="tabpanel">Content for Tab 2</div>

使用aria-controls的最佳實(shí)踐

• 確保aria-controls中使用的ID與被控制元素的id屬性完全匹配。
• 將aria-controls與role和諸如aria-selected之類的狀態(tài)屬性或role="tabpanel"結(jié)合使用，以提供有關(guān)被控制元素及其狀態(tài)的更完整信息。
• 將aria-controls應(yīng)用于諸如按鈕或鏈接等對(duì)其他元素具有直接影響的交互式元素。它通常不用于非交互式內(nèi)容。

8.aria-selected屬性

aria-selected 屬性用于聲明一組可選項(xiàng)目當(dāng)中某個(gè)元素的當(dāng)前選擇狀態(tài)。可選項(xiàng)目可以是菜單中的選項(xiàng)、選項(xiàng)卡面板中的選項(xiàng)，或列表框中的項(xiàng)目。

以下是一個(gè)在列表框中選擇狀態(tài)的一個(gè)示例，選項(xiàng)1中的 aria-selected ="true"表示選項(xiàng)1目前被選中：

<!-- Listbox -->
<ul role="listbox">
 <li role="option" aria-selected="true">Option 1</li>
 <li role="option" aria-selected="false">Option 2</li>
 <li role="option" aria-selected="false">Option 3</li>
</ul>

使用aria-selected的最佳實(shí)踐

• 對(duì)于選中的項(xiàng)目使用aria-selected="true"，對(duì)于未選中的項(xiàng)目使用aria-selected="false"。這個(gè)值應(yīng)當(dāng)是一個(gè)字符串，而非布爾值。
• 確保元素的可見(jiàn)狀態(tài)（例如，活動(dòng)的選項(xiàng)卡或選中項(xiàng)）與aria-selected的值相匹配。不一致的狀態(tài)可能會(huì)導(dǎo)致使用輔助技術(shù)的用戶感到困惑。
• 將aria-selected與適當(dāng)?shù)膔ole屬性（例如，對(duì)于列表框項(xiàng)目使用role="option"）結(jié)合使用，以提供完整的上下文。
• 確保在用戶與界面交互時(shí)動(dòng)態(tài)更新aria-selected。例如，當(dāng)用戶選擇新選項(xiàng)時(shí)，相應(yīng)地更新aria-selected屬性。

9.tabindex屬性

tabindex 屬性用于把控元素的鍵盤導(dǎo)航。你能夠用它為非交互式元素（例如 div、p 或者 span）激活焦點(diǎn)，或者為交互式元素（例如 button、a、input）禁用焦點(diǎn)。此外，你還能夠使用 tabindex 來(lái)控制頁(yè)面上的焦點(diǎn)順序。

tabindex可能的值

正值：具有正值的元素將變得可聚焦，并且會(huì)按照它們的tabindex值被納入到tab鍵的導(dǎo)航順序中。tabindex值較小的元素會(huì)先于tabindex值較大的元素獲得焦點(diǎn)。

<button tabindex="2">Cancel</button> <!-- This will recieve focus last -->
<button tabindex="1">Submit</button> <!-- This will recieve focus first -->

具有相同tabindex值的元素將依照它們?cè)谖臋n中出現(xiàn)的順序進(jìn)行導(dǎo)航。

注意：使用正值的tabindex或許會(huì)致使tab鍵的導(dǎo)航順序變得混亂且不符合直覺(jué)。通常，對(duì)于應(yīng)當(dāng)按照自然順序接收焦點(diǎn)的元素，使用tabindex="0"是更優(yōu)的選擇。

零值：你可以使用此選項(xiàng)來(lái)讓一個(gè)元素變得可聚焦，并將其按照在文檔中的位置自然地納入到tab鍵的導(dǎo)航順序中。這對(duì)于讓那些通常不可聚焦的元素（如<div>或<span>）變得可聚焦極為有用。

<div role="button" tabindex="0">Submit</div> 
 <!-- The element becomes focusable using the keyboard -->

負(fù)值：在 tabindex 屬性中使用負(fù)值，目的是將元素從 Tab 鍵的導(dǎo)航順序里移除，這表示用戶無(wú)法通過(guò) Tab 鍵直接聚焦到該元素上。然而，這并不代表該元素完全不可聚焦；它依舊能夠通過(guò)編程的方式（例如，使用 JavaScript）來(lái)接收焦點(diǎn)。這種設(shè)置對(duì)于那些默認(rèn)情況下不應(yīng)被聚焦，但在某些特定條件下可能需要被聚焦的元素尤其有用。

<input type="text" name="name">
 <input type="text" name="other-names" tabindex="-1">
 <input type="text" placeholder="email">
<!-- other-names will be skipped when tabbing through the inputs; 
 only name and email will receive focus -->

使用tabindex的最佳實(shí)踐

• 盡可能依賴自然的Tab鍵導(dǎo)航順序。使用tabindex="0"來(lái)將元素納入到Tab鍵的導(dǎo)航順序中，并避免在絕對(duì)必要時(shí)使用正值。
• 使用正值的tabindex可能會(huì)創(chuàng)建不可預(yù)測(cè)的Tab鍵導(dǎo)航順序，并增加用戶導(dǎo)航的難度。更好的做法是使用默認(rèn)的導(dǎo)航流和tabindex="0"。
• 對(duì)于不打算被聚焦的元素，使用tabindex="-1"。
• 確保焦點(diǎn)順序遵循邏輯且直觀的順序，這與頁(yè)面的視覺(jué)布局和交互流程相匹配。
• 使用鍵盤和輔助技術(shù)進(jìn)行測(cè)試。
• 當(dāng)動(dòng)態(tài)添加或刪除可聚焦元素（例如，通過(guò)JavaScript）時(shí)，請(qǐng)確保正確處理焦點(diǎn)管理，以保持流暢的用戶體驗(yàn)。

10.title屬性

在HTML中，title屬性用于提供關(guān)于元素的附加信息。當(dāng)用戶將鼠標(biāo)懸停在包含標(biāo)題的元素上時(shí)，屬性中的內(nèi)容會(huì)以工具提示的形式顯示。它可以應(yīng)用于大多數(shù)HTML元素，包括鏈接、圖片和表單字段。

你可以使用title屬性來(lái)提供元素內(nèi)容的簡(jiǎn)要解釋或描述。例如，你可以在使用<abbr>標(biāo)簽時(shí)，通過(guò)它來(lái)聲明縮略語(yǔ)或首字母縮略詞的含義。

<abbr title="World Wide Web">WWW</abbr>
<!-- Hovering over "WWW" displays the tooltip "World Wide Web," 
explaining the abbreviation. -->
<img src="logo.png" 
alt="Company Logo" 
title="This is the logo of our company">
<!-- Users will see "This is the logo of our company" 
when hovering over the image. -->

title的可訪問(wèn)性問(wèn)題

標(biāo)題屬性雖然具有一定的實(shí)用價(jià)值，但也存在一些可訪問(wèn)性問(wèn)題：

• 屏幕閱讀器對(duì) title 屬性的支持并不一致，特別是在存在 alt 屬性的情況下，屏幕閱讀器可能會(huì)忽略 title 屬性。這使得依賴屏幕閱讀器的輔助技術(shù)用戶難以獲取 title 屬性所提供的信息。
• 基于 title 屬性生成的工具提示通常只在使用鼠標(biāo)或觸控板懸停時(shí)出現(xiàn)。因此，對(duì)于使用鍵盤或觸摸屏進(jìn)行導(dǎo)航的用戶來(lái)說(shuō)，他們可能無(wú)法獲取該信息。
• title 屬性的內(nèi)容在默認(rèn)情況下是隱藏的，僅在懸停時(shí)才會(huì)顯示。這導(dǎo)致那些不熟悉需要懸停以獲取額外信息的用戶無(wú)法充分利用這一屬性，從而降低了其可訪問(wèn)性。
• 工具提示的可讀性較差，通常由于其迅速消失的特性，內(nèi)容可能被截?cái)?，或者超出可容納的長(zhǎng)度，從而影響信息的呈現(xiàn)效果。

使用title屬性的最佳實(shí)踐

• 避免僅依賴 title 屬性。確保關(guān)鍵信息以更具可訪問(wèn)性的形式提供，例如可見(jiàn)文本或 ARIA 屬性。
• 將 title 屬性用作補(bǔ)充性、非關(guān)鍵性的信息，以增強(qiáng)用戶體驗(yàn)，但并不是內(nèi)容理解的必要條件。
• 對(duì)于表單輸入，使用 aria-describedby 屬性將附加說(shuō)明與表單元素關(guān)聯(lián)。應(yīng)優(yōu)先使用可見(jiàn)標(biāo)簽或描述，替代或補(bǔ)充 title 屬性，以確保所有用戶均能獲取所需信息。
• 如果使用 title 屬性，請(qǐng)保持文本簡(jiǎn)短且切中要點(diǎn)。過(guò)長(zhǎng)的工具提示可能難以閱讀，并可能被截?cái)唷?/span>

11.在label標(biāo)簽中使用for屬性

當(dāng)在<label>中使用for屬性時(shí)，它用于將標(biāo)簽與其對(duì)應(yīng)的表單控件元素（即<input>、<select>或<textarea>）連接起來(lái)。當(dāng)指定的輸入獲得焦點(diǎn)時(shí)，屏幕閱讀器會(huì)聲明該標(biāo)簽。當(dāng)正確使用for屬性時(shí)，點(diǎn)擊標(biāo)簽會(huì)使對(duì)應(yīng)的輸入獲得焦點(diǎn)。

for屬性的值應(yīng)該與它所關(guān)聯(lián)的輸入的id相匹配：

<label for="fullname">Full Name</label>
<input type="text" id="fullname">
<!-- When the user clicks on the "Full Name" label, 
the cursor will focus on the corresponding input field. -->

使用for屬性的最佳實(shí)踐

• 務(wù)必確保每個(gè)表單控件都具備唯一的id屬性，以便for屬性能夠準(zhǔn)確無(wú)誤地引用它。避免在同一頁(yè)面上使用重復(fù)的 id值。
• 杜絕使用空的for屬性。倘若沒(méi)有關(guān)聯(lián)的表單控件，這可能會(huì)令輔助技術(shù)的用戶產(chǎn)生困惑。
• 將標(biāo)簽放置于與其關(guān)聯(lián)的表單控件的附近。通常而言，為了實(shí)現(xiàn)最佳的可讀性和可用性，標(biāo)簽應(yīng)當(dāng)放置在表單控件的上方或者左側(cè)。

12.scope屬性

在HTML表格中，scope屬性用于定義<th>（表格頭部）與其所描述的單元格之間的關(guān)系。這個(gè)屬性對(duì)于可訪問(wèn)性尤為重要，因?yàn)樗鼛椭聊婚喿x器和其他輔助技術(shù)理解表格的結(jié)構(gòu)，并向用戶傳達(dá)正確的信息。

scope屬性可以應(yīng)用于<th>（表格頭部）元素，以指定該頭部是應(yīng)用于一行、一列，還是一組行或列。

可能的scope值

• row：聲明<th>元素是行的標(biāo)題。在下面的例子中，scope="row"用于每行的第一個(gè)<th>元素，表明該標(biāo)題適用于整行。

<table>
 <tbody>
 <tr>
 <th scope="row">Product A</th>
 <td>$1000</td>
 <td>$1200</td>
 <td>$1100</td>
 </tr>
 <tr>
 <th scope="row">Product B</th>
 <td>$900</td>
 <td>$950</td>
 <td>$1000</td>
 </tr>
 </tbody>
</table>

• col：聲明<th>元素是列的標(biāo)題。

<table>
 <thead>
 <tr>
 <th scope="col">Name</th>
 <th scope="col">Age</th>
 <th scope="col">Occupation</th>
 </tr>
<!-- The scope="col" attribute indicates that each <th> element 
serves as a header for the corresponding column beneath it. -->
 </thead>
 <tbody>
 <tr>
 <td>Jane</td>
 <td>30</td>
 <td>Engineer</td>
 </tr>
 <tr>
 <td>Tobe</td>
 <td>25</td>
 <td>Designer</td>
 </tr>
 </tbody>
</table>

• rowgroup：聲明<th>元素是一組行的標(biāo)題。在下面的例子中，“Marketing Department”和“Sales Department”這兩行具有scope="rowgroup"屬性，以聲明它們作為后續(xù)行組的標(biāo)題。

<table>
 <thead>
 <tr>
 <th scope="col">Department</th>
 <th scope="col">Employee Name</th>
 <th scope="col">Position</th>
 <th scope="col">Salary</th>
 </tr>
 </thead>
 <tbody>
 <!-- Row Group for the Marketing Department -->
 <tr>
 <th scope="rowgroup" colspan="4">Marketing Department</th>
 </tr>
 <tr>
 <th scope="row">Amari Pere</th>
 <td>Marketing Manager</td>
 <td>$75,000</td>
 </tr>
 <tr>
 <th scope="row">Uyati Hope</th>
 <td>SEO Specialist</td>
 <td>$65,000</td>
 </tr>
<!-- Row Group for the Sales Department -->
 <tr>
 <th scope="rowgroup" colspan="4">Sales Department</th>
 </tr>
 <tr>
 <th scope="row">Timini Prosper</th>
 <td>Sales Manager</td>
 <td>$80,000</td>
 </tr>
 <tr>
 <th scope="row">Delilu Pink</th>
 <td>Account Executive</td>
 <td>$70,000</td>
 </tr>
 </tbody>
</table>

• colgroup：表示 <th> 元素是一組列的標(biāo)題。在下面的例子中，scope="colgroup" 用于聲明第一行標(biāo)題適用于多組列（Q1 和 Q2），而scope="col"和scope="row"分別用于單個(gè)列和行。

<table>
 <thead>
 <tr>
 <th scope="colgroup">Region</th>
 <th scope="colgroup">Q1</th>
 <th scope="colgroup">Q2</th>
 </tr>
 <tr>
 <th scope="col">Sales</th>
 <th scope="col">Profit</th>
 <th scope="col">Sales</th>
 <th scope="col">Profit</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th scope="row">North</th>
 <td>$2000</td>
 <td>$400</td>
 <td>$2500</td>
 <td>$500</td>
 </tr>
 <tr>
 <th scope="row">South</th>
 <td>$1500</td>
 <td>$300</td>
 <td>$1800</td>
 <td>$350</td>
 </tr>
 </tbody>
</table>

使用scope的最佳實(shí)踐

• 習(xí)慣為復(fù)雜表格定義scope屬性，以明確表頭和數(shù)據(jù)單元格之間的關(guān)系。
• 盡可能簡(jiǎn)化表格結(jié)構(gòu)。雖然scope屬性有助于提高可訪問(wèn)性，但也要考慮在可能的情況下簡(jiǎn)化表格結(jié)構(gòu)。如果表格過(guò)于復(fù)雜，即使使用了正確的標(biāo)記，也可能讓所有用戶都難以理解。
• 對(duì)于特別復(fù)雜的表格，請(qǐng)考慮使用ARIA屬性（如aria-labelledby或aria-describedby）來(lái)提供額外的上下文信息，并確保所有用戶都能有效地瀏覽表格。
• 在應(yīng)用scope屬性后，請(qǐng)使用屏幕閱讀器測(cè)試表格，以確保表頭和數(shù)據(jù)單元格之間的關(guān)系被正確宣布。
• 在不需要的情況下不要使用scope。對(duì)于簡(jiǎn)單的表格，如果每個(gè)表頭都清楚地與單行或單列相關(guān)聯(lián)，那么HTML的默認(rèn)行為通常就足夠了。

13.aria-hidden屬性

“aria-hidden” 屬性被設(shè)計(jì)用來(lái)在輔助技術(shù)（如屏幕閱讀器）中控制元素的“可訪問(wèn)性”狀態(tài)，即便這些元素在視覺(jué)呈現(xiàn)上依然對(duì)用戶可見(jiàn)。通過(guò)應(yīng)用此屬性，開(kāi)發(fā)者可以使用它來(lái)隱藏純粹的裝飾性元素，如圖標(biāo)或圖像，這些元素不會(huì)為內(nèi)容添加有意義的信息。這有助于防止屏幕閱讀器讀取不必要的信息。

<button>
 <span aria-hidden="true"></span>
 Search
</button>

你還可以使用aria-hidden來(lái)隱藏已經(jīng)聲明過(guò)的內(nèi)容，以防止屏幕閱讀器重復(fù)聲明相同的信息。對(duì)于可以打開(kāi)和關(guān)閉的內(nèi)容（如模態(tài)窗口或可擴(kuò)展部分），你可以使用aria-hidden來(lái)隱藏非活動(dòng)狀態(tài)的內(nèi)容，確保屏幕閱讀器僅與可見(jiàn)的活動(dòng)內(nèi)容交互。

<button>
 <span aria-hidden="true">?</span> <!-- hide decorative icon -->
 <span>Messages</span>
</button>

你也可以在創(chuàng)建復(fù)雜的控件（如輪播圖或選項(xiàng)卡式界面）時(shí)使用 “aria-hidden”，以對(duì)輔助技術(shù)隱藏當(dāng)前未激活的面板或幻燈片，從而引導(dǎo)輔助技術(shù)（如屏幕閱讀器）將注意力集中在控件的激活部分上。

<div id="menu" aria-hidden="true">
 <!-- Menu content here -->
</div>
<button onclick="toggleMenu()">Toggle Menu</button>
<script>
 const toggleMenu = () => {
 const menu = document.getElementById('menu');
 const isHidden = menu.getAttribute('aria-hidden') === 'true';
menu.setAttribute('aria-hidden', !isHidden);
 }
</script>

使用aria-hidden的最佳實(shí)踐

• 僅在需要針對(duì)屏幕閱讀器隱藏內(nèi)容，以防止用戶被冗余或無(wú)關(guān)的信息所淹沒(méi)時(shí)，才使用“aria-hidden”。
• 切勿在用戶需要與之進(jìn)行交互的元素（例如按鈕或鏈接）上使用。
• 確?！癮ria-hidden”能夠精準(zhǔn)反映元素在屏幕上的可見(jiàn)性。倘若一個(gè)元素通過(guò)JavaScript或CSS變?yōu)榭梢?jiàn)或隱藏，要相應(yīng)地更新“aria-hidden”，以維持可訪問(wèn)性。
• 在團(tuán)隊(duì)環(huán)境當(dāng)中，在代碼庫(kù)中記錄為何以及在何處使用“aria-hidden”，以便其他團(tuán)隊(duì)成員理解其用途，并能夠正確地對(duì)其進(jìn)行維護(hù)。

14.inert屬性

inert屬性阻止元素及其所有后代元素成為可聚焦、可交互的，或者被輔助技術(shù)（如屏幕閱讀器）感知。當(dāng)一個(gè)元素具有 inert屬性時(shí)，它無(wú)法接受焦點(diǎn)、被點(diǎn)擊或以任何方式與之交互。同時(shí)，它也會(huì)被輔助技術(shù)隱藏。

與僅影響可訪問(wèn)性的aria-hidden不同，inert適用于所有用戶交互。inert屬性可用于禁用頁(yè)面上暫時(shí)不相關(guān)的部分，例如在表單驗(yàn)證錯(cuò)誤期間、加載數(shù)據(jù)時(shí)，或者當(dāng)某個(gè)部分被隱藏但仍保留在DOM中時(shí)。它還可用于復(fù)雜的用戶界面，如多步驟表單或向?qū)?，以確保用戶僅與當(dāng)前步驟或部分進(jìn)行交互。

然而，inert最常見(jiàn)的用途是在模態(tài)窗口中，此時(shí)你希望防止用戶在模態(tài)窗口打開(kāi)時(shí)與背景內(nèi)容交互。

以下是一個(gè)示例，當(dāng)模態(tài)窗口打開(kāi)時(shí)，inert屬性被添加到主要內(nèi)容上，使其變?yōu)榉墙换ナ降?，并從屏幕閱讀器中隱藏。當(dāng)模態(tài)窗口關(guān)閉時(shí)，inert屬性被移除，主要內(nèi)容再次變?yōu)榭山换サ摹?/span>

<div id="main-content" inert>
 <p>This is the main content of the page. It will be inactive when the modal is open.</p>
</div>
<div id="modal" role="dialog" aria-modal="true">
 <h2>Modal Title</h2>
 <p>This is the content inside the modal.</p>
 <button onclick="closeModal()">Close Modal</button>
</div>
<script>
function openModal() {
 document.getElementById('main-content').setAttribute('inert', '');
 document.getElementById('modal').style.display = 'block';
}
function closeModal() {
 document.getElementById('main-content').removeAttribute('inert');
 document.getElementById('modal').style.display = 'none';
}
</script>

使用inert的最佳實(shí)踐

• 確保在使用inert屬性時(shí)，元素的視覺(jué)非活動(dòng)或禁用狀態(tài)對(duì)視力正常的用戶來(lái)說(shuō)是清晰的。例如，在模態(tài)窗口打開(kāi)時(shí)，可以通過(guò)調(diào)暗或模糊背景內(nèi)容來(lái)與inert屬性相輔相成。
• 不要過(guò)度使用inert，因?yàn)檫@樣做可能會(huì)無(wú)意中使你頁(yè)面的大量部分變得不可交互且無(wú)法訪問(wèn)。請(qǐng)謹(jǐn)慎使用它，僅在必要時(shí)管理用戶焦點(diǎn)和交互。
• 在動(dòng)態(tài)添加和移除inert屬性時(shí)，請(qǐng)確保在不再需要時(shí)正確移除它，以便用戶可以重新訪問(wèn)之前被禁用的內(nèi)容。

15.aria-live屬性

你可以使用aria-live屬性來(lái)通知輔助技術(shù)關(guān)于網(wǎng)頁(yè)上動(dòng)態(tài)內(nèi)容的變化。當(dāng)aria-live應(yīng)用于某個(gè)元素時(shí)，如果該元素內(nèi)的內(nèi)容被更新，屏幕閱讀器會(huì)收到提醒，從而確保用戶在頁(yè)面初次加載后能夠得知發(fā)生的重要變化。

此屬性對(duì)于動(dòng)態(tài)更新的內(nèi)容非常有用，如通知、警報(bào)、聊天消息或股票價(jià)格等。它確保了用戶能夠意識(shí)到那些可能未被注意到的變化。

aria-live可能的值

aria-live屬性主要有三個(gè)值：off、polite和assertive：

• off：默認(rèn)值，表示對(duì)該元素的更新不會(huì)被屏幕閱讀器聲明。
• polite：表示屏幕閱讀器會(huì)聲明更新，但會(huì)等待用戶完成當(dāng)前任務(wù)或閱讀完其他內(nèi)容后再進(jìn)行。這確保了更新不會(huì)打斷用戶的當(dāng)前活動(dòng)。

以下是一個(gè)示例，其中每條新消息都被添加到具有aria-live="polite"屬性的#messages容器中。屏幕閱讀器將在用戶完成當(dāng)前活動(dòng)后宣布新消息。

<div id="chat-window">
 <div id="messages" aria-live="polite">
 <!-- Existing messages are here -->
 <div>John: Hello!</div>
 <div>You: Hi there!</div>
 </div>
</div>
<button onclick="addMessage()">Send Message</button>
<script>
function addMessage() {
 const newMessage = document.createElement('div');
 newMessage.textContent = 'Alice: How are you?';
 document.getElementById('messages').appendChild(newMessage);
}
</script>

• assertive：更新將立即聲明，打斷屏幕閱讀器當(dāng)前正在聲明的任何內(nèi)容。對(duì)于需要用戶立即注意的重要或關(guān)鍵信息，請(qǐng)使用此選項(xiàng)。

在下面的示例中，股票價(jià)格的更新被放置在一個(gè)具有aria-live="assertive"屬性的容器中。

<div id="stock-ticker" aria-live="assertive">
 <!-- Initial stock prices -->
 <div id="stock1">Stock A: $100</div>
 <div id="stock2">Stock B: $150</div>
</div>

<button onclick="updateStockPrices()">Update Prices</button>

<script>
function updateStockPrices() {
 document.getElementById('stock1').textContent = 'Stock A: $95';
 document.getElementById('stock2').textContent = 'Stock B: $155';
}
</script>

使用aria-live的最佳實(shí)踐

• 對(duì)于非關(guān)鍵更新，請(qǐng)使用aria-live="polite"以避免干擾用戶體驗(yàn)。將aria-live="assertive"保留給需要立即注意的緊急更新，如嚴(yán)重錯(cuò)誤或安全警告。
• 請(qǐng)注意你在頁(yè)面上使用aria-live元素的頻率。過(guò)度使用它可能會(huì)給依賴屏幕閱讀器的用戶帶來(lái)過(guò)度刺激的體驗(yàn)，因?yàn)樗麄兛赡軙?huì)被頻繁的公告所淹沒(méi)。
• 不要在不需要公告的內(nèi)容上使用aria-live，也不要在已經(jīng)以另一種方式傳達(dá)給用戶的內(nèi)容上使用它。
• aria-live對(duì)于動(dòng)態(tài)更新的內(nèi)容特別有用，如實(shí)時(shí)體育比分、突發(fā)新聞或聊天應(yīng)用程序。請(qǐng)確保用戶能夠隨時(shí)了解重要更新。

16.aria-roledescription屬性

你可以使用aria-roledescription為元素的角色提供人類可讀、本地化的描述。它覆蓋屏幕閱讀器的隱式或顯式role值，并允許開(kāi)發(fā)人員為復(fù)雜或非傳統(tǒng)的用戶界面組件創(chuàng)建更直觀和上下文特定的描述，這些組件可能沒(méi)有標(biāo)準(zhǔn)的角色名稱。

你可以借助它更清晰地闡釋元素的用途或者功能。

在下面的示例當(dāng)中，屏幕閱讀器會(huì)將其聲明為“書(shū)簽按鈕”，而非僅僅是“按鈕”。

<button role="button" aria-roledescription="Bookmark Button">
 <span aria-hidden="true">?</span> Save this page
</button>

你還可以使用它來(lái)支持國(guó)際化，例如提供不同語(yǔ)言的角色描述。

<button role="button" aria-roledescription="Search Button" lang="en">
 <span aria-hidden="true">??</span> Search
</button>

<button role="button" aria-roledescription="Botón de busqueda" lang="es">
 <span aria-hidden="true">??</span> Buscar
</button>

<button role="button" aria-roledescription="Bouton de recherche" lang="fr">
 <span aria-hidden="true">??</span> Recherche
</button>

使用aria-roledescription的最佳實(shí)踐

• 僅當(dāng)標(biāo)準(zhǔn)角色不能充分描述元素的用途時(shí)，才使用 aria-roledescription。
• 描述應(yīng)簡(jiǎn)短、清晰，并與元素的功能直接相關(guān)。避免使用行話或過(guò)于技術(shù)性的語(yǔ)言。
• aria-roledescription應(yīng)與適當(dāng)?shù)?ARIA 角色一起使用，而不是作為替代。該role提供基本上下文（如 “button” 或 “l(fā)istbox”），而描述則增加了清晰度。
• 如果你的應(yīng)用程序支持多種語(yǔ)言，請(qǐng)確保 aria-roledescription 值已本地化以匹配用戶的語(yǔ)言首選項(xiàng)。這有助于提供一致且易于理解的體驗(yàn)。
• 確保 aria-roledescription 不與其他 ARIA 屬性或元素標(biāo)簽重復(fù)或沖突。它應(yīng)該補(bǔ)充而不是重復(fù)已經(jīng)提供的信息。

17.aria-atomic屬性

你可以使用 aria-atomic 屬性來(lái)控制輔助技術(shù)如何宣布對(duì)元素的更新。當(dāng) aria-atomic 設(shè)置為 true 時(shí)，它表示當(dāng)元素內(nèi)發(fā)生更改時(shí)，應(yīng)將元素的整個(gè)內(nèi)容視為一個(gè)單元，并由屏幕閱讀器完整宣布（而不是僅宣布更改的部分）。

如果對(duì)元素部分的更新可能會(huì)使整體上下文不清晰，aria-atomic 會(huì)提供幫助，提供元素內(nèi)容的完整公告，讓用戶全面了解上下文。

它通常與 aria-live 結(jié)合使用。aria-live 決定如何宣布更新（禮貌或自信），而 aria-atomic 控制是讀取整個(gè)內(nèi)容還是僅讀取更改。

<div id="news-ticker" role="region" aria-live="polite" aria-atomic="true">
 Breaking News: Major storm expected this weekend.
</div>
<button onclick="updateHeadline()">Update Headline</button>
<script>
function updateHeadline() {
 document.getElementById('news-ticker').innerText = 'Breaking News: Stock market hits record high!';
}</script>

使用aria-atomic的最佳實(shí)踐

• 僅將 aria-atomic=“true” 應(yīng)用于完整更新公告對(duì)于理解上下文至關(guān)重要的元素
• 使用 aria-atomic=“true” 時(shí)，請(qǐng)確保元素中的內(nèi)容為用戶提供一致且完整的上下文
• 將 aria-atomic 與 aria-live 結(jié)合使用，以指定應(yīng)如何宣布更新。這可確保以適當(dāng)?shù)姆绞焦几?，并提供完整的上下?/span>

結(jié)論

了解和有效使用HTML屬性以提高可訪問(wèn)性對(duì)于創(chuàng)建包容性的網(wǎng)絡(luò)體驗(yàn)至關(guān)重要。通過(guò)了解并適當(dāng)使用這些屬性，你可以確保你的應(yīng)用程序?yàn)樗性L問(wèn)者提供出色的用戶體驗(yàn)。

資源

• Providing Accessible Names and Descriptions
• MDN ARIA
• No ARIA is better than Bad ARIA
• ARIA examples by properties and states

非常感謝你的閱讀，我希望本指南能幫助你創(chuàng)建更易于訪問(wèn)的 Web 內(nèi)容。

譯者介紹

劉濤，51CTO社區(qū)編輯，某大型央企系統(tǒng)上線檢測(cè)管控負(fù)責(zé)人。

原文標(biāo)題：How to Use HTML Attributes to Make Your Websites and Apps More Accessible，作者：Elizabeth Lola