#21 Legendary legend!

submitted on by vavroom

Context: A button that expands and collapses a section of text.

Bad code

<button class="panel-heading" tabindex="0" href="#collapse0" aria-expanded="true">
  <legend> Industries Served </legend>
</button>

Issues and how to fix them

  1. legend is not allowed as a child of any other element than fieldset.
    (HTML spec for legend)
  2. You don’t need the tabindex attribute if you use a button. HTML buttons are focusable by default.
  3. href attribute is not allowed on the button element.
    (HTML spec for button)

Good code

<button class="panel-heading" aria-expanded="true">
  Industries Served
</button>

Resources