022: Infinite Scroll, Load More, Pagination, Wild Bill’s Craft Root Beer

By /

Listen

In this episode, we compare and contrast the use of pagination, “load more,” and infinite scroll when presenting users with a large quantity of information on the web.

Mentioned in This Episode

Transcript

>> CHRIS HINDS: Welcome to episode 22 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 compare and contrast the use of pagination, “load more”, and infinite scroll when presenting users with a large quantity of information on the web.

For show notes and a full transcript, go to “AccessibilityCraft.com/022.”

Now on to the show.

>> AMBER HINDS: Hey, everybody. It’s Amber, and I’m here today with Chris.

>> CHRIS HINDS: Hey, everybody.

>> AMBER: And Steve.

>> STEVE JONES: Hey, everyone. How’s it going?

>> AMBER: And we are going to talk about the different options for showing lots of different posts in WordPress or different content, whether that’s infinite scroll, “load more” or pagination, what the impact of each is on accessibility and the best. But, of course, first, we have to start off with a drink.

>> CHRIS: Yes. We are going to be trying Wild Bill’s Craft Soda today, and we are going to be trying their root beer flavor.

Shout out to Amazon for sending me a 12-pack of only root beer when I requested a flavor-variety pack. We were supposed to be doing a soda flight today because I thought that would be fun, but instead we’re just going to taste the root beer, and root beer is my favorite soda, so I’m not mad about that.

>> AMBER: And we haven’t done a root beer yet.

>> CHRIS: No, we have not done a root beer yet. And this one looked interesting. This company jumped out to me. I’ve never had their stuff before, but they are a veteran-owned and operated company, and they do vintage sodas, and their ingredients are nice and clear and clean. Nothing crazy.

On mine, the first two ingredients are carbonated water and pure cane sugar, and then there are various extracts and flavors, so it should be pretty good.

My kids have been getting a preview of this, because, again, it was a 12-pack of just root beer, and Amber and I each only need one can. So my kids have already been giving this good reviews. And as someone who likes root beer, I’m excited to try this.

>> STEVE: Right.

>> CHRIS: So we can crack these open, maybe.

>> AMBER: Yes. Do you know where they’re located, Chris?

>> CHRIS: That is not something that I wrote down, but looks like maybe New Jersey, based on the can.

>> AMBER: All right.

>> STEVE: Smells like root beer.

>> AMBER: Yes. It also has, I’ll say, a really cool, like, it’s a skinny and tall can. It’s only 12oz, and I really like the typography and stuff that they’ve done. It’s all white with, a dark brownish? I kind of say. And they’ve got some vintage-style font. It really appeals to me; the label on this one.

>> CHRIS: Yes. There’s a cowboy on a horse. He’s wearing his hat, and then he’s holding up what looks like a mug of root beer, if you look at that little detail on the bottom, which is kind of cool.

I just tasted this and it feels like a solid root beer to me. It tastes like just a good solid root beer.

>> STEVE: Me too.

>> AMBER: Yes, it says, “Creamy, frothy, and bold with a sweet finish and spicy undertones. Let the memories come flooding back as you settle into this mellow, natural-tasting, real root beer.”

>> STEVE: Hmm. And it says, “Veteran owned.” So shout out to all of our veterans.

>> CHRIS: Yes. Tasting this, it’s a craft root beer, right? It just reminds me of a standard root beer. I don’t know what I was really expecting beyond that. Maybe part of me hoped that since it was a craft root beer that maybe the flavor would be a little bit more complex or interesting or different in some way. But to me it’s just like drinking any other root beer.

>> STEVE: Are you getting the licorice? I get the licorice.

>> CHRIS: Yes. Yes.

>> STEVE: Is that typical in a root beer?

>> CHRIS: Yes. It has that kind of herbaceous flavor. I don’t know even know how I would describe the word licorice.

>> AMBER: Oh, I would not use the word herbaceous. I don’t get the juniper. I get kind of the licorice on the end, which is what I expect from root beer, and the vanilla. It says “juniper” in their tasting notes, but I don’t get the juniper really.

>> CHRIS: What I will say is, after my first impression sip, I’m still tasting it, which if I think about, like, drinking a run-of-the-mill root beer, usually, that flavor kind of evaporates. It’s probably because they’re using artificial flavors. I can still taste root beer, and it’s been maybe 30 seconds since I’ve had a sip.

>> AMBER: And it does have a decent, creamy mouthfeel.

>> STEVE: It’s good.

>> AMBER: It is way higher quality than, like, run-of-the-mill, grocery store, two-liter root beer, I think.

>> STEVE: What’s your sugar review, Amber?

[laughter]

>> AMBER: Yes. I always give the sugar review. I would say it is on the more sugary side. This is not one of those root beers that has bite, maybe, is a better way to put it, right?

The carbonation feels a little lower to me. It has a higher sugar. It is not as syrupy as the Hello Kitty Cherry Limeade was. [laughs]

>> CHRIS: Yes. That also had corn syrup. You can definitely tell that this drink is sweetened with sugar and not corn syrup, for sure.

>> AMBER: Oh, good. You’re not giving us cancer this week.

>> CHRIS: Yes.

>> STEVE: Yes. It’s definitely sweet. All I want to know is, where’s the vanilla ice cream? Chris, did you send me a vanilla ice cream?

[laughter]

>> AMBER: I know.

[laughter]

Can you order vanilla ice cream off Amazon and get it still as ice cream instead of soup? [laughs]

>> STEVE: No, probably not. Maybe.

>> AMBER: Maybe only if you live close to a whole foods.

>> STEVE: Didn’t we have an ice cream client, or a gelato client? They’d package it in dry ice?

>> AMBER: Yes, they packaged it in dry ice, and they would ship ice cream. We build a WooCommerce store for that. Or gelato, not ice cream. [whispers] Don’t call it ice cream.

>> CHRIS: Oh, yes. Ice cream is an offensive term.

>> AMBER: Well, it was a Kosher Brand too, so I think it was all non-dairy. And they made gelato that was super creamy and tasted like dairy even though there was none. I know. That would have been pretty good to have root beer, folks.

Well, we all have extra, assuming our children haven’t drank it all.

>> STEVE: No, they’ve already drank most.

[laughter]

>> AMBER: That was the last can, Steve?

>> STEVE: No, I think there’s a couple more. I think my sister-in-law stopped by and stole a few to take to my brother. [laughs]

>> AMBER: So the verdict is everyone likes it? This is definitely worth buying again?

>> STEVE: Yes. This is your family drink.

>> CHRIS: Yes. I will say this. If I had a table in front of me and there was like NW and Barks and, you know, some store brand, and then Wild Bill’s, Wild Bill’s would definitely get picked. And I don’t know if the differentiating factor for me is the sugar or maybe their extract, the flavor, just lingers longer, but it’s definitely good.

I feel like their carbonation level is also spot on. With some sodas, I feel like they over carbonate it and the bubbles are way too intense. This feels like the bubbles and the sweetness and the botanical flavors are all nicely matched.

>> STEVE: Yes.

>> AMBER: It’s interesting. It has acai and yucca extract, which is really interesting.

>> CHRIS: Yes. Yes, that is interesting. The Yuri cowboy in the desert theme with the yucca.

>> AMBER: Did you all read how many grams of sugar are in this? [laughs]

>> CHRIS: Yes, 43 grams of added sugars.

>> AMBER: In 12oz. [laughs]

>> CHRIS: That’s in one can. That’s 86% of your daily value. They’re really packing in the value there.

[laughter]

>> AMBER: So we all need to brush our teeth? [laughs]

>> STEVE: Yes, yes. This is not keto friendly, is that what you’re saying?

>> AMBER: Probably not. Sorry, Steve, did we ruin your diet?

[laughter]

>> CHRIS: That’s like what someone on keto gets in a week, probably.

>> STEVE: Yes, yes.

>> AMBER: It is a fabulous treat, which is probably what most of the beverages we have on this are. They’re treats that you should occasionally indulge in, but not have too much of. [laughs]

>> STEVE: Right. Right.

>> AMBER: Except for, I don’t know, I guess maybe when we have the Bill ones that are distilled water or mixed with distilled water, and they don’t add enough flavor, and it’s just sparkling water.

[laughter]

>> CHRIS: Well, I’ve got a segue for us here. So just like we probably shouldn’t drink infinite amounts of Wild Bill’s Craft Soda, maybe there shouldn’t be infinite scroll, or maybe it’s OK in certain applications. That’s what we’re going to talk about today.

>> STEVE: Yes. That’s a good segue.

>> AMBER: Yes. For people who are not familiar with infinite scroll, Steve, you want to give us a rundown? What do we mean when we’re talking about infinite scroll?

>> STEVE: Yes. It’s just basically when you go to a website that has some repeating post of some sort, and you scroll down, and… It can present itself in different ways. But you scroll down and it automatically reloads the next paginated set of posts or content. And then you scroll down some more and it loads more in.

From an average standpoint, it’s kind of nice that you don’t have to keep clicking “load more” over and over again. Although, I think we’re going to dive in and see that there’s definitely some accessibility challenges.

>> AMBER: You know what’s interesting? Actually, I wrote about infinite scroll for my accessibility-weekly post that I do for the Admin Bar this week, which it won’t be this week when this episode comes out, but we can put a link to it in the show notes. But a bunch of people commented on that.

For instance, Dom Wint [phonetic] said, “This is not even an accessibility thing. Infinite scroll is just rude. Makes trying to get to the footer an impossibility.”

I have definitely been on websites where I scrolled down because I was looking for something in the footer, like, on news sites or something, where I want to find the advertisement link where you can go if you want to advertise on the site. It’s usually in the footer, right?

>> STEVE: Right.

