ARIA: listitem 角色

ARIA 的 listitem 角色可用於標識列表中專案中的一項。它通常與 list 角色結合使用，該角色用於標識列表容器。

html

<section role="list">
  <div role="listitem">List item 1</div>
  <div role="listitem">List item 2</div>
  <div role="listitem">List item 3</div>
</section>

描述

任何由外部容器包含一系列元素的容器組成的內容，都可以分別使用 list 和 listitem 容器來標識給輔助技術。

關於應該使用哪些元素來標記列表和列表項，沒有硬性規定，但你應該確保列表項在列表的上下文中是有意義的，例如，購物清單、食譜步驟、駕駛路線。

注意： 如果在你的工作中儘可能的話，你應該使用合適的語義 HTML 元素來標記列表及其列表項 — <ul>/<ol> 和 <li>。有關完整示例，請參閱最佳實踐。

最佳實踐

僅在必須時使用 role="list" 和 role="listitem" — 例如，如果你無法控制你的 HTML，但可以透過 JavaScript 動態地改進可訪問性。

如果可能，你應該使用合適的語義 HTML 元素來標記列表和列表項 — <ol>、<ul> 和 <li>。例如，我們上面的示例應重寫如下

html

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

或者，如果列表項的順序很重要，則使用有序列表

html

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

注意： ARIA 的 list / listitem 角色不區分有序列表和無序列表。

注意： 在 CSS 中使用 list-style: none; 樣式化列表會移除列表的語義。新增 role="listitem" 可以恢復語義。

注意： 如果你正在標記一個將用作選項卡介面的專案列表，你應該改用 tab、tabpanel 和 tablist 角色。

規範

規範
無障礙富網際網路應用程式 (WAI-ARIA) # listitem

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年5月12日⁩，由 MDN 貢獻者進行。

在 GitHub 上檢視此頁面 • 報告此內容的問題

ARIA: listitem 角色

描述

相關的 WAI-ARIA 角色、狀態和屬性

最佳實踐

規範

另見

幫助改進 MDN