ARIA：補充角色

complementary 地標角色 用於指定與主要內容相關的支援部分，但如果分離則可以獨立存在。這些部分通常以側邊欄或標註框的形式呈現。如果可能，請使用 HTML <aside> 元素 代替。

html
<div role="complementary">
  <h2>Our partners</h2>
  <!-- complementary section content -->
</div>

這是一個包含指向專案贊助商的連結的側邊欄。

描述

complementary 角色是 地標 角色。地標可用於輔助技術快速識別和導航到文件的大部分內容。包含在帶有 complementary 地標角色的容器中的內容，即使與文件的主要內容分離也應具有意義。

注意： 使用 <aside> 元素將自動傳達一個部分具有 complementary 角色。開發人員應始終優先使用正確的語義 HTML 元素，而不是使用 ARIA。

示例

html
<div role="complementary">
  <h2>Trending articles</h2>
  <ul>
    <li><a href="#">18 tweets that will make you feel all the feels</a></li>
    <li>
      <a href="#">Stop searching! I've found the perfect lunch containers.</a>
    </li>
    <li>
      <a href="#">The time has come to decide how to call these foods</a>
    </li>
    <li><a href="#">17 really good posts we saw on Tumblr this week</a></li>
    <li><a href="#">10 parent hacks we know work because we tried them</a></li>
  </ul>
</div>

可訪問性問題

地標角色 旨在謹慎使用，用於識別文件中更大的總體部分。使用過多的地標角色可能會在螢幕閱讀器中造成“噪音”，從而難以理解頁面的總體佈局。

最佳實踐

優先使用 HTML

使用 <aside> 元素將自動傳達一個部分具有 complementary 角色。如果可能，請優先使用它。

標記地標

多個地標

如果文件中存在多個 complementary 地標角色或 <aside> 元素，請使用 aria-label 屬性為每個地標提供標籤，或者如果側邊欄具有適當的描述性標題，則使用 aria-labelledby 屬性指向它。此標籤將使輔助技術使用者能夠快速理解每個地標的用途。

html
<aside aria-label="Note about usage">
  <!-- content -->
</aside>

…

<aside id="sidebar" aria-label="Sponsors">
  <!-- content -->
</aside>

冗餘描述

螢幕閱讀器會宣佈地標的角色型別。因此，您不需要在標籤中描述地標是什麼。例如，role="complementary" 與 aria-label="Sidebar" 的宣告可能會冗餘地宣佈為“補充側邊欄”。

附加優勢

某些技術（如瀏覽器擴充套件）可以生成頁面上所有地標角色的列表，使非螢幕閱讀器使用者也可以快速識別和導航到文件的大部分內容。

規範

規範
可訪問的富網際網路應用程式 (WAI-ARIA)
# complementary
未知規範

另請參閱