Bruce Lawson’s personal site

Screenreaders and <ins> and <del>

(Last Updated on )

I’m more embarrassed to show this code than to admit I masturbate to photos of badgers.

Tommy Olsson wrote that the <ins> and <del> tags are forgotten element types. Perhaps they are in the real world, but in the legal world, they’re alive and well, marking up amendments to laws and guidance. But how do they sound in screenreaders?


I was marking up a long legal document for a client, using these tags, and tested them in JAWS 5.

Here’s a sample:

This text is <del>deleted</del> and <ins>this is inserted</ins>.

What I was hoping to hear is “start deleted text” and “end deleted text” on the del tags, and the cognate for the <ins>, but it just reads out “this text is deleted and this text is inserted”, completely ignoring my markup. For the blind lawyers using the site, this would be a disaster. They’d have absolutely no way to know what had changed, so no way to know the current state of the law!

I’d worked out an ugly hack, but thought I’d ask the helpful and knowledgeable chaps and chapesses on the Accessify forums. Andy jumped straight in to the rescue, with the excellent, sematically-decent suggestion of using title attributes on the tags. Unfortunately, it wouldn’t help much because (a) Jaws doesn’t read out the title in its default configuration, and (b) There’d be no way to make the end of a deletion or insertion.

Consider
The big <del title="deleted text">fat hairy</del> hedgehog was happy.

The user would presumably think the deletion was “fat hairy hedgehog was happy”. Just as bad as no help at all.

So there was nothing for it but to add loads of redundant spans around the deletions and insertions, and position those spans off the screen, so they wouldn’t display but would be read out by the screenreader.

David made the excellent suggestion that there should be lots of punctuation in the “hidden” text to slow the screen reader speech down.

So (drum roll!) here’s the code that you need to make Jaws 5 announce the structure to a blind user. I’m more embarrassed to show you this than I’d be to publicly admit that I masturbate to photos of badgers.

But here you go:

body {position:relative;}
span.screenreader {
position: absolute;
left: -999em;
width: 1em;
overflow: hidden; }
...
This content is <span class="screenreader">,Start deletion,</span><del>deleted</del><span class="screenreader">,End deletion,</span> and <span class="screenreader">,Start insertion,</span> <ins>this bit inserted</ins><span class="screenreader">,End insertion,</span>

Oh my god, my guilty secret’s out.

Of course, my clever chums in the DOM scripting task force could doubtless write some unobtrusive JavaScript that could allow you to keep your code clean and add all this redundant crap using the DOM.

But you shouldn’t have to. Assistive devices should understand all html. Tommy Olsson’s right in that these are certainly tags forgotten by Jaws. Does any reader know how Windows Eyes and other screenreaders treat these elements?

5 Responses to “ Screenreaders and <ins> and <del> ”

Comment by goodwitch

I just gave it a whirl in Home Page Reader and heard

“The big fat hairy hedgehog was happy.”

HPR totally ignored the

🙁

P.S. Cute badgers!

Comment by goodwitch

I had one of my buddies try it out in Window eyes (version 4.5 anyway) and it does the same thing – just reads the sentence as

“The big fat hairy hedgehog was happy.”

Ignoring the del and the ins tags.

Comment by Ron

How about something like this instead and have a note to users to set their screen readers to read out title attributes?

This content is &lt;span title=&quot;Start deletion&quot;&gt;&lt;/span&gt;&lt;del&gt;deleted&lt;/del&gt;&lt;span title=&quot;End deletion&quot;&gt;&lt;/span&gt; and &lt;span title=&quot;Start insertion&quot;&gt;&lt;/span&gt; &lt;ins&gt;this bit inserted&lt;/ins&gt;&lt;span title=&quot;End insertion&quot;&gt;&lt;/span&gt;

Comment by Ron

How about something like this instead and have a note to users to set their screen readers to read out title attributes?

This content is deleted and this bit inserted

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.