Spoilers!

April 26, 2011 12:35 PM

Are there any examples of particularly elegant implementations of "spoiler tags" out there that work well with both screen readers and touch/mobile based site designs?
posted by Artw to Computers & Internet (11 answers total)

The Hints on geocaching.com are ROT13-encoded, so you can avoid them until you need them.
posted by wenestvedt at 1:01 PM on April 26, 2011

Hm...this is tricky. I'm not positive how screen readers treat jQuery. Assuming they skip it, I would handle it like this:

<a href="#spoiler_div" class="modal_window">THIS IS A SPOILER</a>
...Rest of site...
<div id="spoiler_div">This is where you hide your spoiler.</div>

That way the screen reader can jump forward to the spoiler if they like. Style the link to look like a button or something for the touch-screen devices. Link in jQuery and your modal window plugin of choice.
posted by thsmchnekllsfascists at 1:05 PM on April 26, 2011

wenestvedt: The Hints on geocaching.com are ROT13-encoded, so you can avoid them until you need them.

I think this is a question following this MetaTalk post about this thread, where ROT13 spoilers was not seen as a valid option (in fact, quite the opposite - obnoxious for screen readers, and unusable on mobile platforms that don't have some ROT13 add-on).
posted by filthy light thief at 1:08 PM on April 26, 2011

Artw, are you asking about HTML tags for coding a site, or simpler tags for forums?
posted by filthy light thief at 1:09 PM on April 26, 2011

Well, I was thinking forums, but general solutions to the problem would be of interest.
posted by Artw at 1:10 PM on April 26, 2011

I'm thinking that it's going to be difficult to find something that works for both smartphones and screenreaders. The screenreader-readable text would be there, just hidden, requiring a highlight or a mouseover. The moible-device-readable text would have to be coded in some way, which messes up the screenreaders.

Maybe using one of the screenreader-accessible options for the main site (example: black background text), and having that tag switch to something else on the mobile site (example: rot13)? Is that possible?
posted by Gordafarin at 1:19 PM on April 26, 2011

Blank image with an alt tag?
posted by schmod at 2:40 PM on April 26, 2011

If you've decided that JavaScript is a valid approach, I'd use a styled span that hides the text, and an attached button that alters the span style to make it visible. All the suggestions I've seen here rely on hover, selection, or plugin -- none of these is going to work for mobile. You need a click-activated method.
posted by bjrubble at 9:16 PM on April 26, 2011

Sorry, missed the screenreader part. I still think you want something that's activated by a button - someone using a screenreader should still be able to activate the button to hear the spoiler.
posted by bjrubble at 9:21 PM on April 26, 2011

That's pretty much what I was talking about, except with jquery and a modal window script that fires the window when a link is clicked. Every major handheld device (except blackberry?) can handle Javascript now.

Using a link would also keep the screen reader from seeing the spoiler unless they clicked on it. Screen readers can see hidden divs, right?
posted by thsmchnekllsfascists at 6:58 AM on April 27, 2011

More insight into how screen readers deal with javascript evnts, visibility:hidden and display:none divs and the contents of the ABBR tag would definatly be helpful.
posted by Artw at 9:47 AM on May 1, 2011