Proposal : Spoiler content semantics

[brennanyoung]

I notice that many discussion fora (especially for games or fiction) include a "spoiler" feature.

Typically, the spoiler content is presented as black text on black background. I suppose there are cases where a color other than black is used, but I have not seen them. Sometimes there is a small label ("spoiler") to indicate that the content is deliberately hidden, and may only be exposed when clicked.

The idiom exists to prevent "spoilers" from giving the game away to those that prefer to find out for themselves. Spoiler content may appear "anywhere", but is especially common in online discussions.

Problems with the existing solutions:

• Non-standard implementations differ from site to site
• Does not work well or consistently with assistive technology
• Relies on visual presentation to convey meaning - it is predicated upon (and privileges) sighted users.
• Spoiler content is rarely an operable "form element", and yet you have to click it to see it.
• Assistive tech can often read the spoiler text, because the dev forgot to use aria-hidden="true"

Prior Art

<summary> and <details> might have been viable for this semantic, except that there is no way to style the appearance of the 'non-expanded' view - and therefore no way to write CSS for the "black on black" text.

Perhaps if there was a way to style <details> in the closed state, we can go home early.

[annevk]

Why can't you style details based on the presence of the open attribute?

[brennanyoung]

AFAICT you simply can't. The user agents implement it as a closed shadow DOM, so there's no way to get inside.

[annevk]

Oh right, we have some existing issues on that. We should just solve that problem and not add something new, in my opinion.

[brennanyoung]

Agree. I'm happy to close this if we can link it to any tickets on those issues.

[annevk]

#8770.