ARIA: list 角色

ARIA 的 list 角色可用於標識專案列表。它通常與 listitem 角色結合使用，後者用於標識列表中包含的列表項。

html

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

描述

任何包含外部容器和內部元素列表的內容都可以使用 list 和 listitem 容器分別標識給輔助技術。一個 list 只能包含零個或多個 listitem 子項。

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

注意：最佳實踐規定，應使用適當的語義 HTML 元素而不是 ARIA 角色來標記列表和列表項——<ul>、<ol> 和 <li>。請參閱最佳實踐以獲取完整示例。

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

listitem 角色: 列表中的單個專案。具有 listitem 角色的元素只能包含在具有 list 角色的元素中。

最佳實踐

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

與 HTML 的 <ol> 和 <ul> 不同，ARIA list 角色不區分有序列表和無序列表。如果可能，你應該使用適當的語義 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 角色不區分有序列表和無序列表。

另外，請注意，如果你使用的是 <ol> 或 <ul> 的語義 HTML 元素，並應用了 presentation 角色，則每個子 <li> 元素都會繼承 presentation 角色，因為 ARIA 要求 listitem 元素具有父 list 元素。因此，<li> 元素不會暴露給輔助技術，但這些 <li> 元素內部包含的內容，包括巢狀列表，對輔助技術是可見的。

注意： 如果你正在標記將用作標籤頁介面的專案列表，則應改用 tab、tabpanel 和 tablist 角色。

規範

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

另見

幫助改進 MDN

瞭解如何貢獻

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

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