Skip to main content

Accessible Accordions

Released in version 1.19.0

Yoko Core automatically enhances all Beaver Builder Accordion modules on the frontend with full keyboard navigation and ARIA semantics, requiring no configuration changes to existing modules.

What this feature does​

When a page with one or more Beaver Builder Accordion modules is loaded, Yoko Core injects a lightweight JavaScript and CSS enhancement layer that:

  • Converts accordion toggle elements to proper <button> elements (or adds role="button" where conversion is not possible).
  • Adds aria-expanded to each toggle button so screen readers announce open/closed state.
  • Associates each toggle button with its panel via aria-controls / id pairs.
  • Adds aria-hidden to collapsed panels so their content is skipped by assistive technologies.
  • Enables full keyboard navigation:
    • Enter / Space — toggle the focused panel.
    • ArrowDown / ArrowUp — move focus between accordion items.
    • Home / End — jump to the first or last accordion item.

Requirements​

  • Beaver Builder must be active and at least one Accordion module must be present on the page.
  • No per-module configuration is required. The enhancement applies automatically to every accordion on every page.

Styling​

A small companion stylesheet (beaver-accordion-a11y.css) adds:

  • A visible :focus-visible ring on accordion toggle buttons that matches the site's primary link focus style.
  • No other visual changes — the enhancement is purely additive.

Technical notes (for developers)​

AssetPath
JavaScriptassets/js/beaver-accordion-a11y.js
CSSassets/css/beaver-accordion-a11y.css
PHP classincludes/Integrations/BeaverBuilder/AccessibleAccordion.php

Both assets are enqueued at priority 101 on wp_enqueue_scripts (after Beaver Builder's own scripts) and are only enqueued on the frontend — not in the admin or page builder canvas.