ARIA：列表項角色

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>。有關完整示例，請參閱 最佳實踐。

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

list

專案列表。具有 role list 的元素必須具有一個或多個具有 role listitem 的元素作為子元素，或一個或多個具有 group 角色的元素，這些元素具有一個或多個具有 listitem 角色的元素作為子元素。

group

相關物件的集合，僅限於巢狀在列表中的列表項，其重要性不足以在頁面目錄中佔據一席之地。

最佳實踐

僅在必要時使用 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

另請參閱