ARIA:contentinfo 角色

contentinfo 角色定義了一個頁尾,其中包含在站點內每個文件中都能找到的標識資訊,例如版權資訊、導航連結和隱私宣告。這個部分通常被稱為頁尾。

html
<div role="contentinfo">
  <h2>Footer</h2>
  <!-- footer content -->
</div>

這是一個網站頁尾。建議使用 <footer> 元素來代替。

html
<footer>
  <h2>Footer</h2>
  <!-- footer content -->
</footer>

描述

contentinfo 角色是 一個地標,用於標識頁面頁尾。輔助技術可以使用地標來快速識別和導航到文件的大部分割槽域。每頁應該只有一個頂級的 contentinfo 地標角色。

每頁應該只有一個 contentinfo 地標,該地標是透過使用 <footer> 元素或宣告 role="contentinfo" 來建立的。透過 <iframe> 嵌入的內容中存在的 contentinfo 地標不計入此限制。

注意:使用 <footer> 元素將自動傳達一個區域具有 contentinfo 的角色。開發者應該始終優先使用正確的語義 HTML 元素,而不是使用 ARIA,並確保 測試 VoiceOver 中已知的 Issues

示例

html
<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> 元素的直接後代使用。

巨型頁尾

不要在文件的頁尾內巢狀額外的 <footer> 元素或 contentinfo 地標。請改用其他 內容分段元素

標記地標

多個地標

如果文件中存在多個 contentinfo 地標角色或 <footer> 元素,請為每個地標使用 aria-label 屬性提供一個標籤。這個標籤將允許輔助技術使用者快速理解每個地標的用途。

html
<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>。請注意,巢狀在 articleasidemainnavsection 中的 footer 元素不被視為 contentinfo

新增優勢

某些技術(如瀏覽器擴充套件)可以生成頁面上所有地標角色的列表,允許非螢幕閱讀器使用者也能快速識別和導航到文件的大部分割槽域。

規範

規範
無障礙富網際網路應用程式 (WAI-ARIA)
# contentinfo
未知規範

另見