通過HTML屬性來增強網站和應用程序的可訪問性

譯文精選

作者：劉濤 2024-09-23 17:01:10

開發前端

你曾經在 HTML 語言中使用過某個屬性，卻并未完全明白它的用途嗎？你并非個例！隨著時間的推移，我深入探究了眾多HTML屬性背后的含義，特別是那些對于可訪問性極為關鍵的屬性。

譯者 | 劉濤

審校 | 重樓

在這個深入的教程里，我將剖析一些增強可訪問性的關鍵HTML屬性，闡釋它們的作用以及何時有效地運用它們。

先決條件

要學習本教程，你應該對HTML具備基本的認識，并且對Javascript知識稍有了解。

1.什么是ARIA屬性？

本文中列出的大多數屬性都是ARIA屬性。ARIA，全稱為Accessible Rich Internet Applications（可訪問富互聯網應用），是由W3C（萬維網聯盟）定義的一組屬性，旨在提升網絡應用的可訪問性。

ARIA屬性為輔助技術（如屏幕閱讀器）提供額外信息。正確運營這些屬性可以使復雜的網絡應用對視覺、聽覺或運動障礙人士更加友好。

使用ARIA的一個關鍵原則是：有時最好不要使用它。盡管這聽起來可能有些矛盾，但你應該僅在必要時才使用ARIA屬性。過度使用ARIA可能會干擾依賴輔助技術的用戶體驗。雖然視力正常的用戶可能察覺不到任何問題，但ARIA的過度或不當使用可能會對可訪問性產生負面影響。

2.alt屬性

如果你已經在HTML中使用過圖片，那么alt屬性對你來說或許并不陌生。你使用它來提供替代文本，這些文本會在圖片無法在屏幕上正確顯示時予以呈現。

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

alt屬性中的內容應該簡潔明了，因為其主要目的是為那些無法看到圖片的人簡要地描述圖片。這涵蓋了依賴屏幕閱讀器的用戶、搜索引擎以及因網絡連接緩慢致使圖片可能無法加載的用戶。如果alt文本過長，可能會包含不必要的細節，這些細節不會增加用戶對圖片內容的理解。

alt屬性與圖片說明有所不同。圖片說明是可見的，可以提供更多關于圖片的上下文或額外信息。將圖片說明用作alt文本可能會使其過長且冗余。

如果圖片純粹是裝飾性的，那么alt屬性應當為空。若圖片有一個空的alt屬性，輔助工具將會跳過它。這對于幫助用戶專注于內容而不被不必要的信息分散注意力非常重要。

下面是一個如何使用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屬性用于為可能沒有可見文本的元素提供一個可訪問的名稱。一個常見的例子是包含圖像或 SVG 的按鈕。

很多元素都有一個可訪問的名稱——可訪問的名稱是元素內部的內容。在這個例子中，標題的可訪問名稱是“Frequently Asked Questions”。

<h1>Frequently Asked Questions</h1>

包括使用輔助技術的人員在內的每個人，都能清楚地理解上面這個例子的意思，因為它包含了可見的內容。

但在下面的例子中，倘若按鈕沒有aria-label，依賴屏幕閱讀器的用戶或許會錯過按鈕中的內容。這是因為按鈕中的內容是一個SVG格式（Scalable Vector Graphics:可縮放矢量圖），而SVG不包含任何可見的內容：

<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>

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

<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>

你應該謹慎且適當地使用aria-label。過度使用該屬性可能會導致幾個問題：

aria-label的內容對視力正常的用戶不可見。如果有認知障礙的用戶使用屏幕閱讀器來獲取支持時，他們可能不理解為什么聽到的信息與在屏幕上看到的不同。
在大型代碼庫中廣泛使用aria-label會使 HTML 更難維護。你可能難以跟蹤標簽的來源，特別是如果它們是通過編程方式設置的或在多個地方設置的。

使用aria-label的最佳實踐

只要有可能，就用可見文本標簽。它們更易于理解和維護，并且能夠為所有用戶提供一致的體驗。
倘若頁面上已經存在一個可見的標簽，請使用 aria-labelledby 將元素與現有文本關聯起來，而非使用 aria-label 創建一個新標簽（我們稍后會探討這一點）。
如果你使用 aria-label，請讓文本保持簡短且切中要害，并用最少的詞匯來描述元素的目的。

4.aria-labelledby屬性

