016: How Lists Make the Web More Accessible, Liquid Death Rest in Peach

By /

Listen

In this episode, we discuss lists and how both the proper and improper use of lists can impact the experience of assistive technology users on the web.

Mentioned in This Episode

Transcript

>> CHRIS HINDS: Welcome to episode 016 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 Equalize Digital, a WordPress accessibility company and the proud creators of the Accessibility Checker plugin.

In this episode, we discuss lists and how both the proper and improper use of lists can impact the experience of assistive technology users on the web.

For show notes in a full transcript, go to “accessibilitycraft.com/016.”

Now on to the show.

>> AMBER HINDS: Hey, Y’all. I am excited to be here talking about lists today. I’m Amber Hinds, and I have with me Steve.

>> STEVE JONES: Hello, everybody.

>> AMBER: And Chris.

>> CHRIS HINDS: Howdy.

>> AMBER: And I don’t know why I did not give you guys’ last names, even though I gave myself one. [laughs]

>> CHRIS: Do you want to try again?

>> AMBER: No. I think this is just the fun of not having a script.

>> STEVE: Yes. So I just want to acknowledge that the Texans here greeted you with a “Y’all” and a “Howdy.” [chuckles]

>> CHRIS: Yes.

>> STEVE: And the Midwestern guy here just said “Hello.” [laughs]

>> AMBER: “Hello.” [laughs]

>> CHRIS: Yes.

>> AMBER: Well, we are going to be talking about lists. But first, we’re going to have some Liquid Death.

>> STEVE: [playfully] Liquid death.

>> CHRIS: [playfully] Liquid death.

[laughter]

Steve, we need to separately engineer, like, a Heavy Metal electric guitar drop that I can slot in right there.

>> STEVE: [laughs] Yes, totally. Totally.

>> CHRIS: We’ll take care of that in post.

>> AMBER: We will say, for people who haven’t listened all the way to the end, and shame on you for not listening all the way to the end. But if you didn’t, you might not know that Steve actually makes all of our music. It’s not stock music that you’re hearing on this podcast.

>> STEVE: Completely original.

>> AMBER: Just like us. [laughs]

>> STEVE: Would you expect anything less?

>> AMBER: So, Chris, tell everyone about Liquid Death.

>> CHRIS: This is either going to be a very short podcast episode that never gets aired, or we’ll all be OK. We’ll see.

[laughter]

So we’re going to post this in the show notes, but there’s a great video about this company on CNBC’s “Make It,” and it’s available openly on YouTube.

This was started by a guy… I’m paraphrasing the video here. This was started by a guy who was in brand marketing and brand design for a number of years. And he kind of was trying to figure out, like, a product company, a CPG company on the side, and he eventually launched Liquid Death. And I think it just started as canned water.

>> AMBER: Well, you forgot the backstory of, he’s a guitarist and he’s into, like, heavy metal and stuff. And he would go to heavy metal concerts, and a lot of times they were sponsored by Monster Energy Drinks. But he found out that the band people weren’t actually drinking Monster Energy Drinks. They were, like, drinking out of the cans that they had dumped and put water in.

>> STEVE: Yes.

>> AMBER: And he’s like, “There’s a hole in the market.” [laughs] A cool water.

>> CHRIS: Well, I mean, the other thing too, is, like, you see that on a store shelf, something called Liquid Death, and you’re immediately going to pick it up. That was the other thing that he talked about in the CNBC “Make It” video. It’s, like, coming up with a brand and packaging that people… Like, it grabs their attention, yanks them over to the shelf, and then they have to pick it up and look at it.

I think the way he put it was, if you can get someone to pick something up, you’ve pretty much won the battle at that point, which is cool.

>> AMBER: Yes. If you’re not familiar with this brand, go watch the marketing for their tea. But maybe don’t do it at work or in front of your children.

[laughter]

It is…

>> STEVE: Can I read the can here? It says…

>> AMBER: Yes, yes, yes, read the can.

>> STEVE: It says, “Liquid Death. Rest in Peach. Murder your thirst.” And then I like this little… it’s a real small text right above the nutrition facts. It says, “This psychotic can of ice tea will use agave and B vitamins to savagely murder your thirst and turn its insides into balloon animals to book gigs at children’s birthday parties.”

[laughter]

>> CHRIS: It paints a picture.

[laughter]

>> AMBER: When you are, like, in the area, you know how usually there’s, like, messages that tell you to recycle your cans or bottles? This one says, “Recycle or die” [laughs] instead of just “Recycle.” Right?

>> CHRIS: Yes.

>> AMBER: They definitely have the branding down. You can tell he worked at an ad agency, a big one.

>> CHRIS: Yes.

In that interview, he talked about how he did campaigns for Hidden Valley Organic Milk [phonetic] and some other really big national brands, so obviously he has experience in branding. But this is a new thing, like, he only really hit the store shelves in 2020, like, in COVID, and I think the company has already valued at over $700 million.

>> STEVE: What?

>> AMBER: Because just the way he’s done branding. I thought that was interesting. And we got to open it and try it.

>> STEVE: Yes.

>> AMBER: But he did – which I think, is super cool for anyone who’s starting any company, especially a product company where you have to invest in the product… In that video – I don’t know if you watched it, but he talks about how he had this idea, but he wanted to test it first before he invested a bunch in actually creating it. 

So he made, like, a 3D mockup of a can, and he spent $1,500 making a video, like, a commercial, even though he had no product. And then he put it on YouTube and spent a little bit of money, like, promoting it. And then it took off, and they had, like, hundreds of thousands of people being, like, “Where can I buy this?” And, like, 7-Eleven contacted him, was, like, “We want to get this in our stores.” And he didn’t even have a product.

He then used that traction to go out and get investors, and he got $150,000 just in his first investor, based off of how people were reacting on YouTube. And that’s how he funded creating his first round of canned water.

