Spoiler DW-tag

[magibrain]

Title:
Spoiler DW-tag

Area:
DW custom tags

Summary:
Add a tag to easily add spoilertext to a post.

Description:
I suggest a [spoiler][/spoiler] tag which would automatically generate spoilertext (often black text on a black background, so that a user can choose to highlight it to read it), with a hidden-from-screen-display but screen-reader-accessible (possibly using WebAIM's hidden content trick - http://webaim.org/techniques/css/invisiblecontent/ ) link to skip the spoilered content. The rough format I've been using in my posts is this (brackets flattened because preview didn't like < and > codes):

[a href="#skip_spoiler_1" style="width:1px; height:1px; position:absolute; left:-10000px;"]skip spoiler[/a][span style="color:#000; background-color:#000;"]SPOILERS SPOILERS SPOILERS[/blockquote][a name="skip_spoiler_1" /]

It seems that the following code:

[spoiler]SPOILERS SPOILERS SPOILERS[/spoiler]

would be much cleaner, and guarantee accessibility for people using spoilertext who might not otherwise consider screenreaders.

As for drawbacks... I'm not sure how many people actually use spoilertext on a regular basis, I don't know if color choice would be controversial, I'm not entirely happy with the disparallel between functionality for sighted and screenreader-using folk (where people reading visually have to take action to see the spoilered content, but people using a screenreader have to take action to *avoid* being spoilered), the outputted HTML is still a little bloated, the trick to not display the skip link is a kludge (because screenreaders have erratic handling of both visibility:hidden and display:none), and I imagine it would get extremely ugly if used on a large patch of text. But it'd be cool to hear discussion on any/all points. :)

Poll #9002 Spoiler DW-tag

Open to: Registered Users, detailed results viewable to: All, participants: 101

View Respondents

This suggestion:

View Answers

Should be implemented as-is.
46 (45.5%)

Should be implemented with changes. (please comment)
22 (21.8%)

Shouldn't be implemented.
10 (9.9%)

(I have no opinion)
22 (21.8%)

(Other: please comment)
1 (1.0%)

Comments

[facetofcathy]

I think you have to do a javascript onclick method for this, or else too many people either can't see the spoiler text or they see it even when they don't want to. Taking some points from other comments...

So what if:

The spoiler text starts out visibility: hidden so there's space for it in the layout, but no one sees it. It shouldn't show up in plain text or in an email content version of the post (some people email themselves posts so they can read them not logged in), screen readers don't read it.

Only those people who want to read it can make it appear by clicking a button the code inserts in front of the hidden content. Click it again and it's hidden again. This way the spoiler text can just be in the default content colours and you don't have to fuss about colour combos. It could be made visually distinct with a text-colour border or something if you wanted to make it obvious that it's special text.

Drawbacks:

You'd need functional javascript to get it to show up.
A miss click shows the spoiler.
Might not work on every device? I'm pretty sure screen readers will read something made visible by JS in this way, particularly if the button is before the spoiler text, but do all devices?
Inserting the button into the post takes up space the post creator might not be expecting to be used.