>> AMBER: Or the privacy policy. And I get to the footer and I’m almost there, and then it loads more content and the footer goes away. [laughs] And I’m, like, “No.” [laughs]

>> CHRIS: Yes. So that’s the infinite scroll version, where it just keeps going and going and going.

There’s another one that I encountered last night, talking about different versions of when you’re serving content, where you get the request to “load more”.

I had the pleasure of spending most of yesterday evening and into the wee morning hours doing a security audit and installing security software on about 60 websites. I was in WP Engines dashboard, working my way, one side at a time, down the list. And I thought I was almost done, but it turns out the “load more” came up for their version, and I was only at the piece. And so about 15 more websites loaded, and it was 11:00 pm.

Let me tell you, when that scroll bar is telling you you’re almost done, and then you get to a “load more” link, that was incredibly demoralizing for me. I don’t know if that’s really a use case that many designers consider, but that did not feel good. I thought I was almost to the bottom, when I was, in fact, not almost to the bottom of the list. I had only gotten about three-quarters of the way through.

>> STEVE: And they didn’t tell you until the very bottom that you’ve viewed 50 of X number of websites?

>> AMBER: I was going to ask that. Did you just miss it? Like, up at the top, was there something that says, like, “one through 20 of 50”?

>> CHRIS: In my intense focus on going through, I don’t remember. But if you’re logging in… OK, so WP Engine’s dashboard at the top does not have a, “Hey, you’re only viewing a partial list.”

>> AMBER: Yes, it’s down at the bottom. So they have what’s called a “load more” button, and it doesn’t automatically load them, which is better for accessibility.

>> CHRIS: Yes. Yes.

>> AMBER: And we should circle back on that in just a second. But the whole, “You viewed 50 of 61 sites” is right above the “load more” button, whereas it might be nice, up at the top, to make it clear that you’re only getting a batch of what’s there.

We love WP Engine, and I feel like they actually have one of the most accessible dashboards, but this is probably something that would be nicer for users to get that expectation higher on the page.

>> CHRIS: Yes. My use case is maybe not totally uncommon, right? There are times probably when people are working down a list of their sites to do a thing. But, yes, I just thought it was kind of a humorous thing.

I’m definitely not trying to crap on WP Engine. You’re right, Amber. They do have one of the more accessible dashboards out there.

>> AMBER: So let’s talk about infinite scroll. Why is infinite scroll not good from an accessibility standpoint beyond the whole, “It’s frustrating for all users [chuckles] at times”?

>> STEVE: You’re talking about when it automatically reloads the next set over and over again?

>> AMBER: Yes.

>> STEVE: It’s not good for several reasons. It’s loading things into the page. It’s throwing off an initial count, like, I don’t know if this content is loaded into a list that they’ve already got to, and the screen reader has announced how many items are in this list. And then if you’re appending more items into the list without taking some measures to announce that, then I think that’s problematic. Right?

>> AMBER: Yes. When I was doing my research for this article that I wrote, I spent some time exploring different examples of infinite scroll outside of WordPress. And then we can talk about I also looked at a couple of WordPress plugins that we can mention in a minute here. But in some of them, the triggering of loading more was only triggered with a scroll, not with a tab insurrection.

So if you were a keyboard-only user who doesn’t use a mouse, you can tab through all of the content that is currently visible, but when you get to the last one, then it just goes into the footer and it doesn’t load more. And there’s no way to say, “Hey, please load me more content.”

So any subsequent products or subsequent articles or whatever that might be are literally not accessible.

>> STEVE: Right. They can’t.

>> AMBER: Meaning they can’t even see them or get to them?

>> CHRIS: Yes. It’s effectively a trap for assistive-technology users. If you’re serving a lot of content in the context of that infinite scroll, they keep going and going and going, and there’s no auditory or otherwise indication that they’re going to reach the end of it, right?

>> AMBER: Well, what I was saying is, I found some where they wouldn’t keep going.

>> CHRIS: Oh. Yes.

>> AMBER: And because there’s no “load more” button and there’s no pagination, it’s literally like, “Guess what? You, keyboard-only user, only get to see the first page of results, and you have zero ability to see any more pages of results.”

>> STEVE: Right. Amber said, like, you’re trying to scroll down to get to the footer, right?

>> AMBER: Yes.

>> STEVE: And you kind of alluded to, like, “Oh, I can’t get to the footer.” Like, “This is weird.” Right? Could that present cognitive overload to certain people?

>> STEVE: This episode of “Accessibility Craft” is sponsored by Equalize 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 a 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 PPI connections. GDPR and privacy compliant, real time accessibility scanning. Scan unlimited posts and pages with Accessibility Checker for free.

Upgrade to a paid version of Accessibility Checker to scan custom post types and password-protected sites, view site-wide, open, issue reports, and more.

Download Accessibility Checker free today at “EqualizeDigital.com/Accessibility-checker.”

Use coupon code “Accessibility craft” to save 10% on any paid plan.

