Kevin Powell - Community•7mo ago

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•7mo 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•7mo ago

hi @Joao , thanks for your time! How would you hide it? display:none, or make it a lot smaller, like 1px?

Joao•7mo ago

There's a really nice way of hiding entirely while still being accessible: https://css-tricks.com/inclusively-hidden/

Gaming

Programming

Is semantically correct have a empty legend inside a fieldset?