ARIA: suggestion 角色
suggestion 角色在语义上表示对可编辑文档的单个建议更改。它应应用于包装了具有 insertion 角色的元素和具有 deletion 角色的元素的元素。
示例
当您有一个涉及插入和删除的内容更改时,屏幕阅读器用户无法弄清楚这两者是否相关。这就是 role="suggestion" 的作用,它应该设置在像这样包装两者的元素上
html
<p>
Freida's pet is a
<span role="suggestion">
<span role="deletion">black Cat called Luna</span>
<span role="insertion">purple T. Rex called Tiny</span></span
>.
</p>
我们甚至可以提供一个信息框,说明谁在何时进行了建议,并通过 aria-details 将其与建议相关联。
html
<p>
Freida's pet is a
<span role="suggestion" aria-details="comment-source">
<span role="deletion">black Cat called Luna</span>
<span role="insertion">purple T. Rex called Tiny</span></span
>.
</p>
<div id="comment-source">
Suggested by Chris,
<time datetime="2019-03-30T19:29">March 30 2019, 19:29</time>
</div>
当使用隐式公开这些角色的 HTML 元素时,浏览器倾向于为删除提供默认的黑色删除线,为插入提供黑色下划线。但是,当使用显式的 ARIA 角色来修改 HTML 元素(如 div)时,您需要使用 CSS 来自定义此类删除和插入的视觉样式。
最佳实践
优先使用 HTML
使用 <ins> 和 <del> 元素将自动传达一个区域具有 insertion 或 deletion 角色。如果可能,请优先使用 HTML 元素。
规范
将成为 WAI-ARIA 1.3 的一部分,该版本仍在起草中。