The spoiler-alert plugin is very cool but unfortunately it does not seem to be keyboard accessible as there is no way to trigger the click event it is using with the keyboard. This seems to be a basic disclosure pattern and so I would recommend you use a button to toggle the bluring. This would also allow you to hide the blurred content from assistive technology as well.
Default (blurred) state: Toggle button set to aria-expanded="false
. Blurred content set to aria-hidden="true"
.
Visible state: Toggle button set to aria-expanded="true"
. Content set to aria-hidden="false"
or aria-hidden
attribute removed completely.
The button would also have an aria-controls
attribute set to the id
of the element being blurred. The accessible name for the button could be something like “Show hidden content” (preferably using visually hidden text).