What WordPress gets right about accordions

WordPress has just rolled out version 6.9, which includes a new accordion block that’s worth paying attention to. Many accordion implementations create issues with screen readers, but WordPress nailed the fundamentals. Here are three accessibility essentials that the new block demonstrates perfectly.

• Keyboard Support: The WordPress accordion block works without a mouse. Press Enter or Space to expand or collapse any panel. Press Tab to move between accordion headers. No keyboard traps, and nothing requires a mouse click to function. This seems basic, but you’d be surprised how many custom accordions fail this test.
• ARIA Implementation: Each accordion header includes aria-expanded to announce the panel’s current state. When collapsed, it reads “false.” When expanded, it changes to “true.” This simple attribute tells screen reader users whether a section is open before they decide to navigate into it. Without this, screen reader users have to guess about what’s visible on screen.
• Focus Management: When you toggle an accordion panel, focus stays on the header button. This prevents disorienting jumps in navigation and keeps users anchored to where they initiated the action. Poor focus management is one of the most common ways accordions break the user experience, especially for keyboard and screen reader users.

If you’re using accordions on WordPress, consider updating to 6.9 and using the native accordion block. It handles all of this correctly out of the box. If you’re building custom accordions elsewhere, these three elements are non-negotiable. Test your accordions by navigating with the keyboard only.

Kudos to the WordPress team for shipping a solid example here.