>> STEVE: Wow.

>> AMBER: Yes, I know. I was, like, “Wow, this guy’s smart.” [laughs]

>> STEVE: Well, that’s a good segue to our big announcement, right? The Equalize Digital flavored water, right?

[laughter]

>> AMBER: Yes, everyone.

>> STEVE: It’ll be, “Murder bad accessibility.”

[laughter]

>> CHRIS: Yes. There you go.

[laughter]

Should we crack these open and try Liquid Death?

>> AMBER: Yes, let’s do it. So this is iced tea. It is not alcoholic. It is caffeinated. I know we had a non-caffeinated beverage on the podcast recently, and you guys were kind of down on that. [chuckles]

>> STEVE: Yes. Here we go.

>> CHRIS: All right. Liquid death going in.

>> STEVE: All right. It’s peachy.

>> AMBER: Yes, I get the peach flavor. I don’t really get the tea as much, though.

>> STEVE: No.

>> CHRIS: Yes.

>> AMBER: It tastes like a peach drink.

>> STEVE: Yes. Yes. I was a little nervous. I don’t typically like, like, cold teas, right? I like hot tea. But I don’t typically like…

>> AMBER: Oh, I love cold tea. I’ll just, like, at a restaurant, like, unsweetened, unflavored iced tea, not even lemon. Just, like, cold black tea, I like that.

>> STEVE: That sounds disgusting.

[laughter]

This is not bad though. I mean, it’s, like, watery.

>> AMBER: Yes, it’s not juice.

>> CHRIS: It’s peach-forward. It’s light on the tea. I get maybe a tiny bit of tea in the aftertaste. I definitely taste like the vitamins. There’s an undertone of vitamins there, like, if you’ve had, like, a vitamin water or something like that. Maybe that’s why they made the peach so strong. Maybe the vitamin flavor was overpowering the tea flavor.

I can only imagine the meetings as they were creating the formula.

>> AMBER: It’s not bad though.

>> CHRIS: I also like that it’s kind of, like, off-sweet. Like, it’s not insanely sweet.

>> AMBER: It’s not “Hello Kitty Cherry Pop.” [laughs]

>> CHRIS: Yes.

>> STEVE: No. No, I mean, I like that. It seems a little dry to me, and I kind of like that, because, you know, we’ve talked about this. I drink a lot of Diet Coke, which is super dry. So it’s not bad.

>> CHRIS: And people watching what they’re drinking, this whole can, it’s a 19.2 fluid ounce can, which…

>> AMBER: It’s really tall. It’s like double the size of the other can.

>> CHRIS: I’m going to have to look that up, if that’s, like, their own thing, and it’s part of them being irreverent as they aren’t forming to beverage norms by having either a 12 or a 16-ounce can. It has to be 19.2. I don’t know. But 30 calories in this whole can; and the ingredients are water, agave, nectar, black tea, citric acid, natural peach, pear, and apricot flavor, and vitamin B6 and vitamin B12. So in terms of ingredient list, pretty solid and straightforward, and something you can kind of feel good about drinking.

>> STEVE: Yes.

>> AMBER: Yes, I think that’s one of their points. Like, they’re trying to create an alternative, but they want it to be an alternative that still looks cool. So, like, a burly Heavy Metal biker dude can walk around with a can of peach tea and nobody will be, like, “Why are you drinking Snapple, man, like a grandma?”

[laughter]

I will say, their ads are pretty entertaining; although a little on the edgy side for me. [chuckles] But yes, that was kind of like when they introduced the tea. So if you’re into kind of, like, edgy, slightly inappropriate humor, you will probably enjoy their ads on their YouTube channel or just on their website.

>> STEVE: It’s kind of a weird, like, a juxtaposition between the marketing and the branding and the drink. The drink is Liquid Life. [laughs] Like, It’s not Liquid Death, because it’s actually pretty good for you, for the most part.

>> CHRIS: Yes. They’re definitely taking the irony to the nth degree with this one. You’d expect, like, Monster Energy to have this kind of marketing.

>> STEVE: Yes, yes.

>> AMBER: In the interview with him, he was talking about how you have to from a marketing perspective… And I don’t know, maybe we can come up with, like, how do we do this and tie it to accessibility. Maybe we can’t.

He was saying that what he’s found is that to really get people engaged or to think out of the box, you have to do things… Like, you have to ask yourself, “What is the dumbest idea I could possibly come up with?”

Because our natural inclination in marketing is to just go with what works. Like, “Other companies have done this and it works.” And so as a result, you just kind of are, like, mainstream and you’re not unique. And so he said that’s the thing with the Liquid Death. Like, they were sitting around talking about how they were going to make canned water. It needed to appeal to the sort of demographic he was targeting. And they’re, like, “What would be the dumbest thing that you could call, like, a super healthy beverage?”

>> STEVE: Yes.

>> AMBER: And that’s how they came up with the “Liquid Death” name, because, of course, like, it doesn’t make any sense, right? It’s like the total opposite.

That’s interesting to think about, like, even trying to force a connection to accessibility or not. But we talk about that a lot; how do we get people interested in accessibility and in caring?

I had someone comment on a post once, and I’m not going to call them out or even say where it was, but this happened this week and it was frustrating for me …where someone just said, “Well, OK, fine. Maybe if the website is made for people who are blind and that’s who visits that website, then what you said is a good idea.” And I was just like, “No.” I mean, why are we saying that we have to have websites for blind people; and other websites, “Well, they’re not really for blind people, so we’re not…

So I’m trying to figure out what is that really absurd thing that would call to action and make people connect with the brand in a way that makes them really want to be interested in something they wouldn’t normally buy or they wouldn’t normally do.

>> STEVE: Hmm. Yes.