>> AMBER: Yes, for sure. There’s actually an episode of the Accessibility Rules Podcast, which, I can’t remember if we’ve… Have we talked about that on this podcast? Maybe. Maybe not. But if not, I will say that’s one of my other favorite podcasts.

Nicolas Steenhout, that’s his podcast. He does these little six to ten minute interviews with people with disabilities.

There’s one where he interviewed, a gentleman named Albert Kim [phonetic] who has obsessive compulsive disorder, post traumatic stress disorder, and some other things.

Albert was talking about how infinite scroll and the fact that it just keeps loading more content can, for him, like, with his OCD, he sometimes has compulsions that he cannot stop or he cannot leave. And he’ll get stuck on a website for hours trying to… Like, if he’s researching something or trying to find something, he’ll just keep thinking, “Oh, there’s more I have to read,” or “There’s more I have to engage with.” And he won’t be able to leave it, and to the point that he won’t eat or he won’t get up and go to the bathroom even when he needs to, which that, for me, was something.

We talk about screen reader a lot, but there’s a lot of other disabilities that are maybe like hidden disabilities? If you looked to him on the street, you might not know that about him. And he talked about some other things in that episode that are worse. But he sometimes gets physically ill as a result of some choices that people have made on websites, and his inability to control his own compulsions at times as related to that.

Whereas he was saying, like, if something has a hard stop, whether it’s a “load more” button or pagination, then he could be, like, “Well, I’m only going to look at this page of results,” and it kind of would shifts his brain out of that.

>> STEVE: Right. It reduces the overload.

We did a website years ago, so I’m tabbing that, long before our deep dive into accessibility that had one of these, and it’s a website with cats and dogs on it.

>> AMBER: It’s an animal shelter.

>> STEVE: Yes.

>> AMBER: [inaudible] adoptable pets.

>> STEVE: And, literally, when we would get a support request or something for this website, I’d pull the website up, and there’s just something inside of me that compels me to go look at all these cute animals, and I just can’t stop because they just keep loading.

>> CHRIS: What did I do last night, Amber, when I was going through the websites?

>> AMBER: Yes, [inaudible]. He texted me a picture of a dog from this website. Yes. It’s, like, you can’t avoid them. They’re so sweet. [laughs]

>> STEVE: Respecting the user and giving them a level of control over the content that is presented to them, I think, is important.

>> AMBER: Yes. In WordPress, the 5.8 update which was in 2021, this was one thing that was changed. They took the infinite scroll out of the media library in WordPress Core and they replaced it with an Ajax button that was a “load more” button. So you’d get to the bottom of whatever number of results and then you’d have a “load more.”

Now, they had to do some special things, and I think it’s worth mentioning that on a lot of websites, that “load more” button can also add accessibility problems.

A lot of times, what happens is, developers, they hit that, you click the “load more” button, it adds content above the “load more,” and they fail to shift focus up to where the new content has been added. Then what happens is they hit “load more,” and someone would hit tab or hit caps lock A or whatever their command is in their screen reader to keep reading from the point they are expecting that it’s going to have loaded below where they are, but actually the content loaded above where they are, so they can get to it unless they backtrack on the page to try and find it.

>> STEVE: Yes. That’s definitely something we’ve had to do in our projects. So you’re saying, just to make this clear, you’ve got ten posts, you hit “load more,” ten more post load. So post number eleven, the focus should be shifted to post number eleven, correct?

>> AMBER: Yes. Or to the container around post number eleven.

I actually want to give a shout out to WordPress Infinite Scroll-Ajax Load More. That’s the name of the plugin. It’s free.

I was very impressed with this one. I could tell that the developer, and I think it’s just an individual independent developer, had put some thought into accessibility. Because first of all, it did actually announce when new posts were added, or it would keep the focus. But he has a visible “load more” button below even with the infinite scroll, and it’ll automatically trigger as you’re scrolling.

When I tested this on his demo with voiceover, it recognized that I had voiceover turned on and it didn’t do the infinite.

Then I had the button, and what happened was I could reach the “load more” button, and then when I triggered it with the keyboard, it shifted focus up to… He had everything properly in a list, like we’ve talked about; it’s beneficial to having a list. He had it shifted to the UL container around the elements that were LIs, so it would say, “List: seven items.” So I knew seven were post loaded, and then hit tab again, and it would take me to the first post, one of seven.

I was pretty impressed. I could tell he did a good job and had actually thought about this.

>> STEVE: Yes. And we’ve actually used this on projects.

>> AMBER: Oh, have we?

>> STEVE: Yes, in the past.

>> AMBER: When was that?

>> STEVE: You wouldn’t know once it’s styled, right?

So you’re saying when it loads a new set, it loads it in a new UL?

>> AMBER: He did. Yes, that’s the way they did it. So instead of inserting Li elements into the existing, in that particular plugin, it just loads a second UL of posts, which I think is probably better, because it’s not modifying the existing list, one through seven, and suddenly making it one through 14. It’s just adding another list of seven. So I feel like that probably is the best way, because then users get the context of, “seven more items” just loaded.

