Skip to main content
All releases
WidgetFeatured

Open the accessibility panel from your own link, and hide the floating button

Add data-aacx-open to any link or button and it opens the AllAccessible panel. A new dashboard setting hides the floating button entirely. Keyboard, screen reader, and focus behavior are handled for you, and the contract is stable across widget releases.

One attribute

<a href="#accessibility" data-aacx-open>Accessibility</a>

Any link or button with data-aacx-open now opens the accessibility panel. Click again to close it. Enter and Space work. The widget marks the element as a dialog control for screen readers, keeps its expanded state current, and returns focus to it when the panel closes. Links rendered after the page loads work too, so single-page apps and Turbo sites need nothing extra.

Hide the floating button

Dashboard → Widget settings → Trigger visibility → "I use my own link or button. Hide the floating button everywhere." The button never enters your page. Your footer link is the way in.

For developers

window.AllAccessible.open()
window.AllAccessible.close()
window.AllAccessible.toggle()
window.AllAccessible.isOpen()

The page also receives aa:widget:opened and aa:widget:closed events on window.

Both the attribute and the API are stable. Widget markup, ids and classes are not, so if you were opening the panel by clicking our button from script, switch to one of these.

Also in this release

The "Open Accessibility Options" skip link and the keyboard shortcut for the panel now open it. They were wired to nothing.

Thanks to the agency developer who asked for this with a working example from a competitor. That's the fastest way to get a feature built.

ForAgenciesDevelopersSMB
TouchesWidgetDashboard