Spoiler blur not compatible with screen readers

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