Tech Tips: Obscuring Spoilers in Comments – Screen Reader Accessible!

Spoilers in comments. They’re an ongoing issue. And holding back from spoilers can close off productive areas of discussion.

Sometimes in comments, when I write some spoilerish stuff, I obscure it with black on black, like this:

This is a spoilery spoiler!

The biggest problem with that, of course, is that screen readers will just keep right on reading. So amadi has solved that problem, with span code with a “skip” link at the start that goes down to an anchor below. Read the detailed post here: “Warnings & How To Do ‘Em”.

It looks like this:

Spoiler: (skip) This is a very spoilery spoiler!

Modifying the notes for spoilers (though you’re welcome to also use this for highly triggering or distressing material as well), and changing it to black-on-black which I prefer (use any colour you like), you get this:

Spoiler: (<a title=”Skip this Spoiler” href=”#skip.uniqueid”>skip</a>) <span title=”This is a warning that is also a spoiler. Highlight to read.” style=”color:black;background-color:black;”>Warning text goes here.</span>
<a name=”skip.uniqueid”></a>Summary:

Where it says “skip.uniqueid” replace the words “uniqueid” with the actual title of your story, or some other unique identification such as the initials of the title of the story.

So: bookmark this post, or make a note of that html, and your “Can I put a spoiler in this comment?” issues are solved!

[Note: I can’t get the WebAIM screen reader simulator to work; can anyone test this for me?]

Categories: Meta, technology

Tags: , , , ,

1 reply

  1. Oh, I didn’t realize that was the reason for including (skip)! Nice. Even more grateful for that html now.

%d bloggers like this: