Standard HTML elements such as <button>
or <input>
have keyboard accessibility built in for free. If you're building custom interactive components, however, use the tabindex
attribute to ensure that they're keyboard accessible.
Whenever possible, use a built-in HTML element instead of building your own custom version. For example, the <button>
element is very easy to style and already has full keyboard support. This will save you from needing to manage the tabindex
or add semantics with ARIA. ARIA should only be used when there is no built-in HTML element that meets your needs, or when you need to add additional information or functionality beyond what the built-in elements offer.