Accessible accordions: aria-expanded not updating in our custom theme

Started by Hannah Price on 19 Sept 2026 · 390 views · 3 replies · 9 likes

Hannah PriceStarted the thread

Frontend Developer, NHS England · 16d ago

Our accordion component toggles visually but NVDA always announces "collapsed". Markup:

<button class="accordion__toggle" aria-controls="panel-1">Eligibility</button>
<div id="panel-1" class="accordion__panel" hidden>…</div>

The JS toggles a class and the hidden attribute. What am I missing?

3 Latest reply

Accepted answerSee it in the thread

Sophie NguyenGroup lead

Accessibility Specialist, Digital Transformation Agency · 16d ago

You never set aria-expanded on the button, so screen readers have no state to announce. Start it at false and keep it in sync:

toggle.addEventListener('click', () => {
  const open = toggle.getAttribute('aria-expanded') === 'true';
  toggle.setAttribute('aria-expanded', String(!open));
  panel.hidden = open;
});

Also wrap the button in a heading (<h3>) so people can navigate by headings.

3 replies

SNSN
Sophie NguyenGroup lead
Accessibility Specialist, Digital Transformation Agency · 16d ago
#1
Accepted answer
You never set aria-expanded on the button, so screen readers have no state to announce. Start it at false and keep it in sync:
```
toggle.addEventListener('click', () => {
  const open = toggle.getAttribute('aria-expanded') === 'true';
  toggle.setAttribute('aria-expanded', String(!open));
  panel.hidden = open;
});
```
Also wrap the button in a heading (<h3>) so people can navigate by headings.
4
PSPS
Priya ShahModerator
Lead Drupal Developer, Government Digital Service · 15d ago
#2
Worth looking at the GOV.UK Frontend accordion too. It handles 'show all sections' and remembers state in session storage.
2
AOAO
Aisha Okafor
Product Manager, Croydon Council · 14d ago
#3
Saving this for our content designers. We had the same bug in our FAQ pages.
0

Join the conversation

GDDN is for people working on Drupal in government. Log in or apply to reply.