012: Accessible Tables, Live Cola Kombucha

By /

Listen

In this episode, we discuss accessible tables on websites, their use cases, and why semantic HTML is to this day an essential skill for most developers.

Mentioned in This Episode

Amber’s tweet discussed during the episode.
Brent’s tweet discussed during the episode.

Transcript

>> CHRIS: Welcome to episode twelve of the Accessibility Craft podcast, where we explore the art of creating accessible websites while trying out interesting craft beverages. This podcast is brought to you by the team at Equalized Digital, a WordPress accessibility company and the proud creators of the Accessibility Checker plugin. In this episode, we discuss accessible tables on websites, their use cases, and why semantic HTML is to this day an essential skill for most developers. For show notes and a full transcript, go to accessibilitycraft.com/012. And now on to the show. 

>> AMBER: Hi, it’s Amber, and I’m here today with Steve. 

>> CHRIS: Hello, everybody. 

>> AMBER: And Chris. 

>> CHRIS: Hey there, I’m here. 

>> AMBER: All right, so we are going to have a fun time talking about tables, but I think we need to have a beverage before we start talking about tables. So, Chris, do you want to introduce our drink today? 

>> CHRIS: Yes, we’re going to need a drink to talk about tables. So we’ve got the Live brand L-I-V-E sparkling probiotic kombucha cola flavor today. So this is apparently, according to the manufacturer, lower sugar than your run-of-the-mill kombucha. And it is cold brewed for a smoother, less harsh taste. And based on the label here, it looks like we’re going to be enjoying some classic cola flavor combinations, including cinnamon and nutmeg, and hopefully some of that sour kombucha-ness in the background there. 

>> AMBER: And I saw reviews on the website where people were saying that they used this to kick their soda habit. And I know both of you are Coke drinkers. So when I saw this in the grocery store, I was like, maybe we should try this. I want to know, would you stop drinking Coke and drink this instead? 

>> CHRIS: Well, how much caffeine is in it? 

>> AMBER: Oh wait, that’s a good point. Does it have caffeine at all? 

>> CHRIS: I don’t think it does. It might. No, I’m not seeing it. 

>> AMBER: Would it have to say on the label? If it’s caffeinated, it would have to say? Oh, so does that mean it will never replace Coke? 

>> CHRIS: That’s a hard no from me. We talk bad about Coke here, but Coke is responsible for pushing a lot of these projects past completion. Caffeine. 

>> AMBER: That’s what you drink late at night?

>> CHRIS: Early in the morning, late at night, whatever it takes, right? 

>> AMBER: All day long. 

>> CHRIS: Right. 

>> AMBER: All right. So shall we open our bottle? 

>> CHRIS: Yes, let’s crack these open. I’m genuinely curious about this one, because any non-soda that tries to mimic a soda, I’m just automatically curious about how close it’s going to get. 

>> AMBER: Oh, it has a little message inside the metal lid that says, “Life’s better with buch”, which I guess is short for kombucha. 

>> CHRIS: My cap says, “Drink your buch by the batch.” That’s what mine says. 

>> CHRIS: That’s fun. Mine says, “Self-care is in your hands, literally.” 

>> AMBER: OK, so I’m going to take a sip of this first, but I actually have a conversation point about that whole self-care and the probiotic thing, but I want to taste it first or smell it.

>> CHRIS: It smells OK. 

>> AMBER: Does it smell [Crosstalk 47:42] 

>> CHRIS: It has a cinnamon smell. I’m getting a lot of cinnamon on the nose. 

>> CHRIS: Yes, it shows cinnamon on the front picture. Here we go. 

>> AMBER: Is cola half cinnamon normally? That’s a normal cola flavor? 

>> CHRIS: Yes, cinnamon is normal. I think that’s one of the key flavorings in Coca-Cola. Not that anyone actually knows the Coca-Cola formula. But I feel like when I drink Coke, I taste cinnamon on it. 

>> AMBER: Oh, it kind of tastes to me like what I think a Coke tastes like. I don’t drink coke. 

>> CHRIS: As someone who partakes fairly often, to me, it tastes like Coke that you left in ice a little too long and the ice has diluted it.

>> CHRIS: For somebody with Diet Coke running through their veins, it’s not bad. 

>> AMBER: It’s kind of close?

>> CHRIS: It’s kind of close. It’s not carbonated, so you’re missing that. 

>> AMBER: I mean, there’s carbonation. It’s just not pop-level carbonation. 

>> CHRIS: It’s not in your face. It’s very little though. 

>> AMBER: You don’t get the carbonation, I do. 

>> CHRIS: I don’t know. Steve’s was also shipped to him. I get weird looks at the FedEx store, let me tell you, really weird looks when I’m two-day shipping a single bottle of Kombucha to Ohio. 

>> CHRIS: The FedEx lady has stopped asking for my ID. 

>> AMBER: Well, it’s not alcoholic, so you didn’t have to give her an ID.

>> CHRIS: Right. 

>> AMBER: When we have our next beverage, I am going to have a really great story about trying to get it from an Uber driver. 

>> CHRIS: So, I want to pull us back to the Kombucha just for another minute or two, but as I’m tasting this – Steve I don’t know if you drink a lot of Kombucha. I know Amber, you drink a lot of it – the thing that I notice about this is, maybe it’s the cold brewing they do, this to me, has a lot less of a typical kombucha character, it’s way less sour than I would have expected it to be, because kombuchas to me, are typically a little bit sour. 

>> AMBER: Well, I wondered about that because I love kombucha. I drink lots of kombuchas, but I always drink fruit flavored or a ginger. It’s probably the closest to root kind of kombucha, but I’m typically choosing a fruity kombucha. So this is different, and I’m wondering if that sour comes from fermented fruit, and because this doesn’t have berries or something in it, maybe that’s why it’s not.

>> CHRIS: Yes.

>> AMBER: It’s more on the tea side probably, for the kombucha base. 

>> CHRIS: The few kombuchas that I’ve tasted were pretty sour. I mean, I did not enjoy them. 

>> AMBER: I think this tastes kind of legitimately like a pop. 

>> CHRIS: No, it’s pretty close, like a flat pop. 

>> AMBER: Wait, so it’s not quite Coke. Is it like RC Cola? 

>> CHRIS: I don’t know. 

>> AMBER: Or Pepsi? 

>> CHRIS: You know I drink Diet Coke. So it’s sweeter than Diet Coke. Diet Coke is pretty dry. 

>> CHRIS: I got to say, I’m pretty impressed, with the way that they’ve combined… Because I’m reading the ingredients. So it’s got tea. I would guess some kind of orange pico or black tea. And they’ve got that combined with cinnamon and nutmeg and some other things and they’ve actually managed to replicate cola. It’s kind of impressive, to be honest. I normally am not one that comes back to kombucha ever.

This is one I might actually legitimately pick up again. The other brand that I was going to mention, and I see it a lot down here in Texas, but it’s called Olipop. O-L-I-P-O-P. But it’s a probiotic soda that comes in a can and I don’t think it’s kombucha specifically, but it’s like a probiotic blend with juices and it’s lightly carbonated and their stuff is exceptionally good. It’s also sweeter than this, but that might be one we do for one of our non-alcoholic options one of these weeks to follow up this one. 

>> AMBER: I want to talk about the probiotic thing for a minute here because it says sparkling probiotic. However, what flagged for me is normally when you get probiotic beverages or probiotic yogurt or whatever. On the bottle, it will say what strains are included, like lactobacillus or whatever, and how many parts. This does not. And I looked on their website, on their product page, and it also does not. So I either think they’re lying or they’re bad at labeling. 

I didn’t Google this because I didn’t actually care that much, but I don’t know if they’re required to label if it actually contains things like that, like lactobacillus and extra stuff that they’ve added under supplement laws. So I’m wondering if that means it doesn’t actually have it and so I’m a little bit like, is it really probiotic? Does it really help your gut or are they just using that word without actually adding the stuff that they would need to add to legitimately make it do that? 

>> CHRIS: There’s only one way of finding out. Tune into the next episode for the digestive benefits of live probiotic kombucha. 

>> AMBER: But it is kind of a tasty beverage and I’m not a big Coke fan, but I like this and I agree. I think this would be something I would get again. I know you guys like the caffeine, but if you’re thinking like, your kids want to have soda, and it’s 7 o’clock at night with a movie, maybe this would be a better option without the caffeine. 

So I want to talk about tables. And we probably were going to talk about something different, but I was auditing a website’s accessibility and I got so triggered over the weekend and so I was like, we’re going to talk about tables. I also went and wrote a post for my Accessibility weekly series at the Admin bar about tables, even though I was going to write about something else because I was so triggered. And it was because the pricing table on this website was built completely in Divs. 

