ARIA：註釋角色

comment 角色在語義上表示頁面上某些內容的評論/反應，或對之前評論的評論。

注意： 註釋角色在 WAI-ARIA 1.3 (最新的 ARIA 草案) 中提出，該草案仍在編寫中。

示例

在以下示例中，我們有一個已評論的文件部分。評論的部分使用 <span role="mark"> 標記。

相關注釋使用包含 role="comment" 的 <div> 包裝的 HTML 結構進行標記。

html
<p>
  The last half of the song is a slow-rising crescendo that peaks at the
  <span role="mark" aria-details="thread-1">end of the guitar solo</span>,
  before fading away sharply.
</p>

<div role="comment" id="thread-1" data-author="chris">
  <h3>Chris said</h3>
  <p class="comment-text">I really think this moment could use more cowbell.</p>
  <p><time datetime="2019-03-30T19:29">March 30 2019, 19:29</time></p>
</div>

為了將註釋與被註釋的文字關聯起來，我們需要將被註釋的文字包裝在一個包含 aria-details 屬性的元素中，該屬性的值應該是註釋的 ID。

多個註釋

由於 aria-details 現在可以接受多個 ID，因此我們可以將多個註釋與同一個註釋關聯起來，如下所示

html
<p>
  The last half of the song is a slow-rising crescendo that peaks at the
  <mark aria-details="thread-1 thread-2">end of the guitar solo</mark>, before
  fading away sharply.
</p>

<div role="comment" id="thread-1" data-author="chris">
  <h3>Chris said</h3>
  <p class="comment-text">I really think this moment could use more cowbell.</p>
  <p><time datetime="2019-03-30T19:29">March 30 2019, 19:29</time></p>
</div>

<div role="comment" id="thread-2" data-author="chris">
  <h3>Marcus said</h3>
  <p class="comment-text">
    The guitar solo could do with a touch more chorus, and a slightly lower
    volume.
  </p>
  <p><time datetime="2019-03-29T15:35">March 29 2019, 15:35</time></p>
</div>

巢狀註釋

可以將註釋彼此巢狀，如下所示

html
<div role="comment" id="thread-1" data-author="chris">
  <h3>Chris said</h3>
  <p class="comment-text">I really think this moment could use more cowbell.</p>
  <p><time datetime="2021-03-30T19:29">March 30 2021, 19:29</time></p>

  <div role="comment" data-author="marcus">
    <h3>Marcus replied</h3>
    <p class="comment-text">
      I don't know about that. I think the cowbell could distract from the solo.
    </p>
    <p><time datetime="2021-03-30T21:02">March 30 2021, 21:02</time></p>
  </div>
</div>

可訪問性問題

無

規範

將成為 WAI-ARIA 1.3 的一部分，該版本仍在編寫中。

另請參見