Avoid Easy Aria Errors

Avoid Easy Aria Errors

html + aria + accessibility

Play this article

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>

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">