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)!