>> STEVE: Yes, that’s very interesting. I feel like I’ve learned something.

>> AMBER: So the alternative on this is what the media library did, which is, instead of jumping to the container automatically, in the WordPress media library, once you hit that “load more” button, it adds a button right it in the DOM that says, “Jump to first loaded item.” So then if you were to hit tab from that “load more” button or have a screen reader read from there, you’d encounter the, “Jump to first loaded item” button, which you could then click and it would shift your focus.

I don’t know if there’s a plus or minus on adding that versus automatically shifting?

>> STEVE: Yes. In one aspect, automatically shifting it, we’re controlling it. In the other aspect, I think you’re putting the control in the keyboard user’s hands. I don’t know if either is right or wrong. I’m just saying that I think in the second instance where you have the button that you could then jump to, it gives them a little bit more control. But it is an added step, right?

>> AMBER: Yes. I don’t feel like it’s wrong to not give them the control and to just shift them. Because in theory, the expectation when you click a “load more” button, like that could be…

There are WCAG rules about having things happen without user interaction, but I think clicking that “load more” is the user saying, “I want more.” So in that case, just shifting them, moving their focus to what they asked for, which is more… They don’t know that they suddenly got added to the page. I mean, they might, but do you know what I’m saying? So that’s almost like they ask for it, so you take them there. So I think that’s OK.

I also think this “load more” button, what it does do is it helps with some of that context. It gives a hard stopping point that helps for a lot of people. It still allows the footer to be reachable, [laughs] but it may have the same problem without adequate labeling, like Chris mentioned that he experienced, which is he had no idea.

At least they have at the bottom how many more will load. But on a lot of websites, it’s just, like, “Here’s your grid of twelve posts.” You hit “load more,” it’ll load twelve more, you have no idea. “Can I hit that ‘load more’ three times?” “Can I hit it 50 and it will continue?” Right?

>> CHRIS: Yes. Having that context, it can be really critical in certain applications of how you’re using the interface. Being able to know where you’ve been, where you are, how much more you have to go depending on what it is.

>> AMBER: Well, here’s another point about either the infinite scroll or the “load more.”

Let’s say you load enough to see 20 dogs, and you’ve hit “load more” twice, or it’s loaded two results page for you. You click on one of the dogs, go to the dog’s page, you look at the dogs and you’re, like, “Oh, wait, I want to go look at another one,” and you go back, now you have to hit it again. Unless, I don’t know, maybe the browser has updated or something? But I’m, like, “That could be bad.”

I don’t know if you have thoughts about that, Steve.

>> STEVE: Yes. It depends how it’s created. The typical way I’ve seen that achieved is that a history of the URL is being updated with each pagination.

>> AMBER: Like, as a parameter on the URL?

>> STEVE: Yes, like a parameter in the URL is being set. Or a hash. I’ve seen it done with a hash before. And when you go to that page and you come back, it’ll load all of those again. Whether or not it takes you back to where you were, I haven’t always seen that. I’ve seen it where it just doesn’t even load the paginated page that you had already loaded.

>> AMBER: Which I think is a problem, and that’s annoying.

>> STEVE: Yes, I think it’s problematic. What you would expect is when you hit the back button, it loads all the ones you had, and then at least from a visual standpoint, it scrolls down to where you were. I think from a keyboard standpoint, it should probably focus at least on the last loaded list, right?

>> AMBER: Yes. Would it be possible to tell which post or which link the person clicked on, and actually go back and have their focus on that exact element that they had clicked on?

>> STEVE: Yes, I think it’s possible. It’s just, do people go that extra step to make it happen?

>> AMBER: Yes. I think, for sure, that’s where this might be easier with just using regular pagination, which for people who aren’t familiar, that would mean either the next previous or the numbered pagination that says, like, “one through 30” or something like that. Maybe you can’t see the numbers in the middle. But that might be a way to solve this more easily for a developer, right?

>> STEVE: Oh, Yes, totally. I know the traditional pagination that you see, like, in the WordPress Admin, you see it at the top and the bottom, so it gives context. Then it’s got the “next” and “previous” with a few page numbers, and then of course it won’t show like all of them. It’ll kind of truncate that to some degree.

We kind of moved away from that because “load more” became like the eye candy. The quick thing to load into the page. It kind of gives you that one-page app feel, right?

Although, as we’ve made this turn back into accessibility and stuff, I actually find myself leaning more towards the traditional pagination for a number of reasons. It’s gives you context. You don’t have to write all this custom JavaScript to modify focus and performance.

So if you load a page that has ten posts, and you click to the next page using traditional pagination, it’s going to load a whole new page, and it’s going to load ten more. And if I hit “back” to the first page, it’s going to load the first ten. So from a performance standpoint, I’m only ever loading ten posts.