aria-labelledby屬性用于將一個元素和另一個元素相關聯，后者充當前者的標簽。它能夠把目標元素與頁面上的一個或多個其他元素相連接，這些元素中包含的文本將作為目標元素的標簽來使用。

你能夠在已經存在可見的文本標簽，或者標簽需要由多個文本元素構成時運用此屬性。

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

<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>

有時，你可能想將多個文本片段組合成標簽，可以通過在aria-labelledby屬性中列出多個ID來實現這一點：

<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在目的上是相似的，都是為了提供一個可訪問的元素。

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

aria-label屬性直接為元素指定一串文本作為標簽。這段文本在屏幕上不可見，但會被屏幕閱讀器等輔助技術朗讀出來。它通常用于那些沒有可見文本標簽的情況。

而aria-labelledby屬性則通過引用頁面上已存在的一個或多個元素（利用這些元素的ID屬性）來作為目標元素的標簽。標簽文本對所有用戶都是可見的，因為它們本身就是頁面上其他元素內容的一部分。

使用aria-labelledby的最佳實踐

當頁面上已經存在可以作為標簽的文本時，應優先使用aria-labelledby而不是aria-label。這樣做可以減少冗余，并確保視力正常的用戶和屏幕閱讀器用戶都能看到相同的內容。
aria-labelledby引用的ID屬性在頁面上必須是唯一的，并且必須正確地指向現有的元素。如果ID缺失或錯誤，標簽將不會起作用，從而導致可訪問性問題。
當組合多個標簽時，請確保組合后的標簽在一起閱讀時是有意義的。aria-labelledby中ID的順序很重要，因為屏幕閱讀器會按照列出的順序來朗讀標簽。
與aria-label一樣，應避免在可以使用更簡單方法（如直接使用可見的label元素）的情況下過度使用aria-labelledby。這有助于保持代碼的可維護性，并減少用戶的認知負擔。

5.aria-describedby屬性

aria-describedby屬性用于將一個元素與一個或多個能為其提供額外描述性信息的元素相關聯。aria-describedby屬性用于為元素提供額外的上下文或說明。

與旨在提供標簽或名稱的aria-labelledby不同，aria-describedby旨在為用戶提供有關元素的更為詳細的信息或上下文，通常是對他們從標簽中已經了解到的內容的補充。

<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>

當在同一個元素上同時運用了 aria-labelledby 和 aria-describedby 屬性時，屏幕閱讀器會首先聲明由 aria-labelledby 指定的標簽，接著聲明元素的角色（例如，“按鈕”），最后聲明由 aria-describedby 所提供的描述。

使用aria-describedby的最佳實踐

當你需要為用戶提供超出標簽范疇的額外上下文或說明時，應當使用“aria-describedby”屬性。這對于表單、復雜控件或者任何可能需要加以澄清的元素而言特別有用。
盡管“aria-describedby”旨在提供更為詳盡的描述，但是應當避免使用過長的文本。要保持描述的內容專注于用戶與元素有效交互所需要了解的信息。
和“aria-labelledby”相同，請確保“aria-describedby”所引用的元素具備唯一且相關的“id”屬性。這些元素的內容應當直接與它們所描述的元素相關聯。

6.role屬性

role屬性用于指定元素的角色。你可以使用它來覆蓋語義元素的默認角色，從而幫助輔助技術理解元素應該如何被解釋或與之交互。

當你使用非語義元素（如<div>或<span>）來創建交互式控件（如按鈕、對話框、選項卡等）時，role屬性會向輔助技術傳遞元素的預期行為。這樣，即使元素本身沒有明確的語義含義，輔助技術也能正確地識別和處理它。此外，你還可以使用role屬性來定義地標角色，這些角色有助于導航，如banner或complementary。這些地標角色定義了頁面的結構，為屏幕閱讀器用戶提供了更好的導航體驗。

常見的role值

地標區域的角色：

banner：代表網站的頭部。
navigation：定義頁面的導航部分，通常用于網站或頁面的導航鏈接。
main：標記文檔的主要內容，區別于側邊欄、頁腳等。
contentinfo：代表頁腳信息。

下面的這個示例僅用于演示目的——在可能的情況下，你應該使用正確的語義元素：

<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：代表一個按鈕元素，用戶可以點擊它來觸發某個動作。
dialog：標記一個對話框或模態窗口，它要求用戶進行交互。
alert：將一個元素標識為重要的消息或警告，需要用戶注意。
tablist、tab和tabpanel：用于選項卡界面，其中tablist包含選項卡，tab控制其對應tabpanel的可見性。

