Button vs Div: What's the Big Deal Anyway?

Hey, everyone. My name is Jen Lugar. And today, I'll be talking to you about why accessibility advocates often talk about using the platform instead of divs. So today, I'm going to be doing a live demo covering what happens when you take a div and you convert it into a button, and when you take a button and convert it into a div. And the reason for this is to show you how much easier it is to use the platform than it is to use divs that you then try to make accessible.

When we are looking at our app, you can see that I have a button, and I have a div. The button triggers the section. What we are going to do now is make our button accessible. So when we're looking over here, we see that we have a button, and we have a div. In order to make this button accessible, we want to provide a role of button. Many people say you don't necessarily need this. However, the very first button on a page is assumed to be a submit, which means that if you don't want it to submit when you press enter on a page, then you're going to want to convert this role to a button. After that, you're pretty much done. That's kind of it. So let's go ahead and look at what you need to do to convert your div into a button.

I am going to be cheating a little bit. I do have my completed option, but take a look at this for a minute. We have our role of button, but without the ability to tab, we can't actually tab to our div. So let's go ahead and add those. At this point, we can tab, which is great. That's helpful. However, we can't actually hit Enter. We can't hit Space to go into it if it's a div. It doesn't do anything. So we are going to have to add our onClick to hide and show the text within our div button, which we are passing in. At this point, when you click on it, you can, in fact, see that it works. But we still aren't able to tab into or press space or enter to activate this. So we're going to need to add this to our button. And we're also going to add our allowed keys. And at that point, we can tab, we can hit space, which still doesn't quite work, and we can hit Enter.

The next section is going to be the CSS of making it look like a div. And we have to put it as inline block. That's how a div or button functions. We're going to be text aligning center, the color button text. This actually allows it to inherit the color that all of the buttons on the page have.

The border radius for making sure that you get these rounded corners. We're going to have the background color to make it match. You'll be able to do whatever it is you want to do with this. Box sizing. This is interesting. The purpose for box sizing means that the padding is included inside the size of a button, which is pretty fantastic. That means that you don't have to have the width of your button be the width, and then the padding, and then the border. It's all included in that actual width.

The padding on a button for default is really weird. I'm not sure why someone chose exactly 7 pixels, but that's what it is. We then also have the border, which requires an outset and an interesting color option. And then, if you didn't know, in some iOS devices, if you don't include the pointer, it's never going to detect it as a button. It won't actually open it. And then we also have to have our hovers. So this is a pretty huge block of code we're going to need just to make this work. So it may look like a button. And it acts like a button. But there's a lot of information that you needed to remember in order to make this work. So would you rather have role equals button, or would you rather have to remember all of this?

Now, there are times when use the platform doesn't work. For instance, when you're trying to build a navigation, or when you are trying to build a multi-select dropdown. And what's really fascinating about those is that if you stick really closely to using buttons when you want to click on something, or check boxes when you want to select multiple items, then you don't have to cheat the system to make it accessible. It still works. If you want to find out more information on that, the Yaria website does include options and examples for how to build those types of components. Today we learned that a button doesn't take much to make accessible, but a div takes a lot of stuff you have to remember. If you have any questions, you can always contact me on Twitter at NickCodeMonkey.

And thanks again. That's a lot of knowledge in just 20 or 28 minutes it was. Four great topics.

I would like to invite all the lightning talk speakers with me on the stage to do the last round of Q&A of the day.

Hey everyone. Hello. Hey there. Hey. Hello. Good morning, evening, night, whatever it is for you. Yeah, I'm going to go straight into the questions. I'm going to start with the first question from Matt McClure. What market are you targeting? And why would someone use Mux instead of Twitch or YouTube? Yeah, it's a valid question. We're a developer-facing product. So we're purely just APIs for developers to build into their platform, as opposed to Twitch and YouTube, which are much more consumer-facing products. So if you're a streamer just looking to go live without writing any code whatsoever, those are great platforms. You should probably use them. If you're trying to build a platform, we're probably a better fit there. OK. So it's more about the target audience, I guess, and that you have more control over what you're doing. Yeah, I would think about it a little bit like a bad analogy that I'd mention at Slack is they're more like the PayPal or Venmo. We're more of the Stripe, if you're thinking about it in terms of payment APIs. OK, thank you.

Next question is for Jen. What are the reasons why someone like the React Native web team would want to use a div as a button? The reason is that putting HTML inside of a button is not actually semantic HTML. So they may want to wrap that content, for instance, a card or a block of an image and text, into a div and make that an accessible button instead of putting a button around it. Yeah, so if you have a completely clickable card with different elements inside it, you can't do that semantically within a button. Correct. So in that case, you'll want to make an accessible div. Well, you should want to, at least.

Perhaps. And can I say, if you don't, Jen is going to come and get you? I will very kindly tap you on the shoulder and make suggestions. How about that?

Yeah, but tap doesn't work. Then I'm gonna have to.

Yeah, yeah. Another question. But just for Uri, a nice tap on the shoulder from Martin van Houten. Not really a question, I just wanted to say, match looks awesome. Well, that's always nice to hear. Thank you very much. I hope that after you try it, you'll feel the same and not hate me. Well, actually at the company I work for, Albert Heijn, we are using it. And I have to say, it's been a pleasure, so thanks a lot.

Oh, you're my neighbor. I can come visit you. Yeah, that would be pleasure.

Mike, does Ionic support native apps similar to React Native? Or is it like a Cordova standard app, where it's a web UI instead of a native app? So it's kind of a mix of both, where the majority of the UI is displayed in a web view, but you can integrate with custom native views or activities on Android, and kind of mix which one gets displayed at a web view or the native view, or even just overlay the native view on top of the web view. So you get kind of the best of both worlds. That sounds powerful.

Okay, thanks, guys and my lady for this great talks. For the people watching, they're also going to be in the Zoom rooms for questions, but the formal part is now over. I'm going to say goodbye to you for a little bit. So thanks for joining. Thank you. Thank you. Bye bye. Thank you. Bye bye. Thank you. Bye bye.

Thank you. Bye bye. Thank you. Thank you. Bye bye. Thank you. Bye bye.

Bye bye. Bye bye. Thank you. Bye bye. Thank you. Bye bye. Thank you. Bye bye.

Thank you. Bye bye.