Say I have a “load more,” I load more, and I’m loading ten at a time, and I click that ten times, I’ve got 100 posts on the page. I click one, I go off to that post, I’ve read it, I’m ready to go back. I click “back,” that page has now got to load 100 posts again. And then if it’s doing it right, it should bring the focus to where they were.

>> AMBER: Yes. So the page would load a lot more slowly in that case, right?

>> STEVE: Oh, Yes.

>> CHRIS: And now you start to think about this in the context of websites that are serving large amounts of content to large audiences, and how many of those audience members are drilling down and having 100 posts on a page, and moving back and forth, and what kind of server load inefficiencies is that creating for your entire website?

>> STEVE: Yes. Just think if you’re Amazon, like how big of a change that would be in your performance and your bandwidth.

>> AMBER: Yes. I think there’s a reason why any large ecommerce store I can think of, they all use pagination.

>> STEVE: Traditional pagination?

>> AMBER: Yes, traditional pagination. A lot of them have the ability for users to change the number of posts per page, which I think is a nice, happy medium if you’re, like, “Well, we’re going to default to 20 products per page, but we want to allow people if they really want to look at a bunch,” which I do this sometimes on ecommerce stores. I might toggle that to 100, and then I don’t have to click the next-page button as many times. But I do think… Which is interesting, because it’s probably actually a link, not a button. I called it a button, but it’s probably really a link. But that was my choice. I don’t know if the average person or it was just me as a technical person, but I recognized that once I set 100, the page might load a tiny bit more slowly, but it’s worth it for me.

>> STEVE: We had to make considerable attention to pagination and the number of pages loading in our Accessibility Checker Plugin. So if you’re running Accessibility Checker Pro, you have the ability to look at all of the issues in one place, or you can even look at those, we call it fast track, in a more packaged, like, by issue. So the pagination on those, we were running into performance issues, right?

So if you’re querying just huge numbers of issues, it was such a weight that… You know, you get PHP timeout issues and stuff, memory issues. So we had to put a lot of consideration into how many posts were loading per page, and then we even had to abstract how can we group these?

We have errors in the plugin, right? We call them issues a lot of times, and we made an interstitial page that you then drill only into one issue at a time, so then only one of those is paginated at a time. So there’s a lot of attention that went into that just from a performance stand point.

If that was an infinite scroll and I had to consider those performance things and accessibility, that would have been a development nightmare.

>> AMBER: Yes.

>> CHRIS: Yes. You probably would need an AWS Server Farm just to power it.

>> STEVE: Yes.

>> CHRIS: Because when you get our stuff on a website with about 20,000 pages, it’s generating hundreds of thousands of problems, typically.

>> STEVE: Oh, Yes.

>> AMBER: Yes. Is there any accessibility implications of doing Ajax pagination versus actually changing the page on the URL?

The default WordPress behavior is that when you click a next-page button, it loads a whole new page. It doesn’t just load in new content in that content area. But a lot of WordPress plugins do Ajax-type pagination where the whole page doesn’t change.

What thoughts do we have about that, and implications for accessibility?

>> STEVE: It’s definitely a challenge. We talk a lot about inaccessibility, kind of going back to basics, and about abiding by semantics, right? The web browser and HTML in it of itself handles a lot of these accessibility issues right out of the box.

When we want fancy pages that look like they’re one-page apps or that load content in without a page refresh, I think those things are great. But you’re then presented with a challenge to make that accessible. You’re having to reengineer what the browser already does for you.

>> AMBER: Yes. So unless you add Aria, like Aria-live and alerts, when you were to do that, just like Ajax in new pages of results, it’s not going to announce.

I’ve seen that before where we’ve audited websites and it had an Ajax pagination, and visually, a sighted person can see that it worked, but a screen reader wouldn’t say anything because the Aria was missing to literally say, “Hey, this button worked and it loaded more posts for you.”

>> STEVE: Yes.

>> AMBER: Yes. And I think that would be the same thing where we were talking about, you’d also need to add that shift of focus. Whereas if you don’t go the Ajax route and you’re just loading a new page, then what happens is they click the ink to go to page two of results. And then at the top, theoretically, there’s like an H1 or something and a page title that says, like, “Blog page two.” And so they hear, “OK, now I’m on page two.” Then they can move through the page to find the results, because they’re at the top, and they don’t have to go backwards or do any of that kind of stuff.

>> STEVE: Yes, totally. I think one area we haven’t really touched in… I know that we’re focused on accessibility, but there’s also SEO implications of this as well. I think that plugin you mentioned, the WordPress Infinite Scroll, Ajax Load More, I think that they actually make considerations for SEO.

>> AMBER: Oh, because the pages of results wouldn’t be there?

>> STEVE: Yes. So it says, “Paging URLs. Generate unique paging URLs for every Ajax ‘load more’ query with the SEO.” Oh, looks like there’s an SEO add-on for this plugin that handles that.

>> AMBER: That’s interesting, though, because when I frequently think of the extra pages in a blog, I don’t know if I actually think those have SEO value.

>> STEVE: No.

