此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

ARIA:comment 角色

comment 角色在语义上表示对页面中某些内容的评论/回应,或是对先前评论的回应。

备注:comment 角色是在 WAI-ARIA 1.3(最新的 ARIA 草案)中提出的,该规范目前仍在起草中。

示例

在下面的示例中,我们有一个被评论的文档章节。被评论的章节使用 <span role="mark"> 进行标记。

相关的评论则使用由一个包含 role="comment"<div> 包裹的 HTML 结构进行标记。

html
<p>
  歌曲的后半段是一段缓慢上升的渐强,在<span role="mark" aria-details="thread-1"
    >吉他独奏的结尾</span
  >处达到顶峰,随后迅速淡去。
</p>

<div role="comment" id="thread-1" data-author="chris">
  <h3>Chris 说</h3>
  <p class="comment-text">我真的觉得这一刻应该多来点牛铃声。</p>
  <p><time datetime="2019-03-30T19:29">2019 年 3 月 30 日 19:29</time></p>
</div>

要将评论与被评论的文本关联起来,我们需要用一个包含 aria-details 属性的元素将该文本包裹起来,该属性的值应为相应评论的 ID。

多条评论

由于 aria-details 现在可以接受多个 ID,我们可以将多条评论与同一个标注关联起来,如下所示:

html
<p>
  歌曲的后半段是一段缓慢上升的渐强,在<mark aria-details="thread-1 thread-2"
    >吉他独奏的结尾</mark
  >处达到顶峰,随后迅速淡去。
</p>

<div role="comment" id="thread-1" data-author="chris">
  <h3>Chris 说</h3>
  <p class="comment-text">我真的觉得这一刻应该多来点牛铃声。</p>
  <p><time datetime="2019-03-30T19:29">2019 年 3 月 30 日 19:29</time></p>
</div>

<div role="comment" id="thread-2" data-author="chris">
  <h3>Marcus 说</h3>
  <p class="comment-text">吉他独奏可以再加一点合唱效果,音量稍微调低一些。</p>
  <p><time datetime="2019-03-29T15:35">2019 年 3 月 29 日 15:35</time></p>
</div>

嵌套评论

可以将评论互相嵌套,如下所示:

html
<div role="comment" id="thread-1" data-author="chris">
  <h3>Chris 说</h3>
  <p class="comment-text">我真的觉得这一刻应该多来点牛铃声。</p>
  <p><time datetime="2021-03-30T19:29">2021 年 3 月 30 日 19:29</time></p>

  <div role="comment" data-author="marcus">
    <h3>Marcus 回复道</h3>
    <p class="comment-text">
      我不太认同。我觉得牛铃声可能会分散对独奏的注意力。
    </p>
    <p><time datetime="2021-03-30T21:02">2021 年 3 月 30 日 21:02</time></p>
  </div>
</div>

无障碍考虑

无。

规范

将成为 WAI-ARIA 1.3 的一部分,该规范目前仍在起草中。