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 中的已知問題進行測試。

示例

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 頁尾”。

最佳實踐

優先使用 HTML

當它是 <body> 的直接後代時，使用 <footer> 元素將自動傳達一個部分具有 contentinfo 的角色（除了 VoiceOver 中的已知問題）。如果可能，優先使用 <footer>。請注意，巢狀在 article、aside、main、nav 或 section 內的 footer 元素不被視為 contentinfo。

額外的好處

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

規範

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

另請參閱