Detailed explanation of the function of form form attribute role= 'form' in bootstrap

role in html is essentially to enhance semantics. When the existing HTML tag cannot fully express semantics, it can be explained by role. Usually this happens on 1 custom component, which enhances the accessibility, usability, and interactivity of the component.

The function of role is to describe the actual function of a non-standard tag. For example, if you use div to do button, set role= "button" for div, and the auxiliary tool can recognize that this is actually an button

For example,

<div role="checkbox" aria-checked="checked"></div>

Assistive tools will know that this div is actually an checkbox role, which is selected.

role is barrier-free reading, which is an attribute for people with dyslexia. People with dyslexia can use screen reading software to analyze it, which has little to do with normal people. You can't set it. If you don't set it, the screen reading software can't analyze it, and people with dyslexia can't "see" it.

Since it is a good programming habit, is it better to write role for all tags?
For example

<div role = "div"></div>

Normal text can be read, but sometimes there is no password prompt in front of the password input box in the form. The prompt is written in Placeholder in the box. Normal people know that the password is input here, but they can't read it. At this time, this thing works.

The attribute role exists to tell Accessibility-like applications (such as screen readers, convenient programs for blind people to access the Internet) that this is a button. In html5 elements, tags themselves have semantics, so role does not need to be added, at least it is not recommended. However, many cases of bootstrap have similar attributes and declarations, in order to be compatible with the old version of browsers (user agents). If your code uses html5 tags and is not prepared to support the old version of browsers, you may as well not use role tags.