ARIA：補充角色
complementary 地標角色用於指定一個支援性部分，該部分與主內容相關，但也可以獨立存在。這些部分通常呈現為側邊欄或突出顯示框。如果可能，請使用 HTML <aside> 元素。
<div role="complementary">
<h2>Our partners</h2>
<!-- complementary section content -->
</div>
這是一個包含專案贊助商連結的側邊欄。
描述
complementary 角色是 一個地標 角色。地標可用於輔助技術，以便快速識別和導航到文件的大部分割槽域。complementary 地標角色容器中列出的內容，如果與文件主內容分離，也應該是有意義的。
注意：使用 <aside> 元素將自動傳達該部分具有 complementary 角色。開發者應始終優先使用正確的語義 HTML 元素，而不是使用 ARIA。
示例
<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 角色。如果可能，請優先使用語義化的 <aside> 元素，而不是 complementary 角色。
標記地標
多個地標
如果文件中有一個以上的 complementary 地標角色或 <aside> 元素，請使用 aria-label 屬性為每個地標提供標籤，或者，如果 aside 有一個恰當的描述性標題，請使用 aria-labelledby 屬性指向它。此標籤將允許螢幕閱讀器使用者能夠快速理解每個地標的目的。
<aside aria-label="Note about usage">
<!-- content -->
</aside>
…
<aside id="sidebar" aria-label="Sponsors">
<!-- content -->
</aside>
冗餘描述
螢幕閱讀器會播報地標的角色型別。因此，您無需在標籤中描述地標是什麼。例如，宣告 role="complementary" 並帶有 aria-label="Sidebar" 的標籤可能會被冗餘地播報為“complementary sidebar”。
新增優勢
某些技術（如瀏覽器擴充套件程式）可以生成頁面上所有地標角色的列表，使非螢幕閱讀器使用者也能快速識別和導航到文件的大部分割槽域。
規範
| 規範 |
|---|
| 無障礙富網際網路應用程式 (WAI-ARIA) # complementary |
| 未知規範 |