>> CHRIS: I don’t know if I’m clever enough to come up with irreverent accessible messaging –

>> AMBER: Yes, the thing that’s hard is, you don’t…

>> CHRIS: – Along the lines of Liquid Death.

>> AMBER: I don’t have the innate desire to be offensive to people. [laughs]

>> STEVE: Right, right, right.

>> AMBER: Right? Like, if you go watch his videos, there’s stuff on there that I was, like, “Yes, it’s kind of offensive.” [chuckles].

I think their ad that went viral, it showed someone being waterboarded with their water. [laughs]

>> CHRIS: Oh man.

>> AMBER: Which is a little on the edgy side of advertising. Like, is that really funny? I don’t know. [laughs]

>> STEVE: Yes. I don’t know.

>> AMBER: So that probably doesn’t come naturally to me, but maybe there’s someone out there who’s going to figure it out and they’re going to have really awesome, interesting ad campaigns, and everybody’s going to get into accessibility because of it. I don’t know.

>> STEVE: There you go. [chuckles]

>> CHRIS: Yes.

>> AMBER: Probably, it won’t be abled people. [laughs]

>> STEVE: That’s right.

>> AMBER: It’ll be someone who identifies as having that disability and then it’s safer for them to do whatever they want, to say whatever they want to say about it. [laughs]

>> STEVE: Right, right.

>> AMBER: So I suggested that we should talk about lists today because a couple of episodes ago, we had kind of ended with a little footnote about lists. And just to summarize, that’s at the end of our “Tables” episode.

If you didn’t hear that one, we were talking about how a lot of times we don’t realize that having content in lists can be really helpful for screen-reader users, just like using the HTML list rather than DIVS to group related things. 

Because when a screen reader encounters that, it’s going to say, “Lists: twelve items” or something like that. And so they get context as for the number of things in the group that are coming, and then they also have the ability, if they want to, to just skip all the way to the end; whereas if you just had those things in a DIV, they wouldn’t know how many there were. They wouldn’t really be able to just be like, “OK, I want to go beyond this into the next thing.”

>> STEVE: Right.

>> AMBER: So that’s why lists are useful. And I thought maybe we could go more in-depth on lists today.

>> STEVE: Yes.

>> CHRIS: And looking into this a little bit, and kind of brushing up on my own knowledge, and for anyone that’s maybe just dropping in on this episode and doesn’t know who we are, well, first of all, go back and listen to some earlier episodes.

Secondly, I’m more on the sales side of this, and so I don’t do a lot of audits. I don’t do a lot of development. I’m only limitedly involved in projects, so I’m probably the lowest-level accessibility expert on our team.

So I was looking at this, and I’m going to note it for our show notes. But I found a pretty great video on YouTube that was eye-opening for me that was put out by a local community college, actually, where a gentleman was going through various types of both ordered and unordered lists and lists that were built with semantic HTML and without, and, like, how the screen reader reads them all very differently.

What struck me is just how different it really can be when that tool is reading it back, even though to all of us who are looking at this visually, they all look virtually identical. And maybe we can start there, and we can start with, like, the code, and what to do and what not to do because that’s really what struck me. It’s like it does go down to the code level with this stuff.

Speaker 1: This episode of Accessibility Craft is sponsored by Equalize Digital Accessibility. Checker. Accessibility Checker is the best plugin for accessibility testing WordPress websites. Use it to find accessibility problems during new builds, or monitor accessibility and remind content creators of accessibility best practices on an ongoing basis.

In honor of Global Accessibility Awareness Day, we are offering all of our podcast listeners 30% off all paid Accessibility Checker plan from May 18th to May 24th, 2023. Visit “equalizedigital/accessibility-checker,” and use coupon code “Gaad23.” That’s G-A-A-D 23. Add “checkout” to save 30% off all paid plans.

Don’t miss out on this limited-time sale. Get Accessibility Checker today.

>> STEVE: Yes, yes. So there are typically two types of lists. We have ordered list and unordered lists, just to kind of give a little bit of a basic background on some of the HTML markup for lists. I think it’s super important, like Chris said, to use those correctly. Because, like, to a sighted user, the only indication that somebody’s using an ordered list over an unordered list is probably the number. And there are actually ways for a developer to go around hiding that number if they really wanted to. So…

>> AMBER: So any ordered list would output, like, 1,2,3,4 put before each thing; and an unordered list would have bullet points of some sort.

>> STEVE: Right, right. And of course, those numbers or those bullets can be hidden as well, so that can add some confusion. But typically, you want those numbers to show. The bullets, visually, it’s a nice indicator if there are bullets there, but I don’t know if it’s 100% necessary. We’re going to talk about that later on, that list can be used in other aspects to help give context to what the screen reader is reading out.

So an unordered list is typically just a collection. Any type of collection, any kind of content that can be collected into a list, like features or whatnot, and they don’t really have any natural hierarchy or anything. And then there’s the ordered list. So these are typically things that are sequenced, that happen in a certain sequence, like a recipe or a lesson where there are steps to complete something. So, Yes, it’s a little quick overview on the basics of lists.

>> AMBER: Yes. And the HTML behind that is pretty simple. You’ve got a container element that’s just either a UL for unordered or an OL for ordered, that tag. And then regardless of what the parent is, it’s just an LI tag inside there, for those of us new to HTML.

Can we just name out all of the things that we’ve seen on websites, where people frequently don’t… Like, I think it’s really obvious, your example of recipe, everybody would think, “OK, the ingredients list, that’s an unordered list,” or, like, what’s needed in the ingredients, because it doesn’t really matter that it’s bulleted. And then the steps, the instructions is an ordered list. Like, that’s really obvious that this should be a list.

So I think it might be interesting to name out some things we can think of that people don’t commonly put in lists or developers don’t put in lists, but where they could be. So does anybody have any thoughts on that?

