ARIA:contentinfo 角色
contentinfo 角色定義了一個頁尾,其中包含在站點內每個文件中都能找到的標識資訊,例如版權資訊、導航連結和隱私宣告。這個部分通常被稱為頁尾。
<div role="contentinfo">
<h2>Footer</h2>
<!-- footer content -->
</div>
這是一個網站頁尾。建議使用 <footer> 元素來代替。
<footer>
<h2>Footer</h2>
<!-- footer content -->
</footer>
描述
contentinfo 角色是 一個地標,用於標識頁面頁尾。輔助技術可以使用地標來快速識別和導航到文件的大部分割槽域。每頁應該只有一個頂級的 contentinfo 地標角色。
每頁應該只有一個 contentinfo 地標,該地標是透過使用 <footer> 元素或宣告 role="contentinfo" 來建立的。透過 <iframe> 嵌入的內容中存在的 contentinfo 地標不計入此限制。
注意:使用 <footer> 元素將自動傳達一個區域具有 contentinfo 的角色。開發者應該始終優先使用正確的語義 HTML 元素,而不是使用 ARIA,並確保 測試 VoiceOver 中已知的 Issues。
示例
<body>
<!-- other page content -->
<div role="contentinfo">
<h2>MDN Web Docs</h2>
<ul>
<li><a href="#">Web Technologies</a></li>
<li><a href="#">Learn Web Development</a></li>
<li><a href="#">About MDN</a></li>
<li><a href="#">Feedback</a></li>
</ul>
<p>
© 2005-2012 Mozilla and individual contributors. Content is available
under <a href="#">these licenses</a>.
</p>
</div>
</body>
可訪問性考慮
謹慎使用
地標角色旨在標識文件的大部分割槽域。使用過多的地標角色可能會在螢幕閱讀器中產生“噪音”,使頁面整體佈局難以理解。
每頁一個 contentinfo 地標
<body> 元素
每個文件應該只有一個 contentinfo 地標,作為 <body> 元素的直接後代使用。
巨型頁尾
標記地標
多個地標
如果文件中存在多個 contentinfo 地標角色或 <footer> 元素,請為每個地標使用 aria-label 屬性提供一個標籤。這個標籤將允許輔助技術使用者快速理解每個地標的用途。
<body>
…
<article>
<h2>Everyday Pad Thai</h2>
<!-- article content -->
<footer aria-label="Everyday Pad Thai metadata">
<p>
Posted on <time datetime="2021-09-23 12:17">September 23</time> by
<a href="#">Lisa</a>.
</p>
</footer>
</article>
…
<footer aria-label="Footer">
<!-- footer content -->
</footer>
</body>
冗餘描述
螢幕閱讀器會播報地標的型別。因此,您不需要在標籤中描述地標是什麼。例如,宣告 role="contentinfo" 並帶有 aria-label="Footer" 的標籤可能會被冗餘地播報為“contentinfo footer”。
最佳實踐
優先使用 HTML
當它是 <body> 元素的直接後代時,使用 <footer> 元素將自動傳達一個區域具有 contentinfo 的角色(除了 VoiceOver 中 已知的一個問題)。如果可能,請優先使用 <footer>。請注意,巢狀在 article、aside、main、nav 或 section 中的 footer 元素不被視為 contentinfo。
新增優勢
某些技術(如瀏覽器擴充套件)可以生成頁面上所有地標角色的列表,允許非螢幕閱讀器使用者也能快速識別和導航到文件的大部分割槽域。
規範
| 規範 |
|---|
| 無障礙富網際網路應用程式 (WAI-ARIA) # contentinfo |
| 未知規範 |