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 的一部分,该版本仍在编写中。