The discussion addresses an accessibility bug where spoiler blur content is not properly handled by screen readers like iOS VoiceOver, JAWS, and NVDA. dfabulich reports that screen readers read the spoiler text directly, ignoring the blur, and suggests using an ARIA role (e.g., button) with an alternate label like “read spoilers.” sam notes ARIA doesn’t explicitly define spoilers but proposes using <details> and <summary> tags, though acknowledges styling and width limitations. bbsmooth clarifies that spoilers align with the ARIA disclosure widget pattern and recommends using aria-hidden="true" on blurred content, toggled via a button, to maintain visual blur while controlling screen reader access — this approach would also resolve keyboard accessibility issues raised in a duplicate issue. Finally, JammyDodger indicates the issue may already be fixed by a recent commit in the spoiler-alert plugin repository.
Activate iOS VoiceOver, then navigate to a post containing spoiler blur, like this.
Swipe over to the text and have the screen reader read the text.
Actual: VoiceOver just reads the spoiler text, ignoring the spoiler blur.
Expected: It should have an ARIA role (button?) and an alternate ARIA reading, “read spoilers,” or something like that.
(Something similar happens in JAWS and NVDA.)
I don’t think there is anything in ARIA about spoilers, … I may be wrong. My understanding is that the closest we can do is implement something using detail and summary tags to get this going.
Open to switching our implementation.
Looks like there is reasonable amounts of flexibility to styling detail/summary however getting the width pre-calculated is probably not going to be feasible.
Ahh, I see now that I pretty much opened a duplicate issue for the spoiler alert accessibility issue mentioned here, sorry about that. Although mine was focused more on keyboard accessibility, but my solution would also fix this issue because as suggested by @dfabulich it would use a disclosure widget pattern triggered by a button.
I don’t think you would want to use details/summary here since you do want to show the content on the page when it is “hidden”, you just want to blur it as well. Using aria-hidden="true" on the blurred content would hide it from screen reader users but still allow it to show on the page (as blurred). And then the button can toggle aria-hidden to make it accessible to assistive technology.
I don’t think there is anything in ARIA about spoilers
The spoiler alert is basically a disclosure widget which the ARIA Authoring Practices Guide does provide guidelines for.
I think this should be resolved by this commit:
https://github.com/discourse/discourse-spoiler-alert/commit/a7727a1c6b6f921365e1cee802e0c16512bbf8ee
This topic was automatically closed after 25 hours. New replies are no longer allowed.