Control

In two of my recent talks—In And Out Of Style and Design Principles For The Web—I finish by looking at three different components:

  1. a button,
  2. a dropdown, and
  3. a datepicker.

In each case you could use native HTML elements:

  1. button,
  2. select, and
  3. input type="date".

Or you could use divs with a whole bunch of JavaScript and ARIA.

In the case of a datepicker, I totally understand why you’d go for writing your own JavaScript and ARIA. The native HTML element is quite restricted, especially when it comes to styling.

In the case of a dropdown, it’s less clear-cut. Personally, I’d use a select element. While it’s currently impossible to style the open state of a select element, you can style the closed state with relative ease. That’s good enough for me.

Still, I can understand why that wouldn’t be good enough for some cases. If pixel-perfect consistency across platforms is a priority, then you’re going to have to break out the JavaScript and ARIA.

Personally, I think chasing pixel-perfect consistency across platforms isn’t even desirable, but I get it. I too would like to have more control over styling select elements. That’s one of the reasons why the work being done by the Open UI group is so important.

But there’s one more component: a button.

Again, you could use the native button element, or you could use a div or a span and add your own JavaScript and ARIA.

Now, in this case, I must admit that I just don’t get it. Why wouldn’t you just use the native button element? It has no styling issues and the browser gives you all the interactivity and accessibility out of the box.

I’ve been trying to understand the mindset of a developer who wouldn’t use a native button element. The easy answer would be that they’re just bad people, and dismiss them. But that would probably be lazy and inaccurate. Nobody sets out to make a website with poor performance or poor accessibility. And yet, by choosing not to use the native HTML element, that’s what’s likely to happen.

I think I might have finally figured out what might be going on in the mind of such a developer. I think the issue is one of control.

When I hear that there’s a native HTML element—like button or select—that comes with built-in behaviours around interaction and accessibility, I think “Great! That’s less work for me. I can just let the browser deal with it.” In other words, I relinquish control to the browser (though not entirely—I still want the styling to be under my control as much as possible).

But I now understand that someone else might hear that there’s a native HTML element—like button or select—that comes with built-in behaviours around interaction and accessibility, and think “Uh-oh! What if there unexpected side-effects of these built-in behaviours that might bite me on the ass?” In other words, they don’t trust the browsers enough to relinquish control.

I get it. I don’t agree. But I get it.

If your background is in computer science, then the ability to precisely predict how a programme will behave is a virtue. Any potential side-effects that aren’t within your control are undesirable. The only way to ensure that an interface will behave exactly as you want is to write it entirely from scratch, even if that means using more JavaScript and ARIA than is necessary.

But I don’t think it’s a great mindset for the web. The web is filled with uncertainties—browsers, devices, networks. You can’t possibly account for all of the possible variations. On the web, you have to relinquish some control.

Still, I’m glad that I now have a bit more insight into why someone would choose to attempt to retain control by using div, JavaScript and ARIA. It’s not what I would do, but I think I understand the motivation a bit better now.

Have you published a response to this? :

Responses

www.trysmudford.com

In a recent post, Jeremy discussed a possible reason for developers not reaching for native HTML elements like button or select, and instead recreating them with divs, JavaScript and ARIA:

But I now understand that someone else might hear that there’s a native HTML element—like button or select—that comes with built-in behaviours around interaction and accessibility, and think “Uh-oh! What if there unexpected side-effects of these built-in behaviours that might bite me on the ass?

But I wonder if there’s a simpler explanation.

The one common feature between every codebase I’ve encountered on that doesn’t use buttons well, is a bad CSS reset. Developers try to use a button, and find that it still looks like a native browser button, so they grab a plain old, blank canvas div, and build from there.

Adding a good CSS reset to an established codebase is tricky; the side effects of changing very global element styles can be unknown and far-reaching. But if you can get your buttons looking as plain as a div from the start of a project, there’s very little reason not to use the proper element.

I tend to reset my buttons to look like any other text element, then layer on styling with classes. But by having the blank canvas to begin with, you won’t be fighting against yourself when additional button variants come along.

button { -webkit-appearance: none; border-radius: 0; text-align: inherit; background: none; box-shadow: none; padding: 0; cursor: pointer; border: none; color: inherit; font: inherit;
}

# Tuesday, July 26th, 2022 at 12:00am

Previously on this day

3 years ago I wrote Principle

JavaScript should only do what only JavaScript can do.

4 years ago I wrote The history of design systems at Clearleft

From pattern portfolios to Fractal.

6 years ago I wrote Animating

A few examples of animation on the web.

6 years ago I wrote Class teacher

When abstraction becomes obfuscation.

10 years ago I wrote How do I convince…?

All of this has happened before. All of this will happen again.

17 years ago I wrote Geekend in the country

I spent the weekend in Oxfordshire in the company of my fellow geeks and Brit packers. A photo pool has been set up on Flickr so you can see exactly who was there and what merry japes we got up to.

19 years ago I wrote Beach Guardian

Here’s the Guardian article about writing Guardian articles from the beach in Brighton.

20 years ago I wrote Band photos

There’s a local "what’s on?" type magazine here in Brighton called The Source. The next issue of The Source is going to run a feature with a passing mention of my band. Fame at last!