# How Not to Create a Button

DevFeed: [How Not to Create a Button](<https://devfeed.tech/articles/how-not-to-create-a-button-38441.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2021-12-13/how-not-to-create-a-button/>)

Author: Eevis Panula

Published: 2023-01-03T08:57:29.784000Z

Content type: tutorial

Language: en

Sources: [Eevis Blog](<https://devfeed.tech/sources/eevis-blog.md>)

Topics: [HTML](<https://devfeed.tech/topics/html.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Code](<https://devfeed.tech/topics/code.md>), [Web platform](<https://devfeed.tech/topics/web-platform.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [html](<https://devfeed.tech/tags/html.md>), [keyboard](<https://devfeed.tech/tags/keyboard.md>), [testing](<https://devfeed.tech/tags/testing.md>), [users](<https://devfeed.tech/tags/users.md>)

## AI overview

This tutorial explains why using divs or links as buttons can create keyboard and screen-reader accessibility problems. It recommends using the native HTML button element and discusses differences between button and link behavior.

## Source excerpt

I have a habit of testing websites with a keyboard. I often encounter buttons that don't work as expected. It's frustrating, and I usually start digging into the source code to understand why the button isn't working. These reasons vary - some of them could be described as "normalized" patterns (I disagree), and some are really imaginative. I'll share some ways to not create a button in this blog post. I'll also explain why those patterns aren't a good idea. You can find instructions on creating a button the right way in the last section, The Right Way to Create a Button. Div as a Button This div as a button pattern is by far the most common. Here's a code snippet to demonstrate it: <div onClick="..."> I pretend to be a button </div> Sometimes these elements even have tabindex="0" to make them focusable with a keyboard. But they never, ever seem to have the keyboard event listeners for space and enter. This means that even if the user can focus on the so-called button, they can't activate it with a keyboard. Another thing that is often missing is the role attribute to communicate that there is a button. When it's missing, non-sighted screen reader users won't even know any button exists. For them, that particular element is a focusable text they might encounter if they're browsing the page's content. So, while this pattern works for mouse users, it's excluding most of the other user groups out there. It's possible to make a div work as a button for all these groups, but it's lots of work and makes the code harder to maintain. And you know, by using the button element, you'd get all that for free. Link as a Button Another HTML element I often see used as a button is the anchor-element, so, link. In these cases, it's styled to look like a button. However, underneath it all, it's a link: <a href="..."> I, too, pretend to be a button </a> "But call to actions are a thing, right?" you might ask. Yeah, I know, they're a pattern that is widely used. And it's a bit confusin