Skip to main content

How to (not) make a button

Today’s web is a very interactive experience, yet we often fail to provide the same experience to everyone. Complex form widgets, interactive configurators, tables, shop listings, and the list goes on. We should use buttons and links to interact with those components. But often, we just put an onClick handler on a div and call it a day. That leads to a poor experience for some users. I want to show you how to properly turn a div into a button, in case you ever need it. So the result will be accessible and useable by everyone. Why would you want to create a custom button? # There may be various reasons for this. We may have limited control over the markup (eg. when we use 3rd party library). Or there is some specific use case that doesn’t seem to be a good fit for a button or a link (and I have seen a lot of them in my career). For example: Interactive clickable card with the product info and other controls (add to cart, compare, etc.) Nested controls (a button with another button inside) Clickable table rows. While having limited control over markup may be hard to overcome. We can often solve these specific cases with a little bit of effort. Changing the design may be a valid option in some cases. But often we just need to rethink the markup a little bit. Here are some links for common patterns and how to do them correctly: Cards – Inclusive component Table with Expando Rows Multi-Column Sortable Table Experiment But if you think you still have to build a custom button, then read on: Building a button from a div # Your first step will most likely be adding an onClick handler. So let’s start with this: Click me. I’m a fake button Often this is also where it ends. But as soon as you try to use a keyboard to interact with your new button, you will find that you can’t select it using the Tab key. So let’s fix that and add a few more properties. Keyboard navigation # Click me. I’m a fake button We have to add a tabindex attribute with the value 0. This will make the button focusable when using a keyboard (an important part of any accessible interface). Next, we have to assign a keydown event listener to our custom button. HTML button can be pressed using Enter and Space keys. So we need to add that behavior as well. The listener callback will look something like this: function onKeyDownHandler(event) { if (event.key === “Enter” || event.key === ” ” ) { onClickButtonHandler(); }} But in reality, this is not exactly correct behavior. The native button works slightly differently, as Adrian Roselli pointed out in his article Brief Note on Buttons, Enter, and Space. Enter triggers the native button on the keydown event, but Space triggers the button on the keyup event (the press with Space can be canceled). If we want to mimic this behavior we have to update our handlers again: Click me. I’m a fake button function onKeyDownHandler(event) { if (event.key === “Enter”) { onClickButtonHandler();  » Read More

Like to keep reading?

This article first appeared on pustelto.com. If you'd like to continue this story, follow the white rabbit.

View Full Article
Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

#Dev
How to Channel a Daily Vision into a 20-Year Photography Career

How to Channel a Daily Vision into a 20-Year Photography Career

#Silicon Valley
WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

#Web Design
Fresh For Designers

Is the Dynamic Island plain stupid or the next revolutionary UX pattern?

#All

Let's talk about Web Design

The term "web design" describes the layout of websites that are seen online. Instead of software development, it typically refers to the user experience components of website development. The primary focus of web design used to be creating websites for desktop browsers, but from the middle of the 2010s, designing for mobile and tablet browsers has gained significance.

What is a webdesigner?

A web designer is responsible for a website's look, feel, and occasionally even content. For instance, appearance refers to the colors, text, and images utilized. Information's organization and categorization are referred to as its layout. An effective web design is user-friendly, aesthetically pleasing, and appropriate for the target audience and brand of the website. Many websites focus on keeping things simple so that viewers won't be distracted or confused by additional information and functionality. Removing as many potential sources of user annoyance as possible is a crucial factor to take into account because the foundation of a web designer's output is a site that gains and nurtures the trust of the target audience.

Responsive and adaptive design are two of the most popular techniques for creating websites that function well on both desktop and mobile devices. In adaptive design, the website content is fixed in layout sizes that correspond to typical screen sizes, while in responsive design, information moves dynamically based on screen size. A layout that is as consistent as possible across devices is essential to preserving user engagement and trust. Designers must be cautious when giving up control of how their work will appear because responsive design can be challenging in this area. While they might need to diversify their skill set if they are also in charge of the content, they will benefit from having complete control over the final output.

What does a web design worker do?

A web designer is a member of the IT industry who is in charge of planning a website's structure, aesthetic appeal, and usability.

A skilled site designer must possess both technical know-how and creative graphic design abilities. They must be able to envision how a website will seem (its graphical design) and how it will operate (conversion of a design into a working website).

The terms web developer and designer are frequently used interchangeably but erroneously. In order to construct more complex interactions on a website, such as the integration with a database system, a web developer is frequently more likely to be a software developer who works with programming languages.