Link or Button, that is the question.

What is a Link? Definition A link is an interactive element that redirects the user to a new location which can be another section inside the current page, modifying the URL with a # parameter, or a new page. It can be used to download a file. Once activated, it takes the user to the URL set in its href. The browser records that navigation in its history, so the user can return to the previous page using the back button. Semantic The elements needs the attribute href with a valid URL or an IDREF pointing to a section inside the current page to have the semantic value of a link, otherwise it will be considered as generic . <a href= "/URL" > Go to main page </a> Keyboard Interaction It can only be activated by pressing the key Enter . If the key Space is pressed while the focus is on the link, the page will scroll down. Screen Reader Interaction Screen Readers, generally, announce the links in the following way: Link, [accessible name of the link] . It is extremely important to provide a descriptive and correct accessible name to the element. Bad Practice It is completely unnaceptable, a bad practice and goes against the native behavior of the element, forcing it to behave as a button by doing the following: <a href= "javascript:void(0)" onclick= "openModal()" > Open Menu </a> <a href= "#" role= "button" onclick= "button()" > Link with role button </a> If you need to do this, it means that you need a link. What is a button? Definition A button is an interactive element that dispatches an action inside the page where it is located. It does not redirect the user to another place or location nor modifies the url. The actions that are being dispatched can be: open a modal, play a video, post a comment, etc. Semantic The button needs the attribute type with a value according to its action: - type="button" : it is used when the button does not have a default behavior. - type="submit" : it is used when the button sends information to a server. - type="reset" : it is used to