The <a> tag in HTML is designed to create hyperlinks, which can link to different sections of the same page, different pages, or
even different websites. However, sometimes developers misuse <a> tags as buttons, which can lead to accessibility issues and
unexpected behavior.
This rule checks that <a> tags are used correctly as hyperlinks and not misused as buttons. It verifies that each
<a> tag has a href attribute, which is necessary for it to function as a hyperlink. If an <a> tag
is used without a href attribute, it behaves like a button, which is not its intended use.
Using the correct HTML elements for their intended purpose is crucial for accessibility and usability. It ensures that the website behaves as expected and can be used by all users, including those using assistive technologies. Misusing HTML elements can lead to a poor user experience and potential accessibility violations.
Compliance with this rule will ensure that your HTML code is semantically correct, accessible, and behaves as expected.
Misusing <a> tags as buttons can lead to several issues:
<a> tags are used as buttons, it can confuse these technologies and make the website less accessible to users with
disabilities. <a> tags and buttons is different. For example, buttons can be triggered using the space bar,
while <a> tags cannot. Misusing these elements can lead to unexpected behavior and a poor user experience. To fix this issue, you should use the appropriate HTML elements for their intended purposes. If you need to create a hyperlink, use the
<a> tag with a href attribute. If you need to create a button, use the <button> tag.
const MyComponent = () => {
return <>
<a href="javascript:void(0)" onClick={foo}>Perform action</a>
<a href="#" onClick={foo}>Perform action</a>
<a onClick={foo}>Perform action</a>
</>;
};
const MyComponent = () => {
return <>
<button onClick={foo}>Perform action</button>
<a href="#section" onClick={foo}>Perform action</a>
</>;
};