Return to Answer

I agree with this proposal. Spoilers should be accessible. Below, I've made a proof of concept for an alternative interaction model for a keyboard-accessible spoiler by extending the current spoiler behaviour. Scroll to the bottom and hit Run code snippet to run the proof of concept.

• Most users will just see a totally ordinary blockquote with no special behaviour.
• Someone who tabs into the spoiler quote will find their keyboard focus on a button that says "show this spoiler". They can use this to toggle the spoiler visibility.
• When they hit that button, their focus is transferred to a sibling "hide this spoiler" button. The purpose of this switch is to enable screen reader users to recognise they have changed something, and that the button they are on can now hide the spoiler. (The focus switch prompts the screen reader to read out thew newly focused button's text.) When they hit that button, focus is transferred back to "show this spoiler".
• The "show this spoiler" button is only visible as long as it retains keyboard focus. If you tab away from it, the button vanishes.
• The "hide this spoiler" button is visible for as long as the spoiler is revealed, until it's activated to hide the spoiler again.

• Some readers will read out hidden spoilers anyway because opacity:0 is not a cue to them to ignore some text. This change prevents those screen readers from doign this, because they pay attention to visibility:hdiden instead. This is a good practice for accessibility, recommended by Medium's development team.
• This prevents people from tabbing into links hidden inside the spoiler quote. That's something that can happen! It really shouldn't, they're hidden and should be kept out of tab flow to avoid things being confusing.

I agree with this proposal. Spoilers should be accessible. Below, I've made a proof of concept for an alternative interaction model for a keyboard-accessible spoiler by extending the current spoiler behaviour. Scroll to the bottom and hit "Run code snippet" to run the proof of concept.

• Most users will just see a totally ordinary blockquote with no special behaviour.
• Someone who tabs into the spoiler quote will find their keyboard focus on a button that says "show this spoiler". They can use this to toggle the spoiler visibility.
• When they hit that button, their focus is transferred to a sibling "hide this spoiler" button. The purpose of this switch is to enable screen reader users to recognise they have changed something, and that the button they are on can now hide the spoiler. (The focus switch prompts the screen reader to read out the newly focused button's text.) When they hit that button, focus is transferred back to "show this spoiler".
• The "show this spoiler" button is only visible as long as it retains keyboard focus. If you tab away from it, the button vanishes.
• The "hide this spoiler" button is visible for as long as the spoiler is revealed, until it's activated to hide the spoiler again.

• Some readers will read out hidden spoilers anyway because opacity:0 is not a cue to them to ignore some text. This change prevents those screen readers from doing this, because they pay attention to visibility:hidden instead. This is a good practice for accessibility, recommended by Medium's development team.
• This prevents people from tabbing into links hidden inside the spoiler quote. That's something that can happen! It really shouldn't, they're hidden and should be kept out of tab flow to avoid things being confusing.

Or, here's a gif (inside a spoiler because it could be distracting):

Here's a gif preview (inside a spoiler because it could be distracting, or visit this link if you're a keyboard-only user):

• It's a good practice for accessibility. Some screen readers will read out the “hidden” spoiler text anyway, because they don't get the hint from opacity: 0;. Those screen readers ought to get the hint from visibility: hidden; instead.
• This prevents people from tabbing into links hidden inside the spoiler quote. That's something that can happen! It really shouldn't, they're hidden and should be kept out of tab flow to avoid things being confusing.

• Some readers will read out hidden spoilers anyway because opacity:0 is not a cue to them to ignore some text. This change prevents those screen readers from doign this, because they pay attention to visibility:hdiden instead. This is a good practice for accessibility, recommended by Medium's development team.
• This prevents people from tabbing into links hidden inside the spoiler quote. That's something that can happen! It really shouldn't, they're hidden and should be kept out of tab flow to avoid things being confusing.