Responsive tables with side scrolling - HTML Tutorial

- [Instructor] Now that we have this absolutely fabulous, beautiful table, the next problem that you might've noticed is that it's not very mobile friendly. Now if I start to shrink my screen down here, it adjusts a little bit, but at some point, it starts to get cut off here. And, it's likely that's somewhere in the time you've had your mobile phone, you've wound up looking at a table like this and you have to side scroll and up and down scroll to try to read the table and it's incredibly annoying, there's got to be a better way, right? Well, fortunately there is. Adrian Roselli wrote a fabulous article here about how to create a table that is both responsive and accessible, and I have taken my approach here from his description that's here in his article, so go on ahead and take a look at this. If you have some additional questions, this is great reading, but Adrian Roselli is very well known for his work and accessibility. All right, so one of the first things that we can do to make a table a little bit more easy to use on a phone is to allow it to scroll side to side, particularly horizontally, on a mobile device. And so, let's go on ahead and start adding some additional markup and some styling that will make this possible. So, the first thing that I'm going to do is around the table tag itself. I'm going to add a div, and I'm going to give it a class of table scroll. Why a div? Because there's no semantic meaning to this whatsoever, it is truly meant to be just a big box right around our table and the div is what will contain our scroll bar. So it's just a div, with a class of table scroll, and then, here in our CSS, we'll go on ahead and add to it our table scroll class, and in here, we'll say overflow of auto. So this is going to give us now a scroll bar on that table directly when we need it. So as I shrink this page down, you'll see that now, at the very bottom of the table, we do in fact have the ability to side scroll. So that's pretty fabulous, it makes it a little easier for people who are reading it on phones, but this itself, is not accessible enough. What's going to happen here is that as the screen reader starts to read this page, the screen reader is going to get caught in this div up here on the top and it will never actually get to read the table. So, it only takes 10 seconds to fix this, so let's just go on ahead and do it. What I'm going to do here is to my class, the div with the class of table scroll, I'm going to add a couple of other attributes here. One is a role of region, and I'm going to add here an aria hyphen labeled by, all one word, and I'm going to give it a name of pricelist because hey, that's what it is. And then finally, I'm going to give this a tab index of zero. So, what this is going to do is it's going to make this div a little bit more invisible to the screen readers, and ideally what's going to happen is when the screen reader hits this div, we now want to redirect its attention to another element, and we're going to connect those two things via this attribute here. So the aria labeledby pricelist, we're going to attach that to the caption via the ID of pricelist. So now we've computationally connected that div to the caption so the screen renew will know to go right from that div and ignore it, go right into the caption and keep on going. The tab index that you see there means that the user could use the keyboard to side scroll in that area if they want to, that that is still an option available to some people who might be surfing without a mouse. So, this is one approach to making your table quote, accessible to people who are using smaller devices. And depending on the size of your table, this may be literally all you need, you just need to stick a scroll bar on it and it might be fine. But chances are, your table is a little bit bigger and a little bit more complicated and there are so many better approaches to this and I'm going to continue looking at Adrian Roselli's technique and expand on that a little bit more in the next few videos to show ya how we can make this even better.