>> STEVE: Well, I think you mentioned at the beginning of the episode a little bit, like a post grid, a grid of posts where once a screen reader reaches that, it calls out that it’s a list, and it tells you the number, and then they can navigate to… Can the screen reader navigate to any part, like, any specific number in that list?

>> AMBER: I’m pretty sure they could use keyboard shortcuts to just go to the next list item. But if they open the router, which might be called something different in different screen readers, but in voiceover in VDA, you have the ability to go in and see… Like, they could just see, “What are all the list items?” Then they could just jump to the, like, fourth one.

I have a hard time imagining a user doing that unless they’ve been there and they really knew the list. Because it’s, like, why would you randomly pick the fourth? [laughs] Do you know what I mean? But it is possible. I think it’s more likely… Like, more beneficial because of telling the number or being able to be, like, “Oh, I want to skip this list completely.”

>> STEVE: Right.

>> AMBER: Yes.

>> STEVE: And I think in our development process, I think this is a newer kind of revelation for us to use lists in this fashion. Because I think before we would do things like, you know, if it was like a page that would refresh and you got your pagination…

So I’m trying to describe, like, a typical blog archive, right? And say there are nine posts on that page, you know, three columns, and we’ve gone in before and we’ve updated the page title to read out how many… page one, and there are nine posts. And then when you page to the next one, we update the title so that when the page refreshes, the screen reader reads out how many are in the title. But that can be a lot of extra work to modify the output of the title. And you got to take into consideration any kind of SEO plugin you have installed that may be hooking into that as well.

So I think it’s a more elegant and simple solution from a development standpoint to give that context to the screen reader, that this is a group of posts and how many there are.

>> CHRIS: Yes. I mean, it’s almost like any time you have a grouping of like things, whether it’s ordered or unordered. And so another one that immediately jumps to mind is, like, a team page, if you have a good number of team members.

>> STEVE: Yes.

>> AMBER: Well, Yes. I mean, even if you just had three. Our team page has more than us; but if it was just the three of us, it’d still be beneficial.

A lot of times, I see this where it’s just DIVS that have been organized into columns, and then in each one, there’s, like, a picture and a heading and maybe a little bio, or just like a name and a job title or whatever. But, like, having that in the list where the underlying HTML is an unordered list, but… Or maybe it could be ordered and I’m number one. [laughs] I don’t know. [laughs] But having that in the list, even if it’s only a few people.

So yes, like a team grid, especially if you have a big team. If you have 50 people, at a glance, a sighted person can open that page and be, like, “Oh, there’s 50…” They probably wouldn’t know 50, right? That’s a big number to recognize instantly, but you’d be, like, “Wow, this is a big team.” 

But if you didn’t have it in a list, then a blind person wouldn’t have that instant, “Oh, there are 50 people on here?” Whereas if you have it in a list and they’re, like, “List: 50 items.” “Item one of 50.” Like, they’re going to be, like, “Oh, this is a big team at this company.” Yes. Really, any groups or posts. So that would be like products… And also not just on the archive, but also, like, if you have a related product section or related post section that just has –

>> STEVE: Events?

>> AMBER: – Three… Yes, events. Yes.

>> STEVE: Event, yes.

>> AMBER: Another thing outside of post groups is, like, related links. So like social media icons that link out to your social media site. Sometimes I just see them where it’s just like an image with a space, and then an image [chuckles] with a space, with links around them. It would be nicer if that was wrapped in a list so they’d know how many social-media icons to expect, or they could quickly skip past it instead of having to go through each one.

>> STEVE: Yes. Or like that credit card symbols where sometimes you see like, there’s four credit card symbols and they’re all in one image.

>> CHRIS: Oh, yes.

>> STEVE: It’s combined into one image, where if you take the extra step to just break those out into separate images and then put them in a list.

>> AMBER: Yes. One image might be OK if you have good alt text, but I think probably, like, having it in a list would be better.

>> STEVE: Yes.

>> CHRIS: Well, yes, that was going to be my next to call out. Make sure you listen to the previous episode right before this one. But you got to have alt text on those regardless.

>> STEVE: Yes. Not generated by AI.

>> CHRIS: Yes. Probably not. At least not right now.

>> STEVE: Not right now. We’ll get there.

>> AMBER: Yes. Can we think of any other things that should be in…

>> STEVE: I mean, there are all kinds of things. Like steps. Any kind of steps that happen. A timeline? What do you feel about a timeline?

>> AMBER: Oh, Yes. I think a timeline would be, if you’re thinking, like, dates, like the history of your company or something, I could see that being list. That might actually, depending on how you’re doing it, be a nested list, where you have an unordered list, and each item in that is just like a year, maybe. And then inside those Li elements, you can put another unordered list, like, we’re thinking outline format, and then those are, like, “January, this happened.” “March, just happened.” So that would probably be a nested list would be the most ideal.

>> STEVE: Yes. Yes, I think so.

>> AMBER: Yes. So I think something that is interesting… And you mentioned this a little bit, that you can hide, like, the bullets or the numbers, but it might be worth kind of talking about the basics of what that means. Because I think some people might hear us, saying, “Oh, your related posts have to be in a list.” Or “Your credit card symbols have to be in a list.” “Your social media icons…” And they’re thinking, “Well, I don’t want one on top of another at a bullet point to the left.”

>> STEVE: Right.

>> CHRIS: [coughs]

>> AMBER: Sorry, Chris.

>> CHRIS: It’s OK.

>> AMBER: So I’d be curious, Steve, can you talk a little bit about, like, how hard is it to actually style lists in the same way that you might style a DIV if you’re a developer who’s used to just always building these things with DIVS?

