Improve accessibility in spoiler-alert plugin

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

4 Likes

Cool, thanks for sharing! :slight_smile: We’re always looking to improve accessibility. Let me have a look at this when I have some time and I’ll post an update here when it’s resolved.

1 Like

As of this commit, the plugin has been updated to include these accessibility features.

2 Likes

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