Improve accessibility in spoiler-alert plugin

bbsmooth
Fri, 25 Nov 2022 21:38:32 +0000
UX

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 сообщения - 2 участника