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개의 좋아요

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개의 좋아요

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개의 좋아요

I think this should be resolved by this commit:

https://github.com/discourse/discourse-spoiler-alert/commit/a7727a1c6b6f921365e1cee802e0c16512bbf8ee

4개의 좋아요

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