The Non-Negotiable Rule: Buttons vs Links

The most widespread accessibility defect on the modern web is confusing a Button with a Link:

• Use a <button> when: The user action performs an operation, triggers a state change, submits a form, opens a modal, or toggles a menu on the current page.
• Use an <a> (Anchor) with href when: The user action navigates to a new URL, a different web page, or an anchor target on the same page.

Why this distinction matters:

• Sighted users perceive both as clickable items, but screen readers announce 'link' vs 'button', setting critical cognitive expectations.
• Native <button> elements trigger on both Space and Enter keys.
• Native <a> links trigger on the Enter key only.
• Using <div onclick="..."> breaks keyboard navigation entirely unless you manually write 50 lines of polyfill code for tabindex, keyboard listeners, and ARIA roles.