0

I am checking an application and I found this in HTML DOM:

<button type="submit">
  <label>Submit</label>
</button>

I have never seen this before and asking myself if this is valid for HTML5 or any other DOCTYPE Definition? Moreover can anyone suggest why there is the label inside the button from the view of UX / ergonomics? Or is there no need to do this?

2

The element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the element, it toggles the control.

w3schools.com

Maybe this W3C recommendations may help you too: Labeling Controls

  • So it is definitely wrong to use the Label inside a button. – zuluk Nov 8 '18 at 12:51
  • It looks so. The only example I could find where you really need a label for a button is when the button itself is not described properly, does not contain wording that fits to its purpose. – Martinazz Nov 8 '18 at 16:20
  • There is an example in the Mozilla Dev website: "In the example below, a button is styled to look like a typical "close" button, with an X in the middle. Since there is nothing indicating that the purpose of the button is to close the dialog, the aria-label attribute is used to provide the label to any assistive technologies. <button aria-label="Close" onclick="myDialog.close()">X</button> " – Martinazz Nov 8 '18 at 16:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.