Sign up to save your podcasts
Or
Share Ep20. Website accordions the good the bad and the ugly
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
Ep20. Website accordions the good the bad and the ugly
On the podcast today we have the usual suspects - Nathan Wrigley and David Waumsley.
This is the first in a new series where Nathan and David take a deep dive into different website components - today’s focus is on accordions. You know the ones: those hide-and-show sections you often see on FAQ pages, product details, or anywhere there’s a need to tidy up lots of information into collapsible panels. But what makes an accordion actually a good solution for your site, and when does it start to get in the way?
Nathan and David kick things off by defining what an accordion is (with a nod to the UX authorities and the W3C) - and clarifying, with a bit of humour, what does and does not count as an accordion out in the wild. They look at the types of accordions - exclusive, non-exclusive, and toggle - and discuss how these patterns got established in web design.
They also reflect on their own use (and sometimes overuse) of accordions in client work, especially handy within page builders, and how their thinking has changed as the web’s evolved.
Then it’s onto the technical side: the code needed. David explains why, until recently, JavaScript was essential for accessible accordions, but now, thanks to advances in HTML (details and summary elements), CSS (with exciting new features like interpolate size), and improved browser support, you can build robust accordions without a single line of JavaScript - plus some important gotchas and accessibility considerations to watch for.
They round things off by discussing when accordions add value - helping reduce overwhelm and improve scanability (is that a word?!) - and when they can cause problems, like increasing "interaction cost," fragmenting information, or raising accessibility and SEO concerns. There are design details to consider, as well as practical recommendations for ensuring your accordions are friendly for both users and search engines.
And if you want to see these concepts put into practice, the episode is paired with a follow-up video where David and Nathan demonstrate real code snippets and examples at noscript.show/learn/12.
If you’ve ever wondered whether you’re using accordions for the right reasons, how to build them the modern way, or want a clearer picture of their pros and cons - you won’t want to miss this episode.
Timestamps:
00:00 Accordion Design and Definition
06:22 FAQ Page Building Approach
07:52 HTML-Only Accordions Evolve
12:04 "Content Organization: Pros and Cons"
13:47 Logitech Product Page Analysis
16:56 "Accordion Utility in CMS Design"
22:02 Browser Styling Challenges and Limitations
24:49 Schema Markup for FAQs
27:43 "Purpose of Hiding FAQ Content"
29:56 "New Development Wrap-Up"
View all episodes
By Nathan Wrigley, David WaumsleyOn the podcast today we have the usual suspects - Nathan Wrigley and David Waumsley.
This is the first in a new series where Nathan and David take a deep dive into different website components - today’s focus is on accordions. You know the ones: those hide-and-show sections you often see on FAQ pages, product details, or anywhere there’s a need to tidy up lots of information into collapsible panels. But what makes an accordion actually a good solution for your site, and when does it start to get in the way?
Nathan and David kick things off by defining what an accordion is (with a nod to the UX authorities and the W3C) - and clarifying, with a bit of humour, what does and does not count as an accordion out in the wild. They look at the types of accordions - exclusive, non-exclusive, and toggle - and discuss how these patterns got established in web design.
They also reflect on their own use (and sometimes overuse) of accordions in client work, especially handy within page builders, and how their thinking has changed as the web’s evolved.
Then it’s onto the technical side: the code needed. David explains why, until recently, JavaScript was essential for accessible accordions, but now, thanks to advances in HTML (details and summary elements), CSS (with exciting new features like interpolate size), and improved browser support, you can build robust accordions without a single line of JavaScript - plus some important gotchas and accessibility considerations to watch for.
They round things off by discussing when accordions add value - helping reduce overwhelm and improve scanability (is that a word?!) - and when they can cause problems, like increasing "interaction cost," fragmenting information, or raising accessibility and SEO concerns. There are design details to consider, as well as practical recommendations for ensuring your accordions are friendly for both users and search engines.
And if you want to see these concepts put into practice, the episode is paired with a follow-up video where David and Nathan demonstrate real code snippets and examples at noscript.show/learn/12.
If you’ve ever wondered whether you’re using accordions for the right reasons, how to build them the modern way, or want a clearer picture of their pros and cons - you won’t want to miss this episode.
Timestamps:
00:00 Accordion Design and Definition
06:22 FAQ Page Building Approach
07:52 HTML-Only Accordions Evolve
12:04 "Content Organization: Pros and Cons"
13:47 Logitech Product Page Analysis
16:56 "Accordion Utility in CMS Design"
22:02 Browser Styling Challenges and Limitations
24:49 Schema Markup for FAQs
27:43 "Purpose of Hiding FAQ Content"
29:56 "New Development Wrap-Up"