>> CHRIS: And why is that bad? 

>> AMBER: Why is that bad, says the developer. So, tables actually have some really important interactions for screen reader users, assuming they are made correctly. The key differences are twofold. One is that when you’re in a table with the screen reader, you can use your arrow keys and your screen reader modifier to navigate up and down and left to right. You can only step through Divs from left to right, you can’t go up and down.

So on a pricing table, what being able to go up and down means is you could just choose a pricing plan and you could go down and hear everything in that pricing plan. But if it’s in Divs and you can’t do that, you have to go left to right. The other big thing that happens in tables, if they’re done properly, is that when you’re in a cell, it will not just read out the contents of the cell, but it will read out the heading that is associated with that cell, which is typically always a header at the top of the table, but also frequently in pricing tables, there’s also a row header as well that’s on left as you go across. 

So you can be in any cell and you will hear the coordinates of where you are. So you’re in column three, row five and this is the pricing plan name. And this is the row, the feature name and this is whether or not it’s included, as opposed to just hearing included, included, included, included. Or if they got really bad and they forgot to actually have screen reader text, you just hear image, image, image, image, for all those little check marks. So those are key things why using a table is good for data. Being able to move around it, and being able to get more context on each individual cell. 


>> CHRIS: So as you were looking through this, did specific tables come to mind, Amber, that you think are really good examples?

>> AMBER: Yes. So I actually spent some time because I wanted to give good feedback, and sometimes giving good feedback, it’s helpful to find good examples. So I looked around and I was super impressed with Hubspot’s pricing tables. So if you go on the HubSpot pricing page, which we’ll link in the show notes, they have really great tables that have all the appropriate table HTML, and they also have good reader text if something is included or not included, and all that. So shout out and kudos to HubSpot on that front. And if you’re looking for an example that would be a good one to go look at. 

I got curious then because I went down this rabbit hole and I was wondering about WordPress plugins. So I went over and checked Table press’s demo on their main website. And now this is an interesting thing, and I’m curious, Steve, what you think about this. And I don’t even know if you’ve pulled it open, so I might be throwing you a curveball here. But they have search and they have filtering on their table column headers – you can filter. It mostly works for a keyboard-only user, but it’s missing the announcements and that sort of stuff that a screen reader would use – I did some screen reader testing on it. 

>> CHRIS: For the header filters right? 

>> AMBER: Yes. It doesn’t tell you when they’ve filtered. So I’m sort of curious: if someone’s a non-developer and they’re trying to use this – this is one of the most commonly used WordPress plugins – should they use this or should they just not use the ordering? 

>> CHRIS: Is there a way to turn it off? That’s the question. 

>> AMBER: I don’t know, I didn’t try installing it.

>> CHRIS: Maybe not, if you’re going for a fully accessible table. If that ordering is reordered, how disjointing is that for the screen reader if they have no context as to how it’s been reordered? 

>> AMBER: Yes. It did it right in that it is user-triggered only, it doesn’t randomly reorder right? 

>> CHRIS: Yes. 

>> AMBER: So it requires input from the user to cause that. But I’m not sure if it actually was clear that it’s alphabetical when you hit it. You know that it would say, sorted alphabetically A to Z. And then you do it again and it should probably say sorted alphabetically Z to A or something like that, I guess would be what the announcement would have to be. 

>> CHRIS: Yes, I see, I see. 

>> AMBER: Do you think that could be considered a toggle button? Do you know how there’s ARIA for toggle? 

>> CHRIS: Yes, like if it’s been toggled or not. There probably should be some context on which way it’s currently ordered.

>> AMBER: When the page first loads, what’s the default? 

>> CHRIS: Well, if I go to First Name, if I go to the table header and I hit First Name, I have no context on if it is alphabetical currently, without going through each one and figuring out its alphabetical, then going back up and then reordering it to be ascending or descending. I think it would be wise to have that First Name ascending alphabetically, with some screen reader text put on there. 

>> AMBER: So, if there was a toggle on that, you could indicate that by having whichever one is currently being used to control the sort order be the one that’s toggled on, and then when you choose a different one, the ARIA toggle gets reset on the one that was previously. 

>> CHRIS: If you go to the last name, is that what you’re saying? 

