From Author:
Accessibility advocates often say "use the platform," but why? In this lightning talk, I'll be showing you implementation differences between the behavior of native HTML elements and their DIV counterparts.
This talk has been presented at React Summit Remote Edition 2020, check out the latest edition of this React Conference.
FAQ
Box-sizing is important for buttons because it includes padding and border within the element's total width and height, making it easier to size the button accurately.
If a button doesn't work on some iOS devices, make sure to include the pointer property, as it is necessary for the device to recognize the element as a button.
Using the platform (e.g., native HTML elements like buttons) is recommended because it inherently supports accessibility features, whereas using divs requires additional code and attributes to make them accessible.
When you convert a div into a button, you need to add roles, tabindex, and event handlers (like onClick) to ensure it is accessible. This includes handling key events like Enter and Space.
To make a button accessible, you typically need to add a role attribute (e.g., role='button') if it's not already a button, handle key events like Enter and Space, and ensure it is focusable by adding tabindex.
In React Native web, someone might use a div instead of a button because putting HTML inside a button is not considered semantic HTML. For example, wrapping a card or a block of an image and text in a div can be more semantically appropriate.
Important CSS properties include display: inline-block, text-align: center, color, border-radius, background-color, box-sizing, padding, and border.
Yes, using the platform doesn't work well for certain complex UI components like navigation menus or multi-select dropdowns. In these cases, additional customization and coding may be required.
You can find more information on building accessible components on the Yaria website, which includes options and examples for various types of components.
You can contact Jen Lugar on Twitter at @NickCodeMonkey for more questions.
Video Transcription
1. Accessibility Advocates and the Platform vs Divs
Today, I'll be talking about why accessibility advocates prefer using the platform over divs. I'll demonstrate the process of converting a div into a button and vice versa, highlighting the ease of using the platform for accessibility. To make a button accessible, provide a role of button and ensure it doesn't submit on enter. Converting a div into a button requires adding tab and key press functionality. Finally, we can tab, hit space, and enter to activate the button.
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.
2. CSS for Divs and Buttons
The CSS for making a div look like a button includes setting it as inline block, aligning text to the center, and inheriting the color from other buttons on the page. Other properties like border radius, background color, padding, border, and hover effects are also necessary. However, using the platform is easier and more accessible in most cases. Building navigation or multi-select dropdowns with buttons and checkboxes ensures accessibility without the need for complex code. For more information, visit the Yaria website. In conclusion, buttons are simpler to make accessible compared to divs.
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.
Comments