What Good Looks Like
This layout utilizes native <button> elements. You can easily Tab to the button and press the Spacebar or Enter key to activate it, because HTML gives you this behavior for free.
Sensory Lab Experiment 5: Empty & Fake Buttons
The Keyboard Trap
What good is a beautifully styled button if a user can't actually click it?
According to the 2026 WebAIM Million report, empty buttons affect 30.6% of home pages.
While some of these are true <button> tags lacking accessible text (similar to empty links), a massive portion of button failures stems from a developer anti-pattern: the "Fake Button." Because native HTML buttons come with default browser styling (like borders and gray backgrounds), many developers avoid them entirely. Instead, they use a <div> or a <span>, apply a background color and some padding, add a JavaScript onClick event, and call it a day.
The problem? A <div> is not interactive. It cannot receive keyboard focus via the Tab key, it cannot be activated by pressing Enter or Space, and a screen reader doesn't even know it's clickable.
The Digital Twins: Unplug Your Mouse
To demonstrate WCAG Success Criterion 2.1.1 (Keyboard), we are going to ask you to unplug your mouse or take your hand off your trackpad. You will experience a modal popup dialog where you must accept the Terms of Service to proceed.
The Inaccessible Twin
This layout uses the styled <div> anti-pattern. If you try to navigate this page using only your keyboard, you will find yourself completely trapped.
The "Free" Features of Native HTML
When you use a real <button> tag instead of a <div>, the browser automatically provides a massive amount of functionality that you would otherwise have to code manually:
1. Focusability
Native buttons are automatically added to the document's tab order. Users can reach them using the Tab key without you needing to manually set a tabindex="0" attribute.
2. Keyboard Activation
Native buttons can be clicked using both the Enter key and the Spacebar. A <div onClick="..."> only listens for mouse clicks unless you write custom Javascript keydown handlers.
3. Screen Reader Semantics
A native button automatically tells the accessibility tree "I am a button." This allows screen reader users to pull up a list of all buttons on the page and jump straight to the action.