>> AMBER: Yes.

>> CHRIS: Whenever you would do a sort like that, the resorting doesn’t take into account, it’s not like an AND or an OR. This table heading now controls the ordering, so it’s the current one you’re on.

>> AMBER: Yes. So, it’s a series of toggles where only one is allowed to be active. 

>> CHRIS: Now, I think in an advanced use case, there could be a case where you could build something where it’s more of a faceted kind of search, but I think we’re talking about a different thing at that point, where it might not be acceptable for it to be a table. Do you know what I mean? 

>> AMBER: Yes. Like in Excel, where you can say order by this and then order by that. 

>> CHRIS: Yes, yes. 

>> AMBER: Well, it might be a table, but probably you wouldn’t have filters on your column. Sorry, I keep calling them filters when I think they’re actually sort. 

>> CHRIS: Sort, Yes.

>> AMBER: But you’d probably have a form or something above where you have to choose all your options and hit Submit, which is how it works on Excel too, or Google Sheets. 

>> CHRIS: Yes, yes. So that’s an advanced use case. So it might be wise for us to jump back a step and ask ourselves, why are developers not coding tables semantically? There was a time before CSS – and I think I’ve mentioned this before, yes, I’m older than CSS – where you had no choice but to make a table semantic, you had no choice but to do it right or it wouldn’t it even look right on the page. 

>> SPEAKER: This episode of Accessibility Craft is sponsored by Equalized Digital Accessibility Checker, the WordPress plugin that helps you find accessibility problems before you hit publish. A WordPress native tool, Accessibility Checker provides reports directly on the post-edit screen. 

Reports are comprehensive enough for an accessibility professional or developer, but easy enough for a content creator to understand. Accessibility Checker is an ideal tool to audit existing WordPress websites, find accessibility problems during new builds, or monitor accessibility and remind content creators of accessibility best practices on an ongoing basis. 

Scans run on your server, so there are no per-page fees or external API connections. GDPR and privacy compliant, real-time accessibility scanning. Scan unlimited posts and pages with Accessibility Checker free. Upgrade to a paid version of Accessibility Checker to scan custom post types and password-protected sites. View sitewide open issue reports and more. Download Accessibility Checker free today at equalizeddigital.com\accessibility-checker. Use coupon code accessibilitycraft to save 10% on any paid plan. 

>> AMBER: Well, that’s how you make columns on a page, right? 

>> CHRIS: Yes, you would make sidebars for websites in a table. The whole website container was a cell. 

>> CHRIS: I literally remember doing that in high school on a personal website and being really proud of myself, writing an HTML table and having the links properly displayed on the left and the thing on the right. 

>> CHRIS: Yes. I think we’re at a place now with development where we have to train developers to go back to basics. We’ve had all these years of CSS being able to modify things and JavaScript being able to modify things to where accessibility is rightly so, becoming very front of mind to a lot of people. And I think for a lot of developers, they’d be well suited to take a step back and just go through the basic HTML semantic documentation and ensure that they’re making semantic markup. 

>> CHRIS: So I’m curious, as a non-developer. I understand basic HTML, and I know that’s a fairly straightforward language. I’m wondering, why skip over all of that to something that I perceive to be more complex like CSS or JavaScript or any of the others? Why is everything in a div now? I don’t quite get it. 

>> CHRIS: Yes, it’s a simple answer. It’s responsive. 

>> AMBER: Because you can do things like grid and stuff on it? 

>> CHRIS: Yes, you can do grid. It’s difficult to make a table responsive, to make it look good, and sometimes even you’re presented with designs that have the headers shifted differently than they are on desktop. I can’t name it off the top of my head, but I know there’s a JavaScript library that will handle some of that for you, that will move things on mobile. So it’ll show the row one heading, and then it’ll show all the cells below it, then it’ll show the next heading, all the cells below it on mobile, which is a nice way to view it. Whereas without that, all your headings are still at the top. And I’ve seen horizontal overflow, you scroll horizontally and see the whole table on mobile. 

Now, I’m not saying that that JavaScript library should be used because I have not tested it if I could even think of the name of it. I don’t know that that’s wise for a screen reader. It might be moving things programmatically that the screen reader is not picking up. That’s why I would see a table not done as a table done and plus tables out of the box come with a little bit of CSS blow. If you don’t have a good CSS reset in your CSS file… When you put a table in, a lot of times it comes with some padding that you’re not expecting, and you’ve got your table border, which acts a little differently than a regular border does. 