>> AMBER: I think the first page does. And if we’re talking about this also in terms of categories, or tag, archives, you want the first page to always show up, because it might have a description and it’s going to rank for whatever term you’ve set as the category name in theory, and then it’s going to show results. But what I’ve seen in SEO-scanning tools is, the subsequent pages, if it scans them, it’ll flag it as duplicate content, because it’ll say, “It has the same title.” “It has the same menu description.” “This is not unique.” And it really isn’t unique.

Like, page two, page three, page four, right? I mean, it does have different posts on it, but I feel like I don’t care as much about getting page two of my blog to rank as I do about just getting page one and then all the individual articles that might happen to be on page two this month until they shift to page three.

>> CHRIS: But as something like as a crawler is trying to crawl out from a blog archive, if it has infinite scroll, is the crawler smart enough to “load more” and follow every single link? Versus if you have something paginated, there’s links present on the page that it is fully capable of drilling down? Or is everything done via like a sitemap XML file, and none of this matters?

>> STEVE: I’m looking at the add-on that they have. If it doesn’t matter, I’m curious why this add-on matters, right?

It gives you a pretty URL. You get, like, slash page, slash three. Maybe that’s the most beneficial piece that if you were to want to link that to somebody, maybe? I don’t know.

>> AMBER: Yes. Yes, I don’t know.

>> STEVE: Not an SEO expert.

>> AMBER: Although I will say that’s a good point. If someone wants to share something… And here’s something that’s a little bit of a curveball. I didn’t write it in our show notes, but how do we feel about order by random?

Let’s say I’m surfing animals; I see an animal on page three or three animals on page three, and instead of sharing the individual links to the animal, I just send Chris a link to page three, and I’m, like, “Look at these three animals on this page.” And then he goes there and he’s, like, “Those animals aren’t on that page. [chuckles] What are you talking about?” Because he got different random order. Is that bad? Is that a usability and even potentially an… I don’t know if I can think of a success criterion that it would fail. Maybe.

>> STEVE: Yes. I think you got to be choosy. Number one, I would want to know what’s a valid use case for that. Number two…

>> AMBER: Well, I mean, it’s animals. I’m pretty sure that website actually does that.

>> STEVE: Oh, does it?

>> AMBER: I think it does. I think it does, because they were, like, they don’t always want to just show the newest animals that they have, or the oldest animals that they have. They wanted to really mix it up. Although, really, maybe the argument we could go back to them with if we’re, like, “We want to fix this,” is we could be, like, “You should show the oldest animals.” “The ones that you’ve had the longest, that you’re having a hard time adopting out, you should put those first, and then put the newer ones down at the bottom.” I don’t know.

>> STEVE: It’s definitely not random.

>> AMBER: It’s not? If you reload the page, it’s exactly the same?

>> STEVE: No.

>> AMBER: Oh, Good. Maybe we talked them out of that.

>> STEVE: I’m not sure what the order by is. I’m not sure if it’s random at some point. If it’s all the adoptable animals are first, and then a second ordering is random.

Random presents issues for caching as well.

>> AMBER: Oh, does it?

>> STEVE: Yes.

>> AMBER: Yes, you can’t cache at random

>> STEVE: Yes. Query. Yes.

>> CHRIS: I think like a lot of things, it probably depends a little bit on the context in which it’s being used. I could see potentially value in showing random posts as suggested continued reading at the bottom of an article in a news area to keep people on the site. You know, you could show random articles within a certain category that excludes the article they’re currently reading, right?

>> AMBER: But that’s like only showing three or four random articles, right? It’s not like getting all articles and then ordering them randomly. So that’s definitely different. It might have a caching implication, but it wouldn’t have the same performance and it wouldn’t have the usability challenge of, “Well, the last time I came to this website, the posts were in this order; and now I came and they’re in this other order.” Right?

>> STEVE: Yes.

>> AMBER: Yes. It’s interesting. I remember feeling like I would do “order by random” more in the very beginning when I was a freelancer, and now I’m almost, like, “No, there should be logic.” Always logic.

>> STEVE: Yes. Yes.

>> AMBER: But, again, I don’t know if there’s a specific success criterion. I could draw that too. And that’s what sometimes gets frustrating for me with accessibility. I want to be able to be, like, “Here is the hard and fast rule,” [chuckles] so that I can convince clients to just do things the way I like them, [laughs] which is not actually always the case.

A lot of people agree that it’s better, but there’s no, like, “It has to be this way.”

>> STEVE: I think that’s part of being accessibility professionals. Sure, you start with the baseline. We have the guidelines. There’s a baseline of things that we should all follow. But when you get beyond that, I think you’re using your own experience and your own intelligence to decide. You get a better understanding of how keyboard users use it, and you can intelligently make those decisions.

Are they right or wrong? That’s debatable. But I think it’s the mindset that you’re always striving to make things more accessible, not just meet the baseline standards. We’re trying to improve it.

