Created
August 1, 2019 07:52
-
-
Save SarathSantoshDamaraju/3b36ececd6ad1a8b061e96966e3d8009 to your computer and use it in GitHub Desktop.
Button types Comparison Table
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| | | innerText | value | aria-label | aria-lebelledby | role or aria-role | tabindex | | |
| | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | |
| | <button> | ✅ Required | 🤷♂️ Optional if innerText is Present | ✅ Required | 🤷♂️ Optional | ⚠️ Not required since the button tag has a default role as a button. | ⚠️ Not required | | |
| | <input type="button>" | ⚠️ Not required | ✅ Required as the value will be rendered as the inner text | ✅ Required | 🤷♂️ Optional not required unless you have a label for the button which is less often. But check here for more related info. | ⚠️ Not required since this tag has a default role as a button. | ⚠️ Not required as this also gets the default focus support as a button | | |
| | <input type="submit>"<br><input type="reset>" | ⚠️ Not required | ✅ Required as the value will be rendered as the inner text | ✅ Required | 🤷♂️ Optional not required unless you have a label for the button which is less often. But check here for more related info. | ⚠️ Not required since this tag has a default role as a button. | ⚠️ Not required as this also gets the default focus support as a button | | |
| | <input type="image>"<br><br>Use this to create a graphical buttons with images. | ⚠️ Not required as it needs src attribute, failing which you will see a broken image submit text | ⚠️ Not required as it needs src attribute, failing which you will see a broken image submit text | ✅ Required and it also supports alt if the image can’t be shown.<br><br>Moz quotes -<br>“While the alt attribute is technically optional, you should always include one to maximize the usability of your content” | 🤷♂️ Optional not required unless you have a label for the button which is less often. But check here for more related info. | ⚠️ Not required since this tag has a default role as a button. | ⚠️ Not required as this also gets the default focus support as a button | | |
| | <a> | ✅ Required | ⚠️ Not such attribute is available for this | ✅ Required | 🤷♂️ Optional | ✅ Required if you expect to override default link role. | ✅ Required <br><br>You have to implement eventHandler for space bar and use preventDefault to prevent the propagation to the default page scrolling event. Which is the default behaviour of the spacebar if non-button elements are focused. | | |
| | Wildcard Entry : Icon Button - which has only font-icon or SVG in it. | ⚠️ Not required as the icon or svg would be the inner element. | 🤷♂️ Optional | ✅ Required | 🤷♂️ Optional, basically this depends on your use-case and not mandatory | 🤷♂️ Optional - not needed unless you use div or span instead of buttons. But that would need you to handle a lot of things, which we will discuss in some time. | 🤷♂️ Optional - not needed unless you use div or span instead of buttons. | | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment