Is semantically correct have a empty legend inside a fieldset?

Hello friends, hope you're doin well! 😄 I'm facing a situation where I have a form structured in 3 different sections. So my first instinct was to have a form divided into 3 fieldset, like this:
<form>
<fieldset>
<legend><!-- This hasn't a proper description --></legend>
<!-- input fields... -->
</fieldset>


<fieldset>
<legend>Second section</legend>
<!-- input fields... -->
</fieldset>


<fieldset>
<legend>Third Section</legend>
<!-- input fields... -->
</fieldset>
</form>
<form>
<fieldset>
<legend><!-- This hasn't a proper description --></legend>
<!-- input fields... -->
</fieldset>


<fieldset>
<legend>Second section</legend>
<!-- input fields... -->
</fieldset>


<fieldset>
<legend>Third Section</legend>
<!-- input fields... -->
</fieldset>
</form>
As you can see, everyone has a legend briefly describing what section is about, except the first. I'm wondering, is correct to use the legend tag in this case, from a semantic standpoint? Or should I structure the form in a different way? Sorry in advance if it's not quite clear, so ask further if you need more detail!
3 Replies
Joao
Joao•12mo ago
I would say no, if you don't have a need for it then omit it. Or, hide with CSS but make sure there's some description in it.
FryBlaster
FryBlasterOP•12mo ago
hi @Joao , thanks for your time! How would you hide it? display:none, or make it a lot smaller, like 1px?
Joao
Joao•12mo ago
There's a really nice way of hiding entirely while still being accessible: https://css-tricks.com/inclusively-hidden/
Want results from more Discord servers?
Add your server