(Last Updated on )
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.
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:
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.
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?