So just based on the design, things can get kind of weird. If you’re trying to put a border-right or a border-left, you get to the end of the row, and there’s not a border, so then you got to put a border on the table body to make it look like that border belongs to the cell. That way, you don’t end up with two borders mashed right against each other where you’re trying to do a one-pixel border, and end up with two pixels. I think for design and responsiveness is the main reason why people do that. 

>> AMBER: Yes. Choose divs because it’s easier. But sometimes easy is not always the best solution. 

>> CHRIS: Yes, that’s frequently the case. How much easier is it, just out of curiosity, to build something like a pricing table with just divs versus doing it with what we would consider the right way with a real table that’s responsive? 

>> AMBER: I sort of have to push back a little bit on that. I get that there’s weirdness with CSS, especially if you’re using a theme out of the box or a starter theme where you’ve built in the basics. There’s stuff that might apply to other random data tables that you don’t want in the design of your pricing table. But at the same time, you still have to do some work to get your divs to all lineup.

This particular table that I saw had a parent div that had a class of table. So I laughed so hard. And then within that, there were parent divs that had a class of row and then inside them. They had all the classes in order to [Inaudible 26:03], table rows and table cells and all of that kind of stuff. So I feel like you still have to do work to make divs look like a table. 

>> CHRIS: Yes, I think so too. So a question would be, if divs were used, what if they took the next step? What if they added the correct roles to it? Is that acceptable? Like role table? 

>> AMBER: I don’t actually even know. Is there ARIA for…? 

>> >> CHRIS: Yes, I believe there’s ARIA Spec. 

>> AMBER: Like you can use the role equals and add all of the tables? I’m googling it right now and it’s mad when I search because we get keyboard sounds while recording. 

>> CHRIS: That’s right. We’re doing it live, people. 

>> CHRIS: Yes. 

>> CHRIS: There is role=”table” and then there’s role=”rowgroup” and then there’s role=”row”. There’s role=“columnheader”. 

>> AMBER: Well, a column header wouldn’t apply to tables though, right? Or would it? Is that how you would make a column-scoped TH? 

>> CHRIS: Yes.

>> AMBER: So technically, I guess if you can… 

>> CHRIS: It’s a lot more work, I think because – I pulled up and example here – it looks like they’re even defining row indexes as well. 

>> CHRIS: Interesting. So if all of these roles are assigned, would a user be able to move through with their arrow keys as you would expect, just like they would with an HTML table? 

>> AMBER: Well, the thing that gets hard about some of that ARIA stuff is that adding ARIA isn’t enough. You also typically have to have JavaScript to add some of the keyboard interactions. So if you add role=”button” on something, it won’t make it focusable and it also won’t say that you can hit your spacebar to trigger it. You got to have other things happen as well. And actually, we’ll have to link this in the show notes over on the Mozilla developer docs because there is stuff here and examples with the HTML and the JavaScript and stuff. 

>> CHRIS: Yes, I think with the area label, you’re sacrificing some of the built-in work that the browser does for you when it comes to a table. And as Amber said, you would have to make up for some of those shortcomings with JavaScript. 

I once heard at some conference, I’m not sure which one it was, Axcon or something like that, that the best ARIA to use is no ARIA. Now, we use it when we need to hide elements. It’s utilized where necessary. But in this case, I think this is kind of the extreme. It’s like, “Why go through all this effort to duplicate something that is easily done with just straight semantic HTML?” 

>> AMBER: Yes. So the website I was auditing hasn’t been launched yet. So it’s like it should just be fixed and rebuilt with the table tags. But maybe there is an argument if you have a data table built with Divs that is public and there are some other things, like a bunch of styles or other things that are already applied to it, maybe that would be a case where you would come and add all the roles. 

I haven’t tested this. I tend to trust the Mozilla developer docs, so maybe it is possible, but I don’t know. 

>> CHRIS: I wouldn’t go that route if you didn’t have to. 

>> AMBER: So I think the other thing that’s worth talking about with tables is tables that have a lot of headers that are like spanning rows or columns, merging cells, things like that are really complex. When I wrote the documentation for accessibility checker on empty or missing table heading, I have a thing down at the bottom and it has a table that is accessible, that has merged headings on it. But I literally was like, if this does work and you can do it, but really you probably shouldn’t. That was my opinion, but I’m curious about what you guys think about providing tables with headings that span and things like that. 

