DIVs Are Not Buttons

[00:00:00]
>> Speaker 1: Let's get into this DIVs soup kind of debate that I'm a big fan of. So this is from an Accessibility Weekly article I saw, DIVs are not buttons. And this has been one of the most classic and kind of time honored debates of accessibility is showing people that use DIVs to be buttons or DIVs to be checkboxes and all the problems therein.

[00:00:20]
So let's make a button with a DIV, the thing that you're not supposed to do. But I hope it works as a nice exercise, like a mental exercise to see how much goes into this. So, we take a div and we give it an on click listener and it says click me.

[00:00:32]
And then we add some style to it, and it looks like a button and you click it, and it does a button thing, great, we're done. So what are we missing here? So one thing we're missing is that screen readers will not know that it's clickable, right? There's no way that a screen reader would tell you that the DIV is interactable because screen readers don't read into the onclicklistener.

[00:00:51]
They don't do anything like that. So if you wanted to tell a screen reader that it was clickable, all you'd have to do, is add an aria role to it. And so with aria, we say hey, this DIV's role is button and that's great. Now the screen reader will say hey, you've hit a button, and the button's text is click me, excellent.

[00:01:06]
Okay, but problem here is keyboard only users can't get to it, because DIVs aren't tabable, right? You can't tab over to a DIV, otherwise you'd be tabbing on all these like structural elements. And so we'll get into this a little bit more later, but if you want an element to be tabable, you have to give it tab index.

[00:01:21]
So quite simple there too. So okay, so we take the thing, we give it an on click listener, we give it an aria roll a button and a tab index and now a keyboard only user can get to it. A screen reader will tell you it's a button, and it does the button thing where you click on it.

[00:01:33]
Okay, but we've got another issue, the keyboard only users can't click on it, right? They're keyboard only. So we need to make sure that all of these DIV buttons not only have the on click listener, but they also need an on key up listener. This is the way that buttons work, right?

[00:01:46]
You can go to any button and you can hit space on it, and it'll interact with the button. Okay, so we're getting there. So we've got a div, we've got the tab index for keyboard only users, the key up for keyboard only users, we've got our on click listener and our roll of button, amazing.

[00:01:58]
Okay, but the problem here is that screen readers will tell you that the button is interactable, it's not just that it's a button that. When a screen reader hits a button, it'll read the value of the button and tell you, like, button submit or something like that. So we wanna accomplish that similar thing now with our DIV.

[00:02:13]
So we can do that using the ARIA label that we just learned. So we could either have aria label, click me, or we could have aria label and a little bit of a better description. And so I hope that this kinda gets you into the mindset of like, I'm pretty sure this gets us all the way there.

[00:02:27]
I think the only thing that we're 100% missing here is that buttons in CSS they have strong focus rings, in all the browsers, right? For visual indicators that it's highlighted as you're tabbing through. So it wouldn't be in the HTML necessarily but, I think the only thing that we're missing here is, some really good style attributes to make sure that on hover, on focus, on select, they all have very obvious visual indicators which would probably bloat this code example to being quite large.

[00:02:54]
But those are like the 6 things that you would need to do, in order to relatively guarantee that your DIV would work the same way as a button. Or you could literally just use a button and just have your one on click listener. The button will automatically wire up the key, press to the click listener, it'll read it, it'll give it tab index, all of those things.

[00:03:12]
So, there's quite a bit sometimes unseen with HTML elements, and I think button's actually kind of a simpler one than date picker or something like that, but kinda goes to show how much power there is in just these HTML elements. And it also saves you quite a bit of JavaScript that you have to maintain.

[00:03:26]
One of the most contentious ones is Twitter's DIV soup, right. This has been true since I was there, and we did the rewrite into react from our Ruby on Rails app and people started as the new mobile app launched, and people were playing around with it, they started opening the Inspector or opening the View, code, source.

[00:03:43]
And they would see millions and millions and millions of DIVs. And so people immediately went out and they said, Twitter's website is inaccessible, but this isn't necessarily true, right? It is DIV soup, and it is kind of a mess to look at, and I do think it would be better if it wasn't DIV soup, but it's not necessarily true.

[00:04:00]
So Twitter uses this technology, that allows you to generate a website for react native or for web. And that's never been used, the react native side. But it is possible in doing so, there's all these elements that you don't get in a native app that you do get in HTML.

[00:04:15]
And so the way that it works is actually it works the way that we just saw before. So it takes all of these elements that don't exist in one operating system and do exist in the other one, and fully recreates them using standard items like DIVs or spans and a bunch of JavaScript, and a bunch of styling, and a bunch of things like that.

[00:04:32]
And so if you were to browse the Twitter website with a screen reader, you would actually get a very excellent accessibility story. But it would be very hard to tell from looking at it because it's DIV soup. So I guess my point here is I'm anti DIV soup, with caveats that it is possible to recreate, there's no magic to HTML, right?

[00:04:51]
It is possible to recreate all this functionality, but I think if you're ever going to stray from the semantic HTML buttons, you should know what you're getting yourself signed up for. You really do have to handle all these cases, the different key presses, the different screen reader interactions, everything like that.

[00:05:06]
>> Speaker 1: Does this story change a little bit with web components?
>> Speaker 1: In what way?
>> Speaker 1: Like to encapsulate the DIV soup and make it look semantic.
>> Speaker 1: Yeah, that's a great idea.
>> Speaker 1: Yeah, so I think web components could go a long way here, I'm not at all in favor of the output that Twitter's markup has.

[00:05:23]
Yeah, I think you could wrap, you could make great web components that were like native acceptable button, or native acceptable clickers, things like that. So, I think you could do a great job with kind of cleaning that up. I guess it's a little bit more philosophical, like how much you care about your source being easy to read.

[00:05:41]
I would prefer it be a lot better, but this is what they ended up going with.