You are here: Home » Don’t leave users guessing: why query loops belong in lists
Painting of a fantastic sphere like space machine floating in a jungle

Don’t leave users guessing: why query loops belong in lists

Greyd has updated their mighty Post Slider variation Block with the ability to choose your preferred HTML structure. Which should be unordered lists, so <ul>, most of the time anyway.

I’m proud of Greyd in their constant efforts to push to make and keep Greyd.Suite accessibility-ready. Like every other development team, they are under constant pressure for new features. Besides that they are growing as a company in general. Remediating features that were built in the early days is adding to that pressure. As their contracted coach in the process of making the Suite accessibility-ready, I can tell you that the work that comes with that is not simply put in some overnight quick-fix tickets. And they are almost there! As in 100% accessibility-ready, I mean. It’s with great pride that I can tell you that they came in top 3 of the Equalize Digital Page Builder comparison report this year. Out of the blue!

Features get built with power and flexibility in mind, and when accessibility learnings come along, they listen, adapt, and improve. That’s exactly what happened with the Post Slider Variation. This is a variation on the regular query loop block. When it first came out, it was already a powerhouse for dynamic content, but the importance of query loops being marked up as lists wasn’t fully on the radar yet. Now it is.

Why query loops should be lists

Think of a query loop as your website’s bookshelf. If the books are neatly lined up, it’s easy to see how many there are, where one ends and the next begins, and to jump directly to the one you want. That’s what a <ul> (unordered list) does for people using screen readers. It tells them, “list with 5 items,” giving them instant orientation.

Without that structure, it’s like dumping the books on the floor. Sure, they’re technically all there, but it’s much harder to navigate.

Here’s why using <ul> matters:

  • Screen readers announce the number of items right away
  • Users can jump between items using shortcuts instead of tabbing endlessly (scroll to the end to learn how you can check it!)
  • The experience matches what people expect from well-built websites

Video tutorial

Greyd published this video to show you how it’s done:

Click here to display content from YouTube.
Learn more in YouTube’s privacy policy.

Important! Make sure you use the correct HTML wrapper!

In most cases, the items in your query loop aren’t just fragments, they’re standalone pieces of content. A blog post, a product card, a news item. When they can be standalone, each of these needs to have an <article> wrapper. Put a group around your template and under Advanced Settings of that group, set it to be <article> under HTML element.

It’s like putting each book in a protective sleeve: you know exactly where one begins and another ends.

When you can skip <article>

Not every query loop item needs an <article> wrapper. If the items aren’t complete pieces of content but just fragments, metadata, or elements that serve a supportive role, they don’t need to be wrapped in an <article>.

Think of it like the difference between showing entire magazine articles versus just giving readers a list of author names or product features.

Test, always!

Finally, don’t just trust your markup. Always test it. Use NVDA, JAWS or VoiceOver. Below I explain how:

Here’s how you can test for yourself

Screen readers give people fast shortcuts to lists and list items. These only work if your query loop uses real lists (<ul> or <ol> with <li>). Here are the basics:

  • NVDA (Windows): Press L to jump to the next list, Shift+L for previous. Press I to move to the next list item, Shift+I for previous.
  • JAWS (Windows): Same as NVDA – L and I keys for lists and list items.
  • VoiceOver (macOS): Use VO+U to open the Rotor, arrow over to “Lists”, then up/down arrows to move between them. (VO = Control+Option by default).
  • VoiceOver (iOS): Twist two fingers on the screen to open the Rotor, select “Lists”, then swipe up or down to jump between items.

If you try those shortcuts and nothing happens, your loop isn’t marked up as a list. That’s your signal to fix the HTML structure.

About the Post Slider Variation Block

The Post Slider Variation takes the familiar Query Loop and supercharges it. Instead of being limited to static lists or grids, you can display posts in a fully responsive slider, complete with navigation arrows, pagination, and autoplay. It takes the familiar Query Loop and supercharges it. What makes it especially strong for agencies is the filtering: you’re not stuck with basic “category or tag” queries. You can combine multiple taxonomies, authors, dates, or custom fields, and even offer dynamic front-end filters so visitors can refine what they see themselves. It’s the flexibility of a custom-coded filter system, but right inside the block editor. And you can make a slider with it. There are no extra plugins or brittle workarounds needed.

The added feature I speak about in this article helps in improving the accessibility of the sliders you can make with this block. This does not mean all output of the post slider itself is also fully accessibility-ready when used as a slider instead of a grid without pagination. Greyd is still working on that. But this is an improvement in the category ‘progress over perfection’!

Let me tell you what the best slider in the world is

Is your customer addicted to sliders? Yeah? Especially those animated ones? Here’s some news: the best slider is still no slider. Studies have proven they generally are bad UX / UI and they actually slow down conversion!

Check out this article called Why Image Carousels Are Almost Always A Bad Idea by Jon MacDonald, founder of The Good, a digital experience optimization firm that has achieved results for the largest online brands including Adobe, Nike, Xerox, The Economist, and many more.

Latest articles

Some links on this page are referral links, which means I may earn a modest commission if you decide to subscribe or make a purchase, at no extra cost to you. I only recommend products I use extensively and genuinely believe in. They’re worth the attention, and I love creating content around them. Curious about the second reason why I do this? I back open-source developers with the proceeds. Read the full story in my article:  ‘Why I have affiliate links on my site – full disclosure‘.