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 (https://www.w3.org/TR/wai-aria-practices-1.1/). Custom widgets need additional work in order to support the required keyboard interaction (such as spacebar activation for buttons)!