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