suggestion landmark role semantically denotes a single proposed change to an editable document. This should be used on an element that wraps an element with an
insertion role, and one with a
When you’ve got a content change that involves an insertion and a deletion, there is no way for a screenreader user to work out if the two are related or not. This is the job of
role="suggestion", which should be set on an element wrapping both of them like so:
<p>Freida’s pet is a <span role="suggestion"> <span role="deletion">black Cat called Luna</span> <span role="insertion">purple Tyrannosaurus Rex called Tiny</span> </span>. </p>
We could even provide an information box saying who made the suggestion and when, and associate it with the suggestion via
<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 Tyrannosaurus 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>
Browsers tend to provide a default black strikethrough for deletions, and a black underline for insertions, but you’ll probably want to use
Landmark roles are intended to be used sparingly, to identify larger overall sections of the document. Using too many landmark roles can create "noise" in screen readers, making it difficult to understand the overall layout of the page.
Will be part of WAI-ARIA 1.3, which is still being drafted.
Screen reader support