Making no-spoilers more accessible

First published: 13/09/2024

When building Component Odyssey, I needed a mechanism to prevent students from being spoilt by the answers of exercises. I built no-spoilers, a web component that blurs the spoiler content and includes a button to toggle the visibility of said spoiler.

Admittedly, I had rushed the implementation which led to a subpar experience for assistive technology users.

Scott O’Hara’s recent blogpost pressured me to get off my butt and make some much needed improvements to the component. I’d recommend you read the article for yourself, it’s super interesting and he deserves full credit for the changes I made to no-spoilers.

You can find a summary of the changes I made to no-spoilers but only after you promise me that you’ve read Scott’s article:

  • Improving the semantics of the spoiler container
  • Using aria attributes to communicate the state of the button to assistive technologies
  • Making the “show spoilers” button togglable
  • Preventing hidden content from being viewable by assistive technologies

If you decide to give the component a try and you find some issues, then please open up an issue on GitHub.

If you enjoyed this article, then I figure you like to be kept in the loop with web development tips. If so, the Component Odyssey newsletter might be right up your alley.