<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>

選項卡面板的示例：

<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屬性的最佳實踐

始終優先使用已經具有適當角色的原生HTML元素（例如，<button>、<header>、 <nav>、<main>）。如此能夠在更廣泛的瀏覽器和設備上提供更優的可訪問性支持。
切勿過度使用或誤用role屬性，因為這可能會導致混淆并降低可訪問性。在有需要的時候，使用role來增強或澄清，而不是替換語義HTML。
了解隱式角色。許多HTML元素具有隱式角色。例如，帶有href屬性的<a>元素自動具有link角色。避免向這些元素添加冗余的role屬性。

7.aria-controls屬性

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

例如，你能夠在選項卡按鈕上使用aria-controls來聲明每個按鈕控制所對應的面板：

<!-- 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的最佳實踐

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

8.aria-selected屬性

aria-selected 屬性用于聲明一組可選項目當中某個元素的當前選擇狀態。可選項目可以是菜單中的選項、選項卡面板中的選項，或列表框中的項目。

以下是一個在列表框中選擇狀態的一個示例，選項1中的 aria-selected ="true"表示選項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的最佳實踐

對于選中的項目使用aria-selected="true"，對于未選中的項目使用aria-selected="false"。這個值應當是一個字符串，而非布爾值。
確保元素的可見狀態（例如，活動的選項卡或選中項）與aria-selected的值相匹配。不一致的狀態可能會導致使用輔助技術的用戶感到困惑。
將aria-selected與適當的role屬性（例如，對于列表框項目使用role="option"）結合使用，以提供完整的上下文。
確保在用戶與界面交互時動態更新aria-selected。例如，當用戶選擇新選項時，相應地更新aria-selected屬性。

9.tabindex屬性

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

tabindex可能的值

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

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

具有相同tabindex值的元素將依照它們在文檔中出現的順序進行導航。

注意：使用正值的tabindex或許會致使tab鍵的導航順序變得混亂且不符合直覺。通常，對于應當按照自然順序接收焦點的元素，使用tabindex="0"是更優的選擇。

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

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

負值：在 tabindex 屬性中使用負值，目的是將元素從 Tab 鍵的導航順序里移除，這表示用戶無法通過 Tab 鍵直接聚焦到該元素上。然而，這并不代表該元素完全不可聚焦；它依舊能夠通過編程的方式（例如，使用 JavaScript）來接收焦點。這種設置對于那些默認情況下不應被聚焦，但在某些特定條件下可能需要被聚焦的元素尤其有用。

<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的最佳實踐

盡可能依賴自然的Tab鍵導航順序。使用tabindex="0"來將元素納入到Tab鍵的導航順序中，并避免在絕對必要時使用正值。
使用正值的tabindex可能會創建不可預測的Tab鍵導航順序，并增加用戶導航的難度。更好的做法是使用默認的導航流和tabindex="0"。
對于不打算被聚焦的元素，使用tabindex="-1"。
確保焦點順序遵循邏輯且直觀的順序，這與頁面的視覺布局和交互流程相匹配。
使用鍵盤和輔助技術進行測試。
當動態添加或刪除可聚焦元素（例如，通過JavaScript）時，請確保正確處理焦點管理，以保持流暢的用戶體驗。

10.title屬性

在HTML中，title屬性用于提供關于元素的附加信息。當用戶將鼠標懸停在包含標題的元素上時，屬性中的內容會以工具提示的形式顯示。它可以應用于大多數HTML元素，包括鏈接、圖片和表單字段。

你可以使用title屬性來提供元素內容的簡要解釋或描述。例如，你可以在使用<abbr>標簽時，通過它來聲明縮略語或首字母縮略詞的含義。

<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的可訪問性問題

標題屬性雖然具有一定的實用價值，但也存在一些可訪問性問題：

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

使用title屬性的最佳實踐

避免僅依賴 title 屬性。確保關鍵信息以更具可訪問性的形式提供，例如可見文本或 ARIA 屬性。
將 title 屬性用作補充性、非關鍵性的信息，以增強用戶體驗，但并不是內容理解的必要條件。
對于表單輸入，使用 aria-describedby 屬性將附加說明與表單元素關聯。應優先使用可見標簽或描述，替代或補充 title 屬性，以確保所有用戶均能獲取所需信息。
如果使用 title 屬性，請保持文本簡短且切中要點。過長的工具提示可能難以閱讀，并可能被截斷。