>> STEVE: Yes, I mean, it presents a little bit of a challenge. Because we don’t typically put a global style on a DIV. I mean, you can, but, you know, in our style sheets, we don’t typically, you know, do div and then add styles that are for all DIVS because that would create all kinds of havoc. But we do define global styles for lists. So we typically will do our UL and our OL, and we’re putting some basic padding or some basic margin on the bottom. And sometimes we have, like, a left margin or padding set on the list to make it set in from the rest of the paragraph text to make it a little more visually readable. And then in that with Li element, where we’ll sometimes put some default global styles on.

So it’s important, I think, in your dev process to do that first, to define your global styles first and to make sure you have that all defined. Then when you go to do things like your blog archive or your related post or timeline or events, whatever we just talked about; when you first define that markup, it’s going to have a bullet point on it or it’s going to have a number on it, depending what it is.

>> AMBER: Yes. Or like an underline or something sometimes people do. Yes.

>> STEVE: So you’re going to want to either unset those styles, you know, you target that element specifically, and you either want to unset those styles or you want to override the styles that you have set globally. But I think once you get in a flow, once you know what your global styles are and you know what you have to do to reset… You could even define a mixin, a Sass mixin that does, like, a list reset for you, and you just include that in each of your elements that are using list, and it resets it and removes the bullet, removes the padding and the margin so that it kind of acts more as a standard DIV at that point.

So yes, I think it’s more work than just using DIVS. And you have to anticipate that and you have to be ready.

I know sometimes a client will request a change after the fact, right? Heaven forbid. Client request changes. [laughs] They always do. And they want, like, a global change to, say, the list, and you got to make this global change, and it may require you to go back to those other elements and make some updates to an override or to the mixin, if you’re using a mixin to do a reset.

>> CHRIS: So when you’re coding stuff in this way and you have some of these things where it’s not the global, what we would call a typical list style, whether it’s a number or a bullet point, so it’s like a blog archive or it’s the credit card images or any of the other examples we talked about, when a screen reader is reading those back, if we’re not rendering a number or a bullet point, it’s not still saying “number” or “bullet” when it’s reading things back, it just reads whatever is presented in the HTML?

>> STEVE: Yes, yes. I don’t think the display of that number… Or if you do, like, list style, none, on a list, which I think that’s correct, it will remove the bullet point. I don’t think that has any bearing on the screen reader. It’ll still read it out as a normal list.

>> CHRIS: OK. Yes.

>> AMBER: This is worth noting. When they encounter an unordered list, it still says, “one of…” whatever, “two of…” whatever. As they move through the elements, even though it’s unordered and they aren’t numbered, it does say that. And I don’t remember right at this moment if it sounds different on an ordered list, because, to be honest, I see ordered lists so infrequently on the things that we’re auditing or making.

>> STEVE: Yes. Are you seeing it when it should be used?

>> AMBER: I think so. I don’t remember ever flagging, in an audit, something that was supposed to be an ordered list and wasn’t, so I think if it was… I think it’s just that there are fewer applications for true ordered lists where we’re saying, “This has to be first.”

We haven’t ever audited a food blogger website. [laughs] And I’m trying to think, like, maybe instructions, if you’ve written documentation. But even ours, I’m trying to think… I guess we have some ordered lists in our documentation for our Accessibility Checker plugin, but I don’t know if I’ll listen to them with a screen reader. [laughs] So maybe I should go do that and see if it’s different.

>> STEVE: We have a list of links in our documentation, like group.

>> AMBER: Yes, but those are all in an unordered list because –

>> STEVE: The order doesn’t matter.

>> AMBER: – The order doesn’t matter when we’re linking out the titles. I think it’s only some of them within it, like maybe the quick-start guide that I’m going to rewrite at some point in time because it’s not as quickstart as I would like it to be. That, I think, has, like, “go to your settings” page and choose which posts you want to scan before, “Go run a full site scan in pro”. So that has an order that matters, and so I think that might have an actual ordered list in it. But I feel like most of the time, in content on websites, I’m seeing unordered lists more than anything else.

>> STEVE: Yes. Yes.

>> AMBER: Can we talk a little bit about anything we can think of, where maybe we saw a list being used, but it shouldn’t have been in a list?

>> STEVE: Yes, I think so. I think we’ve had a recent project where that came up. I have to refresh my memory on what that was, but I’ve seen some weird stuff, like just huge blocks of text being used inside of a list. I mean, if it’s like a paragraph text, you might want to rethink if that really should be in a list or if it should be a paragraph with a title.

>> AMBER: Yes. Because you can have – Which maybe we’ll circle back on – different tags inside a list. But I’ve seen where in those blog posts where they’re, like, “Top ten things,” “Top ten XYZ” that they write for SEO?

>> STEVE: Yes.

>> AMBER: And, you know, they want to put, “1” and then whatever the name is in the heading, and then they have a bunch of paragraphs, maybe even images, and they’re putting those all in a list. And at that point, I don’t actually think that really needs to be like an ordered list or even a bolded list. I think you would just want, instead of trying to force it into a list to make it automatically give the 1, 2, 3, 4 to your headings, I think you would just type it in the heading.

>> STEVE: Yes. Yes.

>> AMBER: Because I think that’s more of a decorative, calling it number one or number ten than a, really trying to communicate this is a list.

>> STEVE: Yes. I think there’s always the case of it just being used improperly. It’s not an ordered list. These things really aren’t related and things like that.

>> AMBER: Yes.

[crosstalk ]

Well, I think I have seen a few… Oh, go ahead.

>> STEVE: Yes. I think I’ve seen on sites where people have used a list as a table, which I think was a really bad example of using a list. I mean, you have the area spec that I think you could add to a list to kind of, like, somehow make it a table, but I don’t know if the area spec would override the fact that it’s a table element. That’d be a good test to try to use the area spec to make a table out of a list and see what the screen reader says.

[laughter]

