Accessible Buttons & Links

Use the <button> element for actions that don't navigate (submit, toggle, etc.). Use <a> for navigation. Buttons should have clear, descriptive text. If a button only has an icon, provide an aria-label. The type attribute is important: type="button" for general actions, type="submit" for form submission, type="reset" for form reset.

Icon-only buttons must have accessible labels via aria-label or aria-labelledby. The label should describe the action, not just say 'button'. For toggle buttons, use aria-pressed to indicate state. If the button has both icon and text, the text is usually sufficient, but ensure the icon is decorative (aria-hidden="true") or meaningful.

Buttons can have various states that must be communicated: disabled, loading, pressed, expanded. Use disabled attribute (not just styling) for disabled buttons. For loading states, use aria-busy="true" and provide text or aria-label indicating loading. Toggle buttons should use aria-pressed. Expanded/collapsed states use aria-expanded.

Use <a> for navigation (changing URL, going to another page). Use <button> for actions (submitting forms, toggling, opening dialogs). If it changes the URL, it's a link. If it performs an action on the current page, it's a button. Never use a link styled as a button for actions - this breaks expectations and accessibility.