11.在label標簽中使用for屬性

當在<label>中使用for屬性時，它用于將標簽與其對應的表單控件元素（即<input>、<select>或<textarea>）連接起來。當指定的輸入獲得焦點時，屏幕閱讀器會聲明該標簽。當正確使用for屬性時，點擊標簽會使對應的輸入獲得焦點。

for屬性的值應該與它所關聯的輸入的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屬性的最佳實踐

務必確保每個表單控件都具備唯一的id屬性，以便for屬性能夠準確無誤地引用它。避免在同一頁面上使用重復的 id值。
杜絕使用空的for屬性。倘若沒有關聯的表單控件，這可能會令輔助技術的用戶產生困惑。
將標簽放置于與其關聯的表單控件的附近。通常而言，為了實現最佳的可讀性和可用性，標簽應當放置在表單控件的上方或者左側。

12.scope屬性

在HTML表格中，scope屬性用于定義<th>（表格頭部）與其所描述的單元格之間的關系。這個屬性對于可訪問性尤為重要，因為它幫助屏幕閱讀器和其他輔助技術理解表格的結構，并向用戶傳達正確的信息。

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

可能的scope值

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

<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>元素是列的標題。

<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>元素是一組行的標題。在下面的例子中，“Marketing Department”和“Sales Department”這兩行具有scope="rowgroup"屬性，以聲明它們作為后續行組的標題。

<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> 元素是一組列的標題。在下面的例子中，scope="colgroup" 用于聲明第一行標題適用于多組列（Q1 和 Q2），而scope="col"和scope="row"分別用于單個列和行。

<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的最佳實踐

習慣為復雜表格定義scope屬性，以明確表頭和數據單元格之間的關系。
盡可能簡化表格結構。雖然scope屬性有助于提高可訪問性，但也要考慮在可能的情況下簡化表格結構。如果表格過于復雜，即使使用了正確的標記，也可能讓所有用戶都難以理解。
對于特別復雜的表格，請考慮使用ARIA屬性（如aria-labelledby或aria-describedby）來提供額外的上下文信息，并確保所有用戶都能有效地瀏覽表格。
在應用scope屬性后，請使用屏幕閱讀器測試表格，以確保表頭和數據單元格之間的關系被正確宣布。
在不需要的情況下不要使用scope。對于簡單的表格，如果每個表頭都清楚地與單行或單列相關聯，那么HTML的默認行為通常就足夠了。

13.aria-hidden屬性

“aria-hidden” 屬性被設計用來在輔助技術（如屏幕閱讀器）中控制元素的“可訪問性”狀態，即便這些元素在視覺呈現上依然對用戶可見。通過應用此屬性，開發者可以使用它來隱藏純粹的裝飾性元素，如圖標或圖像，這些元素不會為內容添加有意義的信息。這有助于防止屏幕閱讀器讀取不必要的信息。

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

你還可以使用aria-hidden來隱藏已經聲明過的內容，以防止屏幕閱讀器重復聲明相同的信息。對于可以打開和關閉的內容（如模態窗口或可擴展部分），你可以使用aria-hidden來隱藏非活動狀態的內容，確保屏幕閱讀器僅與可見的活動內容交互。

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

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

<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的最佳實踐

僅在需要針對屏幕閱讀器隱藏內容，以防止用戶被冗余或無關的信息所淹沒時，才使用“aria-hidden”。
切勿在用戶需要與之進行交互的元素（例如按鈕或鏈接）上使用。
確保“aria-hidden”能夠精準反映元素在屏幕上的可見性。倘若一個元素通過JavaScript或CSS變為可見或隱藏，要相應地更新“aria-hidden”，以維持可訪問性。
在團隊環境當中，在代碼庫中記錄為何以及在何處使用“aria-hidden”，以便其他團隊成員理解其用途，并能夠正確地對其進行維護。

14.inert屬性

inert屬性阻止元素及其所有后代元素成為可聚焦、可交互的，或者被輔助技術（如屏幕閱讀器）感知。當一個元素具有 inert屬性時，它無法接受焦點、被點擊或以任何方式與之交互。同時，它也會被輔助技術隱藏。