>> AMBER: The screen reader would be like, “Just use a table.” “Go listen to Accessibility Craft, episode…” Whatever it was. Maybe Chris has a number.

>> STEVE: “Contact Equalize Digital for help.”

>> AMBER: [laughs] Yes. The first rule of ARIA is do not use ARIA. [laughs]

>> STEVE: That’s right.

>> AMBER: Well, OK. So let’s talk about what HTML tags are not allowed in a list. Because we talked about posts and how you should do groups of posts, which means you’re probably going to have an image tag in there, you might have heading tags, you might have a paragraph tag if you have a little excerpt, and then, like, another A tag with a link. Could you put a table in a list? Is that allowed? Do we know? Are there any things that can’t go in Li elements?

>> STEVE: So according to the spec, Li element can contain any element that is valid in the body.

I’ll put a link in the show notes here to the spec as well. But it says, “The Li may contain flow content, which is a collection of all block and inline elements.” So I think anything that you can use within the body, you can use within an Li.

>> AMBER: So I could be, like, “Here’s a list of three tables that show something,” and I could put each table in its own Li element?

>> STEVE: Yes, I think so. I mean, I think there has to be some regard for how much content you’re putting in a list. At some point, it’s just too much content to be a list.

>> AMBER: Yes. No, I think you’re right. Like, it doesn’t make sense. People will lose context. Like, if it was a really big table, and then you get to the end of it and it tells you, “OK, we’re out of the table, now we’re back in the list,” they might be like, “Wait a minute, I was in a list?” [laughs]

>> STEVE: Yes, you lose kind of context.

>> CHRIS: I mean, at that point, wouldn’t you just maybe use headings?

>> STEVE: Yes.

>> AMBER: Probably. Yes.

>> CHRIS: Yes.

>> STEVE: Yes. And if you’re unsure, you could always use the “W3.org” validator. I’ll put a link to this in the show notes as well. But you can just go to that website, put your page URL in, and it’ll validate all your HTML markup for you.

>> AMBER: Yes. So just about anything can be in an Li, but this is something we’ve flagged on audits, which is, you cannot have anything other than Li elements inside an OL or UL tag.

>> STEVE: Yes. Correct.

>> AMBER: So you can’t have, like, OL and then a heading, and then all your LIs. Like, if you want a heading for your list, it has to be outside of the OL before it happens.

>> STEVE: Yes.

>> AMBER: So there are tighter rules about that.

>> STEVE: Right. So that’s a little bit of a segue to some of the ARIA labels that can help in that regard, right?

>> AMBER: Yes. While we were talking about this, I found this sort of interesting article on “scottohara.me.”

I haven’t heard of him before, but it’s kind of fun when I come across people who’ve written stuff about accessibility when I’m doing research and I find new blogs.

He has a post where he was experimenting with it. And it’s actually a couple of years old, but it looks like he updated it last month with using some labels, like ARIA labels or Aria labeledby on list tags.

It’s interesting. I think sort of the summary of it is… And this is a neat post because he’s got the HTML, he’s got a Codepen here that sort of shows different things he’s doing. And he sort of says, naming list item seems like a dubious practice, but it may have legitimate use cases, like the actual Li items. He’s, like, “I don’t know about this” is how he summarizes it. But the OL or the UL tag, it might be helpful to label with ARIA.

>> STEVE: So you can use the ARIA labeledby on Li, not just on the UL?

>> AMBER: Yes, it works.

>> STEVE: Oh, that’s interesting.

>> AMBER: But I think that if you put an ARIA label on it, it overrides whatever is inside it. That would be the behavior, like, with a link, right?

>> CHRIS: So it wouldn’t say, “bullet” or [Crosstalk ]?

>> AMBER: Well, it doesn’t say “bullet” anyway. 

>> STEVE: It wouldn’t say list.

>> AMBER: An example of this is, let’s say we had social media icons where we’re not linking them anywhere, but we just want to show people what social media we’re on. So we have a list of social media icons. You could have alt text on that image. Or I think what would work is that on the Li element that is containing the image, you could put Aria-label Facebook, Mastodon, whatever. And then it wouldn’t read out the image inside it. I think when it gets to that Li, it would just read the Aria label, is what he was saying.

>> CHRIS: Oh, so it just wholesale replaces?

>> STEVE: Yes.

>> AMBER: That’s generally the way it works. Like, on an A tag, that’s how it works.

>> STEVE: If you put an ARIA label on the UL, instead of the screen reader saying, “group” or “list.”?

>> AMBER: Yes, it’ll say “group” instead.

>> STEVE: It’ll say “group” instead. But does it say “group” and then your label?

>> AMBER: I think so. I don’t know. I feel like we’re maybe going to leave this podcast episode with a little bit of homework. And anyone listening, feel free to message us on Twitter, or I’m on Mastodon these days, and let us know, cause we’re always interested in that.

>> STEVE: Yes, you can fact-check us on all this

[laughter]

>> AMBER: Fake news, guys.

[laughter]

>> CHRIS: Yes. No, I mean, it’s… Accessibility is a journey. There’s always more to know.

>> STEVE: Yes.

>> AMBER: Yes.

>> STEVE: I had a little bit of a question. We talked about using the list, like, on a blog archive to kind of give more context. I know we just stated the best ARIA to use is no ARIA, right? But if you don’t want to go through the effort to create that into a list and then have potential styling conflicts with your global styles, can you use just role list and role list item? And the screen reader would read it out just fine, like as if it is a list? I think that might be a more simplified solution.

>> AMBER: Yes. So that’s definitely, I think, something that we recommend. Like, if you don’t want to have to rebuild everything, and there’s a legitimate reason not to rebuild all of your stuff, like maybe you have a ton of CSS already defined on these and a lot of styles, then, yes, you could add role equals list on the parent item, and then role equals “listitem”, all one word, on the child DIVS that are supposed to be like the LIs and that would make it read it like a list.

