Far too often, aria attributes are used incorrectly. Most devs, in good faith, probably think they are helping when in reality, over-engineering with aria can do more harm than good. When your semantic element is used, it's not necessary to use the role
attribute. Here are some quick examples where aria attributes are not needed:
Buttons
When your semantic button
has a valid type attribute, you don't need to include an aria attribute.
Do this:
<button type="button" onClick={functionCall}>Close</button>
Don't do this:
<button type="button" role="button" onClick={functionCall} />Close</button>
Don't do this either:
<button role="button" onClick={functionCall} />Close</button>
Links
When using a semantic anchor
, the role is implied, and therefore, the use of role="link"
is not needed.
Do this:
<a href="more-info.html">where to find more info</a>
Don't do this:
<a href="more-info.html" role="link">where to find more info</a>
Don't do this either:
<a href="more-info.html" role="button">where to find more info</a>
Inputs
When your semantic input
has a valid type attribute, you don't need to include an aria attribute.
Do this:
<input type="checkbox" id="confirmed" name="isConfirmed">
Don't do this:
<input type="checkbox" role="checkbox" id="confirmed" name="isConfirmed">