與僅影響可訪問性的aria-hidden不同，inert適用于所有用戶交互。inert屬性可用于禁用頁面上暫時不相關的部分，例如在表單驗證錯誤期間、加載數據時，或者當某個部分被隱藏但仍保留在DOM中時。它還可用于復雜的用戶界面，如多步驟表單或向導，以確保用戶僅與當前步驟或部分進行交互。

然而，inert最常見的用途是在模態窗口中，此時你希望防止用戶在模態窗口打開時與背景內容交互。

以下是一個示例，當模態窗口打開時，inert屬性被添加到主要內容上，使其變為非交互式的，并從屏幕閱讀器中隱藏。當模態窗口關閉時，inert屬性被移除，主要內容再次變為可交互的。

<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的最佳實踐

確保在使用inert屬性時，元素的視覺非活動或禁用狀態對視力正常的用戶來說是清晰的。例如，在模態窗口打開時，可以通過調暗或模糊背景內容來與inert屬性相輔相成。
不要過度使用inert，因為這樣做可能會無意中使你頁面的大量部分變得不可交互且無法訪問。請謹慎使用它，僅在必要時管理用戶焦點和交互。
在動態添加和移除inert屬性時，請確保在不再需要時正確移除它，以便用戶可以重新訪問之前被禁用的內容。

15.aria-live屬性

你可以使用aria-live屬性來通知輔助技術關于網頁上動態內容的變化。當aria-live應用于某個元素時，如果該元素內的內容被更新，屏幕閱讀器會收到提醒，從而確保用戶在頁面初次加載后能夠得知發生的重要變化。

此屬性對于動態更新的內容非常有用，如通知、警報、聊天消息或股票價格等。它確保了用戶能夠意識到那些可能未被注意到的變化。

aria-live可能的值

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

off：默認值，表示對該元素的更新不會被屏幕閱讀器聲明。
polite：表示屏幕閱讀器會聲明更新，但會等待用戶完成當前任務或閱讀完其他內容后再進行。這確保了更新不會打斷用戶的當前活動。

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

<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：更新將立即聲明，打斷屏幕閱讀器當前正在聲明的任何內容。對于需要用戶立即注意的重要或關鍵信息，請使用此選項。

在下面的示例中，股票價格的更新被放置在一個具有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的最佳實踐

對于非關鍵更新，請使用aria-live="polite"以避免干擾用戶體驗。將aria-live="assertive"保留給需要立即注意的緊急更新，如嚴重錯誤或安全警告。
請注意你在頁面上使用aria-live元素的頻率。過度使用它可能會給依賴屏幕閱讀器的用戶帶來過度刺激的體驗，因為他們可能會被頻繁的公告所淹沒。
不要在不需要公告的內容上使用aria-live，也不要在已經以另一種方式傳達給用戶的內容上使用它。
aria-live對于動態更新的內容特別有用，如實時體育比分、突發新聞或聊天應用程序。請確保用戶能夠隨時了解重要更新。

16.aria-roledescription屬性

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

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

在下面的示例當中，屏幕閱讀器會將其聲明為“書簽按鈕”，而非僅僅是“按鈕”。

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

你還可以使用它來支持國際化，例如提供不同語言的角色描述。

<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的最佳實踐

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

17.aria-atomic屬性

你可以使用 aria-atomic 屬性來控制輔助技術如何宣布對元素的更新。當 aria-atomic 設置為 true 時，它表示當元素內發生更改時，應將元素的整個內容視為一個單元，并由屏幕閱讀器完整宣布（而不是僅宣布更改的部分）。

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

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

<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的最佳實踐

僅將 aria-atomic=“true” 應用于完整更新公告對于理解上下文至關重要的元素
使用 aria-atomic=“true” 時，請確保元素中的內容為用戶提供一致且完整的上下文
將 aria-atomic 與 aria-live 結合使用，以指定應如何宣布更新。這可確保以適當的方式公布更新，并提供完整的上下文

結論

了解和有效使用HTML屬性以提高可訪問性對于創建包容性的網絡體驗至關重要。通過了解并適當使用這些屬性，你可以確保你的應用程序為所有訪問者提供出色的用戶體驗。

資源

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

非常感謝你的閱讀，我希望本指南能幫助你創建更易于訪問的 Web 內容。

譯者介紹

劉濤，51CTO社區編輯，某大型央企系統上線檢測管控負責人。

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

責任編輯：華軒來源： 51CTO

HTML屬性應用程序 Javascript

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看