Create a Set of Radio Buttons - Not Showing Best Practices

In the Create a Set of Radio Buttons challenge of the HTML5 and CSS section (https://www.freecodecamp.org/challenges/create-a-set-of-radio-buttons), it states:

Here’s an example of a radio button:

<label><input type="radio" name="indoor-outdoor"> Indoor</label>

Yet, in more official Mozilla documentation (https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#The_<label>_element), it states:

Note that a widget can be nested inside its <label> element, like so:

<label for="name">
  Name: <input type="text" id="name" name="user_name">
</label>

Even in such cases however, it is considered best practice to set the for attribute because some assistive technologies do not understand implicit relationships between labels and widgets.

This was discussed here: https://forum.freecodecamp.org/t/anyone-notice-that-some-of-the-challenges-dont-demonstrate-best-practices/151348

Please update the challenge to reflect best practices.

[dhcodes]

@darthgera123 the challenge code is here

You would need to update the instructions and the tests for this challenge, then update the instructions and tests for the checkbox challenge after, and update the code that is preloaded in the editor for every subsequent challenge.

@freeCodeCamp/moderators I’m fine with this change, but would like to hear others’ thoughts.

[raisedadead]

Hi @yoizfefisch thanks for the feedback, please feel free to make a PR if you would be interested or create a separate issue for us to add these recomendations.