HTML Forms Step 28 - Marking radio input as "required"

Hi everyone. On Step 28 of “Learn HTML Forms,” it says:

Currently users can submit the form without checking the radio inputs. Although you previously used the required attribute to indicate that an input is required, it won’t work in this case because adding required to both inputs will convey the wrong information to users.

It doesn’t say in what way the information conveyed will be wrong, so I decided to try it out:

<fieldset>
     <label><input type="radio" name="account-type" required/> Personal</label>
     <label><input type="radio" name="account-type" required/> Business</label>
</fieldset>

This seems to work just fine, and I don’t see anything wrong with the information conveyed:

Can anyone explain why the tutorial says not to do it this way?

Welcome to the forum @strange.as.angels

To solve this, you can provide context of what is needed by adding a legend element with text Account type (required) before the label elements within the second fieldset. Then add the checked attribute to the Personal input to ensure the form is submitted with the required data in it.

The difference is that in the previous way you were using an attribute to specify a user to select an input element.

This way, you are displaying textual information. This will also allow screen readers to convey information to users of your form.

This improves usability for sighted users. Assistive technology should inform the user that the form control is mandatory based on the required attribute, but adding aria-required="true" doesn’t hurt, in case the browser / screen reader combination does not support required yet.

So while the required attribute can be used in other input elements, it is also important to consider accessibility for all users.

Happy coding

Thank you for the reply, @Teller. Just to make sure I understand here: using the “required” attribute on the radio input buttons is not wrong, just incomplete without a visual indicator that the field is required?

I guess I’m not sure how that’s different from the previous fields, which also don’t mention that they’re required until the form is submitted and an error is thrown. What makes the radio inputs here special?