Use <button> and <a> tags appropriately
Introduction
It may seem harmless to use <a> and <button> tags interchangeably but to use them in their correct context provides accessibility benefits.
Decision
Use <a> tags for links only. Use <button> tags to trigger actions like toggling elements on/off, opening and closing content, or submitting forms.
Context
It’s ok to style links to look like buttons. The issue is when using <a> tags for toggling elements because we have to use javascript to prevent default behavior which leads to issues when javascript is disabled in addition to screen readers misidentifying the element.
Consequences
- No need for additional javascript to prevent default behavior of
<a>tags. <button>tags provide accessibility features for screen readers, such as aria properties to communicate the current state of elements.
Exceptions
- There should be no exceptions. If for some reason
<button>tags can’t be used it is better to use a<div>with the attributestabindex=”0”androle=”button”.
Additional Resources
None