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
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
Hi @tuhamworld and sorry for the long waiting time
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
Thank you @mikoMK
And so sorry for the long waiting time here too
Had to take a break due to some reasons.
I have made some changes. Could you please check the code here again?
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.
Have a nice day,
Michael
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