>> STEVE: Yes.

>> AMBER: So, I mean, yes, that would work as a way to remediate if you need to remediate. I wouldn’t code that way from the beginning.

>> STEVE: Yes, yes.

>> AMBER: But yes. You know, something, when I was looking into this, that I was less familiar with is description lists. That’s on the Web Accessibility Initiative W3C website, which we can link in.

Have you ever used these, Steve? The parent is a DL tag, and then the child is… Well, you can have a DT, which is like a title, and then under that a DD. A description list consists of one or more term and description groupings.

In the example on this, they have authors as the DT, and then the DD under it would be John, and then another DD of Luke. And then they have a DT for editor, and then a DD under that is Frank.

>> STEVE: Yes. Yes, I’ve seen this. In some research for this podcast, I came across this as well as a less commonly used list item. I don’t know that I would do this by default. I’d probably just make a nested list. Because that’s essentially what this is. So this is like a shorthand for a nested list, right?

>> AMBER: Yes. Well, I mean, a block like this doesn’t exist in WordPress Core. So if you were going to do this, it’d be something you’d do in the theme or creating your own block.

>> STEVE: A custom block. Yes.

>> AMBER: Yes. I don’t know. I thought it was interesting, because it’s something I hadn’t really seen before, and I’m just not really sure. It almost seems like it’s defining two, because I saw one where they had multiple terms in their second example. Like, they’re talking about if you wanted to define the word “color,” but they want to provide two terms, like the American spelling and the British spelling.

>> STEVE: Yes. Glossaries or dictionaries? You know, I can see it.

>> AMBER: Yes. That’s maybe where it makes more sense than, like… It feels odd to me with just, like, the authors and the editors.

>> STEVE: Yes.

>> CHRIS: Would, like, specifications for a complex product in an e-commerce store be an application for something like this? Like if you have different configurations and colors and options and…

>> STEVE: Well, like, “Small comes in these colors, and medium comes in these colors and large comes in these colors”?

>> CHRIS: Yes, or something like that. But again, it’s, like, why not just use a nested list, I guess?

>> STEVE: The markups. It’s less markup, right? It’s a little bit less markup. It’s not going to be nested as deeply as a nested list would because you don’t have to define the second UL.

OK, so just answer this. So you have your DL and then you have your DT and you have a DD. Can you put as many DDs under there as you want?

>> AMBER: Yes, I think you can.

>> STEVE: OK.

>> AMBER: So there’s a technique document for WCAG H40 using description lists. And it says… Hold on. Of course, I like just found it on the fly, so I’m trying to look at it. Yes. So you can have terms associated with a single description or vice versa. But it says that, “Uses of description lists ensure that their terms and descriptions are semantically related, even as their presentation format changes. They are easiest to use when the descriptions are ordered alphabetically. A common use of description list is a glossier of terms.”

So, yes, I think you’d really want to be careful about just uniformly doing it. And even the example here is, it’s like defining words. Like, they have nautical terms, and they have not, and a definition for that port, and a definition, starboard, and a definition.

>> STEVE: I asked Chat GPT to give me a real-world example of a description list, and it goes back to our food bloggers here. So you have your DL, right, which wraps the whole thing, and then it has a DT. It says, “Bake.” And then the DD says, “To cook food in the oven using dry heat.” And then it goes back to a DT, “Saute.” And then it says, “To cook food in a small amount of hot oil or butter.”

See, I’m getting Chris excited talking about cooking here.

[laughter]

But as our format.

>> CHRIS: My head was going somewhere slightly less appropriate. I thought I was going to get multiple definitions for, “bake.” Just saying.

>> STEVE: Oh.

[laughter]

>> AMBER: So I really think it really seems like you should only use this for a glossary. That’s what I think as I’m looking at some of the documentation. I do think it’s interesting. I tried to find what is a screen reader… Like, what would voiceover NVDA actually say when it encounters it? Like, does it say that it’s a description list? And I couldn’t find that. So obviously, that is something that I need to test.

Actually, Adrian Rossley [phonetic] also has an article about this. We should link up. But yes. So pretty much, it’s encountering it, in the same way, it would a list, where it’s providing what the count of the number is and all of that. But I don’t know if it’s necessarily on different screen readers actually saying that it’s a description.

>> STEVE: I think on voiceover it says something like… So when the screen reader hits it, it’ll say, like, “Description list. List. Start”? Does that sound right?

It says “After announcing the start of the list, the screen reader will typically read out the term element, the DT, and its corresponding description element, the DD, together in the order they appear in the markup.”

>> AMBER: So it’s going to read it as one element, or one sentence to a degree rather than going down like you would through LIs.

>> STEVE: Yes, LIs. So the DT and the DD are going to get kind of combined into one description.

>> AMBER: Yes. Actually, Adrian’s post is really good. I’ll add that to our show notes also.

>> STEVE: Oh, Yes. So the example that I read just a minute ago, right? So the screen reader would read it out like this. It would first announce, “Description list. List. Start” And then it would say “Bake: to cook food in an oven using dry heat.” “Saute: to cook food in small amount of hot oil or butter.” So it’s just, “Bake. To cook food in an oven using dry heat.” So it’s one sentence or one statement. It’s actually two sentences, but it’s, like, one statement. Yes.

Although, in an ordered list, I think you’d have to keep going through that. Like, it would read it in sequence if it’s nested. So this may be more beneficial for the screen reader. Like, it’s read out more simply than, like, a nested list.

>> AMBER: Yes, there might be less noise.

>> STEVE: Yes. Very interesting.

>> AMBER: And now you guys have the inside blick, which is that we don’t always know all this stuff, and sometimes we google it too.

>> STEVE: That’s right. Or Chat GPT it, right?

[laughter]