Maybe at some point, the way we at Equalize Digital decides to do something gets widely adopted and becomes a standard. I think it’s just all about progress in the accessibility field.

>> CHRIS: Yes. It’s compliance versus just trying to be accessible, right?

>> STEVE: Yes.

>> CHRIS: Compliance is the baseline, and then you can extend beyond that compliance and go above and beyond.

>> AMBER: Yes, I will say, Web Content Accessibility Guidelines, those are an open-source community initiative. So if we get really serious about an opinion, you could go pitch it and get everyone… Just like you can get very serious about, “I want a certain feature in WordPress,” and you can go submit a pull request and see what happens, right? Try and sell people on the idea.

>> STEVE: Sure.

>> AMBER: I think maybe the last question I have on this whole idea of, “Should you use infinite scroll or pagination?” Or something like that is, would it be sufficient, perhaps, to have toggles or alternate versions right above your post list?

Maybe you have infinite scroll on by default, but is there a little toggle that’s, like, “Turn off Infinite Scroll,” and then it would just have the “load more”. And if you had the labels that said, “one through twelve of 480,” or whatever, that would still give the context and that kind of stuff.

Do we think that is a sufficient way to work with a client who’s, like, “I really need infinite scroll for this”? To be, like, “OK, well, we will do this, but what we want to do is add something that allows the user to just turn it off”?

>> STEVE: Yes. From the developer, me, it’s, like, I don’t want to do all that extra work.

[laughter]

>> CHRIS: There’s literally going to be an [inaudible].

>> AMBER: Every developer that is listening to this podcast literally thought that same thing. [chuckles]

>> STEVE: Yes. But I will say that I don’t know if this was in regards to infinite scroll or “load more,” but I know we worked on a project that had like a faceted search…

>> AMBER: That was auto submit.

>> STEVE: Oh, yes, that’s correct.

>> AMBER: That’s what it was. And you did something like that, right?

>> STEVE: Yes. We put in a toggle. What did we call the toggle? Was it “Enable accessibility”?

>> AMBER: Well, we did that. Initially, I think we were just, like, “Turn on accessibility mode.” And then one of our user testers was, like, “What does that even mean?” And we’re like, “Oh, well, it means turn off auto submit.” And they’re, like, “Why don’t you just make the button say ‘disable auto submit’?” And we were, like, “Oh, that’s smart.”

[laughter]

We had a blind person be, like, “I don’t know what that means. Should I tick it or not?”

[laughter]

>> STEVE: So that was the compromise to meet our objective of making things accessible, and to meet the client’s objective of having things load into the page.

>> AMBER: As people were checking boxes. Yes. Of course, I would love it if it was, like, “Turn on auto submit” was the default, but at least we added the option, and I think that ended up working out once we got the correct label on the toggle button, that users understood what it was doing. That was a good compromise.

So maybe it’s the same thing. You have a toggle button that’s, like, “Turn infinite scroll off and on.”

The interesting thing is what would the impact if, Facebook or Twitter or something implemented that? Like, how much time on site would they lose?

>> STEVE: Oh, yes. I just want to throw a little one in there. What about reduced motion in regards to “load more”?

>> AMBER: Oh, yes. I think that’s probably a really good use case for if somebody has preferred reduced motion set, “load more” should not happen.

>> STEVE: Yes. I think I agree.

>> AMBER: So in that instance, you probably always need to handle things the way that one WordPress plugin did, where there is a button below. Because in a lot of instances, you’re going to have it turned off, and you need that button available, so it should just always be there.

>> STEVE: Yes.

>> AMBER: So it should be designed in. Even if you’re planning to code it in a way that uses infinite scroll, your design should still include a “load more” button.

>> STEVE: Yes, I agree.

>> CHRIS: Well, you know, do what we do and just keep going back to basics. And don’t spend all this extra time building whiz-bang features that in the overwhelming majority of cases probably do not add sufficient value to user experience to justify your efforts.

>> STEVE: Right. Yes, I think that’s a win-win. The browser does it already. Save yourself some time. As a developer and as a development team, save yourself some overhead. And, yes, it’s the way it’s been done for a long time. It’s a little boring. It’s not as flashy, but…

>> AMBER: But I don’t know. Inspected or expected?

>> STEVE: It’s expected, yes.

>> AMBER: It can be better if users know how something works. If it’s not broken, don’t fix it?

>> STEVE: Right. Because at the end of the day, it’s about providing information to somebody with the least friction as possible. We add all these bells and whistles in between that just so things look pretty, and in the process, we’re either negating a population of people that can’t even access that information or get frustrated by it, and you’re reducing your efforts of getting that information to that person or making that sell or whatever your website does.

>> AMBER: I think that’s probably a good ending point. So we should sign off, and we’ll be back in two weeks with another conversation episode.

>> CHRIS: All right.

>> STEVE: All right.

>> CHRIS: We’ll see you all later.

>> STEVE: See you.

>> AMBER: Bye.

>> CHRIS: Bye.

>> CHRIS: 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.”