Don’t leave users guessing: why query loops belong in lists
By Anne-Mieke Bovelett on September 22, 2025
Status: up to date
Accessibility news about Greyd’s Post Slider Variation Block!
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:
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
Lto jump to the next list,Shift+Lfor previous. PressIto move to the next list item,Shift+Ifor previous. - JAWS (Windows): Same as NVDA –
LandIkeys for lists and list items. - VoiceOver (macOS): Use
VO+Uto 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.