>> CHRIS: So doing merging cells and spanning cells, if you have to do it, I would definitely do some thorough screen reader testing on it. I don’t know that I recall a time when I’ve had to do a lot of testing on that. So I’m not 100% sure how the screen reader reads that out. Like say, you have four rows and your second row spans two, I’d have to do some testing myself on that just to see how that reads out. And if it’s confusing to me, it’s going to be probably confusing to anybody. 

>> AMBER: Yes. The W3C has tutorials on building tables, and there’s one for tables with the regular headers. So they have an example on this. I don’t totally quite get this. There are planets, Mars and Venus at the top, but that header spans two columns and then under it, they have produced and sold for each one of those. 

And then on the left, they have teddy bears and board games. So, I don’t know, people on Mars who created and sold or those are companies. I don’t know. I thought Mars made candy. But anyway, I guess the alternative to this, which would probably be easier for people to understand, is not trying to make them one table. 

So you’d have a heading for Mars, and then you’d have this produced and sold column table, and then you’d have a heading for Venus, and you’d have a separate produced and sold column. But the downside of that is maybe it’s harder to compare the data quickly because you have to scroll up and down. 

>> CHRIS: Yes. For everybody listening, there are two rows in this table, and the row starts with what looks like a table heading, visually. One says teddy bears and the other is board games, but it’s scoped as a row. So I’m talking about the first column of a row, it looks like it has another heading. And I’ll back up a little bit too. And this is another point we wanted to hit on. 

So at the very top, there are some empty cells. So you’ve got headings running horizontally and vertically, and then there’s the top left corner square. In this case, its two rows, and has nothing in it. So you would want to do like an ARIA hidden on those because you don’t want to confuse…

>> AMBER: Yes. That actually came up in a WordPress accessibility meet-up this week. Alex and I, once a quarter, do free plugin audits for plugin developers in WordPress. And he was looking at a table and it just was saying to him, blank, and he’s like, I don’t need to hear about the cell. 

>> CHRIS: Yes, yes. 

>> AMBER: So if you put ARIA hidden, it wouldn’t even be focusable. 

>> CHRIS: So one thing that I found kind of interesting is that… Admittedly, what I haven’t always done, was the scope attribute. 

>> AMBER: That’s really important. If you have headers on the top and on the left, you can’t just put TH tags on them because it won’t really know how to apply the TH tags. I don’t think it’s smart enough to know. Well, this is the first one in the row. That’s how it knows this is a heading for this row and this is a heading for this column. 

>> CHRIS: Yes. OK. And that scoping can be done, I think in another fashion using IDs and headers. I think this might be an even more advanced scoping, but it requires more markup. So you got table head, then you got a TR tag, then you got a TH tag. So on that first TH tag, you have an ID equals, in this case, let’s say purchase, and then the rest of the headers have an ID attribute on them. 

So if you jump down to the body tag, you go Tbody into TR tag, then to your TH tag, and you can have an ID on that one as well. But when you get to the TD tag, you now use the header attribute, and in that header attribute, you define that ID tag that you used on the TH. 

So in this case, it’d be like purchase, and then you give it a unique Identifier as well. So it scopes in even further. Let me back up a little bit. I know this might be confusing to listen to. Audible coding, that’s what we should call this episode. 

>> CHRIS: By the way, just for our audience. All of the things we’re referring to, the Mozilla docs, and what we’re talking about right now on W3, this is all going to be linked in the show notes, so you can try to follow along. 

>> CHRIS: Yes, exactly. So I have a TH tag with an idea of haircut. I have a TD tag inside of that or next to that with a header equals location, haircut. So it’s like it’s scoped in even further than I think even a role element would do. Now, admittedly, I haven’t done this, and I haven’t tested it, but I’m reading about it and it seems interesting. 

>> AMBER: I know. So this takes me to the tweet that you found, Chris, which maybe you can talk about it a little bit. Because I’m listening to this HTML and it’s interesting. And there’s a whole bunch of attributes and things like that. I wasn’t aware that you could do table headers in that way. So I’m thinking this is complex. It’s not basic or not like any ten-year-old knows how to do it. 

