Inaccessible Button Patterns

Overview

Buttons must use the <button> element or role="button" with full keyboard support. Using <div> or <span> for buttons is a common accessibility failure.

The Problem

This pattern is inaccessible — avoid it.

<div class="btn" onclick="submit()">Submit</div>
<span onClick={handleClick} style={{cursor:'pointer'}}>Cancel</span>

The Fix

Use this accessible pattern instead.

<button type="submit" onClick={submit}>Submit</button>
<button type="button" onClick={handleClick}>Cancel</button>

Step-by-step

1. 1

   Use <button> for actions and <a href="..."> for navigation — never use <div> or <span>.

2. 2

   Always set type="submit" or type="button" to prevent unexpected form submission.

3. 3

   If you must use a div (e.g., in a legacy system), add: role="button", tabindex="0", and handle both click and keydown (Enter and Space).

Framework Notes

How to apply this fix in your stack.

// Correct — native button
<button type="button" onClick={handleClick}>Cancel</button>

// If forced to use a non-button element:
<div role="button" tabIndex={0}
     onClick={handleClick}
     onKeyDown={e => ['Enter', ' '].includes(e.key) && handleClick()}>

FAQ