Current best practices for representing text edits in a screen reader?...

Tony Atkins tony at
Mon Oct 23 12:57:49 UTC 2017

Hi, All:

In recent work on the UL, I have been trying to represent revisions to a
document in a way that also makes sense with a screen reader.

I started by using *aria-label* attribute to add hints like "this content
was added" and "this content was removed".   At least with VoiceOver, this
resulted in odd artefacts like announcing each change as a group containing
two items.

I moved on to trying to use the HTML <ins> and <del> elements to enclose
insertions and deletions respectively.  This made no difference at all in
the way VoiceOver read the content.

I then updated this approach based on the strategy described here
<> under
"CSS Generated Content + Visually Clipped Text", which is to add
visually-clipped content before <ins> and <del> elements using something
like the following HTML and CSS snippets:

This string <del>is unchanged</del> <ins>has been updated</ins>.

ins:before {
>     content: "content added:";
>     position: absolute;
>     clip: rect(0 0 0 0);
> }
> del:before {
>     content: "content removed:";
>     position: absolute;
>     clip: rect(0 0 0 0);
> }
> In my limited testing with VoiceOver, this requires more effort on the
user's part to move through the content, as the screen reader stops on each
before as well as each element.  However, the text read aloud is clear and
does not add odd "group" announcements like the "labeled-by" strategy.

I was hoping to get some input from the wider group, as I know very many of
you are quite knowledgeable in this area, and have experience with a wider
range of screen readers as well.  Any ideas or pointers to previous work in
this area would be appreciated.


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <>

More information about the fluid-work mailing list