>> CHRIS: Yes. So this is credit where it’s due. This is Brent Morton on Twitter. His user tag is B1 mind. And he posted this tweet, and I’m just going to read it. It says, “Keep hearing people in resume and portfolio reviews saying to not list HTML and CSS as tech skills. Accessible and semantic HTML/CSS are skills. We have a big issue in our industry with people ignoring two fundamental building blocks of the web.” I retweeted this. It was just timely. I saw this right after we had kind of a quick internal pow-wow about Amber encountering this table and her testing that was built entirely out of Divs. 

And it struck me, I was like Ah, this is interesting. And so I’m curious to know, and maybe our audience can even comment or weigh in once this episode drops. But why would someone be embarrassed to list HTML as a skill? 

>> CHRIS: Because it’s not React. 

>> AMBER: Do boot camps even teach HTML beyond basics? 

>> CHRIS: Do you want a snide response to that? Or an [Inaudible 39:36] 

>> AMBER: Give the Steve response, whatever you want to say. 

>> CHRIS: From what I’ve seen, they’re not teaching much of anything, mic drop. There’s definitely a deficiency for knowing basic semantic HTML. And you’re right, Amber. We may have started with, this is easy, just do it right, it’s easy. But even ourselves, we spend all day thinking about accessibility. We’re like, Oh, well, we haven’t done it that way, and that’s interesting that there’s even another way. 

But yes, I think so. I know we’ve posted a couple of job listings lately, and we’ve put that on there and we’ve defined it as accessible semantic HTML. 

>> AMBER: I wonder if there’s just this assumption that HTML is basic, so if I write that I know React or View or Ember or whatever, then people will just assume that I also am good at HTML, so I don’t need to list that. Maybe I’m trying to keep my skills section so my resume can fit on a single page, those silly things. I remember in high school when they were teaching us to write resumes, they were like, it should be one page.

>> CHRIS: Yes, yes. 

>> AMBER: Not that I’ve written a resume for a really long time, but at this point, I’m like, no. Having hired people, I would rather have a more thorough overview of what they’ve done than a one-pager. So maybe that’s the assumption. 

>> CHRIS: Yes, the assumption would be that you know, and maybe even React and all those frameworks that we talk about. I mean, at the core of it, we’re talking about JSX, like where you’re writing HTML inside of JavaScript. Maybe JSX, since it’s more structured in how the HTML is formatted, maybe it does some of this semantic work for the developer. Since you’re just defining the tag and maybe the attributes, you’re not necessarily writing it all out. It’s being compiled and the compiler is kind of interpreting that. Maybe to some degree, they don’t see the need to actually just start with straight HTML. I think seasoned guys like me have a little bit of an advantage because when I started coding websites, there was no CSS.

I remember when CSS Garden came up, if anybody remembers CSS Garden, it was just a whole new paradigm in thinking. You could apply a style sheet and then apply a different one and the website looks totally different. And that’s kind of where the mess started, and then you add in JavaScript and it just takes it even further. But I think knowing HTML thoroughly is super important. And to be 100% honest with the audience, me myself, I’ve even gone through somewhat of a re-education of semantic HTML as well, so that I can ensure that I’m making accessible websites and applications and whatnot.

>> CHRIS: So, I’m going to come out of left field because I’m good at naive questions, completely naive questions. And I’m wondering, as we see all of this evolve, as we see the web evolve, as we see computer technology evolve, are we kind of at the spin-off point where either we all need to go back to basics and make sure we’re observing these fundamental baseline languages like HTML and CSS or is it more of a situation where as we get into more advanced web applications, do the screen readers themselves need to evolve to better interpret what’s out there? 

And I wonder if that’s even possible or even answerable here. Is it that the screen readers haven’t caught up or is it that we need to go back to basics? Just a quick opinion. 

>> AMBER: OK. On the pricing table example, I don’t know how a screen reader would… What we’re talking about is it would have to assemble the page, interpret how the Divs are laid out from the assembled page – in a virtual browser, and then go, “Oh, this is supposed to be a table” based on the CSS. I don’t know how we could possibly expect a screen reader to do that. 

>> CHRIS: There might be a case for that. And Chris, to your question, it’s probably both. Obviously, there’s a lot that we developers can do to ensure that the screen reader works. And this semantic HTML has been around for 30 to 40 years now. The screen reader shouldn’t have to go backward for us doing things wrong.

