ARIA:标记角色
mark
角色表示由于内容在封闭上下文中的相关性,而为了参考或注释目的而被标记或突出显示的内容。
描述
mark
角色在语义上表示包含被标记/突出显示以供参考的文本的 HTML 元素。这在语义上等效于 HTML <mark>
元素。如果可能,您应该使用此元素代替。
mark
的示例用例与 <mark>
元素完全相同。它们包括突出显示引文中特别感兴趣但未在原始源材料中标记的文本,类似于使用荧光笔标记印刷文章中的段落,以及指示与用户当前活动相关的部分内容,例如突出显示搜索功能找到的文本匹配项。
不要将 mark
用于纯粹的装饰性样式,例如语法高亮显示。
mark
元素不应被赋予可访问名称;aria-label
和 aria-labelledby
属性在 mark
上都被禁止。
示例
在以下示例中,我们有一个已添加注释的文档部分。已注释的部分使用 <span role="mark">
标记。
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="2022-03-30T19:29">March 30 2022, 19:29</time></p>
</div>
相关注释使用 HTML 结构标记,该结构包含一个 <div>
,其中包含 role="comment"
。
为了将注释与正在注释的文本关联起来,我们需要用包含 aria-details
属性的元素包装已注释的文本,该属性的值应为注释的 ID。
最佳实践
优先使用 HTML
使用 <mark>
元素将自动传达节点具有 mark
角色。如果可能,请优先使用它。
规范
将成为 WAI-ARIA 1.3 的一部分,该规范仍在起草中。
另请参见
- HTML
<mark>
元素