Standard Button

<div class="btn" onclick="submitForm()">
  Submit
</div>

<button type="submit" class="btn-primary">
  Submit
</button>

button(type="submit" class="btn-primary") Submit

<button 
  type="submit" 
  className="btn-primary"
  onClick={handleSubmit}
>
  Submit
</button>

<button 
  type="submit" 
  class="btn-primary"
  @click="handleSubmit"
>
  Submit
</button>

<button 
  type="submit" 
  class="bg-indigo-600 px-6 py-3 text-white font-semibold rounded-md shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-indigo-600 transition-colors"
>
  Submit
</button>

The Standard

The <button> element is the single most important interactive element in HTML. Using it correctly grants you free keyboard support, focus management, and screen reader clarity.

WCAG Criteria

• 2.1.1 Keyboard (Level A): All functionality must be operable via keyboard.
• 4.1.2 Name, Role, Value (Level A): The element’s name, role, and state must be programmatically determinable.

❌ The Bad (Inaccessible)

What’s Wrong?

1. No Keyboard Access: You cannot Tab to a <div>.
2. No Role Announced: A screen reader just says “Submit” with no context. Is it a link? A heading?
3. No Enter/Space Support: Pressing Enter does nothing.

✅ The Good (Accessibility-Ready Code)

Why This Works

1. Native Keyboard: The browser automatically handles Tab, Enter, and Space.
2. Clear Role: Screen readers announce: “Submit, button”.
3. Focus Ring: The browser provides a default :focus outline automatically.

<!-- Native button -->
<button type="button" class="btn">
  Save Changes
</button>

Technical Deep Dive

The Accessibility Tree

Role: button
Name: "Submit"
State: focusable

Focus Flow

1. Tab Key: Captures focusin. Highlighted via :focus-visible.
2. Enter / Space: Triggers click event natively.