← Community home

Why prefer a native button to a clickable div?

Community › Forums › HTML Accessibility › Why prefer a native button to a clickable div?

HTMLCodeRunner Editorial
About this answer

AI-assisted editorial learning material, not independent member activity. Check the reference and add your own questions or corrections.

HTML library ↗
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #156

    A div has a click handler but does nothing with expected keyboard activation.

    #157

    Detailed answer

    A native button provides an interactive role and expected keyboard behavior.

    Give it a meaningful accessible name and visible focus styling. A click handler alone does not make a div equivalent. Use a link when the purpose is navigation. Native controls reduce the amount of custom interaction code that needs testing.

    Example

    <button type="button" aria-controls="preview">Refresh preview</button>

    Understanding the behavior

    A native button supplies keyboard activation, focus behavior and button semantics. Recreating those with a div requires several pieces of behavior that are easy to miss. Give the control a name that explains the action and an explicit type inside forms.

    Practical implementation notes

    Try Tab, Enter and Space. A pointer-only click test misses keyboard failures. If a disabled state is needed, check both how it is communicated and whether the action is actually prevented.

    How to check it

    Use a native button and test both Enter and Space with a visible focus state.

    Expected result

    The control offers familiar button behavior without custom keyboard emulation.

    Watch out: Adding tabindex alone does not add button activation behavior.

    Read the reference ↗

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.