Kevin Powell - Community•16mo ago

radio buttons to filter items with pure html/css & accessibility

I found this tutorial on how to filter cards using radio buttons and css. No JS needed. My question is, from an accessibility standpoint, is it a bad idea to use radio buttons in this manner? They're not being used for a form so I have a feeling it's not good practice. I know I can achieve the same result with JavaScript, but just wondering if it's okay to do with just html/css. https://www.youtube.com/watch?v=q5Sax0oeun4

h3webdevtuts

YouTube

Filter Cards Pure Css

Udemy Courses: - 9 React Projects on Udemy - https://bit.ly/2D83M8c - 9 React Projects on Gumroad - https://h3webdevtuts.gumroad.com/l/oOgYi Social Media: - Web Dev Discord - https://discord.gg/sHtWt6w - Github - https://github.com/h3h394 - Twitter - https://twitter.com/h3webdeveloper - Instagram - https://www.instagram.com/h3webdevtuts/

2 Replies

Kevin Powell•16mo ago

Hmm, that's a good question. Radio buttons aren't a bad approach from an a11y pov here to be honest. Let's say it wasn't colors, but it was tech stacks for projects projects, where you could sort by the tech you used. The radio button would announce which ones is selected, I think you'd want something before it to say what the choices are for of course, but it would probably be okay. I did something similiar with :has() awhile back for picking a color scheme, and has my radios set up like this:

<form class="color-picker" action="">
  <fieldset>
    <legend class="visually-hidden">Pick a color scheme</legend>
    <label for="light" class="visually-hidden">Light</label>
    <input type="radio" name="theme" id="light" checked>

    <label for="pink" class="visually-hidden">Pink theme</label>
    <input type="radio" id="pink" name="theme">

    <label for="blue" class="visually-hidden">Blue theme</label>
    <input type="radio" id="blue" name="theme">

    <label for="green" class="visually-hidden">Green theme</label>
    <input type="radio" id="green" name="theme">

    <label for="dark" class="visually-hidden">Dark theme</label>
    <input type="radio" id="dark" name="theme">
  </fieldset>
</form>

<form class="color-picker" action="">
  <fieldset>
    <legend class="visually-hidden">Pick a color scheme</legend>
    <label for="light" class="visually-hidden">Light</label>
    <input type="radio" name="theme" id="light" checked>

    <label for="pink" class="visually-hidden">Pink theme</label>
    <input type="radio" id="pink" name="theme">

    <label for="blue" class="visually-hidden">Blue theme</label>
    <input type="radio" id="blue" name="theme">

    <label for="green" class="visually-hidden">Green theme</label>
    <input type="radio" id="green" name="theme">

    <label for="dark" class="visually-hidden">Dark theme</label>
    <input type="radio" id="dark" name="theme">
  </fieldset>
</form>

The form doesn't actually have to submit anything here... codepen is here https://codepen.io/kevinpowell/pen/MWXybWJ?editors=1000 If I was going to put this into production, I'd probably do a quick screen reader test, and probably try to get outside input (which you are doing 😄 ) but my first impressions are it would be okay? You might even be able to fancy it up with some view transitions 😄

arogersrenee•16mo ago

Thank you, i appreciate you taking the time to answer the question. This was very helpful! I'll definitely get outside feedback on this one.

Gaming

Programming

radio buttons to filter items with pure html/css & accessibility