>> AMBER: OK, I want to have a little tainted on chat G [mumbles]… Wait, I can’t even do it right now. [laughs] …GPT, because I had my first experience in the admin bar on my Accessibility weekly post this week. It was, oh, man, hot topic. I had no idea. Because it was about opening links and new tabs, whether or not you should do it, and then adding a warning.

There are a lot of people who really disagree that the best practice is to not do that, which we don’t need to go down that rabbit hole right now. Maybe we will. But I got a comment back, because somebody said, you know, “99% of users prefer this.” And I was like… I just kind of, like, smiley face. I was, like, “Do you have numbers on that 99% stat?” Right?

Well, he, like, went to Chat GPT and was, like… I don’t know what his prompt was, but something like, “What articles prove that people want links to open in a new tab, and that that is the best practice?” And it was really interesting. I could tell that he did, because, well, he pasted it back in and it had, like, four or five different articles.

So this is a word of caution to people that are using Chat GPT to learn about accessibility. One of them was a link to WebAIM, that totally 404’d. So I was, like, “I can’t.” And I tried googling for it to see, “Oh, did it change,” between the time that ChatGTP had crawled WebAIM and I couldn’t find that article. So I have no idea what that URL was that ChatGTP… I can’t say it. [laughs] …That the AI was looking for.

Another one was “Smashing Magazine” [phonetic]. But if you went and read the “Smashing Magazine” article, it was the complete opposite of what AI was saying it said, and there were, like, two others like that. And then it incorrectly said that WCAG 2.4.3, which is about focus order, had anything to do with links opening in new tabs, which it has nothing to do with links opening new tabs. It’s that everything has to get order in focus that makes sense. [chuckles].

I’ve seen Chat GPT mess that up in the past, like, the WCAG stuff. So I just… I don’t know. Total rabbit hole, but warnings to our… Don’t trust the AI to give you good info about accessibility.

>> STEVE: Right. Right.

>> AMBER: Or maybe anything. I don’t know. And I think they even have a warning when you go there, right?

>> STEVE: Yes, yes. I don’t know if they were using 4.0 or 3.5. I mean, I don’t know what the prompt was, but what you read out was, like, a totally, like, prove-me-right prompt, right? Which I don’t think is an intelligent way to use a tool like Chat GPT.

“Show somebody that I’m right. Here’s my biased opinion.” Right? [laughs] Like, “Prove me right.”

I think we should be seeking out truth and fact, not for what we want the outcome to be, right?

>> CHRIS: 100%.

>> AMBER: Yes. So maybe it’ll be, like, “Are there in any articles on the web to provide evidence of X?”

>> STEVE: Yes. “How can I prove Amber Hinds wrong?”

[laughter]

>> AMBER: Actually, I want to go post that in there and see what… I don’t think it knows who I am, at least in the old version, because our company is too young. At one point in time, I asked it a question about our company, and it had a random name of someone I’d never heard of that is the CEO of our company. [laughs]. And I was, like, “OK.”

>> CHRIS: We’ve spoken about this before that it’ll just hallucinate stuff, even based on your prompt, right? 

>> AMBER: I tried really hard then. I was, like, “That’s not correct. It’s not that person.” And they were, like, “Oh, I’m so sorry. You’re right. It’s this person.” It was also [chuckles] like, someone I’d never heard of.

>> STEVE: That’s weird. I switched to the Model 4.0. And I asked, “Who is Amber Hinds of Equalize Digital?” And it says as a [inaudible] cuts off at September 2021. But I thought GPT-4 went beyond that.

>> AMBER: Yes, I mean, I also don’t know how they got all the websites, because, I mean, our website existed in 2021. But I don’t think… Like, maybe it wasn’t popular enough or something. [chuckles].

>> STEVE: I mean, it says “Amber Hinds is the founder and CEO of Equalize Digital, a company dedicated to creating accessible websites and applications, et cetera.”

>> AMBER: Oh. Well, cool.

>> STEVE: But I prompted it…

>> CHRIS: That’s not too bad.

>> STEVE: I prompted it with your name and company, so.

>> AMBER: Yes. I think there’s a band, a woman with a band named Amber Hinds. We could go down the whole rabbit hole of what people’s doppelgangers do [laughs].

You probably have a lot of Steve Jones’s in the world.

>> STEVE: Steve Jones is a guitar player for the Sex Pistols.

>> AMBER: Oh.

>> CHRIS: Oh, there you go. Yes.

>> AMBER: Yours is more famous. Do you think he drinks Liquid Death?

>> STEVE: Absolutely. I mean, he’s in a band called the Sex Pistols, right?

[laughter]

>> CHRIS: He probably drinks Liquid Death decanted into a Monster can on stage.

>> STEVE: For all we know, Liquid Death could be, like, his blood or something.

[laughter]

Or other –

>> AMBER: That’s scary.

>> STEVE: – Bodily fluids.

[laughter]

>> AMBER: Oh, OK [laughs].

>> STEVE: Who knows? Well, I think with that, it’s probably time to wrap this up, right?

>> CHRIS: Yes.

>> AMBER: You might be right.

>> CHRIS: After a couple of rabbit holes and some public service announcements around not allowing AI to be your sole resource of information in order to prove someone else wrong in an Internet argument.

>> STEVE: Oh, yes.

>> CHRIS: Maybe don’t do that.

>> STEVE: Maybe. Yes. [chuckles].

>> AMBER: But what you should do is revisit all the contents that you’re adding to websites and think about what could be in a list.

>> STEVE: All right.

>> CHRIS: All right. See you all later.

>> STEVE: All right, take care.

>> AMBER: Bye.

>> 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 Equalize Digital and hosted by Amber Hinds, Chris Hinds, and Steve Jones.

Steve Jones composed our theme music. Learn how we help make thousands of WordPress websites more accessible at EqualizeDigital.com.