Do I need to add a ‘role’ attribute to html 5 tags like nav aside, main, etc.?

Question

I am using the new html 5 tags on my site to give it more semantics. In addition to this should they all be given the corresponding role?

Answer

Whenever possible, use native HTML elements such as <button>, <input> and <select>. They will always be accessible unless you change how these elements function. If you are using elements such as <span> or <div>, or changing the behavior of native HTML elements, then you should use ARIA roles because these are considered custom widgets.

Custom widget examples:

  • <a href=”#” role=”button” aria-label=”Press This Button”>
  • <div class="button inline text" role="button" tabindex="0" aria-label="Report An Issue Button">
  • <span role=“button” aria-label=“Press This button”>Press This Button</span>

When using custom widgets, you need to make sure the ARIA design pattern details for keyboard interaction & roles, states & properties are supported. Custom widgets need additional work in order to support the required keyboard interaction (such as spacebar activation for buttons)!

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.