Spoiler blur not compatible with screen readers

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.)

6 Likes

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.

1 Like

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.

1 Like

I think this should be resolved by this commit:

4 Likes

This topic was automatically closed after 25 hours. New replies are no longer allowed.