And to some degree, the screen reader actually does kind of interpret things that aren’t necessarily semantic HTML, just as we talked about earlier through the ARIA spec. We can go through and we can mimic a semantic HTML table with the ARIA spec. 

So the screen reader is kind of giving us an avenue to be able to read that out as if it’s a table and still allowing us to not make it an actual table. 

>> CHRIS: Interesting. So I can’t believe it, but we’ve almost talked about tables for 45 minutes. Going into this episode, I was like, it’s not possible. 

>> AMBER: I told you we’d be able to. 

>> CHRIS: But I want to finish us with a question, which is, when shouldn’t you use a table? Because I don’t think we really address that.

>> AMBER: So actually, at Accessibility Checker office hours today, someone asked me the difference between pricing tables that are literal tables and then sometimes you’ll see and actually, we do this on our website as well. Pricing is laid out in columns with headers, and then the features are in bulleted lists below. Also on the WordPress Accessibility Day website, we did that for our sponsorship tiers. 

And I think that hearing that content under headers and in lists is what screen reader users would prefer. But the big difference there is that there’s no left side column providing extra information about what is under the tiers. All of the text for the tier is included in the column in the bulleted list. So that’s sort of a decision point, which is, do you need those row headers or not?

>> CHRIS: Right. Does your data need an X and a Y to be interpretable? 

>> AMBER: And if it doesn’t, then it probably is actually better to do it in divs, then you make columns. But you need to make sure you have headers that make sense and provide context and all that. 

>> CHRIS: What about navigation? 

>> AMBER: Navigation should not be in a table. Only data should be in a table. Don’t use tables for layout folks.

>> CHRIS: And navigation should be a list, right? 

>> AMBER: Yes. Navigation should be a list. There are a lot of things that should probably be lists instead of tables, like grids of posts or membership directories. I’ve seen sometimes where they put those in tables, but really it should just be a list.

>> CHRIS: It’s funny you brought that up and maybe this is a good topic for another episode, but I did see that on a current project we’re working on that you mentioned related posts being displayed as a list. And actually, I found that kind of interesting. 

>> AMBER: We could have a whole conversation about lists, but the short answer on lists, and I’m actually flagging this on another whole different website that we’re auditing right now, the helpful thing on lists is that users of screen readers will get the number of items that are included. 

And this is why in WordPress if you look at the core post block, it outputs in a list, because then when they hit the first one, they hear one of three or one of nine, and they know what to expect, what’s coming back. Because if you just put things like that in divs, then they don’t know, “Well, what if I don’t care about related posts and I want to move beyond this?” 

Like in a table, you can skip past the table. In the list, you could skip past the list. But if you just have things in divs, they are forced to go through all nine of your related posts before they can get to the content below the related posts. 

>> CHRIS: So it’s OK, like inside of a li item to just put the article tag?

>> AMBER: Yes, it should be an unordered list, not an ordered list. 

>> CHRIS: But I mean, it’s OK to nest the article tag right inside of there? 

>> AMBER: Yes. I am 99% certain that you’re allowed to have an article tag inside an li element.

>> CHRIS: Interesting. 

>> AMBER: I think at this point, we have stopped talking about tables, which just maybe means it’s time for us to sign off and we can come back in the future time and talk about making good post blocks. That might be a good topic for us to discuss. So all right. 

>> CHRIS: Well, it was a shockingly good conversation for something as seemingly mundane as tables, so thank you both. And thank you for answering my somewhat naive questions. 

>> AMBER: Yes. And I think we would recommend people give Live sparkling probiotic kombucha cola-flavored a try. They have a root beer flavor, which I tried, and it tasted legitimately like root beer to me. 

>> CHRIS: Maybe a future episode drink. 

>> AMBER: Maybe. All right, well thanks, everybody. 

>> CHRIS: All right, take care.

>> CHRIS: See you later. 

>> SPEAKER: Thanks for listening to Accessibility Craft. If you enjoyed this episode, please subscribe, in your podcast app to get notified when future episodes release. You can find Accessibility Craft on Apple Podcasts, Google Podcasts, Spotify, and more. And if building accessibility awareness is important to you, please consider rating Accessibility Craft five stars on Apple Podcasts. Accessibility Craft is produced by Equalized Digital and hosted by Amber Heinz, Chris Heinz, and Steve Jones. Steve Jones composed our theme music. Learn how we help make thousands of WordPress websites more accessible at equalizeddigital.com.