Assessment wanted for my Form structure 1 skill Test

MDN Learn
#1

Hello, Can I get an assessment of my form structure test : MDN Web Docs Page

Code on CodePen here: My Code on CodePen

Thank you

#2

Hi @tuhamworld and sorry for the long waiting time :sweat_smile:

You correctly grouped <label>s and <input>s with <p>, but there’s a spare </label> in the first block.

To group multiple <input>s it’s okay to use <section> and a heading, but you should use the same heading for both sections, since they are on the same level. Another possibility would be using <fieldset> and <legend>.

Have a nice day,
Michael

2 Likes
#3

Thank you @mikoMK

And so sorry for the long waiting time here too :slight_smile:
Had to take a break due to some reasons.

I have made some changes. Could you please check the code here again?

#4

Hi @tuhamworld

You can remove <section> now that you have <fieldset>.

It’s nice how you added required to the asterisk. I think it would be better to remove aria-label there but instead use “required” on the <input> directly. This way the input field would correctly be announced as required from a screen reader.
From ARIA | MDN:

The first rule of ARIA use is “If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.”

The rest looks good. :slightly_smiling_face:

Have a nice day,
Michael

1 Like
#5

Thank you for the swift response and the detailed explanation.
I have removed the section and also replaced the aria-label with required.

Kindly check the updated code here

Thanks :slight_smile: