ARIA：列表角色

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)
# 列表

另請參閱